docs/content/docs/learn/index.mdx
import { Layers, Network, Cpu, MessageSquareMore, Sparkles, Newspaper, Server } from "lucide-react"
This section explains how CopilotKit works under the hood — the architecture, the protocols, and the design decisions. Use these pages to build your mental model before diving into implementation.
<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="/learn/architecture" className="group flex items-start gap-4 no-underline"> <div className="flex-shrink-0 mt-1"><Cpu className="h-6 w-6 text-primary" /></div> <div> <div className="font-semibold text-foreground group-hover:text-primary transition-colors">Architecture ›</div> <div className="text-sm text-muted-foreground leading-relaxed mt-0.5">The three-layer stack: Frontend, Runtime, and Agent.</div> </div> </a> <a href="/learn/intelligence-platform" 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">Enterprise Intelligence Platform ›</div> <div className="text-sm text-muted-foreground leading-relaxed mt-0.5">The backend that powers threads, realtime sync, and the multi-tenancy model — hosted and self-hosted.</div> </div> </a> <a href="/learn/threads" className="group flex items-start gap-4 no-underline"> <div className="flex-shrink-0 mt-1"><MessageSquareMore className="h-6 w-6 text-primary" /></div> <div> <div className="font-semibold text-foreground group-hover:text-primary transition-colors">Threads & Persistence ›</div> <div className="text-sm text-muted-foreground leading-relaxed mt-0.5">How durable, resumable conversations work across sessions and devices.</div> </div> </a> <a href="/learn/generative-ui" className="group flex items-start gap-4 no-underline"> <div className="flex-shrink-0 mt-1"><Sparkles className="h-6 w-6 text-primary" /></div> <div> <div className="font-semibold text-foreground group-hover:text-primary transition-colors">Generative UI ›</div> <div className="text-sm text-muted-foreground leading-relaxed mt-0.5">Static, open-ended, and declarative UI patterns and their trade-offs.</div> </div> </a> <a href="/learn/ag-ui-protocol" className="group flex items-start gap-4 no-underline"> <div className="flex-shrink-0 mt-1"><Network className="h-6 w-6 text-primary" /></div> <div> <div className="font-semibold text-foreground group-hover:text-primary transition-colors">AG-UI Protocol ›</div> <div className="text-sm text-muted-foreground leading-relaxed mt-0.5">The event-based SSE protocol connecting agents to frontends.</div> </div> </a> <a href="/learn/agentic-protocols" 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">Agentic Protocols ›</div> <div className="text-sm text-muted-foreground leading-relaxed mt-0.5">AG-UI, MCP, and A2A — what each protocol does and how they fit together.</div> </div> </a> <a href="/learn/whats-new" className="group flex items-start gap-4 no-underline"> <div className="flex-shrink-0 mt-1"><Newspaper className="h-6 w-6 text-primary" /></div> <div> <div className="font-semibold text-foreground group-hover:text-primary transition-colors">What's New ›</div> <div className="text-sm text-muted-foreground leading-relaxed mt-0.5">Release notes and feature announcements.</div> </div> </a> </div>