Table of Contents

CopilotKit

CopilotKit is the open-source frontend stack for building in-app AI copilots with generative UI. With 29.7K GitHub stars, CopilotKit is the creator of the AG-UI (Agent-Generative UI) protocol — a standardized communication layer between agent systems and user interfaces — supporting React and Angular frontends.

frontend react angular copilot generative-ui ag-ui protocol typescript

Overview

CopilotKit was founded by Atai Barkai, a former Meta engineer, who built it to address a fundamental gap: while AI agent backends were maturing rapidly, the frontend layer for embedding agents into applications remained primitive — mostly chat boxes bolted onto existing UIs. CopilotKit provides elegant infrastructure for embedding AI copilots directly within applications, enabling agents to generate UI dynamically, manage shared state, and interact with users through human-in-the-loop workflows. The project grew from 80 stars to 10K+ in under a year and has since surpassed 29K stars.

Key Features

Architecture

CopilotKit's architecture centers on the AG-UI protocol as the universal interface layer:

graph TD subgraph Frontend["Frontend: React / Angular"] A[CopilotKit Provider] B[Generative UI Renderer] C[CoAgents: HITL] end subgraph Protocol["AG-UI Protocol Layer"] D[Event Stream: Actions / State / UI Specs / Tools] end subgraph Backend["CopilotRuntime: Backend"] E[LLM Adapter: OpenAI / Anthropic] F[Agent Framework Integrations] G[MCP Server Support] end Frontend --> Protocol Protocol --> Backend

Code Example

Embedding an AI copilot in a React application: 

# Backend: FastAPI with CopilotKit Python SDK
from fastapi import FastAPI
from copilotkit import CopilotKitRemoteEndpoint, Action
 
app = FastAPI()
 
# Define an action the copilot can invoke
async def search_docs(query: str) -> str:
    # Real search implementation
    return f"Found 3 results for: {query}"
 
search_action = Action(
    name="search_docs",
    description="Search the documentation",
    parameters=[{"name": "query", "type": "string", "description": "Search query"}],
    handler=search_docs,
)
 
# Set up CopilotKit endpoint
endpoint = CopilotKitRemoteEndpoint(actions=[search_action])
 
@app.post("/copilotkit")
async def copilotkit_handler(request):
    return await endpoint.handle(request)

React frontend integration: 

// Frontend: React with CopilotKit
import { CopilotKit, CopilotPopup } from "@copilotkit/react-ui";
import { useCopilotAction } from "@copilotkit/react-core";

function App() {
  // Define frontend action
  useCopilotAction({
    name: "highlight_text",
    description: "Highlight text in the document",
    parameters: [{ name: "text", type: "string" }],
    handler: ({ text }) => highlightInDocument(text),
  });

  return (
    <CopilotKit runtimeUrl="/copilotkit">
      <YourApp />
      <CopilotPopup title="AI Assistant" />
    </CopilotKit>
  );
}

AG-UI Protocol

The AG-UI Protocol is CopilotKit's most significant contribution to the ecosystem. It defines:

Recent Updates (2025-2026)

References

See Also