Build production-grade agentic copilots with LangGraph and CopilotKit

Agentic Copilots are changing the SaaS landscape faster than any other previous computing revolution. With the latest release from CopilotKit with support for LangGraph JS and LangGraph Platform, it's easier than ever to build human-in-the-loop Agentic Copilots that are production-ready. These powerful tools let any company build the same experiences built by industry leaders like Cursor, Replit, and GitHub.

In this post, we'll highlight why human-in-the-loop agents are production-ready today, how CopilotKit's infrastructure powers this experience, and how CopilotKit Cloud and LangGraph Platform make it seamless to develop, test, and deploy these advanced systems.

What are Agentic Copilots?

We’re all familiar with copilots, chat interfaces that can use the state of an application to high context responses from LLMs. Many are familiar with the concept of Agents, complex programs capable of reasoning and taking action autonomously. For most people, that’s where the understanding of the current landscape ends, but it’s not the whole picture.

Most people think of agents as fully autonomous actors that you send out to do work. The reality is autonomous agents don’t work outside of a few very limited domains. What DOES work however is a human-in-the-loop flow, an Agentic Copilot. This is when a user and an agent work together on a task, like coworkers, ping ponging information and decisions back and forth to reach a solution faster than either one could do alone. Applications like Curosor and Replit are called agents, but in reality they are implementations of this Agentic Copilot experience.

‍

This this workflow is coming to every SaaS platform, it’s not unique to developer tooling. Now, with CopilotKit and LangGraph, you can achieve this same level of production-grade reliability without requiring massive engineering teams.

How do you build an Agentic Copilot?

First you need an agent, that’s where LangGraph comes in

LangGraph provides the backend workflow orchestration needed to power your agents. As the leader in the agentic framework space, LangChain has developed robust tools for creating, testing, deploying and debugging agents.

One of the most powerful features of langChain is LangGraph studio, a tool that helps you visualize your agents nodes & edges to better understand what its doing. Here’s an agent we built for our Travel Agent demo. The arrows are “edges” or paths that can be taken from node to node. The Nodes are points at which either the user or LLM need to give input or make a choice.

For this release we’ve made building on top of LangGraph agents even easier with support for these features of LangChain:

• LangGraph JS simplifies the creation of modular, debuggable workflows
• LangGraph Platform hosts these workflows, offering production-grade reliability and seamless integration with your app through APIs
• LangSmith is an all-in-one developer platform. It lets you Debug, collaborate, test, and monitor your LLM agent

Together, LangGraph and CopilotKit create a unified stack for building agentic applications that are as powerful as they are intuitive. In our latest release, we’re announcing support for LangGraph Platform and LangGraph.js! These two improvements have been asked for repeatedly by our community and we’re happy to share that they are live in the docs now!

Next you need a Copilot

Copilot is just jargon for a “human-agent interface”. You can build the best agent on the planet but if the user can’t figure out how to wield it you’re worse off than where you started. However you build it, you’re going to need a way for your agent and your user to connect and take actions. This user experience is a new pattern, and one that we’ve thought deeply about.

CopilotKit has everything you need to connect your agent with your users to increase productivity, retention, and more. It is the engine that connects your application's state, workflows, and AI responses into a cohesive, powerful user experience.

Here's what makes CopilotKit special:

1. Shared State: Shared state tightly couples the agents state with that of your application. This allows users and agents to work together with high context and throughput.  CopilotKit’s Shared State hooks make this possible through powerful and elegant abstraction.
2. Agentic UI : CopilotKit's customizable generative UI components  and headless UI options manage context and data flows. These powerful features allow your team to mange the user experience while intuitively integrating agentic features.
3. Intermediate State Streaming gives the user confidence that the agent is following instruction, and provides an opportunity to course correct if needed.  Visibility into the agents actions helps eliminate perceived latency issues and keeps the user in control.
4. Human-in-the-Loop functionality is achieved through a combination of the above features and careful management of messages emitted by the agent. CopilotKit provides robust tooling for handling these messages so your user is always driving the interaction.

Who else is building Agentic Copilots?

Industry leaders from Replit to GitHub have announced Agentic Copilots in recent months. They’ve all tended to converge on similar design patterns, some of which we covered in a recent webinar. What this shows is that a consensus is building that fully autonomous agents aren’t quite there yet for most use cases, but agentic copilots are.

In our own conversations with companies we’ve found this is the pattern that is taking hold in the market. While coding tools are the canary in the coal mine, this pattern is coming for every industry. Everyday we speak to vertical SaaS companies that want an agentic copilot in their application. From enterprise onboarding to just reducing button clicks, users have spoke that they want an intelligent AI coworker in every app they use.

💡Check out how Athena has been using CopitlotKit to build a “Cursor for analysts”

Why is this coming to a head now?

The ability to build production-grade agentic copilots so easily is largely thanks to OpenAI, Anthropic, and others who have created such powerful foundation models. This advancement has been accelerated by the rapid development of open-source tools like LangChain and CopilotKit.

This ecosystem provides world-class tools for developers at every layer of the agentic stack. Though we're in the early stages, the outlook is promising—both trillion-dollar companies and two-person startups can build similar experiences using the same tools. While some predicted the death of web development just a few years ago, there's never been a more exciting time to be a web developer, both in terms of workflow and opportunity.

Start Building Today

Ready to get started? Explore the Co-Agents Travel Demo tutorial video or dive into our documentation to start building today. To go along with this release we’ve created a brand new demo and tutorial showing off all the new features mentioned in this post!

Check out the Tutorial and Demo.

We are so inspired by what people are building with CopilotKit, we never get tired of hearing from builders like you. If you need some help or just want to share what you’re doing, please reach out.

‍