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

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.

• AG-UI Protocol — Standardized bidirectional event stream between agents and UIs (created by CopilotKit)
• Generative UI — Three patterns: Static (AG-UI), Declarative (A2UI/Open-JSON-UI), Open-ended (MCP Apps)
• React & Angular Support — Full SDK for both frameworks with hooks and components
• CoAgents — Human-in-the-loop agents that observe app state and stream updates in real-time
• Shared State Management — Bidirectional state sync between agents and frontend
• MCP Server Integration — Model Context Protocol for repository exploration and context-aware ops
• CopilotTextarea — AI-enhanced text input with autocomplete and suggestions
• Frontend Actions — Define tools and actions directly in the frontend layer
• Open Generative UI — Runtime HTML/CSS/JS generation with sandboxed rendering (new in 2026)

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

  ┌────────────────────────────────────────────────────┐
  │              Frontend (React / Angular)              │
  │  ┌──────────────┐ ┌────────────┐ ┌──────────────┐  │
  │  │CopilotKit    │ │ Generative │ │  CoAgents    │  │
  │  │Provider      │ │ UI Renderer│ │  (HITL)      │  │
  │  └──────┬───────┘ └─────┬──────┘ └──────┬───────┘  │
  └─────────┼───────────────┼───────────────┼───────────┘
            │               │               │
  ┌─────────▼───────────────▼───────────────▼───────────┐
  │               AG-UI Protocol Layer                   │
  │  Event Stream: Actions | State | UI Specs | Tools    │
  └─────────────────────────┬───────────────────────────┘
                            │
  ┌─────────────────────────▼───────────────────────────┐
  │              CopilotRuntime (Backend)                 │
  │  ┌─────────────┐ ┌──────────────┐ ┌──────────────┐  │
  │  │ LLM Adapter │ │  Agent       │ │   MCP        │  │
  │  │ (OpenAI,    │ │  Framework   │ │   Server     │  │
  │  │  Anthropic) │ │  Integrations│ │   Support    │  │
  │  └─────────────┘ └──────────────┘ └──────────────┘  │
  └──────────────────────────────────────────────────────┘

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>
  );
}

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

• Event-based communication — Standardized event stream format for agent-to-UI interaction
• Generative UI specs — A2UI, Open-JSON-UI, and MCP Apps for dynamic UI generation
• State synchronization — Bidirectional shared state between agents and frontend
• Human-in-the-loop — Structured patterns for user confirmation, input, and feedback
• Framework agnostic — Works with LangGraph, custom agents, and any backend framework

• Open Generative UI — Runtime HTML/CSS/JS streaming with sandboxed iframe rendering
• Angular Support — Full Angular SDK alongside React
• MCP Apps — Open-ended generative UI via MCP server integration
• v2.x Architecture — Major rewrite with improved event streaming and intelligence agents
• CDN Library Support — Chart.js, D3, Three.js for rich generated visualizations

• GitHub Repository
• Official Website
• Documentation

• LangChain — Backend LLM framework (LangGraph integration)
• n8n — Workflow automation platform
• Google ADK — Google's agent development kit