import { A2AIcon } from "@/components/icons/a2a";
import { AdkIcon } from "@/components/icons/adk";
import { AguiIcon } from "@/components/icons/agui";
import { ClaudeIcon } from "@/components/icons/claude";
import { CloudflareIcon } from "@/components/icons/cloudflare";
import { LangChainIcon } from "@/components/icons/langchain";
import { LangGraphIcon } from "@/components/icons/langgraph";
import { MastraIcon } from "@/components/icons/mastra";
import { OpenCodeIcon } from "@/components/icons/opencode";
import { VercelIcon } from "@/components/icons/vercel";
A runtime is the connection between assistant-ui's UI primitives and your AI backend. This page helps you pick one. Two lenses, pick whichever maps to what you already know.
Lens 1: by framework#
If you are already using one of these frameworks, the choice is mechanical.
First-party adapters#
assistant-ui ships React adapter packages for these. Pick the matching card and follow its overview.
} title="Vercel AI SDK" description="useChat hook, streaming, tools, attachments, multi-step. v6 current; v5 / v4 legacy." href="/docs/runtimes/ai-sdk/overview" /> } title="Eve" description="Filesystem-first durable agents with eve/next, sessions, NDJSON streaming, and HITL." href="/docs/runtimes/eve/overview" /> } title="LangGraph" description="Direct integration with @langchain/langgraph-sdk. Subgraph events, UI messages, message metadata." href="/docs/runtimes/langgraph/overview" /> } title="LangChain useStream" description="Wraps @langchain/react's useStream. Lighter-weight, tracks upstream." href="/docs/runtimes/langchain" /> } title="Google ADK" description="ADK JS or Python agents. Tool confirmations, auth flows, multi-agent, code execution." href="/docs/runtimes/google-adk/overview" /> } title="A2A Protocol" description="Any A2A v1.0-compliant agent server. Streaming task state, artifacts, multi-tenancy." href="/docs/runtimes/a2a/overview" /> } title="AG-UI Protocol" description="AG-UI agents (CopilotKit, custom servers). Streaming text, thinking, tool calls, state snapshots." href="/docs/runtimes/ag-ui/overview" /> } title="OpenCode" description="OpenCode coding-agent server. Permission flows, questions, fork / revert. Experimental." href="/docs/runtimes/opencode/overview" /><PlatformOnly platforms={["react"]}>
Integration guides#
For frameworks without a dedicated adapter, these wiring guides route through an existing runtime: an adapter above, or one of the core runtimes.
} title="Cloudflare Agents" description="Stateful agents on Durable Objects with WebSocket streaming. Wired through the Vercel AI SDK runtime." href="/docs/integrations/frameworks/cloudflare-agents" /> } title="Mastra" description="TypeScript agent framework. Wired through the Vercel AI SDK runtime." href="/docs/integrations/frameworks/mastra/overview" /> } title="Claude Managed Agents" description="Anthropic-hosted agent sessions. Wired through the external store runtime: event-log replay, approval gates, sessions as threads." href="/docs/runtimes/claude-managed-agents" />Lens 2: by needs#
If you do not know your framework yet, or your backend is custom, pick by what you need:
| You need | Use |
|---|---|
Simple fetch call to your API, runtime owns state | LocalRuntime |
| Keep messages in redux, zustand, tanstack-query, etc. | ExternalStoreRuntime |
| Backend that already speaks the data stream protocol | DataStream |
| Stream full agent state snapshots (not just messages) | AssistantTransport |
If none of the framework adapters fits, start at custom backend.
Shared concepts#
Regardless of which runtime you pick, four ideas apply across the board.
- Architecture — Framework adapters wrap one of two core runtimes (
LocalRuntime,ExternalStoreRuntime). See architecture for the full layering. - Adapters (attachments, speech, feedback, history, suggestions) work the same way across runtimes. See adapters.
- Threads (single, cloud, custom database) follow the same model. See threads.
- Stability policy: APIs prefixed with
unstable_may change in any release. See stability.