Skip to content

copilotkit-tutorial

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

copilotkit-tutorial

README.md

layout title nav_order has_children
default
CopilotKit Tutorial
72
true

CopilotKit Tutorial: Building AI Copilots for React Applications

Create in-app AI assistants, chatbots, and agentic UIs with the open-source CopilotKit framework.

🤖 Add AI Superpowers to Your React Apps

GitHub

🎯 What is CopilotKit?

CopilotKitView Repo is an open-source framework for building AI copilots, chatbots, and in-app AI agents in React applications. It provides a complete toolkit for creating user-facing agentic applications with features like:

  • In-App AI Chat - Contextual AI assistants that understand your app
  • Generative UI - AI-generated React components
  • CoAgents - LangGraph-powered agentic workflows
  • Human-in-the-Loop - User approval for AI actions
  • Shared State - Real-time sync between UI and AI agents
flowchart TD
    A[React Application] --> B[CopilotKit Provider]
    B --> C[useCopilotReadable]
    B --> D[useCopilotAction]
    B --> E[CopilotChat/Sidebar]
    
    C --> F[App Context to AI]
    D --> G[AI Actions in App]
    E --> H[User Interaction]
    
    F --> I[CopilotKit Runtime]
    G --> I
    H --> I
    
    I --> J[LLM Provider]
    I --> K[LangGraph Agents]
    I --> L[External Tools]
    
    classDef react fill:#61dafb,stroke:#20232a
    classDef copilot fill:#f3e5f5,stroke:#4a148c
    classDef runtime fill:#fff3e0,stroke:#ef6c00
    classDef external fill:#e8f5e8,stroke:#1b5e20
    
    class A react
    class B,C,D,E,F,G,H copilot
    class I runtime
    class J,K,L external
Loading

Current Snapshot (auto-updated)

What's New in 2025

v1.10.0+: Complete headless UI overhaul with agentic features including Generative UI, Suggestions, Agentic Generative UI, and Interrupts.

CrewAI Integration: Build agentic UIs for CrewAI Crews with human-in-the-loop interactions.

LangGraph Execution: Configurable LangGraph execution with user-defined configurations.

Tutorial Chapters

  1. Chapter 1: Getting Started - Installation, setup, and your first AI copilot
  2. Chapter 2: Reading App Context - Making your app state visible to AI with useCopilotReadable
  3. Chapter 3: Copilot Actions - Enabling AI to take actions in your app
  4. Chapter 4: Chat Components - Building chat interfaces with CopilotChat and CopilotSidebar
  5. Chapter 5: Generative UI - AI-generated React components
  6. Chapter 6: CoAgents & LangGraph - Building agentic workflows with LangGraph integration
  7. Chapter 7: Human-in-the-Loop - User approval flows and interrupts
  8. Chapter 8: Production Deployment - Scaling, security, and best practices

What You'll Learn

  • Create In-App AI Assistants that understand your application context
  • Implement AI Actions that can modify your app state
  • Build Generative UIs with AI-created React components
  • Integrate LangGraph Agents for complex agentic workflows
  • Handle Human-in-the-Loop scenarios with user approvals
  • Connect Multiple LLM Providers (OpenAI, Anthropic, etc.)
  • Deploy Production Copilots with proper security and scaling

Prerequisites

  • React 18+ and Next.js 13+ (App Router recommended)
  • TypeScript knowledge
  • Basic understanding of LLMs and AI concepts
  • Node.js 18+

Quick Start

# Initialize CopilotKit in your project
npx copilotkit@latest init

# Or install manually
npm install @copilotkit/react-core @copilotkit/react-ui
// app/layout.tsx
import { CopilotKit } from "@copilotkit/react-core";
import "@copilotkit/react-ui/styles.css";

export default function RootLayout({ children }) {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      {children}
    </CopilotKit>
  );
}
// app/page.tsx
import { CopilotSidebar } from "@copilotkit/react-ui";
import { useCopilotReadable, useCopilotAction } from "@copilotkit/react-core";

export default function Page() {
  const [todos, setTodos] = useState([]);

  // Make state visible to AI
  useCopilotReadable({
    description: "The current todo list",
    value: todos,
  });

  // Enable AI to add todos
  useCopilotAction({
    name: "addTodo",
    description: "Add a new todo item",
    parameters: [
      { name: "title", type: "string", description: "The todo title" }
    ],
    handler: async ({ title }) => {
      setTodos([...todos, { id: Date.now(), title, done: false }]);
    },
  });

  return (
    <CopilotSidebar>
      <TodoList todos={todos} />
    </CopilotSidebar>
  );
}

Key Integrations

Integration Description Version
CrewAI Build UIs for CrewAI agent teams v1.7.0+
LangGraph Configurable agent execution v1.6.0+
OpenAI GPT-4, GPT-4o models Supported
Anthropic Claude models Supported
Groq Fast inference Supported

Learning Path

🟢 Beginner Track

  1. Chapters 1-3: Setup, app context, and basic actions
  2. Build a simple AI-powered app

🟡 Intermediate Track

  1. Chapters 4-6: Chat UI, Generative UI, and CoAgents
  2. Create sophisticated agentic applications

🔴 Advanced Track

  1. Chapters 7-8: Human-in-the-loop and production deployment
  2. Master enterprise-grade AI copilots

Ready to add AI to your React app? Let's begin with Chapter 1: Getting Started!

Generated for Awesome Code Docs

Navigation & Backlinks

Full Chapter Map

  1. Chapter 1: Getting Started with CopilotKit
  2. Chapter 2: Reading App Context - Making Your App State Visible to AI
  3. Chapter 3: Copilot Actions - Enabling AI to Take Actions in Your App
  4. Chapter 4: Chat Components - Building Chat Interfaces with CopilotChat and CopilotSidebar
  5. Chapter 5: Generative UI - AI-Generated React Components
  6. Chapter 6: CoAgents & LangGraph - Building Agentic Workflows
  7. Chapter 7: Human-in-the-Loop - User Approval Flows and Interrupts
  8. Chapter 8: Production Deployment - Secure, Scalable Copilot Apps

Source References

Generated by AI Codebase Knowledge Builder