CopilotKit + LangGraph: how the pieces connect

A React banking app with a chat sidebar, a small runtime route on the server, and your LangGraph agent.

Your React app

Runs in the browser

  • @copilotkit/react-core
    Provider, chat sidebar, useAgent hook
  • Your 5-step form, reading its values from shared agent state
HTTP
messages and state go out, events stream back

Copilot Runtime

Runs on your server, e.g. /api/copilotkit

  • @copilotkit/runtime
    Gateway between the browser and the agent
  • @copilotkit/runtime/langgraph
    LangGraphAgent (in-process) or LangGraphHttpAgent (remote)
  • Good place to check login and permissions
AG-UI
the event protocol: text, tool calls, state deltas

Your LangGraph agent

Your server, LangGraph Platform, or LangSmith

  • Your graph, nodes and tools, unchanged
  • @copilotkit/sdk-js
    copilotkitMiddleware for JS agents
  • ag-ui-langgraph
    For Python agents, served with FastAPI

What happens when the user says "fill step 1"

  1. User typesin the chat sidebar
  2. Runtime forwardsthe message and current form state to the agent
  3. Agent decidesthe field values and emits a state update
  4. Events stream backas AG-UI state deltas
  5. Form re-renderswith step 1 filled from shared state
Not in the open-source SDK: CopilotKit Intelligence, which provides Rich Threads (saved, resumable conversations). You don't need it for two-way form state sync.