Stay up to date with our latest releases!

🏆 Featured Examples

📝 Form-Filling Copilot

Transform tedious form-filling into natural conversations. The AI assistant asks the right questions, understands context, and completes forms automatically—no more field-by-field drudgery.

🔄 State Machine Copilot

Transform complex conversational flows into manageable state machines. This AI-powered car sales application demonstrates how to build sophisticated multi-stage interactions with contextual awareness and state transitions.

💬 Chat With Your Data

Transform your data visualization experience with an AI-powered dashboard assistant. Ask questions about your data in natural language, get insights, and interact with your metrics—all through a conversational interface powered by CopilotKit.

🏦 SaaS Copilot (Bank)

A context-aware financial assistant that analyzes transactions, provides spending insights, and helps users manage their finances through natural conversation. Demonstrates how CopilotKit can integrate deeply with complex data structures.

🧙‍♂️ Agent Examples

✈️ Travel Planner

An agent-native application that helps users plan trips by generating detailed itineraries, finding attractions, and visualizing travel plans. Shows how agents can collaborate with users to create rich, interactive experiences.

🔍 Research Canvas

Multi-agent document analysis system that helps users analyze papers, synthesize information, and generate comprehensive research summaries through collaborative AI workflows.

Getting Started

Get started in minutes - check out the quickstart documentation.

Code Samples

1// Headless UI with full control
2const { visibleMessages, appendMessage, setMessages, ... } = useCopilotChat();
3
4// Pre-built components with deep customization options (CSS + pass custom sub-components)
5<CopilotPopup 
6  instructions={"You are assisting the user as best as you can. Answer in the best way possible given the data you have."} 
7  labels={{ title: "Popup Assistant", initial: "Need any help?" }} 
8/>
9
10// ---
11
12// Frontend RAG
13useCopilotReadable({
14  description: "The current user's colleagues",
15  value: colleagues,
16});
17
18// knowledge-base integration
19useCopilotKnowledgebase(myCustomKnowledgeBase)
20
21// ---
22
23// Frontend actions + generative UI, with full streaming support
24useCopilotAction({
25  name: "appendToSpreadsheet",
26  description: "Append rows to the current spreadsheet",
27  parameters: [
28    { name: "rows", type: "object[]", attributes: [{ name: "cells", type: "object[]", attributes: [{ name: "value", type: "string" }] }] }
29  ],
30  render: ({ status, args }) => <Spreadsheet data={canonicalSpreadsheetData(args.rows)} />,
31  handler: ({ rows }) => setSpreadsheet({ ...spreadsheet, rows: [...spreadsheet.rows, ...canonicalSpreadsheetData(rows)] }),
32});
33
34// ---
35
36// structured autocomplete for anything
37const { suggestions } = useCopilotStructuredAutocompletion(
38  {
39    instructions: `Autocomplete or modify spreadsheet rows based on the inferred user intent.`,
40    value: { rows: spreadsheet.rows.map((row) => ({ cells: row })) },
41    enabled: !!activeCell && !spreadsheetIsEmpty,
42  },
43  [activeCell, spreadsheet]
44);

Code Samples (CoAgents: in-app LangGraph Agents)

1// Share state between app and agent
2const { agentState } = useCoAgent({ 
3  name: "basic_agent", 
4  initialState: { input: "NYC" } 
5});
6
7// agentic generative UI
8useCoAgentStateRender({
9  name: "basic_agent",
10  render: ({ state }) => <WeatherDisplay {...state.final_response} />,
11});
12
13// Human in the Loop (Approval)
14useCopilotAction({
15    name: "email_tool",
16    parameters: [{ name: "email_draft", type: "string", description: "The email content", required: true }],
17    renderAndWaitForResponse: ({ args, status, respond }) => (
18      <EmailConfirmation
19        emailContent={args.email_draft || ""}
20        isExecuting={status === "executing"}
21        onCancel={() => respond?.({ approved: false })}
22        onSend={() => respond?.({ approved: true, metadata: { sentAt: new Date().toISOString() } })}
23      />
24    ),
25  });
26
27// ---
28
29// intermediate agent state streaming (supports both LangGraph.js + LangGraph python)
30const modifiedConfig = copilotKitCustomizeConfig(config, {
31  emitIntermediateState: [{ 
32    stateKey: "outline", 
33    tool: "set_outline", 
34    toolArgument: "outline" 
35  }],
36});
37const response = await ChatOpenAI({ model: "gpt-4o" }).invoke(messages, modifiedConfig);

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!

💡 NOTE: All contributions must be submitted via a pull request and be reviewed by our team. This ensures all contributions are of high quality and align with the project's goals.

Get in touch

You are invited to join our community on Discord and chat with our team and other community members.

License

This repository's source code is available under the MIT License.