copilotkit

Docs · Examples · Enterprise Intelligence Platform · Discord

---

What is CopilotKit

CopilotKit is a best-in-class SDK for building full-stack agentic applications, Generative UI, and chat applications.

We are the company behind the AG-UI Protocol - adopted by Google, LangChain, AWS, Microsoft, Mastra, PydanticAI, and more!

https://github.com/user-attachments/assets/72b7b4f3-b6e7-460c-a932-5746fe3c8db3

Features:

• Chat UI – A React-based chat interface that supports message streaming, tool calls, and agent responses.
• Backend Tool Rendering – Enables agents to call backend tools that return UI components rendered directly in the client.
• Generative UI – Allows agents to generate and update UI components dynamically at runtime based on user intent and agent state.
• Shared State – A synchronized state layer that both agents and UI components can read from and write to in real time.
• Human-in-the-Loop – Lets agents pause execution to request user input, confirmation, or edits before continuing.

https://github.com/user-attachments/assets/55bf6714-62a7-4d5d-9232-07747cc0763b

Quick Start

New projects:

npx copilotkit@latest create -f <framework>

Existing projects:

npx copilotkit@latest init

https://github.com/user-attachments/assets/7372b27b-8def-40fb-a11d-1f6585f556ad

What this gives you:

• CopilotKit installed – Core packages are fully set up in your app
• Provider configured – Context, state, and hooks ready to use
• Agent <> UI connected – Agents can stream actions and render UI immediately
• Deployment-ready – Your app is ready to deploy

Complete getting started guide →

How it works:

CopilotKit connects your UI, agents, and tools into a single interaction loop.

This enables:

• Agents that ask users for input
• Tools that render UI
• Stateful workflows across steps and sessions

⭐️ useAgent Hook

The useAgent hook is a proper superset of useCoAgent and sits directly on AG-UI, giving more control over the agent connection.

// Programmatically access and control your agents
const { agent } = useAgent({ agentId: "my_agent" });

// Render and update your agent's state
return <div>
  <h1>{agent.state.city}</h1>
  <button onClick={() => agent.setState({ city: "NYC" })}>
    Set City
  </button>
</div>

Check out the useAgent docs to learn more.

https://github.com/user-attachments/assets/67928406-8abc-49a1-a851-98018b52174f

Generative UI

Generative UI is a core CopilotKit pattern that allows agents to dynamically render UI as part of their workflow.