Follow a React conversation
A traveler asks for a weekend itinerary. The application submits the message, the backend streams an answer, and the view updates as observations arrive. Later, a saved conversation can restore that history.
The React APIs described here are experimental, private source-build packages. The learning workbench makes these observations inspectable without requiring a public package installation.
Name the boundaries
Read diagram description
The application renders messages, input and tools. Angular observes agent signals; React observes an application-owned session through useAgent. The Threadplane adapter sends commands and translates streamed events. LangGraph runs the model and server tools. A checkpointer stores thread state on the server. Keeping a thread ID in the browser lets the application find that state again; it does not store the conversation itself.
| Term | Meaning |
|---|---|
| Conversation or thread | The identity and history shared across related user turns. |
| Turn | One user intention and the work needed to answer it, including continuations. |
| Run | A backend execution; a turn may need more than one run. |
| Model call | A backend request to a language model, possibly followed by tools and another model call. |
| HTTP request | One transport operation, such as creating a thread, streaming a run, or reading history. |
| Message | An identified user, assistant, system, or tool transcript entry. |
| Snapshot | The owner's current immutable observation, which may include partial messages and progress. |
A token is not a new turn. Several snapshots may extend one message. A tool result is not necessarily the final answer, and a closed transport does not prove backend success.
Submit once, observe many times
- Person → ApplicationAsk for a three-day trip plan.This starts one user turn.
- Application → RuntimeSubmit a message on a confirmed thread.The adapter starts an agent run.
- Runtime → Model / toolsPlan, look up information and continue.One turn can contain several model and tool calls.
- Runtime → Threadplane → UIStream message and state updates.The response is built incrementally; a chunk is not a new turn.
- Runtime → StorageSave state when the backend supports it.LangGraph checkpoints belong to the thread.
- Threadplane → ApplicationShow the final answer and settled status.The next user message starts the next turn.
Read diagram description
Read top to bottom. A person asks for a trip plan. The application submits their message to a confirmed thread. An agent run can invoke a model and tools more than once. Threadplane observes streamed message and state events and the UI updates as they arrive. Persistence depends on the backend: LangGraph can save checkpoints during execution; the AG-UI protocol alone does not provide storage. When the run settles, the UI shows the answer. The next user message starts another turn; a tool result or streamed token does not.
The streaming example keeps the draft in ChatInput. Send calls the application owner. The owner confirms thread creation, submits to its session, projects messages, and publishes snapshots. useAgent(application) reads those snapshots; MessageList renders their prepared rows.
Keep the progress indicator tied to the owner's busy state. Evaluate the response outcome separately. A fulfilled core submission may report failure, cancellation, interruption, or pause; a wrapper's fulfilled promise may only mean its handler finished.
Add tools and decisions deliberately
Tools introduce another boundary: observing a call does not authorize executing it. Partial arguments remain observations until the application accepts a complete, supported call. Client tools and interrupts demonstrate explicit execution and continuation policies.
Rendered UI also remains a view. A specification names registered components and supplies data; it cannot supply arbitrary JavaScript. Render quickstart starts with local authored samples.
Distinguish a visible answer from saved history
A successful stream and a confirmed history read are separate evidence. The persistence example checks saved messages before permitting continuation. A page-local identifier alone is not a persistence guarantee.
The canonical native React chat under examples/chat/native/react combines conversation selection, owned content, and trip presentation. Focused guides each demonstrate a smaller supported boundary. Use their actual contracts rather than assuming every example offers the full workflow.