CopilotKit

CopilotKit

React UI + elegant infrastructure for AI Copilots, AI chatbots, and in-app AI agents. The Agentic last-mile πŸͺ

Stars: 17501

Visit
 screenshot

CopilotKit is an open-source framework for building, deploying, and operating fully custom AI Copilots, including in-app AI chatbots, AI agents, and AI Textareas. It provides a set of components and entry points that allow developers to easily integrate AI capabilities into their applications. CopilotKit is designed to be flexible and extensible, so developers can tailor it to their specific needs. It supports a variety of use cases, including providing app-aware AI chatbots that can interact with the application state and take action, drop-in replacements for textareas with AI-assisted text generation, and in-app agents that can access real-time application context and take action within the application.

README:

CopilotKit Logo

Build deeply-integrated AI assistants & agents
that work alongside your users inside your applications.


NPM MIT Discord

CopilotKit Discord CopilotKit GitHub CopilotKit GitHub

Stay up to date with our latest releases!

LI Discord


214 (1)

πŸ† Featured Examples

Transform spreadsheets with natural language data analysis and formula generation. Users can ask questions about their data, create complex formulas through conversation, and get instant visualizationsβ€”all without knowing a single Excel function.

GitHub β†’ Live Demo β†’

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.

GitHub β†’

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.

GitHub β†’ Live Demo β†’

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.

GitHub β†’ Live Demo β†’

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.

GitHub β†’ Live Demo β†’

πŸ§™β€β™‚οΈ 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.

GitHub β†’ Tutorial β†’

πŸ” Research Canvas

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

GitHub β†’ Live Demo β†’

Getting Started

Get started in minutes - check out the quickstart documentation.

Code Samples

// Headless UI with full control
const { visibleMessages, appendMessage, setMessages, ... } = useCopilotChat();

// Pre-built components with deep customization options (CSS + pass custom sub-components)
<CopilotPopup 
  instructions={"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 RAG
useCopilotReadable({
  description: "The current user's colleagues",
  value: colleagues,
});

// knowledge-base integration
useCopilotKnowledgebase(myCustomKnowledgeBase)

// ---

// Frontend actions + generative UI, with full streaming support
useCopilotAction({
  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 }) => <Spreadsheet data={canonicalSpreadsheetData(args.rows)} />,
  handler: ({ rows }) => setSpreadsheet({ ...spreadsheet, rows: [...spreadsheet.rows, ...canonicalSpreadsheetData(rows)] }),
});

// ---

// structured autocomplete for anything
const { suggestions } = useCopilotStructuredAutocompletion(
  {
    instructions: `Autocomplete or modify spreadsheet rows based on the inferred user intent.`,
    value: { rows: spreadsheet.rows.map((row) => ({ cells: row })) },
    enabled: !!activeCell && !spreadsheetIsEmpty,
  },
  [activeCell, spreadsheet]
);

Code Samples (CoAgents: in-app LangGraph Agents)

// Share state between app and agent
const { agentState } = useCoAgent({ 
  name: "basic_agent", 
  initialState: { input: "NYC" } 
});

// agentic generative UI
useCoAgentStateRender({
  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 }) => (
      <EmailConfirmation
        emailContent={args.email_draft || ""}
        isExecuting={status === "executing"}
        onCancel={() => respond?.({ approved: false })}
        onSend={() => respond?.({ approved: true, metadata: { sentAt: new Date().toISOString() } })}
      />
    ),
  });

// ---

// intermediate agent state streaming (supports both LangGraph.js + LangGraph python)
const modifiedConfig = copilotKitCustomizeConfig(config, {
  emitIntermediateState: [{ 
    stateKey: "outline", 
    tool: "set_outline", 
    toolArgument: "outline" 
  }],
});
const 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:

πŸ’‘ 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.

For Tasks:

Click tags to check more tools for each tasks

For Jobs:

Alternative AI tools for CopilotKit

Similar Open Source Tools

For similar tasks

For similar jobs