---
title: Overview
description: "The Agentic Application Platform: Open source framework and Cloud or self-hosted services for building AI-powered agentic applications."
icon: "lucide/Sparkles"
hideTOC: true
hideHeader: true
---

import { MessageSquare, Layers, Code, Bot, Server, BookOpen, Play, Book } from "lucide-react"
import LandingCodeShowcase from "@/snippets/landing-code-showcase.mdx"
import { IntegrationGrid } from "@/components/content/integration-grid"
import { LazyIframe } from "@/components/content/lazy-iframe"

{/* ── Hero ── */}

## Welcome to CopilotKit!

CopilotKit is the __frontend stack for agents__ and __generative UI__. Connect any agent framework or model to your React app for __chat__, __generative UI__, __canvas apps__, and __human-in-the-loop__ workflows.

Look below to find right guide for your needs, whether you're starting from nothing or have existing agent you want to give a prebuilt chat UI or fully custom UI.

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 not-prose mb-4 mt-10">
  <a href="/quickstart" className="group flex items-start gap-3 bg-card border border-border/80 rounded-lg p-4 no-underline hover:border-primary/60 hover:bg-accent/50 transition-colors shadow-sm">
    <Play className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
    <div>
      <div className="font-semibold text-foreground group-hover:text-primary mb-1">Quickstart</div>
      <div className="text-sm text-muted-foreground leading-relaxed">Get up and running in minutes.</div>
    </div>
  </a>
  <a href="/reference" className="group flex items-start gap-3 bg-card border border-border/80 rounded-lg p-4 no-underline hover:border-primary/60 hover:bg-accent/50 transition-colors shadow-sm">
    <Book className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
    <div>
      <div className="font-semibold text-foreground group-hover:text-primary mb-1">API Reference</div>
      <div className="text-sm text-muted-foreground leading-relaxed">Hooks, components, and config.</div>
    </div>
  </a>
  <a href="/prebuilt-components" className="group flex items-start gap-3 bg-card border border-border/80 rounded-lg p-4 no-underline hover:border-primary/60 hover:bg-accent/50 transition-colors shadow-sm">
    <MessageSquare className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
    <div>
      <div className="font-semibold text-foreground group-hover:text-primary mb-1">Chat UI</div>
      <div className="text-sm text-muted-foreground leading-relaxed">Prebuilt chat with streaming.</div>
    </div>
  </a>
  <a href="/generative-ui/your-components/display-only" className="group flex items-start gap-3 bg-card border border-border/80 rounded-lg p-4 no-underline hover:border-primary/60 hover:bg-accent/50 transition-colors shadow-sm">
    <Layers className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
    <div>
      <div className="font-semibold text-foreground group-hover:text-primary mb-1">Generative UI</div>
      <div className="text-sm text-muted-foreground leading-relaxed">Render tools as React components.</div>
    </div>
  </a>
</div>

<OpsPlatformCTA
  variant="tile"
  title="Production-ready agents on the free Developer tier"
  body="Persistent threads, observability, and the full Enterprise Intelligence Platform."
  surface="docs_home_hero"
  className="mb-10"
/>

{/* ── Code Examples ── */}
<LandingCodeShowcase components={props.components}/>

---

{/* ── Explore by feature ── */}

## Explore by feature

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-12 gap-y-8 mt-6 mb-16 not-prose">
  <a href="/prebuilt-components" className="group flex items-start gap-4 no-underline">
    <div className="flex-shrink-0 mt-1"><MessageSquare className="h-6 w-6 text-primary" /></div>
    <div>
      <div className="font-semibold text-foreground group-hover:text-primary transition-colors">Chat UI &rsaquo;</div>
      <div className="text-sm text-muted-foreground leading-relaxed mt-0.5">Prebuilt chat components with streaming, tool calls, and markdown.</div>
    </div>
  </a>
  <a href="/headless" className="group flex items-start gap-4 no-underline">
    <div className="flex-shrink-0 mt-1"><Code className="h-6 w-6 text-primary" /></div>
    <div>
      <div className="font-semibold text-foreground group-hover:text-primary transition-colors">Headless UI &rsaquo;</div>
      <div className="text-sm text-muted-foreground leading-relaxed mt-0.5">Full rendering control via hooks — zero opinions on design.</div>
    </div>
  </a>
  <a href="/generative-ui/your-components/display-only" className="group flex items-start gap-4 no-underline">
    <div className="flex-shrink-0 mt-1"><Layers className="h-6 w-6 text-primary" /></div>
    <div>
      <div className="font-semibold text-foreground group-hover:text-primary transition-colors">Generative UI &rsaquo;</div>
      <div className="text-sm text-muted-foreground leading-relaxed mt-0.5">Render agent tools and state as interactive React components.</div>
    </div>
  </a>
  <a href="/backend" className="group flex items-start gap-4 no-underline">
    <div className="flex-shrink-0 mt-1"><Server className="h-6 w-6 text-primary" /></div>
    <div>
      <div className="font-semibold text-foreground group-hover:text-primary transition-colors">Backend &amp; Runtime &rsaquo;</div>
      <div className="text-sm text-muted-foreground leading-relaxed mt-0.5">Set up the CopilotKit runtime, AG-UI middleware, and endpoints.</div>
    </div>
  </a>
  <a href="/programmatic-control" className="group flex items-start gap-4 no-underline">
    <div className="flex-shrink-0 mt-1"><Bot className="h-6 w-6 text-primary" /></div>
    <div>
      <div className="font-semibold text-foreground group-hover:text-primary transition-colors">Programmatic Control &rsaquo;</div>
      <div className="text-sm text-muted-foreground leading-relaxed mt-0.5">Build non-chat or fully custom experiences.</div>
    </div>
  </a>
  <a href="/reference" className="group flex items-start gap-4 no-underline">
    <div className="flex-shrink-0 mt-1"><BookOpen className="h-6 w-6 text-primary" /></div>
    <div>
      <div className="font-semibold text-foreground group-hover:text-primary transition-colors">API Reference &rsaquo;</div>
      <div className="text-sm text-muted-foreground leading-relaxed mt-0.5">Complete reference for hooks, components, and configuration.</div>
    </div>
  </a>
</div>
 
## Explore by AI backend

<IntegrationGrid />

## Feature comparison (by framework)

import { FeatureMatrix } from "@/components/react/feature-matrix"

<FeatureMatrix />

<div className="mt-16 border-t border-neutral-200 dark:border-neutral-800 pt-4 text-center text-xs text-neutral-400 dark:text-neutral-500">
  MCP server: <a href="https://mcp.copilotkit.ai/mcp" className="underline hover:text-neutral-500 dark:hover:text-neutral-400">https://mcp.copilotkit.ai/mcp</a> · llms.txt: <a href="https://mcp.copilotkit.ai/llms.txt" className="underline hover:text-neutral-500 dark:hover:text-neutral-400">https://mcp.copilotkit.ai/llms.txt</a> · Powered by <a href="https://pathfinder.copilotkit.dev" className="underline hover:text-neutral-500 dark:hover:text-neutral-400">Pathfinder</a>
</div>
