> ## Documentation Index
> Fetch the complete documentation index at: https://docs.langchain.com/llms.txt
> Use this file to discover all available pages before exploring further.

# UI Playground

> Explore production-ready UI patterns for LangChain agent apps across React, Vue, Svelte, and Angular.

<div class="home-page mx-auto max-w-8xl px-0 lg:px-5" style={{ paddingBottom: "8rem" }}>
  <div class="mdx-content prose prose-gray dark:prose-invert mx-4 pt-10">
    <h1 class="flex whitespace-pre-wrap group font-semibold text-2xl sm:text-3xl mt-8">LangChain UI Playground</h1>

    Explore production-ready UI patterns for LangChain agent apps — across [React](https://react.dev/), [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/), and [Angular](https://angular.dev/). Pick a framework, browse demos, and open in your editor.

    ## Framework Previews

    Every pattern is implemented across all four frontend frameworks. Choose a tab to browse demos.

    <Tabs>
      <Tab title="React" icon="brand-react">
        <CardGroup cols={3}>
          <Card title="Tool Calling" icon="tool" href="https://ui-patterns.langchain.com/react/#/tool-calling" target="_blank">
            Render agent tool calls as rich cards — calculator, weather, search, email and more.
          </Card>

          <Card title="Human in the Loop" icon="user-check" href="https://ui-patterns.langchain.com/react/#/human-in-the-loop" target="_blank">
            Agent pauses and surfaces an approval card before taking a sensitive action.
          </Card>

          <Card title="Generative UI" icon="sparkles" href="https://ui-patterns.langchain.com/react/#/generative-ui" target="_blank">
            Server-driven dynamic UI — the agent emits structured component payloads rendered live.
          </Card>

          <Card title="Reasoning Tokens" icon="brain" href="https://ui-patterns.langchain.com/react/#/reasoning-tokens" target="_blank">
            Collapsible chain-of-thought blocks that stream thinking tokens before the final answer.
          </Card>

          <Card title="Structured Output" icon="table" href="https://ui-patterns.langchain.com/react/#/structured-output-latex" target="_blank">
            Agent returns typed structured data rendered with LaTeX math support.
          </Card>

          <Card title="Time Travel" icon="clock-backward" href="https://ui-patterns.langchain.com/react/#/time-travel" target="_blank">
            Branch conversation history and replay from any checkpoint using LangChain state.
          </Card>

          <Card title="Join / Rejoin" icon="git-merge" href="https://ui-patterns.langchain.com/react/#/join-rejoin" target="_blank">
            Visualize fan-out/fan-in parallel subgraph execution with merge indicators.
          </Card>

          <Card title="Async Iterator Tools" icon="bolt" href="https://ui-patterns.langchain.com/react/#/async-iterator-tools" target="_blank">
            Stream incremental tool progress using async iterators with live progress cards.
          </Card>

          <Card title="Deep agent — Subagent Cards" icon="share" href="https://ui-patterns.langchain.com/react/#/deep-agent-subagent-cards" target="_blank">
            Hierarchical activity cards for Deep Research-style multi-subagent orchestration.
          </Card>

          <Card title="Deep agent — Todo List" icon="list-check" href="https://ui-patterns.langchain.com/react/#/deep-agent-todo-list" target="_blank">
            Agent builds and checks off a live todo list while executing a long-running task.
          </Card>

          <Card title="Deep agent — Sandbox" icon="code" href="https://ui-patterns.langchain.com/react/#/deep-agent-ide" target="_blank">
            IDE-like UI with file browser, code viewer, and diff panel backed by a sandbox environment.
          </Card>

          <Card title="Graph Execution Cards" icon="layout-board" href="https://ui-patterns.langchain.com/react/#/graph-execution-cards" target="_blank">
            Timeline cards that visualize each LangGraph node as it executes in real time.
          </Card>

          <Card title="Markdown Messages" icon="file-description" href="https://ui-patterns.langchain.com/react/#/markdown-messages" target="_blank">
            Rich Markdown rendering with syntax-highlighted code blocks inside chat bubbles.
          </Card>

          <Card title="Branching Chat" icon="message" href="https://ui-patterns.langchain.com/react/#/branching-chat" target="_blank">
            Full chat interface with first-class branch navigation and history traversal.
          </Card>

          <Card title="Message Queues" icon="stack-2" href="https://ui-patterns.langchain.com/react/#/message-queues" target="_blank">
            Visualize message queue state and throughput for multi-step agent pipelines.
          </Card>

          <Card title="Subagent Streaming" icon="activity-heartbeat" href="https://ui-patterns.langchain.com/react/#/subagent-streaming" target="_blank">
            Stream output from multiple parallel subagents simultaneously with isolated windows.
          </Card>
        </CardGroup>
      </Tab>

      <Tab title="Vue" icon="brand-vue">
        <CardGroup cols={3}>
          <Card title="Tool Calling" icon="tool" href="https://ui-patterns.langchain.com/vue/#/tool-calling" target="_blank">
            Render agent tool calls as rich cards — calculator, weather, search, email and more.
          </Card>

          <Card title="Human in the Loop" icon="user-check" href="https://ui-patterns.langchain.com/vue/#/human-in-the-loop" target="_blank">
            Agent pauses and surfaces an approval card before taking a sensitive action.
          </Card>

          <Card title="Generative UI" icon="sparkles" href="https://ui-patterns.langchain.com/vue/#/generative-ui" target="_blank">
            Server-driven dynamic UI — the agent emits structured component payloads rendered live.
          </Card>

          <Card title="Reasoning Tokens" icon="brain" href="https://ui-patterns.langchain.com/vue/#/reasoning-tokens" target="_blank">
            Collapsible chain-of-thought blocks that stream thinking tokens before the final answer.
          </Card>

          <Card title="Structured Output" icon="table" href="https://ui-patterns.langchain.com/vue/#/structured-output-latex" target="_blank">
            Agent returns typed structured data rendered with LaTeX math support.
          </Card>

          <Card title="Time Travel" icon="clock-backward" href="https://ui-patterns.langchain.com/vue/#/time-travel" target="_blank">
            Branch conversation history and replay from any checkpoint using LangChain state.
          </Card>

          <Card title="Join / Rejoin" icon="git-merge" href="https://ui-patterns.langchain.com/vue/#/join-rejoin" target="_blank">
            Visualize fan-out/fan-in parallel subgraph execution with merge indicators.
          </Card>

          <Card title="Async Iterator Tools" icon="bolt" href="https://ui-patterns.langchain.com/vue/#/async-iterator-tools" target="_blank">
            Stream incremental tool progress using async iterators with live progress cards.
          </Card>

          <Card title="Deep agent — Subagent Cards" icon="share" href="https://ui-patterns.langchain.com/vue/#/deep-agent-subagent-cards" target="_blank">
            Hierarchical activity cards for Deep Research-style multi-subagent orchestration.
          </Card>

          <Card title="Deep agent — Todo List" icon="list-check" href="https://ui-patterns.langchain.com/vue/#/deep-agent-todo-list" target="_blank">
            Agent builds and checks off a live todo list while executing a long-running task.
          </Card>

          <Card title="Deep agent — Sandbox" icon="code" href="https://ui-patterns.langchain.com/vue/#/deep-agent-ide" target="_blank">
            IDE-like UI with file browser, code viewer, and diff panel backed by a sandbox environment.
          </Card>

          <Card title="Graph Execution Cards" icon="layout-board" href="https://ui-patterns.langchain.com/vue/#/graph-execution-cards" target="_blank">
            Timeline cards that visualize each LangGraph node as it executes in real time.
          </Card>

          <Card title="Markdown Messages" icon="file-description" href="https://ui-patterns.langchain.com/vue/#/markdown-messages" target="_blank">
            Rich Markdown rendering with syntax-highlighted code blocks inside chat bubbles.
          </Card>

          <Card title="Branching Chat" icon="message" href="https://ui-patterns.langchain.com/vue/#/branching-chat" target="_blank">
            Full chat interface with first-class branch navigation and history traversal.
          </Card>

          <Card title="Message Queues" icon="stack-2" href="https://ui-patterns.langchain.com/vue/#/message-queues" target="_blank">
            Visualize message queue state and throughput for multi-step agent pipelines.
          </Card>

          <Card title="Subagent Streaming" icon="activity-heartbeat" href="https://ui-patterns.langchain.com/vue/#/subagent-streaming" target="_blank">
            Stream output from multiple parallel subagents simultaneously with isolated windows.
          </Card>
        </CardGroup>
      </Tab>

      <Tab title="Svelte" icon="brand-svelte">
        <CardGroup cols={3}>
          <Card title="Tool Calling" icon="tool" href="https://ui-patterns.langchain.com/svelte/#/tool-calling" target="_blank">
            Render agent tool calls as rich cards — calculator, weather, search, email and more.
          </Card>

          <Card title="Human in the Loop" icon="user-check" href="https://ui-patterns.langchain.com/svelte/#/human-in-the-loop" target="_blank">
            Agent pauses and surfaces an approval card before taking a sensitive action.
          </Card>

          <Card title="Generative UI" icon="sparkles" href="https://ui-patterns.langchain.com/svelte/#/generative-ui" target="_blank">
            Server-driven dynamic UI — the agent emits structured component payloads rendered live.
          </Card>

          <Card title="Reasoning Tokens" icon="brain" href="https://ui-patterns.langchain.com/svelte/#/reasoning-tokens" target="_blank">
            Collapsible chain-of-thought blocks that stream thinking tokens before the final answer.
          </Card>

          <Card title="Structured Output" icon="table" href="https://ui-patterns.langchain.com/svelte/#/structured-output-latex" target="_blank">
            Agent returns typed structured data rendered with LaTeX math support.
          </Card>

          <Card title="Time Travel" icon="clock-backward" href="https://ui-patterns.langchain.com/svelte/#/time-travel" target="_blank">
            Branch conversation history and replay from any checkpoint using LangChain state.
          </Card>

          <Card title="Join / Rejoin" icon="git-merge" href="https://ui-patterns.langchain.com/svelte/#/join-rejoin" target="_blank">
            Visualize fan-out/fan-in parallel subgraph execution with merge indicators.
          </Card>

          <Card title="Async Iterator Tools" icon="bolt" href="https://ui-patterns.langchain.com/svelte/#/async-iterator-tools" target="_blank">
            Stream incremental tool progress using async iterators with live progress cards.
          </Card>

          <Card title="Deep agent — Subagent Cards" icon="share" href="https://ui-patterns.langchain.com/svelte/#/deep-agent-subagent-cards" target="_blank">
            Hierarchical activity cards for Deep Research-style multi-subagent orchestration.
          </Card>

          <Card title="Deep agent — Todo List" icon="list-check" href="https://ui-patterns.langchain.com/svelte/#/deep-agent-todo-list" target="_blank">
            Agent builds and checks off a live todo list while executing a long-running task.
          </Card>

          <Card title="Deep agent — Sandbox" icon="code" href="https://ui-patterns.langchain.com/svelte/#/deep-agent-ide" target="_blank">
            IDE-like UI with file browser, code viewer, and diff panel backed by a sandbox environment.
          </Card>

          <Card title="Graph Execution Cards" icon="layout-board" href="https://ui-patterns.langchain.com/svelte/#/graph-execution-cards" target="_blank">
            Timeline cards that visualize each LangGraph node as it executes in real time.
          </Card>

          <Card title="Markdown Messages" icon="file-description" href="https://ui-patterns.langchain.com/svelte/#/markdown-messages" target="_blank">
            Rich Markdown rendering with syntax-highlighted code blocks inside chat bubbles.
          </Card>

          <Card title="Branching Chat" icon="message" href="https://ui-patterns.langchain.com/svelte/#/branching-chat" target="_blank">
            Full chat interface with first-class branch navigation and history traversal.
          </Card>

          <Card title="Message Queues" icon="stack-2" href="https://ui-patterns.langchain.com/svelte/#/message-queues" target="_blank">
            Visualize message queue state and throughput for multi-step agent pipelines.
          </Card>

          <Card title="Subagent Streaming" icon="activity-heartbeat" href="https://ui-patterns.langchain.com/svelte/#/subagent-streaming" target="_blank">
            Stream output from multiple parallel subagents simultaneously with isolated windows.
          </Card>
        </CardGroup>
      </Tab>

      <Tab title="Angular" icon="brand-angular">
        <CardGroup cols={3}>
          <Card title="Tool Calling" icon="tool" href="https://ui-patterns.langchain.com/angular/#/tool-calling" target="_blank">
            Render agent tool calls as rich cards — calculator, weather, search, email and more.
          </Card>

          <Card title="Human in the Loop" icon="user-check" href="https://ui-patterns.langchain.com/angular/#/human-in-the-loop" target="_blank">
            Agent pauses and surfaces an approval card before taking a sensitive action.
          </Card>

          <Card title="Generative UI" icon="sparkles" href="https://ui-patterns.langchain.com/angular/#/generative-ui" target="_blank">
            Server-driven dynamic UI — the agent emits structured component payloads rendered live.
          </Card>

          <Card title="Reasoning Tokens" icon="brain" href="https://ui-patterns.langchain.com/angular/#/reasoning-tokens" target="_blank">
            Collapsible chain-of-thought blocks that stream thinking tokens before the final answer.
          </Card>

          <Card title="Structured Output" icon="table" href="https://ui-patterns.langchain.com/angular/#/structured-output-latex" target="_blank">
            Agent returns typed structured data rendered with LaTeX math support.
          </Card>

          <Card title="Time Travel" icon="clock-backward" href="https://ui-patterns.langchain.com/angular/#/time-travel" target="_blank">
            Branch conversation history and replay from any checkpoint using LangChain state.
          </Card>

          <Card title="Join / Rejoin" icon="git-merge" href="https://ui-patterns.langchain.com/angular/#/join-rejoin" target="_blank">
            Visualize fan-out/fan-in parallel subgraph execution with merge indicators.
          </Card>

          <Card title="Async Iterator Tools" icon="bolt" href="https://ui-patterns.langchain.com/angular/#/async-iterator-tools" target="_blank">
            Stream incremental tool progress using async iterators with live progress cards.
          </Card>

          <Card title="Deep agent — Subagent Cards" icon="share" href="https://ui-patterns.langchain.com/angular/#/deep-agent-subagent-cards" target="_blank">
            Hierarchical activity cards for Deep Research-style multi-subagent orchestration.
          </Card>

          <Card title="Deep agent — Todo List" icon="list-check" href="https://ui-patterns.langchain.com/angular/#/deep-agent-todo-list" target="_blank">
            Agent builds and checks off a live todo list while executing a long-running task.
          </Card>

          <Card title="Deep agent — Sandbox" icon="code" href="https://ui-patterns.langchain.com/angular/#/deep-agent-ide" target="_blank">
            IDE-like UI with file browser, code viewer, and diff panel backed by a sandbox environment.
          </Card>

          <Card title="Graph Execution Cards" icon="layout-board" href="https://ui-patterns.langchain.com/angular/#/graph-execution-cards" target="_blank">
            Timeline cards that visualize each LangGraph node as it executes in real time.
          </Card>

          <Card title="Markdown Messages" icon="file-description" href="https://ui-patterns.langchain.com/angular/#/markdown-messages" target="_blank">
            Rich Markdown rendering with syntax-highlighted code blocks inside chat bubbles.
          </Card>

          <Card title="Branching Chat" icon="message" href="https://ui-patterns.langchain.com/angular/#/branching-chat" target="_blank">
            Full chat interface with first-class branch navigation and history traversal.
          </Card>

          <Card title="Message Queues" icon="stack-2" href="https://ui-patterns.langchain.com/angular/#/message-queues" target="_blank">
            Visualize message queue state and throughput for multi-step agent pipelines.
          </Card>

          <Card title="Subagent Streaming" icon="activity-heartbeat" href="https://ui-patterns.langchain.com/angular/#/subagent-streaming" target="_blank">
            Stream output from multiple parallel subagents simultaneously with isolated windows.
          </Card>
        </CardGroup>
      </Tab>
    </Tabs>

    ## UI Framework Integrations

    Drop-in UI component libraries built to work with `@langchain/react` out of the box.

    <CardGroup cols={1}>
      <Card title="ai-elements" icon="package" href="https://ui-patterns.langchain.com/ai-elements/" cta="Open preview" target="_blank">
        Headless, composable React components for building AI chat UIs. Uses [`useStream`](https://reference.langchain.com/javascript/langchain-react/index/useStream) under the hood with full shadcn/ui compatibility.

        * Scroll-sticky conversation container
        * Streaming code blocks with syntax highlighting
        * Collapsible reasoning / thinking blocks
        * Tool call display with args & results
        * Shimmer loading states & suggestion chips
      </Card>

      <Card title="assistant-ui" icon="package" href="https://ui-patterns.langchain.com/assistant-ui/" cta="Open preview" target="_blank">
        A Claude-style assistant UI built with `@assistant-ui/react` primitives wired to LangChain via `useExternalStoreRuntime`.

        * Claude-style warm parchment theme
        * Chain-of-thought collapsible reasoning
        * Image attachment support
        * Copy / thumbs-up / thumbs-down action bar
        * Full dark mode support
      </Card>

      <Card title="OpenUI" icon="package" href="https://ui-patterns.langchain.com/openui/" cta="Open preview" target="_blank">
        Generative UI chat where a LangChain agent emits arbitrary React components as part of the message stream — rendered live in the browser.

        * Agent-driven dynamic component rendering
        * Streaming message composition
        * Custom component registry
        * Live preview of generated interfaces
      </Card>
    </CardGroup>
  </div>
</div>

***

<div className="source-links">
  <Callout icon="terminal-2">
    [Connect these docs](/use-these-docs) to Claude, VSCode, and more via MCP for real-time answers.
  </Callout>

  <Callout icon="edit">
    [Edit this page on GitHub](https://github.com/langchain-ai/docs/edit/main/src/playground.mdx) or [file an issue](https://github.com/langchain-ai/docs/issues/new/choose).
  </Callout>
</div>