See it in action.
Explore working examples. Pick a capability, run it, and make it yours.
82 examples
AG-UI A2UI
The protocol layer for A2UI messages, taught through the flight-booking demo whose agent authors every surface and streams it as v0.9 JSONL.
Run exampleAG-UI A2UI (React preview)
Turn a flight request into a form the traveler can edit.
Run exampleAG-UI Client Tools
Declare a tool in the Angular app, let an AG-UI agent call it, and submit the result back to continue the run with no server-side implementation.
Run exampleAG-UI Client Tools (React preview)
Allow an AG-UI agent to request browser capabilities, including simulated weather and a person’s booking decision.
Run exampleAG-UI Interrupts
Approve and cancel AG-UI interrupts with generation-aware controls, native batches, and application-owned persistence and recovery
Run exampleAG-UI Interrupts (React preview)
Let a person review a fictional refund before the backend continues.
Run exampleAG-UI JSON Render
Stream a json-render UI spec with AG-UI shared state and let @threadplane/render resolve $state bindings into a live Angular component tree.
Run exampleAG-UI JSON Render (React preview)
Let the agent choose a dashboard layout while React supplies the components and data bindings.
Run exampleAG-UI Streaming
How the adapter turns AG-UI protocol events into Angular Signals, walked through the streaming example and then listed event by event.
Run exampleAG-UI Streaming (React preview)
Watch an AG-UI backend turn a question into an answer one event at a time.
Run exampleAG-UI Subagents
Show an AG-UI agent's delegated child runs as attributed subagent cards with their own tool calls and messages.
Run exampleAG-UI Subagents (React preview)
Follow research, booking, and itinerary specialists inside one trip-planning conversation.
Run exampleAG-UI Tool Views
Render an AG-UI tool call's plain data through a component the frontend owns, keyed by tool name, with no UI spec crossing the wire.
Run exampleAG-UI Tool Views (React preview)
Display a weather lookup as an application component while the agent writes its answer.
Run exampleChat A2UI
How the flight-booking demo streams A2UI surfaces into the chat composition, and how chat detects them, renders them, and returns actions to the agent.
Run exampleChat A2UI (React preview)
Let the agent offer a flight-search form, then let the traveler edit it before submitting an action.
Run exampleChat Debug
How the debug example mounts the chat-debug panel against a multi-node LangGraph agent, plus the panel inputs, outputs, sidenav integration and bundle gate.
Run exampleChat Debug (React preview)
Inspect the state behind a conversation without changing it.
Run exampleChat Generative UI
How the generative UI example authors a dashboard spec as message content, streams the data as state updates, and renders it through a views registry.
Run exampleChat Generative UI (React preview)
Render an airline dashboard inside a conversation using components your application owns.
Run exampleChat Input
How the input example wires chat-input to a streaming agent, plus the component inputs, outputs, keyboard handling, projection slots and styling hooks.
Run exampleChat Input (React preview)
Let the traveler write the next question while the current answer arrives.
Run exampleChat Interrupts
How the interrupts example pauses a flight booking at interrupt() and resumes it from the panel's Accept and Ignore buttons, plus the component API
Run exampleChat Interrupts (React preview)
Place a booking decision beside the conversation that requested it.
Run exampleChat Messages
How the messages example renders one template per role, plus the runtime-neutral message shape, delivery lifecycle, content, tool calls and citations.
Run exampleChat Messages (React preview)
Render a conversation from stable message rows, then choose how each row looks.
Run exampleChat Subagents
How the subagents example dispatches task calls to real subgraphs, and the Subagent contract the card reads to render each dispatch inline
Run exampleChat Subagents (React preview)
Show specialist activity without blending every child answer into the main transcript.
Run exampleChat Theming
How the theming example swaps --tplane-chat-* custom properties at runtime, where the token defaults come from, and how to override them in your app.
Run exampleChat Theming (React preview)
Give the same conversation a different visual theme without replacing its session.
Run exampleChat Threads
How the threads example lists, switches, creates, and removes conversations, and how injectThreadRouting binds the active thread to the URL
Run exampleChat Threads (React preview)
Give each trip its own conversation and draft.
Run exampleChat Timeline
How the timeline example mounts the surface that hosts trace rows, plus the chat-trace inputs, slots, expansion rules and styling hooks.
Run exampleChat Timeline (React preview)
Browse how a conversation changed over time, then choose whether to continue from its present or fork from an earlier checkpoint.
Run exampleChat Tool Calls
How the tool-calls example renders an aviation agent's calls in a sidebar panel, plus grouping, per-tool templates and the component API.
Run exampleChat Tool Calls (React preview)
Show the lookups behind an answer without asking readers to infer them from prose.
Run exampleLangGraph Client Tools
Declare tools in the browser, ship the catalog to a LangGraph graph as client_tools, and carry each browser-produced result back into the run.
Run exampleLangGraph Client Tools (React preview)
Give the agent access to a capability in the browser, such as reading a selected itinerary day or showing a weather card.
Run exampleDeep Agents Filesystem
How the Deep Agents filesystem example keeps the agent workspace on graph state and pauses writes under /reports/ for human approval
Run exampleDeep Agents Memory
Agent-authored memory shared across conversations under a captured browser identity, with fresh read-time observations.
Run exampleDeep Agents Planning
Render evolving todo plans with TodoListMiddleware. Angular is the default; the native React preview shows live and saved plans on the same Python graph.
Run exampleDeep Agents Skills
SkillsMiddleware puts a skill's name, description, and instruction path in the prompt, leaving its body on the backend until requested.
Run exampleDeep Agents Subagents
Register specialists on the task tool and inspect delegation through the Angular example or native React preview.
Run exampleFilesystem (React preview)
Show the files an agent is working with and ask for a decision before protected changes.
Run exampleMemory (React preview)
Teach an agent a fact, then see whether it can recall that fact in another interaction.
Run examplePlanning (React preview)
Make an agent’s plan visible while it works.
Run exampleSkills (React preview)
Load detailed instructions only when the agent needs them.
Run exampleSubagents (React preview)
Let an orchestrator delegate focused work while the user keeps one conversation.
Run exampleLangGraph Deployment Runtime
How the deployment example packages a graph and points an Angular app at it, plus authentication, CORS, error handling, CI, and monitoring
Run exampleLangGraph Deployment Runtime (React preview)
The same conversation UI can connect to a different LangGraph deployment when the application changes its connection configuration.
Run exampleLangGraph Durable Execution
Resume a LangGraph run after a crash, restart, or redeploy from its last checkpoint, and offer retry from the Angular UI.
Run exampleLangGraph Durable Execution (React preview)
A long answer may depend on several completed steps.
Run exampleLangGraph Interrupts
Pause and resume a LangGraph refund workflow, with typed payloads, captured-command retry, server checkpoint restoration, and timeout strategies
Run exampleLangGraph Interrupts (React preview)
Pause a proposed action long enough for a person to decide.
Run exampleLangGraph Memory
How the memory example keeps learned facts in graph state, extracts them after every reply, and renders them in a live sidebar with value()
Run exampleLangGraph Memory (React preview)
An assistant can use a preference from earlier in the conversation without asking for it again.
Run exampleLangGraph Persistence
How the persistence example lists, switches, and starts threads with onThreadId and switchThread, plus checkpointer choices and thread lifecycle
Run exampleLangGraph Persistence (React preview)
Keep the Portland itinerary when the traveler opens another conversation.
Run exampleLangGraph Streaming
How the streaming example wires a LangGraph graph to Angular signals, plus stream modes, status, error handling, and throttling
Run exampleLangGraph Streaming (React preview)
Let the traveler read an answer while it is being written.
Run exampleLangGraph Subgraphs
How the subgraphs example routes a turn into a compiled child graph, keeps the child's state and tokens out of the transcript, and streams the child.
Run exampleLangGraph Subgraphs (React preview)
A trip-planning agent can delegate research while keeping one conversation with the traveler.
Run exampleLangGraph Time Travel
How the time travel example checkpoints every turn, lists them in a timeline sidebar, and forks from one, plus the history signals and the branch tree.
Run exampleLangGraph Time Travel (React preview)
Inspect an earlier itinerary without replacing the current conversation.
Run exampleComponent Registry (React preview)
Decide which component names a generated layout may use.
Run exampleComputed Functions (React preview)
Transform values in a generated layout using a small set of functions your application provides.
Run exampleElement Rendering (React preview)
Render nested elements in the order described by a specification, including elements that depend on local state.
Run exampleRender Computed Functions
Register the registry, store, computed functions, and handlers that every render surface in an application uses by default.
Run exampleRender Element Rendering
How the element rendering example drives render-spec with a streaming spec, a registry and a store, plus the component inputs, outputs and resolution order.
Run exampleRender Registry
How the registry example maps four type names to Angular components, what a registered component receives as inputs, and how an element resolves at render time.
Run exampleRender Repeat Loops
How a spec element repeats itself over an array in the state store with repeat, $item and $index, and how the running example holds that array.
Run exampleRender Spec (React preview)
Describe a small interface as JSON and render it with your own React components.
Run exampleRender Spec Rendering
How the spec rendering example streams a JSON spec into a live component tree, plus the spec format: root, elements, props, children, visibility and repeat.
Run exampleRender State Management
How the state management example seeds a signal-backed store, resolves $state props against JSON Pointer paths, and re-renders when the host writes.
Run exampleRepeat Loops (React preview)
Use one component description to render every stop in an itinerary.
Run exampleState Management (React preview)
Update a rendered view by changing its data, without replacing the layout.
Run exampleAWS Strands meetings (React preview)
Review a proposed meeting with a Strands agent, then choose whether to continue.
Run exampleMastra reservations (React preview)
Connect a React conversation to a Mastra agent through AG-UI, including a human decision when the agent pauses.
Run exampleMicrosoft Agent Framework expenses (React preview)
Review a fictional expense with a Microsoft Agent Framework backend.
Run exampleRuntimes — AWS Strands
How the AWS Strands example books meetings over AG-UI, and why its shared-state support is measured as partial.
Run exampleRuntimes — Mastra
How the Mastra example is built, from the Node service that serves AG-UI events to the Angular component that renders them.
Run exampleRuntimes — Microsoft Agent Framework
How the Microsoft Agent Framework example is built, from the approval tool and predictive state on the Python side to the Angular component that renders both.
Run example