⚡️ Quick Install

 npx copilotkit@latest init

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 →

✨ 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

🧑‍💻 Real life use cases

Deploy deeply-integrated AI assistants & agents that work alongside your users inside your applications.

🖥️ 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 controlconst{ visibleMessages, appendMessage, setMessages, ... }=useCopilotChat();// Pre-built components with deep customization options (CSS + pass custom sub-components)<CopilotPopupinstructions={"You are assisting the user as best as you can. Answer in the best way possible given the data you have."}labels={{title: "Popup Assistant",initial: "Need any help?"}}/>

// Frontend actions + generative UI, with full streaming supportuseCopilotAction({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 })=><Spreadsheetdata={canonicalSpreadsheetData(args.rows)}/>,handler: ({rows})=>setSpreadsheet({ ...spreadsheet,rows: [...spreadsheet.rows, ...canonicalSpreadsheetData(rows)]}),});

Integrate In-App CoAgents with LangGraph

// Share state between app and agentconst{ agentState }=useCoAgent({name: "basic_agent",initialState: {input: "NYC"}});// agentic generative UIuseCoAgentStateRender({name: "basic_agent",render: ({ state })=><WeatherDisplay{...state.final_response}/>,});// Human in the Loop (Approval)useCopilotAction({name: "email_tool",parameters: [{name: "email_draft",type: "string",description: "The email content",required: true,},],renderAndWaitForResponse: ({ args, status, respond })=>{return(<EmailConfirmationemailContent={args.email_draft||""}isExecuting={status ==="executing"}onCancel={()=>respond?.({approved: false})}onSend={()=>respond?.({approved: true,metadata: {sentAt: newDate().toISOString()},})}/>);},});

// intermediate agent state streaming (supports both LangGraph.js + LangGraph python)constmodifiedConfig=copilotKitCustomizeConfig(config,{emitIntermediateState: [{stateKey: "outline",tool: "set_outline",toolArgument: "outline"}],});constresponse=awaitChatOpenAI({model: "gpt-4o"}).invoke(messages,modifiedConfig);

🏆 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.