---
title: Overview
description: "Understand how CopilotKit works — architecture, protocols, generative UI concepts, and the design decisions behind the platform."
icon: "lucide/BookOpen"
doc_type: explanation
hideTOC: true
---

import { Layers, Network, Cpu, MessageSquareMore, Sparkles, Newspaper, Server } from "lucide-react"

## Understand CopilotKit

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 &rsaquo;</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 &rsaquo;</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 &amp; Persistence &rsaquo;</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 &rsaquo;</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 &rsaquo;</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 &rsaquo;</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 &rsaquo;</div>
      <div className="text-sm text-muted-foreground leading-relaxed mt-0.5">Release notes and feature announcements.</div>
    </div>
  </a>
</div>
