Getting Started with CopilotKit: The Frontend Stack for Generative UI and AI Agents

The paradigm of user interfaces is shifting. We are rapidly moving away from static layouts and simple chatbots towards highly integrated, contextual AI assistants and Generative User Interfaces (Generative UI). Traditional chat interfaces (like basic floating widgets) operate in a vacuum, blind to the application's current state and unable to perform meaningful actions within the browser.

Enter CopilotKit. This emerging open-source repository is trending rapidly on GitHub because it provides the missing architectural link: a dedicated frontend stack for AI agents and Generative UI. Written in TypeScript, CopilotKit empowers developers to build deep, in-app copilots that can not only read the application state but dynamically modify it and render actual UI components in real-time.

---

Overview: The Gap in AI Integration

Most current AI integrations suffer from "the chatbox silo." The LLM operates through a side panel, requiring users to manually copy and paste context. If the AI wants to show a visualization, it is forced to write markdown or plain text, leaving the user to manually translate that data into their application.

CopilotKit solves this by establishing a bidirectional bridge between your application's frontend and the LLM (or AI agent). It introduces the concept of AG-UI (Agent-Guided User Interface) Protocol, allowing the agent to dynamically push UI components directly into the application canvas based on the execution context.

By open-sourcing this orchestration layer, CopilotKit enables developers to easily feed runtime state to the AI, register frontend functions as executable tools for the AI, and stream interactive React components as LLM responses.

---

Key Features of CopilotKit

• Generative UI: Instead of streaming boring markdown text, CopilotKit allows LLMs to render fully interactive, state-aware React/Angular components on the fly inside the chat or canvas interface.
• State-Awareness (useCopilotReadable): A React hook that makes any client-side state, variable, or context instantly visible and understandable to the LLM backend without tedious prompt engineering.
• In-App Actions (useCopilotAction): Register custom frontend functions that the AI agent can call autonomously. For example, a user can say, "Generate a bar chart from this data," and the agent calls the local chart rendering function with the correctly formatted arguments.
• The AG-UI Protocol: An open specification designed to standardize how AI agents interact with user interfaces across different runtimes and UI frameworks.
• Multi-Framework & Platform Support: While natively built with TypeScript and React, CopilotKit extends its ecosystem to Angular, mobile frameworks, Slack, and native platforms.
• Agentic Framework Integrations: Native compatibility with top-tier agent orchestrators such as LangChain, LangGraph, and CrewAI.

---

Getting Started with CopilotKit (React Example)

Let’s build a functional task-management assistant. We want our AI copilot to be aware of our task list and be able to automatically add new tasks on behalf of the user.

1. Installation

Install the core React package and the pre-built UI components:

npm install @copilotkit/react-core @copilotkit/react-ui

2. Wrapping Your Application

First, wrap your application root with the CopilotKit provider and render the sidebar component. You'll need to point it to your backend runtime endpoint where the LLM is configured.

import { CopilotKit } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";
import { TaskBoard } from "./TaskBoard";

export default function App() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      <CopilotSidebar defaultOpen={true}>
        <TaskBoard />
      </CopilotSidebar>
    </CopilotKit>
  );
}

3. Integrating Context and Actions

Inside our TaskBoard component, we use useCopilotReadable to let the AI know what tasks exist, and useCopilotAction to allow the AI to mutate our state.

import React, { useState } from "react";
import { useCopilotReadable, useCopilotAction } from "@copilotkit/react-core";

interface Task {
  id: string;
  title: string;
  status: "todo" | "done";
}

export function TaskBoard() {
  const [tasks, setTasks] = useState<Task[]>([
    { id: "1", title: "Set up database schema", status: "done" },
    { id: "2", title: "Configure CopilotKit", status: "todo" },
  ]);

  // 1. Give the Copilot context about our state
  useCopilotReadable({
    description: "The current list of tasks in the kanban board.",
    value: tasks,
  });

  // 2. Register an action so the Copilot can mutate our state
  useCopilotAction({
    name: "addNewTask",
    description: "Adds a new task to the task board.",
    parameters: [
      {
        name: "title",
        type: "string",
        description: "The descriptive title of the task to perform.",
        required: true,
      },
    ],
    handler: async ({ title }) => {
      const newTask: Task = {
        id: Math.random().toString(),
        title,
        status: "todo",
      };
      setTasks((prev) => [...prev, newTask]);
    },
  });

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">My Projects</h1>
      <ul className="space-y-2">
        {tasks.map((task) => (
          <li key={task.id} className="p-3 bg-gray-100 rounded shadow-sm">
            <span className={task.status === "done" ? "line-through text-gray-400" : ""}>
              {task.title}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

With this setup, when a user opens the sidebar and types: "I need to write documentation tomorrow, please add it to my board," the LLM will recognize the context, invoke the addNewTask action with the parameter title: "Write documentation", and your UI will instantly update on the client side.

---

Use Cases & Target Audience

CopilotKit is engineered for developers seeking to build software that goes beyond basic chatbots:

• SaaS Dashboards & BI Tools: Enable users to write complex queries in natural language, and let CopilotKit dynamically render interactive charts, graphs, and export configurations.
• Content Management Systems & Rich Editors: Build AI agents that assist with inline editing, generating structural sections of code, or pulling live data from internal databases directly into a document editor.
• Customer Support Consoles: Equipping support agents with copilots that can read client histories and execute CRM updates autonomously.
• Target Audience: Frontend Engineers, Full-Stack Developers, AI Platform Engineers, and Tech Leads looking to ship deeply-integrated LLM features without reinventing the communication protocol between frontends and backend agents.

---

Why It Matters: The Future of AG-UI

The open-source community has been flooded with backend frameworks for LLMs (like LangChain or LlamaIndex), but the frontend has largely been neglected. Developers have been forced to write spaghetti code using WebSockets or custom event listeners to keep their frontend in sync with AI runtimes.

CopilotKit changes the game by treating the frontend as a first-class citizen in the AI application stack. By defining the AG-UI Protocol, the project is standardizing how client-side states and UI rendering instructions are communicated to and from LLMs. As generative interfaces become the industry standard, frameworks like CopilotKit will likely become as essential to the modern AI-stack as React Query or Redux are to classic client-state management.