CopilotKit — When your agent controls the UI, not just the chat

날짜:

hero

Beyond the chat box

When most teams add an AI agent to their app, the result looks the same: a chat panel on the right side, the rest of the app unchanged. The agent answers, the UI doesn't move. CopilotKit starts from a different premise — what if the agent could read and write the app's state directly, and render real UI components as part of its workflow?

The problem this SDK solves

Building agentic apps exposes a persistent gap: agents live in the backend, UI lives in the frontend, and bridging them requires custom sync logic, polling, or WebSocket plumbing. Human-in-the-loop moments — where the agent needs to pause and ask the user something — are even harder to wire up cleanly.

CopilotKit addresses this gap in three layers:

  1. Shared State — Agents and UI components read from and write to the same state layer in real time. No manualsync required.
  2. Generative UI — Agents dynamically render UI components at runtime based on user intent and agent state — not just text responses.
  3. Human-in-the-Loop — Agents can pause mid-execution to request user input, confirmation, or edits before continuing.

How it works

CopilotKit is built on top of the AG-UI Protocol — the agent-user interaction protocol adopted by Google, LangChain, AWS, Microsoft, Mastra, and PydanticAI. CopilotKit is the company behind this protocol.

The interaction model is a single loop: UI → Agent → Tool → UI render. The useAgent hook is the entry point.

const { agent } = useAgent({ agentId: 'my_agent' });

return (
  <div>
    <h1>{agent.state.city}</h1>
    <button onClick={() => agent.setState({ city: 'NYC' })}>
      Set City
    </button>
  </div>
);

useAgent is a proper superset of useCoAgent, sitting directly on AG-UI. It gives programmatic access to agent state — read, write, and control — from within any React component.

Setup

For new projects:

npx copilotkit@latest create -f <framework>

For existing projects:

npx copilotkit@latest init

Running init gives you:

  • Core packages installed
  • Provider configured — context, state, and hooks ready
  • Agent ↔ UI connected — agents can stream actions and render UI immediately
  • Deployment-ready configuration

Real-world example: LangGraph agent + React UI

Imagine a travel recommendation agent built on LangGraph. The agent updates a destination, and the UI reflects it instantly.

# LangGraph agent node
def recommend_city(state):
    state["city"] = "Tokyo"
    return state

// React component subscribing to agent state
const { agent } = useAgent({ agentId: 'travel_agent' });

return <h1>Recommended city: {agent.state.city}</h1>;

When the agent updates city, the component re-renders immediately through the shared state layer — no custom WebSocket, no polling loop.

When not to use it

CopilotKit is strongest when you need tight integration between a React frontend and an agentic backend. It's the wrong fit when:

  • Your agent runs entirely as a backend pipeline with no UI feedback needed
  • You're on Vue, Svelte, or Angular — CopilotKit is React-first
  • You just need a simple chatbot widget — this is overbuilt for that use case
  • Your agent framework isn't decided yet — AG-UI-compatible agents are a prerequisite

Alternatives in the same category

Tool Strength Limitation
Vercel AI SDK Streaming UI, simple chat integration No shared agent state layer
LangChain LCEL Flexible chain composition, broad model support No UI layer included
CopilotKit Agent-UI shared state, Generative UI, Human-in-the-Loop Requires React ecosystem

Vercel AI SDK is the lighter choice for streaming chat. CopilotKit is built for workflows where the agent needs to drive the app UI, not just respond in a panel.

Wrap-up

CopilotKit isn't an AI chat widget SDK. It's infrastructure for building apps where the agent and the UI are part of the same interaction loop. With AG-UI Protocol at the base and first-party integrations for LangGraph, CrewAI, and PydanticAI, the connection cost is low if you're already using one of those frameworks.

Pair Generative UI with Human-in-the-Loop and you have agents that don't just respond — they collaborate with the user inside the app itself. If your team is building a React app on top of a LangGraph agent, npx copilotkit@latest init is the fastest way to see how the state bridge actually works.

🐦 Faster updates on X: @baegseungh7061
📚 More in this series: AI Insights
💌 Subscribe: Follow on X or grab the RSS

댓글

댓글 쓰기