Copilotkit

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

</div>

<div align="center" style="display:flex;justify-content:start;gap:16px;height:20px;margin: 0;"> <a href="https://www.npmjs.com/package/@copilotkit/react-core" target="_blank"> <img src="https://img.shields.io/npm/v/%40copilotkit%2Freact-core?logo=npm&logoColor=%23FFFFFF&label=Version&color=%236963ff" alt="NPM"> </a> <a href="https://github.com/copilotkit/copilotkit/blob/main/LICENSE" target="_blank"> <img src="https://raw.githubusercontent.com/CopilotKit/CopilotKit/9b22849b2d028700ec1d99b5dca534dfdcb3876f/assets/license-badge.svg" alt="License: MIT" height="20"> </a> <a href="https://discord.gg/6dffbvGU3D" target="_blank"> <img src="https://img.shields.io/discord/1122926057641742418?logo=discord&logoColor=%23FFFFFF&label=Discord&color=%236963ff" alt="Discord"> </a> </div> <br/> <div> <a href="https://www.producthunt.com/posts/copilotkit" target="_blank"> </a> <div /> <div align="center"> <a href="https://trendshift.io/repositories/5730" target="_blank"><img src="https://trendshift.io/api/badge/repositories/5730" alt="CopilotKit%2FCopilotKit | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/> </a> <a href="https://www.producthunt.com/posts/copilotkit" target="_blank"> <img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=428778&theme=light&period=daily"> </a> </div>

---

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

<div align="center"> Add AI to your app in 1 minute</div>

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.

https://github.com/user-attachments/assets/3cfacac0-4ffd-457a-96f9-d7951e4ab7b6

Compare the Three Types

<img width="708" height="311" alt="image" src="https://github.com/user-attachments/assets/962f49c2-31ea-43c5-b2a3-7cdde114705a" />

Explore:

• Static (AG-UI Protocol)
• Declarative (A2UI)
• Open-Ended (MCP Apps & Open JSON)

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.

---

npx create-ag-ui-app my-agent-app

<a href="https://github.com/ag-ui-protocol/ag-ui" target="_blank"> Learn more in the AG-UI README → </a>

🤝 Community

• What's New

<h3>Have questions or need help?</h3> <a href="https://discord.gg/6dffbvGU3D?ref=github_readme" target="_blank"> Join our Discord → </a> </br> <a href="https://docs.copilotkit.ai/?ref=github_readme" target="_blank"> Read the Docs → </a> </br> <a href="https://cloud.copilotkit.ai?ref=github_readme" target="_blank"> Try Copilot Cloud → </a> <h3>Stay up to date with our latest releases!</h3> <a href="https://www.linkedin.com/company/copilotkit/" target="_blank"> Follow us on LinkedIn → </a> </br> <a href="https://x.com/copilotkit" target="_blank"> Follow us on X → </a>

🙋🏽‍♂️ 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:

• For code contributions, CONTRIBUTING.md.

• For documentation-related contributions, check out the documentation contributions guide.

• Want to contribute but not sure how? Join our Discord and we'll help you out!

Install as a Claude Code plugin

The CopilotKit monorepo doubles as a Claude Code plugin — all 9 skills (3 package meta-skills + 6 lifecycle journey skills) are available once installed.

Add the repo as a Claude Code marketplace:

claude plugin marketplace add https://github.com/CopilotKit/CopilotKit
claude plugin install copilotkit

Skills are discovered from skills/<slug>/SKILL.md at the repo root. The three package meta-skills (runtime, react-core, a2ui-renderer) are generated mirrors of the source-of-truth files at packages/<pkg>/skills/<pkg>/ — do not edit the mirror directly. To update content, edit the source under packages/*/skills/ and run:

pnpm sync:plugin-skills

A lefthook pre-commit check (pnpm check:plugin-skills) rejects commits that drift the mirror. The plugin version is pinned to packages/runtime/package.json and is also kept in sync by the same script.

Skill inventory

Slug	Type	Source
runtime	core	packages/runtime/skills/runtime/
react-core	framework	packages/react-core/skills/react-core/
a2ui-renderer	framework	packages/a2ui-renderer/skills/a2ui-renderer/
0-to-working-chat	lifecycle	skills/0-to-working-chat/
spa-without-runtime	lifecycle	skills/spa-without-runtime/
go-to-production	lifecycle	skills/go-to-production/
scale-to-multi-agent	lifecycle	skills/scale-to-multi-agent/
v1-to-v2-migration	lifecycle	skills/v1-to-v2-migration/
debug-and-troubleshoot	lifecycle	skills/debug-and-troubleshoot/

📄 License

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