@assistant-ui/mcp-docs-server 0.1.30 → 0.1.32

package/.docs/raw/docs/{(docs)/guides → guides}/tools.mdx

@@ -1,6 +1,7 @@
 ---
-title: Tools
-description: Give your assistant actions like API calls, database queries, and more.
+title: Tool Calling
+description: Add API calls, database queries, and custom actions to your AI chat with assistant-ui's tool calling. Real-time visualization, type safety, and streaming.
+platforms: ["react"]
 ---
 
 Tools enable LLMs to take actions and interact with external systems. assistant-ui provides a comprehensive toolkit for creating, managing, and visualizing tool interactions in real-time.
@@ -24,9 +25,9 @@ When tools are executed, you can display custom generative UI components that pr
   creating your own Tool UI component for the tool's name.
 </Callout>
 
-## Recommended: Tools() API
+## Tools() API
 
-The `Tools()` API is the recommended way to register tools in assistant-ui. It provides centralized tool registration that prevents duplicate registrations and works seamlessly with all runtimes.
+The `Tools()` API is the recommended starting point for registering tools in assistant-ui. It provides centralized tool registration that prevents duplicate registrations and works seamlessly with all runtimes. For tools whose availability depends on a specific part of your UI being mounted, see the [component-based APIs](#component-based-apis) below; both styles are supported and can be mixed in the same app.
 
 ### Quick Start
 
@@ -99,6 +100,7 @@ type ToolDefinition =
       description?: string;
       parameters: StandardSchemaV1 | JSONSchema7; // e.g. a Zod schema
       execute: (args, context) => Promise<any>;
+      toModelOutput?: (opts) => ToolModelContentPart[]; // see "Multi-modal tool results"
       render?: (props) => React.ReactNode;
     }
   | {
@@ -115,6 +117,66 @@ type ToolDefinition =
     };
 ```
 
+### Multi-modal Tool Results
+
+By default, the value returned from `execute` is sent to the model as a single JSON blob. That is fine for most tools, but it does not work for tools whose useful output is a file or image: a "read PDF" tool, an OCR tool, a chart-rendering tool, etc.
+
+`toModelOutput` is an optional callback that maps the developer-facing `execute` result into the multi-modal content the model actually sees. Your `render` function still receives the rich, typed `result`; the model receives the projection.
+
+```tsx
+import { tool } from "@assistant-ui/react";
+import { convertUint8ArrayToBase64 } from "@ai-sdk/provider-utils";
+import { z } from "zod";
+
+const readPdfTool = tool({
+  description: "Fetch a PDF from a URL and return it",
+  parameters: z.object({ url: z.string().url() }),
+  execute: async ({ url }) => {
+    const res = await fetch(url);
+    const buf = new Uint8Array(await res.arrayBuffer());
+    const base64 = convertUint8ArrayToBase64(buf);
+    return { mediaType: "application/pdf", base64, byteLength: buf.byteLength };
+  },
+  toModelOutput: ({ output }) => [
+    { type: "text", text: "PDF contents:" },
+    {
+      type: "file",
+      data: output.base64,
+      mediaType: output.mediaType,
+    },
+  ],
+});
+```
+
+`ToolModelContentPart` is a union of `{ type: "text"; text }` and `{ type: "file"; data; mediaType; filename? }`. Use `mediaType` (e.g. `image/png`, `application/pdf`) to tell the model how to interpret the bytes.
+
+When using the AI SDK runtime, frontend tool results round-trip through the AI SDK chat protocol back to your route handler on the next turn. For `toModelOutput` to fire on those round-tripped results, your route handler must also pass the tool registry to `convertToModelMessages`. This is the [same pattern AI SDK documents](https://ai-sdk.dev/docs/reference/ai-sdk-ui/convert-to-model-messages#multi-modal-tool-responses) for any multi-modal tool response:
+
+```ts
+import { frontendTools } from "@assistant-ui/react-ai-sdk";
+import { convertToModelMessages, streamText } from "ai";
+
+const aiSDKTools = { ...frontendTools(tools ?? {}) };
+
+const result = streamText({
+  model,
+  // Pass tools to both calls. convertToModelMessages reads `toModelOutput`
+  // from `tools[toolName]` to project prior tool results.
+  messages: await convertToModelMessages(messages, { tools: aiSDKTools }),
+  tools: aiSDKTools,
+});
+```
+
+If you skip the `{ tools: aiSDKTools }` argument, prior tool results will be sent to the model as a plain JSON blob (the AI SDK default), and your `toModelOutput` will be silently ignored. Tools that do not declare `toModelOutput` are unaffected either way.
+
+<Callout type="warn">
+  **Reserved property name.** When `toModelOutput` is set, the runtime wraps the AI SDK chat output as `{ __aui_modelContent: ToolModelContentPart[], value: <your result> }` before persisting. Do not return objects whose top-level key is literally `__aui_modelContent` from any tool's `execute`, or it will be misread as the envelope. The prefix is namespaced for this reason; any other property name is fine.
+</Callout>
+
+<Callout type="warn">
+  **Read/write compatibility for persisted threads.** The `__aui_modelContent` envelope is recognized by `@assistant-ui/react-ai-sdk` from this version onward. If you persist UI messages (thread history adapter, cloud, etc.) and read them from multiple environments, upgrade every reader before any writer starts producing `toModelOutput`. Older readers will treat the entire envelope as the `result`, which breaks tool `render` functions for those messages.
+</Callout>
+
 ### Organizing Large Toolkits
 
 For larger applications, split tools across multiple files:
@@ -207,6 +269,32 @@ execute: async (args, context) => {
 };
 ```
 
+### Cancellation
+
+`context.abortSignal` is an `AbortSignal` that fires when the user stops the run. Pass it to any async I/O so the work stops immediately:
+
+```tsx
+execute: async ({ query }, { abortSignal }) => {
+  const res = await fetch(`/api/search?q=${query}`, { signal: abortSignal });
+  return res.json();
+},
+```
+
+When using LangGraph with `unstable_createLangGraphStream`, the default `onDisconnect` value is already `"cancel"`, which tells the LangGraph server to cancel the run on abort:
+
+```ts
+import { unstable_createLangGraphStream } from "@assistant-ui/react-langgraph";
+
+const stream = unstable_createLangGraphStream({
+  client,
+  assistantId,
+  // onDisconnect defaults to "cancel"; the server cancels the run when the
+  // client disconnects or the user stops the message.
+});
+```
+
+See the [LangGraph quickstart](/docs/runtimes/langgraph/quickstart) for full setup.
+
 ### Human-in-the-Loop
 
 Tools can pause execution to request user input or approval:
@@ -260,15 +348,51 @@ const confirmationToolkit: Toolkit = {
 };
 ```
 
-## Alternative Methods (Legacy)
+### Streaming Tool Args
 
-<Callout type="warning">
-  The following methods are supported for backwards compatibility but are not
-  recommended for new code. They can cause duplicate registration errors and are
-  harder to maintain. Use the `Tools()` API instead.
+While a tool is running, its arguments arrive as partial JSON. Use `useToolArgsStatus` inside a tool UI render function to react to each top-level field as it streams in. The hook is exported from `@assistant-ui/react`.
+
+```tsx
+import { useToolArgsStatus } from "@assistant-ui/react";
+
+const SearchToolUI = makeAssistantToolUI<{ query: string; limit: number }, unknown>({
+  toolName: "search",
+  render: ({ args }) => {
+    const { propStatus } = useToolArgsStatus<{ query: string; limit: number }>();
+
+    return (
+      <div>
+        <span className={propStatus.query === "streaming" ? "animate-pulse" : ""}>
+          {args.query ?? "..."}
+        </span>
+        {propStatus.limit === "complete" && <span> (limit: {args.limit})</span>}
+      </div>
+    );
+  },
+});
+```
+
+`propStatus` maps each top-level key in the args object to `"streaming"` while it is still being parsed and to `"complete"` once that field is fully present.
+
+## Component-Based APIs
+
+`makeAssistantTool`, `useAssistantTool`, and `makeAssistantToolUI` are component-and-hook-based APIs that coexist with the [`Tools()`](#tools-api) toolkit pattern. They are fully supported and the natural fit for the [intelligent components](/docs/copilots/motivation) pattern, where each part of your UI registers the tools it owns when it is mounted, for example a product-specific tool that should only be exposed while that product's screen is open.
+
+<Callout type="info">
+  Be careful not to register the same tool from both APIs at once: each API
+  registers under `toolName`, and duplicate registrations will be rejected.
 </Callout>
 
-### Using `makeAssistantTool` (Deprecated)
+<Callout type="warn">
+  Tool **execution** can be registered dynamically (when a component mounts),
+  but tool **UI** should generally be pre-registered. A `render` function that
+  is only registered while a specific component is mounted will not render
+  when chat history is replayed or during server-side rendering. Either
+  declare the tool's `render` in a `Tools()` toolkit, or mount
+  `makeAssistantToolUI` near the root of your tree.
+</Callout>
+
+### Using `makeAssistantTool`
 
 Register tools with the assistant context. Returns a React component that registers the tool when rendered:
 
@@ -303,9 +427,9 @@ function App() {
 }
 ```
 
-**Why this is deprecated**: Component-based registration can lead to duplicate registrations if components are remounted or if the same tool is defined in multiple places.
+Tradeoff: component-based registration is tied to React lifecycle, so the tool is registered when the component mounts and unregistered when it unmounts. Take care not to remount it accidentally if you also register the same tool elsewhere.
 
-### Using `useAssistantTool` Hook (Deprecated)
+### Using the `useAssistantTool` Hook
 
 Register tools dynamically using React hooks:
 
@@ -329,9 +453,9 @@ function DynamicTools() {
 }
 ```
 
-**Why this is deprecated**: Hook-based registration ties tool definitions to component lifecycle, making them harder to test and potentially causing duplicate registrations.
+Tradeoff: like `makeAssistantTool`, the registration follows the component lifecycle. Useful for dynamic tools that depend on component state or props.
 
-### Using `makeAssistantToolUI` (Deprecated)
+### Using `makeAssistantToolUI`
 
 Create UI-only components for tools defined elsewhere:
 
@@ -365,7 +489,7 @@ function App() {
 }
 ```
 
-**Why this is deprecated**: Component-based UI registration can cause issues with tool UI not appearing or appearing multiple times.
+Tradeoff: like the other component-based APIs, the UI is registered while the component is mounted. Useful when the tool UI needs access to surrounding component state or context.
 
 ## Tool Paradigms
 
@@ -391,37 +515,32 @@ const frontendToolkit: Toolkit = {
 
 ### Backend Tools
 
-Tools executed server-side:
+Tools executed server-side live in your API route. A minimal example with the AI SDK:
+
+```ts title="@/app/api/chat/route.ts"
+import { openai } from "@ai-sdk/openai";
+import { streamText, convertToModelMessages, tool, zodSchema } from "ai";
+import { z } from "zod";
 
-```tsx
-// Backend route (AI SDK)
 export async function POST(req: Request) {
   const { messages } = await req.json();
-
   const result = streamText({
-    model: openai("gpt-4o"),
+    model: openai("gpt-5.4-nano"),
     messages: await convertToModelMessages(messages),
     tools: {
-      queryDatabase: {
+      queryDatabase: tool({
         description: "Query the application database",
-        inputSchema: zodSchema(
-          z.object({
-            query: z.string(),
-            table: z.string(),
-          }),
-        ),
-        execute: async ({ query, table }) => {
-          const results = await db.query(query, { table });
-          return results;
-        },
-      },
+        inputSchema: zodSchema(z.object({ query: z.string(), table: z.string() })),
+        execute: async ({ query, table }) => db.query(query, { table }),
+      }),
     },
   });
-
   return result.toUIMessageStreamResponse();
 }
 ```
 
+For the full AI SDK v6 backend setup including multi-step tool calls, frontend tools, history persistence with `withFormat`, and more, see the [AI SDK v6 guide](/docs/runtimes/ai-sdk/v6).
+
 ### Client-Defined Tools with frontendTools
 
 The Vercel AI SDK adapter implements automatic serialization of client-defined tools. Tools registered via the `Tools()` API are automatically included in API requests:
@@ -461,7 +580,7 @@ export async function POST(req: Request) {
   const { messages, tools } = await req.json();
 
   const result = streamText({
-    model: openai("gpt-4o"),
+    model: openai("gpt-5.4-nano"),
     messages: await convertToModelMessages(messages),
     tools: {
       ...frontendTools(tools), // Client-defined tools
@@ -500,7 +619,7 @@ export async function POST(req: Request) {
     const tools = await client.tools();
 
     const result = streamText({
-      model: openai("gpt-4o"),
+      model: openai("gpt-5.4-nano"),
       tools,
       messages: await convertToModelMessages(messages),
     });
@@ -512,9 +631,47 @@ export async function POST(req: Request) {
 }
 ```
 
+## LangGraph subgraph events
+
+When a LangGraph graph contains sub-agents (nested subgraphs), events from those subgraphs arrive with a `metadata.namespace` field identifying the originating subgraph. Pass event handlers to `useLangGraphRuntime` (or `useLangGraphMessages`) to react to them:
+
+```ts
+const runtime = useLangGraphRuntime({
+  stream,
+  eventHandlers: {
+    onSubgraphValues: (namespace, values) => {
+      console.log("subgraph", namespace, "state:", values);
+    },
+    onSubgraphUpdates: (namespace, updates) => {
+      console.log("subgraph", namespace, "updates:", updates);
+    },
+    onSubgraphError: (namespace, error) => {
+      console.error("subgraph", namespace, "error:", error);
+    },
+  },
+});
+```
+
+`namespace` is a pipe-separated string like `"parent|child_agent"`. Messages emitted by a subgraph include `metadata.namespace` so you can attribute tool results to the correct sub-agent.
+
+## `useLangChainState`
+
+When using `@assistant-ui/react-langchain` (`useStreamRuntime`), the `useLangChainState` hook lets you read any key from the current LangChain/LangGraph state on the client without a separate API call:
+
+```tsx
+import { useLangChainState } from "@assistant-ui/react-langchain";
+
+function TodoSidebar() {
+  const todos = useLangChainState<string[]>("todos", []);
+  return <ul>{todos.map((t) => <li key={t}>{t}</li>)}</ul>;
+}
+```
+
+The second argument is an optional default value. The hook re-renders whenever the state key changes during a stream.
+
 ## Best Practices
 
-1. **Use Tools() API**: Always prefer the `Tools()` API over legacy component/hook-based registration
+1. **Pick one registration style per tool**: avoid registering the same tool through both the `Tools()` toolkit and a component-based API; both routes will register, and duplicates are rejected
 2. **Centralize Definitions**: Keep all tools in a toolkit file for easy management
 3. **Clear Descriptions**: Write descriptive tool descriptions that help the LLM understand when to use each tool
 4. **Parameter Validation**: Use Zod schemas to ensure type safety
@@ -524,9 +681,9 @@ export async function POST(req: Request) {
 8. **Performance**: Use abort signals for cancellable operations
 9. **Testing**: Test tools in isolation and with the full assistant flow
 
-## Migration from Legacy APIs
+## Switching from Component-Based to Toolkit
 
-To migrate from legacy APIs to the `Tools()` API:
+If you prefer the toolkit shape, switching is mechanical:
 
 1. **Create a toolkit object** with all your tools
 2. **Move tool definitions** from `makeAssistantTool`/`useAssistantTool` calls into the toolkit
@@ -537,7 +694,7 @@ To migrate from legacy APIs to the `Tools()` API:
 Example migration:
 
 ```tsx
-// Before (Legacy)
+// Component-based API
 const WeatherTool = makeAssistantTool({
   toolName: "getWeather",
   description: "Get weather",
@@ -554,7 +711,7 @@ function App() {
   );
 }
 
-// After (Recommended)
+// Toolkit API
 const toolkit: Toolkit = {
   getWeather: {
     description: "Get weather",

package/.docs/raw/docs/{(docs)/guides → guides}/voice.mdx

@@ -1,6 +1,7 @@
 ---
-title: Realtime Voice
-description: Bidirectional realtime voice conversations with AI agents.
+title: Realtime Voice Chat
+description: Build bidirectional voice conversations with AI in React — realtime audio streaming, interruption handling, and visual state, integrated via assistant-ui.
+platforms: ["react"]
 ---
 
 import { VoiceSample } from "@/components/docs/samples/voice";
@@ -63,6 +64,10 @@ const { connect, disconnect, mute, unmute } = useVoiceControls();
 
 ## UI Example
 
+<Callout type="info">
+  For a ready-made control bar with a voice orb and call controls, see the [Voice component](/docs/ui/voice).
+</Callout>
+
 ```tsx
 import { useVoiceState, useVoiceControls } from "@assistant-ui/react";
 import { PhoneIcon, PhoneOffIcon, MicIcon, MicOffIcon } from "lucide-react";
@@ -301,6 +306,40 @@ const runtime = useChatRuntime({
 });
 ```
 
+## Using `createVoiceSession`
+
+`createVoiceSession` is a helper that eliminates the manual `Set<callback>` boilerplate shown in the ElevenLabs example above. Pass it an async `setup` function that receives a `helpers` object and returns `{ disconnect, mute, unmute }`. The helper wires up all callback sets, status tracking, and abort-signal handling for you.
+
+```tsx title="lib/my-voice-adapter.ts"
+import { createVoiceSession, type RealtimeVoiceAdapter } from "@assistant-ui/react";
+
+export class MyVoiceAdapter implements RealtimeVoiceAdapter {
+  connect(options: { abortSignal?: AbortSignal }): RealtimeVoiceAdapter.Session {
+    return createVoiceSession(options, async (helpers) => {
+      // Connect to your provider
+      const client = await MyVoiceClient.connect();
+
+      client.on("open", () => helpers.setStatus({ type: "running" }));
+      client.on("close", () => helpers.end("finished"));
+      client.on("error", (err) => helpers.end("error", err));
+
+      client.on("transcript", (item) => helpers.emitTranscript(item));
+      client.on("mode", (mode) => helpers.emitMode(mode));
+      client.on("volume", (v) => helpers.emitVolume(v));
+
+      // Return controls — createVoiceSession calls these on disconnect/mute/unmute
+      return {
+        disconnect: () => client.close(),
+        mute: () => client.setMuted(true),
+        unmute: () => client.setMuted(false),
+      };
+    });
+  }
+}
+```
+
+The `helpers` object exposes `setStatus`, `end`, `emitTranscript`, `emitMode`, `emitVolume`, and `isDisposed`. When `isDisposed()` is true the session has been torn down and you can skip further event handling.
+
 ## Example: LiveKit
 
 [LiveKit](https://livekit.io/) provides realtime voice via WebRTC rooms with transcription support. Unlike fully-hosted agent services, LiveKit follows a "bring-your-own-agent" model: the browser adapter only joins a room, and you run a separate **agent worker** that joins the same room and handles STT, LLM, and TTS. Without an agent in the room, the client will connect successfully but have nothing to talk to.

package/.docs/raw/docs/ink/adapters.mdx

@@ -1,10 +1,46 @@
 ---
 title: Adapters
-description: Title generation adapters for React Ink.
+description: Title generation and storage adapters for React Ink.
 ---
 
 Adapters customize runtime behavior. They can be passed as options to `useLocalRuntime` or `useRemoteThreadListRuntime`.
 
+## createFileStorageAdapter
+
+A `RemoteThreadListAdapter` that persists threads and messages to a local directory. See [Custom Backend → Option 2](/docs/ink/custom-backend#option-2-local-file-persistence) for usage.
+
+```ts
+import { createFileStorageAdapter } from "@assistant-ui/react-ink";
+
+const adapter = createFileStorageAdapter({
+  dir: "/path/to/threads",
+});
+```
+
+## TitleGenerationAdapter
+
+Produces a thread title from a thread's messages. Pass one as the `titleGenerator` option to `createFileStorageAdapter`, or call it from a custom `RemoteThreadListAdapter`.
+
+```ts
+type TitleGenerationAdapter = {
+  generateTitle(messages: readonly ThreadMessage[]): Promise<string>;
+};
+```
+
+`createSimpleTitleAdapter` is the built-in implementation; it derives the title from the first user message, truncated to 50 characters.
+
+```ts
+import {
+  createFileStorageAdapter,
+  createSimpleTitleAdapter,
+} from "@assistant-ui/react-ink";
+
+const adapter = createFileStorageAdapter({
+  dir: "/path/to/threads",
+  titleGenerator: createSimpleTitleAdapter(),
+});
+```
+
 ## RemoteThreadListAdapter
 
 Title generation is configured via the `generateTitle` method on `RemoteThreadListAdapter`. See the [Custom Backend](/docs/ink/custom-backend) page for a full example.

package/.docs/raw/docs/ink/custom-backend.mdx

@@ -59,7 +59,57 @@ This gives you:
 - In-memory thread list (lost on process exit)
 - Multi-thread support
 
-## Option 2: Full backend thread management
+## Option 2: Local file persistence
+
+When you want threads and messages to survive across sessions without running a backend, use `createFileStorageAdapter`. It writes each thread to a JSON file on disk and plugs into `useRemoteThreadListRuntime`.
+
+```tsx title="app.tsx"
+import { join } from "node:path";
+import { homedir } from "node:os";
+import {
+  useLocalRuntime,
+  useRemoteThreadListRuntime,
+  createFileStorageAdapter,
+  AssistantRuntimeProvider,
+} from "@assistant-ui/react-ink";
+import { myChatAdapter } from "./adapters/my-chat-adapter.js";
+
+const threadListAdapter = createFileStorageAdapter({
+  dir: join(homedir(), ".my-cli", "threads"),
+});
+
+function useAppRuntime() {
+  return useRemoteThreadListRuntime({
+    runtimeHook: () => useLocalRuntime(myChatAdapter),
+    adapter: threadListAdapter,
+  });
+}
+
+export function App() {
+  const runtime = useAppRuntime();
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      {/* your chat UI */}
+    </AssistantRuntimeProvider>
+  );
+}
+```
+
+Writes are atomic (temp file + `rename`), so a crash mid-write cannot leave a partial JSON file. The directory is created lazily on first write.
+
+### Options
+
+| Option | Description |
+|---|---|
+| `dir` | Directory where thread files are stored. Created if missing. |
+| `prefix` | Key prefix for stored files. Defaults to `@assistant-ui:`. Useful when two apps share a directory. |
+| `titleGenerator` | Optional [`TitleGenerationAdapter`](/docs/ink/adapters#titlegenerationadapter) that auto-generates thread titles from the first messages. Pass `createSimpleTitleAdapter()` for the built-in implementation. |
+
+### When this fits
+
+Designed for single-process terminal apps where one user has one CLI running at a time. The wrapped read-modify-write on the thread list isn't lock-safe, so two CLI processes pointed at the same directory can lose updates to thread metadata (rename, archive). If that's your scenario, use Option 3 instead.
+
+## Option 3: Full backend thread management
 
 When you want your backend to own thread state (e.g. for persistence across sessions, team sharing, or server-side history), implement a `RemoteThreadListAdapter`.
 
@@ -194,10 +244,11 @@ export function App() {
 
 ## Which option to choose?
 
-| | Option 1: ChatModelAdapter | Option 2: RemoteThreadListAdapter |
-|---|---|---|
-| **Thread storage** | In-memory (process lifetime) | Your backend |
-| **Message storage** | In-memory | On-device (can add history adapter for server-side) |
-| **Cross-session persistence** | No | Yes |
-| **Setup complexity** | Minimal | Moderate |
-| **Best for** | CLI tools, demos, prototypes | Production apps with persistence |
+| | Option 1: ChatModelAdapter | Option 2: createFileStorageAdapter | Option 3: RemoteThreadListAdapter |
+|---|---|---|---|
+| **Thread storage** | In-memory (process lifetime) | Local disk | Your backend |
+| **Message storage** | In-memory | Local disk | In-memory (can add history adapter for server-side) |
+| **Cross-session persistence** | No | Yes | Yes |
+| **Multi-process safe** | N/A | No | Depends on backend |
+| **Setup complexity** | Minimal | Minimal | Moderate |
+| **Best for** | Demos, prototypes | Local CLI tools | Production apps with sync / team sharing |

package/.docs/raw/docs/ink/index.mdx

@@ -1,6 +1,6 @@
 ---
-title: Getting Started
-description: Build AI chat interfaces for the terminal with @assistant-ui/react-ink.
+title: Terminal AI Chat with Ink
+description: Build AI chat interfaces for the terminal in TypeScript with @assistant-ui/react-ink — streaming, tool calls, and keyboard navigation in CLI apps.
 ---
 
 ## Quick Start
@@ -47,9 +47,7 @@ If you prefer to add assistant-ui to an existing Node.js project, follow these s
 
 ### Install dependencies
 
-```sh
-npm install @assistant-ui/react-ink @assistant-ui/react-ink-markdown ink react
-```
+<InstallCommand npm={["@assistant-ui/react-ink", "@assistant-ui/react-ink-markdown", "ink", "react"]} />
 
   </Step>
   <Step>
@@ -131,6 +129,7 @@ import { Box, Text } from "ink";
 import {
   ThreadPrimitive,
   ComposerPrimitive,
+  LoadingPrimitive,
   useAuiState,
 } from "@assistant-ui/react-ink";
 import { MarkdownText } from "@assistant-ui/react-ink-markdown";
@@ -160,15 +159,13 @@ const Message = () => {
   );
 };
 
-const StatusIndicator = () => {
-  const isRunning = useAuiState((s) => s.thread.isRunning);
-  if (!isRunning) return null;
-  return (
-    <Box marginBottom={1}>
-      <Text color="yellow">Thinking...</Text>
-    </Box>
-  );
-};
+const StatusIndicator = () => (
+  <LoadingPrimitive.Root marginBottom={1} gap={1}>
+    <LoadingPrimitive.Spinner variant="bar" />
+    <LoadingPrimitive.Text />
+    <LoadingPrimitive.ElapsedTime />
+  </LoadingPrimitive.Root>
+);
 
 export const Thread = () => {
   return (

package/.docs/raw/docs/ink/migration.mdx

@@ -30,9 +30,7 @@ If you already have an assistant-ui web app, most of your code transfers directl
 
 ### Install the React Ink package
 
-```sh
-npm install @assistant-ui/react-ink ink react
-```
+<InstallCommand npm={["@assistant-ui/react-ink", "ink", "react"]} />
 
   </Step>
   <Step>