Skip to content

Framework for building agent-native applications with Generative UI, shared state, and human-in-the-loop workflows.

License

Notifications You must be signed in to change notification settings

CopilotKit/CopilotKit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4,115 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
FavIcon

CopilotKit

Build agent-native applications with interactive UI, shared state, and human-in-the-loop workflows.

CopilotKit



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!

abb2bbad-c615-49f6-9c05-e8848b19da0b.mp4

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.
full-headless-chat.mp4

Quick Start

New projects:

npx copilotkit@latest create -f <framework>

Existing projects:

npx copilotkit@latest init
cpk-cli.mp4

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.

1600x840

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.

CopilotKit.UseAgent.Graphic.Motion_2.mp4

Generative UI

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

demo-generative-ui.mp4

Compare the Three Types

image

Explore:

Generative UI educational repo →

🖥️ AG-UI: The Agent–User Interaction Protocol

Connect agent workflow to user-facing apps, with deep partnerships and 1st-party integrations across the agentic stack—including LangGraph, CrewAI, and more.

image
npx create-ag-ui-app my-agent-app
Learn more in the AG-UI README →

🤝 Community

Have questions or need help?

Join our Discord →
Read the Docs →
Try Copilot Cloud →

Stay up to date with our latest releases!

Follow us on LinkedIn →
Follow us on X →

🙋🏽‍♂️ Contributing

Thanks for your interest in contributing to CopilotKit! 💜

We value all contributions, whether it's through code, documentation, creating demo apps, or just spreading the word.

Here are a few useful resources to help you get started:

📄 License

This repository's source code is available under the MIT License.