Learn by watching a conversation

A response arrives over time

An agent conversation is a sequence of observations. The traveler sends a message, the application starts a request, and the answer arrives in pieces. The interface can display those pieces before the response is complete.

The video above shows that behavior in the React streaming example. In this lesson, you will use a trip conversation to inspect what changes between the first action and the completed answer.

Separate actions from observations

An action asks the application to do something: submit a message, stop an active request, or open a conversation. An observation describes what the application currently knows: its messages, whether an operation is active, and the outcome it has received.

Keep the application responsible for actions. Let the view observe snapshots and render them. A partially written answer is still an observation; its presence does not prove that the request succeeded. The completion outcome is a separate piece of information.

Follow one turn

A turn begins with a user action and ends when the application knows its outcome. The submitted message, the response text, and the work in progress describe different parts of that turn. Several updates can extend the same assistant message; each update does not need a new chat bubble.

Receiving text tells you that part of a response arrived. It does not tell you that the turn completed successfully. Keep the progress indicator tied to the application's busy state, and inspect the final outcome separately. Stopping a response and losing the connection are different outcomes too.

Meet the trip notebook

The workbench below records a prompt about a supplied Paris itinerary and a streamed response. In Example session, choose Recorded example, then Play, pause halfway through, and step backward. The conversation and inspector follow the same observation.

1// eslint-disable-next-line @nx/enforce-module-boundaries -- The isolated consumer copies this internal example layout.2import { ExampleFooter, ExampleLayout } from '../../../../shared/react-example';3import { useEffect, useRef, useState } from 'react';4import { useAgent } from '@threadplane/react';5import { ChatInput, MessageList } from '@threadplane/react/chat';6import { createStreamingInspection } from './inspection';7import type { InspectionFrame } from './inspection';8import {9  createConnectedApplication,10  type streamingConnection,11} from './connection';12 13export function StreamingDemo({14  connection,15  onReady,16  onInspection,17}: {18  readonly connection: ReturnType<typeof streamingConnection>;19  readonly onReady: () => void;20  readonly onInspection?: (frame: InspectionFrame) => void;21}) {22  const publisher = useRef(onInspection);23  publisher.current = onInspection;24  const [inspection] = useState(() =>25    createStreamingInspection((frame) => publisher.current?.(frame))26  );27  const [application, setApplication] = useState(() =>28    createConnectedApplication(connection)29  );30  const [resetting, setResetting] = useState(false);31  const [generation, setGeneration] = useState(0);32  const live = useRef(true);33  const snapshot = useAgent(application);34  useEffect(() => inspection.attach(application), [application, inspection]);35  useEffect(() => {36    onReady();37  }, [onReady]);38  useEffect(39    () => () => {40      void application.dispose();41    },42    [application]43  );44  useEffect(45    () => () => {46      live.current = false;47      inspection.dispose();48    },49    [inspection]50  );51 52  async function reset() {53    if (snapshot.busy || resetting) return;54    setResetting(true);55    inspection.reset();56    await application.dispose();57    if (!live.current) return;58    setApplication(createConnectedApplication(connection));59    setGeneration((value) => value + 1);60    setResetting(false);61  }62 63  const status = snapshot.busy64    ? snapshot.creation === 'pending'65      ? 'Creating conversation…'66      : 'Receiving response…'67    : snapshot.outcome === 'success'68    ? 'Response complete.'69    : snapshot.outcome === 'aborted'70    ? 'Stopped. Start a new conversation to continue.'71    : !snapshot.canSubmit72    ? 'Start a new conversation to continue.'73    : 'Ready.';74 75  return (76    <ExampleLayout className="streaming-demo">77      <header>78        <div>79          <h1>LangGraph streaming</h1>80        </div>81        <button82          type="button"83          disabled={snapshot.busy || resetting}84          onClick={() => void reset()}85        >86          New conversation87        </button>88      </header>89      <p>Watch an answer arrive as the agent writes it.</p>90      <MessageList rows={snapshot.rows} label="Conversation" />91      <ExampleFooter>92        {snapshot.error && <p role="alert">{snapshot.error}</p>}93        <ChatInput94          key={generation}95          label="Message"96          placeholder="Ask about LangGraph…"97          disabled={resetting || (!snapshot.canSubmit && !snapshot.busy)}98          busy={snapshot.busy}99          onStop={snapshot.busy ? () => void application.stop() : undefined}100          onSubmit={(text) => {101            if (!application.getSnapshot().canSubmit) return false;102            void inspection.submit(application, text);103          }}104        />105        <p role="status">{status}</p>106      </ExampleFooter>107    </ExampleLayout>108  );109}110 

  const snapshot = useAgent(application);

This is a real SDK/session capture with deterministic fixture responses, not a live model conversation. The shared teaching trace uses the React example’s application owner; selecting a framework changes the video and source links, not the recorded frontend. Replay reads captured observations and sends no requests. The trip response does not demonstrate itinerary edits or client tools.

Try a live conversation

Choose Live conversation to mount the real React streaming application. Send a prompt about your trip in that application. The inspector follows its messages and state as they change. Runtime settings lets you use the shared development target or your own LangGraph deployment; changing targets starts a fresh live session.

Select an observation or move the timeline to inspect history. The running application stays mounted while the workbench shows a read-only snapshot. Return to live reveals the same conversation without submitting again. Use the application’s own controls to stop a response or start a new conversation.

In live mode, Requests shows Application calls: the observed submit input and whether that invocation is pending, settled, or rejected. Settled means the call returned, not that the model succeeded; read the application’s state for the outcome. HTTP and provider requests are not captured in live mode. Capture stays in this page’s memory and is bounded; the inspector tells you when older observations or long fields are omitted.

Read the workbench

1. In Events, select the initial application snapshot. State shows the application’s creation, busy, canSubmit, and outcome fields. Before the initial snapshot, the state is unavailable; it is not an empty object.
2. Move forward until the request begins. Requests shows the application HTTP request to the local fixture server. A response status appears only after its headers were observed. Provider/model requests were not captured.
3. Find a partial answer in the conversation. Messages shows the captured message text at that same point. Move backward to see the earlier text restored.
4. Move to the final observation. Compare the completed text with the settled busy and outcome fields. Playback visits these snapshots at a reading pace; the millisecond offsets in Events describe the capture, not a performance benchmark.

The State panel describes the recorded application owner’s fields. These are example application fields, not a promise that every Threadplane framework exposes the same public API.

Follow it into your application

Choose View example source in the workbench to read the actual React streaming files. Your selected session stays active; use Return to recorded example or Return to live conversation to resume inspection at the same observation. The highlighted line observes the application with useAgent(application); rendering a new snapshot does not submit another request. See it run below the panel returns to the partial-response moment in the recording. View source opens the matching implementation.

In app.tsx, follow the snapshot into MessageList and the busy state into ChatInput. Follow the input's submit and stop handlers back to the application. The application owns commands and cleanup; the view renders observations.

The native React packages are experimental, private source-build packages. These lesson files are real repository examples, not a public npm installation recipe.

These controls inspect this guide’s example. Continue with the React streaming example and use the page-level Docs, Run, Code, and API controls to explore the complete project and connect it to your backend.

The same trip notebook will give later lessons a familiar place to explain tools, approvals, and saved conversations.

Continue with Conversation turns for the vocabulary behind these observations. To work from a checkout, follow Installation and Quickstart. The chat quickstart then follows the same ownership boundary into message presentation and controls.