Quickstart

Install the copilotkit python package to get started:

pip install copilotkit --extra-index-url https://copilotkit.gateway.scarf.sh/simple/

LangGraph based CoAgents

CopilotKit integrates with LangGraph to build powerful CoAgents that work within CopilotKit. You can provide it with any LangGraph agent, for example:

import uvicorn
from fastapi import FastAPI
from copilotkit.integrations.fastapi import add_fastapi_endpoint
from copilotkit import CopilotKitSDK, LangGraphAgent
from your_package import research_agent
 
app = FastAPI()
sdk = CopilotKitSDK(
  agents=[
    LangGraphAgent(
      name="research_agent",
      # the description helps CopilotKit to pick the agent when a certain skill is needed, i.e. researching
      description="Research the web.",
      agent=research_agent,
    )
  ]
)
 
add_fastapi_endpoint(app, sdk, "/copilotkit")
 
def main():
  """Run the uvicorn server."""
  uvicorn.run("your_package:app", host="127.0.0.1", port=8000, reload=True)

Streaming state updates

Out of the box, CopilotKit will sync the state of your LangGraph agent with the frontend, whenever entering or exiting a node.

You can also configure CopilotKit to stream messages, LLM state updates and tool calls from your LangGraph agent.

config = configure_copilotkit(
  config,
  # this will stream messages back to the chat window
  emit_messages=True,
  # this will stream tool calls to CopilotKit (call frontend actions)
  emit_tool_calls=True,
  # this will stream tool calls *as if* they were state
  emit_intermediate_state=[
    {
      "state_key": "outline",
      "tool": "set_outline",
      "tool_argument": "outline",
    }
  ]
)

Read more about state streaming in Feature: State Streaming

Starting an agent

There are several ways a CoAgent can start:

1. CoAgents can be like skills you provide to CopilotKit. This means that CopilotKit will take care of starting a specific agent when it detects that this agent is needed. This is the default behavior, all you need to do is to provide your agents to CopilotKit.

2. Sometimes, you want a specific agent to run even before any user action, so that the user interacts with the agent directly. You can achieve this by locking into an action in you CopilotKit context:

<CopilotKit
  runtimeUrl="/api/copilotkit"
  agent="customer_service_agent"
>

1. You might also want to start your agent programmatically. This can be achieved by with the start/stop function returned by the useCoAgent hook:

const { start, stop } = useCoAgent({ name: "car_rental_agent" });
 
start(); // stop();

Sharing agent state

CopilotKit provides hooks for accessing the agent state in the frontend. This allows you to get live updates as the state changes, as well as the capability to update the state from anywhere in your application.

There are two hooks to access the shared state:

1. useCoAgent to access the state of the agent from anywhere in your application.

const { state: carRentalState, setState: setCarRentalState } = useCoAgent({
  name: "car_rental_agent",
});

2. useCoAgentAction to access the state and render it to the chat window.

useCoAgentAction({
  name: "car_rental_agent",
  // this is optional - can also have an action by agent
  nodeName: "confirm_node",
  // render can be a function or a string, just like useCopilotAction
  render: "Confirming rental...",
});

Read more about sharing agent state in Feature: Shared State

Agent Q&A

To get feedback from the user, your agents can interrupt execution and wait for it using the standard LangGraph mechanisms (interrupts, __END__ node, etc.).

Most LangGraph agents should work out of the box with CopilotKit, requiring only minimal configuration.

Since CoAgents receive the whole message history as context, they can take the user’s feedback into account even in nodes that are not directly exposed to the user, or deep down in the graph.

Read more about agent Q&A in Feature: Agent Q&A