npx copilotkit@latest create
Read the Docs →Try Copilot Cloud →Join our Discord →
- 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 →
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.
CopilotKit.UseAgent.Graphic.Motion.mp4
- 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
Deploy deeply-integrated AI assistants & agents that work alongside your users inside your applications.
Drop in these building blocks and tailor them to your needs.
// Headless UI with full controlconst{ 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)<CopilotSidebarinstructions={"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?"}}/>// Programmatically access and control your agentsconst{ agent }=useAgent({agentId: "my_agent"});// Render and update your agent's statereturn<div><h1>{agent.state.city}</h1><buttononClick={()=>agent.setState({city: "NYC"})}>SetCity</button></div>// Build generative UI based on your agent's stateuseCoAgentStateRender({name: "my_agent",render: ({ state })=><WeatherDisplay{...state.final_response}/>,});// Frontend actions + generative UI, with full streaming supportuseFrontendTool({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)]}),});// 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(<EmailConfirmationemailContent={args.email_draft||""}isExecuting={status ==="executing"}onCancel={()=>respond?.({approved: false})}onSend={()=>respond?.({approved: true,metadata: {sentAt: newDate().toISOString()},})}/>);},});// Build generative UI on-top of your agent's tool callsuseRenderToolCall({name: "get_weather",// tool defined in your agentargs: [{name: "city",type: "string",required: true,}],render: ({ args, result })=>{<WeatherCardcity={args.city}temperature={result.temperature}description={result.description}/>}})
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 → Join our Discord →Read the Docs →
Try Copilot Cloud → Follow us on LinkedIn →
Follow us on X →
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!
This repository's source code is available under the MIT License.