docs/content/docs/(root)/index.mdx
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"
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" /> <LandingCodeShowcase components={props.components}/>
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>