GitHub - amrmelsayed/CopilotKit: React UI + elegant infrastructure for AI Copilots, AI chatbots, and in-app AI agents. The Agentic last-mile 🪁

⚡️ Quick Install

 npx copilotkit@latest init

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

🚀 Getting Started

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

Complete getting started guide →

Best in class support across the ecosystem

✨ 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"}});![banner](https://github.com/user-attachments/assets/b4d76fab-7439-4010-9319-a5b16546b569)![class-support-ecosystem](https://github.com/user-attachments/assets/65de96b7-dc12-4c3d-a704-30c2d3b0ea3c)![form-filling-copilot](https://github.com/user-attachments/assets/46b0ad80-33dc-4a49-94ba-f270a32fc123)![chat-with-your-data](https://github.com/user-attachments/assets/4ffd9b7a-86d9-4b22-9c17-148de581e7c6)![state-machine-copilot](https://github.com/user-attachments/assets/65581290-f4bd-4486-840b-27d3d0c77bc8)// 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.

⚡️ Quick Install

 npx copilotkit@latest init

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

🚀 Getting Started

Install: Run a simple CLI command
Configure: Add CopilotKit provider to your app
Customize: Use headless UI or the customizable pre-built components
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"}});![banner](https://github.com/user-attachments/assets/b4d76fab-7439-4010-9319-a5b16546b569)![class-support-ecosystem](https://github.com/user-attachments/assets/65de96b7-dc12-4c3d-a704-30c2d3b0ea3c)![form-filling-copilot](https://github.com/user-attachments/assets/46b0ad80-33dc-4a49-94ba-f270a32fc123)![chat-with-your-data](https://github.com/user-attachments/assets/4ffd9b7a-86d9-4b22-9c17-148de581e7c6)![state-machine-copilot](https://github.com/user-attachments/assets/65581290-f4bd-4486-840b-27d3d0c77bc8)// 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.

⚡️ Quick Install

 npx copilotkit@latest init

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

🚀 Getting Started

Install: Run a simple CLI command
Configure: Add CopilotKit provider to your app
Customize: Use headless UI or the customizable pre-built components
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"}});![banner](https://github.com/user-attachments/assets/b4d76fab-7439-4010-9319-a5b16546b569)![class-support-ecosystem](https://github.com/user-attachments/assets/65de96b7-dc12-4c3d-a704-30c2d3b0ea3c)![form-filling-copilot](https://github.com/user-attachments/assets/46b0ad80-33dc-4a49-94ba-f270a32fc123)![chat-with-your-data](https://github.com/user-attachments/assets/4ffd9b7a-86d9-4b22-9c17-148de581e7c6)![state-machine-copilot](https://github.com/user-attachments/assets/65581290-f4bd-4486-840b-27d3d0c77bc8)// 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.

⚡️ Quick Install

 npx copilotkit@latest init

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

🚀 Getting Started

Install: Run a simple CLI command
Configure: Add CopilotKit provider to your app
Customize: Use headless UI or the customizable pre-built components
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"}});![banner](https://github.com/user-attachments/assets/b4d76fab-7439-4010-9319-a5b16546b569)![class-support-ecosystem](https://github.com/user-attachments/assets/65de96b7-dc12-4c3d-a704-30c2d3b0ea3c)![form-filling-copilot](https://github.com/user-attachments/assets/46b0ad80-33dc-4a49-94ba-f270a32fc123)![chat-with-your-data](https://github.com/user-attachments/assets/4ffd9b7a-86d9-4b22-9c17-148de581e7c6)![state-machine-copilot](https://github.com/user-attachments/assets/65581290-f4bd-4486-840b-27d3d0c77bc8)// 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.

⚡️ Quick Install

 npx copilotkit@latest init

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

🚀 Getting Started

Install: Run a simple CLI command
Configure: Add CopilotKit provider to your app
Customize: Use headless UI or the customizable pre-built components
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"}});![banner](https://github.com/user-attachments/assets/b4d76fab-7439-4010-9319-a5b16546b569)![class-support-ecosystem](https://github.com/user-attachments/assets/65de96b7-dc12-4c3d-a704-30c2d3b0ea3c)![form-filling-copilot](https://github.com/user-attachments/assets/46b0ad80-33dc-4a49-94ba-f270a32fc123)![chat-with-your-data](https://github.com/user-attachments/assets/4ffd9b7a-86d9-4b22-9c17-148de581e7c6)![state-machine-copilot](https://github.com/user-attachments/assets/65581290-f4bd-4486-840b-27d3d0c77bc8)// 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.

⚡️ Quick Install

 npx copilotkit@latest init

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

🚀 Getting Started

Install: Run a simple CLI command
Configure: Add CopilotKit provider to your app
Customize: Use headless UI or the customizable pre-built components
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"}});![banner](https://github.com/user-attachments/assets/b4d76fab-7439-4010-9319-a5b16546b569)![class-support-ecosystem](https://github.com/user-attachments/assets/65de96b7-dc12-4c3d-a704-30c2d3b0ea3c)![form-filling-copilot](https://github.com/user-attachments/assets/46b0ad80-33dc-4a49-94ba-f270a32fc123)![chat-with-your-data](https://github.com/user-attachments/assets/4ffd9b7a-86d9-4b22-9c17-148de581e7c6)![state-machine-copilot](https://github.com/user-attachments/assets/65581290-f4bd-4486-840b-27d3d0c77bc8)// 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.

⚡️ Quick Install

 npx copilotkit@latest init

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

🚀 Getting Started

Install: Run a simple CLI command
Configure: Add CopilotKit provider to your app
Customize: Use headless UI or the customizable pre-built components
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"}});![banner](https://github.com/user-attachments/assets/b4d76fab-7439-4010-9319-a5b16546b569)![class-support-ecosystem](https://github.com/user-attachments/assets/65de96b7-dc12-4c3d-a704-30c2d3b0ea3c)![form-filling-copilot](https://github.com/user-attachments/assets/46b0ad80-33dc-4a49-94ba-f270a32fc123)![chat-with-your-data](https://github.com/user-attachments/assets/4ffd9b7a-86d9-4b22-9c17-148de581e7c6)![state-machine-copilot](https://github.com/user-attachments/assets/65581290-f4bd-4486-840b-27d3d0c77bc8)// 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.

⚡️ Quick Install

 npx copilotkit@latest init

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

🚀 Getting Started

Install: Run a simple CLI command
Configure: Add CopilotKit provider to your app
Customize: Use headless UI or the customizable pre-built components
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"}});![banner](https://github.com/user-attachments/assets/b4d76fab-7439-4010-9319-a5b16546b569)![class-support-ecosystem](https://github.com/user-attachments/assets/65de96b7-dc12-4c3d-a704-30c2d3b0ea3c)![form-filling-copilot](https://github.com/user-attachments/assets/46b0ad80-33dc-4a49-94ba-f270a32fc123)![chat-with-your-data](https://github.com/user-attachments/assets/4ffd9b7a-86d9-4b22-9c17-148de581e7c6)![state-machine-copilot](https://github.com/user-attachments/assets/65581290-f4bd-4486-840b-27d3d0c77bc8)// 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.

Name		Name	Last commit message	Last commit date
.cursor/rules		.cursor/rules
.github		.github
.husky		.husky
CopilotKit		CopilotKit
assets		assets
community		community
docs		docs
examples		examples
infra		infra
registry		registry
sdk-python		sdk-python
.coderabbit.yaml		.coderabbit.yaml
.dockerignore		.dockerignore
.gitignore		.gitignore
.kodiak.toml		.kodiak.toml
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
dangerfile.js		dangerfile.js
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
renovate.json		renovate.json

Name		Name	Last commit message	Last commit date
.cursor/rules		.cursor/rules
.github		.github
.husky		.husky
CopilotKit		CopilotKit
assets		assets
community		community
docs		docs
examples		examples
infra		infra
registry		registry
sdk-python		sdk-python
.coderabbit.yaml		.coderabbit.yaml
.dockerignore		.dockerignore
.gitignore		.gitignore
.kodiak.toml		.kodiak.toml
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
dangerfile.js		dangerfile.js
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
renovate.json		renovate.json

Name		Name	Last commit message	Last commit date
.cursor/rules		.cursor/rules
.github		.github
.husky		.husky
CopilotKit		CopilotKit
assets		assets
community		community
docs		docs
examples		examples
infra		infra
registry		registry
sdk-python		sdk-python
.coderabbit.yaml		.coderabbit.yaml
.dockerignore		.dockerignore
.gitignore		.gitignore
.kodiak.toml		.kodiak.toml
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
dangerfile.js		dangerfile.js
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
renovate.json		renovate.json

Name		Name	Last commit message	Last commit date
.cursor/rules		.cursor/rules
.github		.github
.husky		.husky
CopilotKit		CopilotKit
assets		assets
community		community
docs		docs
examples		examples
infra		infra
registry		registry
sdk-python		sdk-python
.coderabbit.yaml		.coderabbit.yaml
.dockerignore		.dockerignore
.gitignore		.gitignore
.kodiak.toml		.kodiak.toml
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
dangerfile.js		dangerfile.js
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
renovate.json		renovate.json

Name		Name	Last commit message	Last commit date
.cursor/rules		.cursor/rules
.github		.github
.husky		.husky
CopilotKit		CopilotKit
assets		assets
community		community
docs		docs
examples		examples
infra		infra
registry		registry
sdk-python		sdk-python
.coderabbit.yaml		.coderabbit.yaml
.dockerignore		.dockerignore
.gitignore		.gitignore
.kodiak.toml		.kodiak.toml
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
dangerfile.js		dangerfile.js
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
renovate.json		renovate.json

Latest commit

History

Folders and files

Repository files navigation

⚡️ Quick Install

🚀 Getting Started

✨ Why CopilotKit?

🧑‍💻 Real life use cases

🖥️ Code Samples

Build with Headless APIs and Pre-Built Components

Integrate In-App CoAgents with LangGraph

🏆 Featured Examples

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

🤝 Community

Have questions or need help?

Stay up to date with our latest releases!

🙋🏽‍♂️ Contributing

📄 License

About

Resources

Code of conduct

Contributing

Security policy

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

⚡️ Quick Install

🚀 Getting Started

✨ Why CopilotKit?

🧑‍💻 Real life use cases

🖥️ Code Samples

Build with Headless APIs and Pre-Built Components

Integrate In-App CoAgents with LangGraph

🏆 Featured Examples

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

🤝 Community

Have questions or need help?

Stay up to date with our latest releases!

🙋🏽‍♂️ Contributing

📄 License

About

Resources

Code of conduct

Contributing

Security policy

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

⚡️ Quick Install

🚀 Getting Started

✨ Why CopilotKit?

🧑‍💻 Real life use cases

🖥️ Code Samples

Build with Headless APIs and Pre-Built Components

Integrate In-App CoAgents with LangGraph

🏆 Featured Examples

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

🤝 Community

Have questions or need help?

Stay up to date with our latest releases!

🙋🏽‍♂️ Contributing

📄 License

About

Resources