⚡️ Quick Install

  npx copilotkit@latest create

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

🚀 Getting Started

1. Install: Run a simple CLI command
2. Configure: Add CopilotKit provider to your app
3. Customize: Use headless UI or the customizable pre-built components
4. Deploy: You're done!

Complete getting started guide →

⭐️ useAgent

The v2 hook useAgent is a proper superset of useCoAgent, which gives more control over the agent connection.

Check out the useAgent docs to learn more.

https://github.com/user-attachments/assets/46b7d161-a988-4453-9ca9-c0eca4c33da6

✨ Why CopilotKit?

• Minutes to integrate - Get started quickly with our CLI
• Framework agnostic - Works with React, Next.js, AGUI, and more
• Production-ready UI - Use customizable components or build with headless UI
• Built-in security - Prompt injection protection
• Open source - Full transparency and community-driven

🖥️ Code Samples

Drop in these building blocks and tailor them to your needs.

Build with Headless APIs and Pre-Built Components

// Headless UI with full control
const { copilotkit } = useCopilotKit();
const { agent } = useAgent({ agentId: "my_agent" });
const { messages, addMessage, setMessages, state, ... } = agent;

copilotkit.runAgent({ agent })

// Pre-built components with deep customization options (CSS + pass custom sub-components)
<CopilotSidebar 
  instructions={"You are assisting the user as best as you can. Answer in the best way possible given the data you have."} 
  labels={{ title: "Sidebar Assistant", initial: "Need any help?" }} 
/>

Deeply integrate LLMs or agents into your application

// 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>

// Build generative UI based on your agent's state
useCoAgentStateRender({
  name: "my_agent",
  render: ({ state }) => <WeatherDisplay {...state.final_response} />,
});

// Frontend actions + generative UI, with full streaming support
useFrontendTool({
  name: "appendToSpreadsheet",
  description: "Append rows to the current spreadsheet",
  parameters: [
    { name: "rows", type: "object[]", attributes: [{ name: "cells", type: "object[]", attributes: [{ name: "value", type: "string" }] }] }
  ],
  render: ({ status, args }) => <Spreadsheet data={canonicalSpreadsheetData(args.rows)} />,
  handler: ({ rows }) => setSpreadsheet({ ...spreadsheet, rows: [...spreadsheet.rows, ...canonicalSpreadsheetData(rows)] }),
});

// Human in the Loop (Approval)
useHumanInTheLoop({
  name: "email_tool",
  parameters: [
    {
      name: "email_draft",
      type: "string",
      description: "The email content",
      required: true,
    },
  ],
  render: ({ args, status, respond }) => {
    return (
      <EmailConfirmation
        emailContent={args.email_draft || ""}
        isExecuting={status === "executing"}
        onCancel={() => respond?.({ approved: false })}
        onSend={() =>
          respond?.({
            approved: true,
            metadata: { sentAt: new Date().toISOString() },
          })
        }
      />
    );
  },
});

// Build generative UI on-top of your agent's tool calls
useRenderToolCall({
  name: "get_weather", // tool defined in your agent
  args: [{
    name: "city",
    type: "string",
    required: true,
  }],
  render: ({ args, result }) => {
    <WeatherCard  
      city={args.city}
      temperature={result.temperature}
      description={result.description}
    />
  }
})

🏆 Featured Examples

🖥️ 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.

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:

• 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!

📄 License

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