⚡️ Quick Install

  npx copilotkit@latest init

🚀 Getting Started

✨ Why CopilotKit?

🧑‍💻 Real life use cases

🖥️ Code Samples

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

🤝 Community

Have questions or need help?

Stay up to date with our latest releases!

🙋🏽‍♂️ Contributing

📄 License