showcase/shell-docs/src/content/snippets/shared/threads/overview.mdx
import { Accordions, Accordion } from "fumadocs-ui/components/accordion";
<div aria-label="A support workspace using Threads Drawer to move between customer conversations while CopilotChat renders the selected case details." className="shell-docs-radius-surface relative mb-4 overflow-hidden border border-[var(--border)] bg-[var(--bg-surface)] shadow-[0px_16px_24px_-8px_rgba(1,5,7,0.12)] ring-1 ring-inset ring-white/70 dark:shadow-[0px_16px_32px_-10px_rgba(0,0,0,0.45)] dark:ring-white/10" > </div>Create a new CopilotKit app connected to cloud-hosted Enterprise Intelligence. Your application and CopilotKit Runtime run locally while Enterprise Intelligence stores and synchronizes Rich Threads.
<Accordions> <Accordion title="Build and verify this with a coding agent"> <DocsTrackedCopy surface="docs_threads_agent_prompt">Set up and verify a CopilotKit Rich Threads application with cloud-hosted
Enterprise Intelligence.
First inspect this repository and follow its agent instructions. If this is not
already a CLI-created CopilotKit Threads starter, run
`npx copilotkit@latest init` and ask me to complete the interactive browser
sign-in and Enterprise Intelligence project selection when needed. Use the
scaffolded local application and CopilotKit Runtime configuration.
Keep the Threads Drawer that comes with the starter. Do not rebuild it or invent
manual Enterprise Intelligence environment configuration. Do not set up a local
Intelligence service.
Start the application and Runtime using the generated instructions. Create a
conversation through the included Threads Drawer, reload or reopen it, and
verify that the complete conversation returns. If browser interaction requires
me, give me the exact step and continue after I confirm it.
Finish by reporting the files changed, commands run, and the persistence check
you completed. Stop and explain the blocker if the cloud-hosted setup cannot be
completed; do not substitute an undocumented setup.
Or follow the steps yourself:
Run the interactive starter command:
<DocsTrackedCopy surface="docs_threads_managed_setup">npx copilotkit@latest init
Complete browser sign-in, then create or select an Enterprise Intelligence project when the CLI asks.
Start the generated application and Runtime with the command printed by the CLI. For the standard npm setup:
cd <project-directory>
npm run dev
Use the included Threads Drawer to create a conversation. Reload the page or reopen the conversation and confirm that its complete history returns.
Threads-capable CLI starters already include Threads Drawer. Use its guide when you are ready to customize the drawer. Choose Headless Threads later if your product needs a fully custom thread UI.
Production self-hosting keeps Rich Threads, durable event history, identity, storage, and operations inside your network, giving your organization control over data residency, security, and infrastructure. CopilotKit Engineering helps your team deploy Enterprise Intelligence in your Kubernetes environment. <DocsTrackedLink href="https://copilotkit.ai/talk-to-an-engineer" surface="docs_threads_self_hosting_contact">Book time with a CopilotKit engineer</DocsTrackedLink> to get started.
With Rich Threads, users can close the browser, return on another device, reopen a conversation, and continue from the same event history while active runs reconnect in realtime. Generative UI renders again as part of that history, and multimodal inputs stay stored with the conversation.
Built on portable AG-UI event history, Rich Threads restore messages, generative UI, multimodal inputs, tool activity, state, and live-run continuity instead of saving only a chat transcript.
Without CopilotKit Rich Threads, your team has to design the storage model, replay historical events and generative UI, persist multimodal inputs, reconnect live streams, synchronize thread lists, coordinate concurrent runs, and build lifecycle APIs before you can ship the conversation experience itself. Enterprise Intelligence handles that infrastructure so you can focus on your agent and product UI.
<OpsPlatformCTA variant="inline" title="Ship persistent conversations without building the backend" body="Enterprise Intelligence handles durable history, replay, realtime sync, and thread lifecycle on the free Developer tier." ctaLabel="Get Enterprise Intelligence free" surface="docs_threads_overview" />
Rich Threads provide:
Both UI paths use the same Threads infrastructure. A stable threadId connects the visible conversation to the runtime and its durable event history.
<Image src="/images/threads/threads-diagram-light.png" alt="A user starts a conversation on a laptop, leaves or switches devices, and returns to the same conversation on a phone." width={1774} height={919} className="block dark:hidden my-6 w-full mx-auto" /> <Image src="/images/threads/threads-diagram-dark.png" alt="A user starts a conversation on a laptop, leaves or switches devices, and returns to the same conversation on a phone." width={1775} height={918} className="hidden dark:block my-6 w-full mx-auto" />
threadId.CopilotRuntime runs your agent and sends conversation events to Enterprise Intelligence.| CopilotKit handles | You control |
|---|---|
| Durable event storage and replay | Your agent's behavior and tools |
| Replay-to-live stream reconnection | The conversation experience and layout |
| Realtime thread metadata synchronization | Which thread actions your users can access |
| Naming, pagination, archive, and delete semantics | Application authorization and permissions |
| Runtime-to-platform event plumbing and thread locks | Mapping to native framework sessions when needed |
| Cloud-hosted or self-hosted platform infrastructure | The deployment model that fits your organization |
| If you want to... | Choose | Start here |
|---|---|---|
| Ship a mobile-friendly conversation sidebar with switching, new conversations, archive, delete, and pagination already wired to your chat | Threads Drawer | <DocsTrackedLink href="/prebuilt-components/copilot-threads-drawer" surface="docs_threads_drawer_customization">Set up the Threads Drawer →</DocsTrackedLink> |
| Build a custom layout, workflow, permission model, or thread action UI while CopilotKit continues to handle the backend | Headless Threads | Build a custom thread UI → |
Ship a mobile-friendly conversation sidebar with switching, new conversations, archive, delete, and pagination already wired to your chat.
<DocsTrackedLink href="/prebuilt-components/copilot-threads-drawer" surface="docs_threads_drawer_customization" className="font-medium !text-[var(--accent)] !underline !decoration-[color-mix(in_oklch,var(--accent)_40%,transparent)] underline-offset-[3px] transition-colors hover:!decoration-[var(--accent)]">Set up the Threads Drawer →</DocsTrackedLink>
</div> <div className="p-5"> <p className="mb-2 text-lg font-semibold text-fd-foreground">Headless Threads</p>Build a custom layout, workflow, permission model, or thread action UI while CopilotKit continues to handle the backend.
<a href="/headless-threads" className="font-medium !text-[var(--accent)] !underline !decoration-[color-mix(in_oklch,var(--accent)_40%,transparent)] underline-offset-[3px] transition-colors hover:!decoration-[var(--accent)]">Build a custom thread UI →</a>
</div> </div>Threads capture new CopilotKit conversations once your app uses Enterprise Intelligence. If you already have persisted Google ADK or LangGraph conversations, follow <DocsTrackedLink href="/threads-import" surface="docs_threads_history_sync">Import & Synchronize Thread History</DocsTrackedLink> to synchronize supported history with the same thread store. Keep the native storage and analytics you already use; future CopilotKit-mediated runs continue through native durable persistence when it remains wired while Enterprise Intelligence records the Rich Thread experience. Users can then resume imported and new conversations through the same UI.
CopilotKit Threads are separate from native framework session or checkpoint stores. Your backend can keep a stable mapping when the agent framework also needs its own conversation identifier.
<WhenFrameworkHas flag="thread_persistence_pattern" equals="langgraph"> <Callout type="info" title="LangGraph thread IDs"> CopilotKit passes the active `threadId` to your LangGraph backend through AG-UI. You can use it directly or persist a mapping to a LangGraph thread or checkpoint identifier. LangGraph Platform thread IDs must be UUIDs. </Callout> </WhenFrameworkHas> <WhenFrameworkHas flag="thread_persistence_pattern" equals="adk-session"> <Callout type="info" title="ADK sessions"> CopilotKit passes the active `threadId` to your ADK backend through AG-UI. Keep a stable mapping when you also use a durable ADK session service; CopilotKit thread lifecycle actions do not mutate the native ADK session store. </Callout> </WhenFrameworkHas>