⚡️ Quick Install

  npx copilotkit@latest create

🚀 Getting Started

⭐️ useAgent

✨ Why CopilotKit?

🧑‍💻 Real life use cases

🖥️ Code Samples

Build with Headless APIs and Pre-Built Components

// 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?"}}/>

Deeply integrate LLMs or agents into your application

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

🏆 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