CopilotKit

Overview

CopilotKit lets you build AI copilot experiences into any React application. Instead of a generic chatbot, CopilotKit gives your AI deep context about your app’s state and actions — enabling truly integrated AI assistants.

How It Works

1. Install — npm install @copilotkit/react-core
2. Wrap your app — Add CopilotKit provider
3. Add components — Drop in CopilotChat or CopilotTextarea
4. Define actions — Tell the AI what it can do in your app

Use Cases

• In-app AI assistants — Context-aware chat
• AI text editing — Smart autocompletion
• Generative UI — AI generates React components
• Workflow automation — AI copilots for multi-step workflows

Getting Started

import { CopilotKit } from "@copilotkit/react-core";
import { CopilotChat } from "@copilotkit/react-ui";

function App() {
  return (
    <CopilotKit runtimeUrl="/api/copilot">
      <YourApp />
      <CopilotChat />
    </CopilotKit>
  );
}

Example

useCopilotAction({
  name: "updateChart",
  description: "Update the dashboard chart",
  handler: async ({ metric }) => setChartData(await fetchMetric(metric)),
});
// User: "Show revenue for Q4" → AI calls updateChart("revenue_q4")

Alternatives

• Assistant UI — React AI chat interfaces
• Vercel AI SDK — Streaming AI components
• Streamlit — Python-based AI app builder