@assistant-ui/mcp-docs-server 0.1.36 → 0.1.39

package/.docs/raw/docs/guides/voice.mdx

@@ -1,60 +1,192 @@
 ---
 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.
+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";
 
-assistant-ui supports realtime bidirectional voice via the `RealtimeVoiceAdapter` interface. This enables live voice conversations where the user speaks into their microphone and the AI agent responds with audio, with transcripts appearing in the thread in real time.
+assistant-ui supports realtime bidirectional voice through the `RealtimeVoiceAdapter` interface. Users speak into their microphone, the agent answers with audio, and transcripts appear in the thread while the session runs.
 
 <VoiceSample />
 
-## How It Works
+## Three voice modes
 
-Unlike [Speech Synthesis](/docs/guides/speech) (text-to-speech) and [Dictation](/docs/guides/dictation) (speech-to-text), the voice adapter handles **both directions simultaneously** — the user's microphone audio is streamed to the agent, and the agent's audio response is played back, all while transcripts are appended to the message thread.
+assistant-ui ships three related but distinct voice capabilities. Choose the mode that matches the product surface:
 
-| Feature | Adapter | Direction |
-|---------|---------|-----------|
-| [Speech Synthesis](/docs/guides/speech) | `SpeechSynthesisAdapter` | Text → Audio (one message at a time) |
-| [Dictation](/docs/guides/dictation) | `DictationAdapter` | Audio → Text (into composer) |
-| **Realtime Voice** | `RealtimeVoiceAdapter` | Audio ↔ Audio (bidirectional, live) |
+| Mode | Guide | Adapter | Direction |
+|------|-------|---------|-----------|
+| **Realtime duplex** | this page | `RealtimeVoiceAdapter` | Audio ↔ audio, live session |
+| **Push-to-talk dictation** | [Dictation](/docs/guides/dictation) | `DictationAdapter` | Audio → text into the composer |
+| **Read-aloud** | [Speech](/docs/guides/speech) | `SpeechSynthesisAdapter` | Text → audio for one message |
+
+Realtime voice is the only mode that owns both directions at once. Dictation fills the composer; speech reads a finished message aloud.
+
+## RealtimeVoiceAdapter
+
+Implement `RealtimeVoiceAdapter` to connect any voice provider. The contract lives in `@assistant-ui/core` and is re-exported from `@assistant-ui/react`:
+
+```tsx
+import type { RealtimeVoiceAdapter } from "@assistant-ui/react";
+
+type RealtimeVoiceAdapter = {
+  connect: (options: {
+    abortSignal?: AbortSignal;
+  }) => RealtimeVoiceAdapter.Session;
+};
+```
+
+A session exposes connection state, mute controls, and event subscriptions:
+
+```tsx
+namespace RealtimeVoiceAdapter {
+  type Status =
+    | { type: "starting" | "running" }
+    | {
+        type: "ended";
+        reason: "finished" | "cancelled" | "error";
+        error?: unknown;
+      };
+
+  type Mode = "listening" | "speaking";
+
+  type TranscriptItem = {
+    role: "user" | "assistant";
+    text: string;
+    isFinal?: boolean;
+  };
+
+  type Session = {
+    status: Status;
+    isMuted: boolean;
+
+    disconnect: () => void;
+    mute: () => void;
+    unmute: () => void;
+
+    onStatusChange: (callback: (status: Status) => void) => Unsubscribe;
+    onTranscript: (
+      callback: (transcript: TranscriptItem) => void,
+    ) => Unsubscribe;
+    onModeChange: (callback: (mode: Mode) => void) => Unsubscribe;
+    onVolumeChange: (callback: (volume: number) => void) => Unsubscribe;
+  };
+}
+```
+
+Session status moves `starting` → `running` → `ended`. The `ended` status includes a reason: `"finished"`, `"cancelled"`, or `"error"` (with an optional `error` field).
+
+Transcripts from `onTranscript` are appended to the message thread automatically:
+
+- User transcripts (`role: "user"`, `isFinal: true`) become user messages.
+- Assistant transcripts (`role: "assistant"`) stream into an assistant message. The message stays in a running status until `isFinal: true`.
+
+`onModeChange` reports `"listening"` (user's turn) or `"speaking"` (agent's turn). `onVolumeChange` reports a real-time level from `0` to `1` for visual feedback such as the voice orb.
+
+## createVoiceSession
+
+`createVoiceSession` removes the manual callback-set boilerplate when you implement an adapter. Pass it the connect options and an async `setup` function that receives `VoiceSessionHelpers` and returns `VoiceSessionControls`:
+
+```tsx
+import {
+  createVoiceSession,
+  type RealtimeVoiceAdapter,
+  type VoiceSessionControls,
+  type VoiceSessionHelpers,
+} from "@assistant-ui/react";
+
+export class MyVoiceAdapter implements RealtimeVoiceAdapter {
+  connect(options: {
+    abortSignal?: AbortSignal;
+  }): RealtimeVoiceAdapter.Session {
+    return createVoiceSession(options, async (helpers: VoiceSessionHelpers) => {
+      const client = await MyVoiceClient.connect();
+
+      client.on("open", () => helpers.setStatus({ type: "running" }));
+      client.on("close", () => helpers.end("finished"));
+      client.on("error", (err: unknown) => helpers.end("error", err));
+      client.on("transcript", (item) => helpers.emitTranscript(item));
+      client.on("mode", (mode) => helpers.emitMode(mode));
+      client.on("volume", (v: number) => helpers.emitVolume(v));
+
+      const controls: VoiceSessionControls = {
+        disconnect: () => client.close(),
+        mute: () => client.setMuted(true),
+        unmute: () => client.setMuted(false),
+      };
+      return controls;
+    });
+  }
+}
+```
+
+`VoiceSessionHelpers` provides:
+
+| Helper | Role |
+|--------|------|
+| `setStatus(status)` | Update session status (for example to `{ type: "running" }`) |
+| `end(reason, error?)` | End the session and clean up subscribers |
+| `emitTranscript(item)` | Push a transcript into the thread |
+| `emitMode(mode)` | Report `"listening"` or `"speaking"` |
+| `emitVolume(volume)` | Report a level from `0` to `1` |
+| `isDisposed()` | Skip events after teardown |
+
+`createVoiceSession` wires status tracking, mute state, abort-signal disconnect, and all `on*` subscriptions for you.
 
 ## Configuration
 
-Pass a `RealtimeVoiceAdapter` implementation to the runtime via `adapters.voice`:
+Pass a `RealtimeVoiceAdapter` implementation on the runtime:
 
 ```tsx
 const runtime = useChatRuntime({
   adapters: {
-    voice: new MyVoiceAdapter({ /* ... */ }),
+    voice: new MyVoiceAdapter({ /* provider options */ }),
   },
 });
 ```
 
-When a voice adapter is provided, `capabilities.voice` is automatically set to `true`.
+When a voice adapter is provided, `capabilities.voice` is set to `true` automatically.
+
+## React hooks
 
-## Hooks
+These hooks are exported from `@assistant-ui/react` and read the active voice session on the current thread.
 
 ### useVoiceState
 
-Returns the current voice session state, or `undefined` when no session is active.
+Returns the current `VoiceSessionState`, or `undefined` when no session is active:
 
 ```tsx
-import { useVoiceState, useVoiceVolume } from "@assistant-ui/react";
+import { useVoiceState } from "@assistant-ui/react";
 
 const voiceState = useVoiceState();
-// voiceState?.status.type — "starting" | "running" | "ended"
-// voiceState?.isMuted — boolean
-// voiceState?.mode — "listening" | "speaking"
+// voiceState?.status.type: "starting" | "running" | "ended"
+// voiceState?.isMuted: boolean
+// voiceState?.mode: "listening" | "speaking"
+```
+
+`VoiceSessionState` is:
+
+```tsx
+type VoiceSessionState = {
+  readonly status: RealtimeVoiceAdapter.Status;
+  readonly isMuted: boolean;
+  readonly mode: RealtimeVoiceAdapter.Mode;
+};
+```
+
+### useVoiceVolume
+
+Subscribes to real-time audio level independently of session state:
 
-const volume = useVoiceVolume();
-// volume — number (0–1, real-time audio level via separate subscription)
+```tsx
+import { useVoiceVolume } from "@assistant-ui/react";
+
+const volume = useVoiceVolume(); // number from 0 to 1
 ```
 
 ### useVoiceControls
 
-Returns methods to control the voice session.
+Returns methods that drive the session:
 
 ```tsx
 import { useVoiceControls } from "@assistant-ui/react";
@@ -62,11 +194,9 @@ import { useVoiceControls } from "@assistant-ui/react";
 const { connect, disconnect, mute, unmute } = useVoiceControls();
 ```
 
-## UI Example
+### Headless control bar
 
-<Callout type="info">
-  For a ready-made control bar with a voice orb and call controls, see the [Voice component](/docs/ui/voice).
-</Callout>
+Build your own controls from the hooks when you need a custom layout:
 
 ```tsx
 import { useVoiceState, useVoiceControls } from "@assistant-ui/react";
@@ -102,263 +232,50 @@ function VoiceControls() {
 }
 ```
 
-## Custom Adapters
-
-Implement the `RealtimeVoiceAdapter` interface to integrate with any voice provider.
+## Voice UI component
 
-### RealtimeVoiceAdapter Interface
-
-```tsx
-import type { RealtimeVoiceAdapter } from "@assistant-ui/react";
-
-class MyVoiceAdapter implements RealtimeVoiceAdapter {
-  connect(options: {
-    abortSignal?: AbortSignal;
-  }): RealtimeVoiceAdapter.Session {
-    // Establish connection to your voice service
-    return {
-      get status() { /* ... */ },
-      get isMuted() { /* ... */ },
-
-      disconnect: () => { /* ... */ },
-      mute: () => { /* ... */ },
-      unmute: () => { /* ... */ },
-
-      onStatusChange: (callback) => {
-        // Status: { type: "starting" } → { type: "running" } → { type: "ended", reason }
-        return () => {}; // Return unsubscribe
-      },
+The fastest path is the styled `voice` registry component. It ships a `VoiceControl` bar, mute and disconnect buttons, status indicator, and animated `VoiceOrb` built on the hooks above.
 
-      onTranscript: (callback) => {
-        // callback({ role: "user" | "assistant", text: "...", isFinal: true })
-        // Transcripts are automatically appended as messages in the thread.
-        return () => {};
-      },
+### Install
 
-      // Report who is speaking (drives the VoiceOrb speaking animation)
-      onModeChange: (callback) => {
-        // callback("listening") — user's turn
-        // callback("speaking") — agent's turn
-        return () => {};
-      },
+<InstallCommand shadcn={["voice"]} />
 
-      // Report real-time audio level (0–1) for visual feedback
-      onVolumeChange: (callback) => {
-        // callback(0.72) — drives VoiceOrb amplitude and waveform bar heights
-        return () => {};
-      },
-    };
-  }
-}
-```
+This adds `/components/assistant-ui/voice.tsx` to your project. Adjust styling as needed.
 
-### Session Lifecycle
+### Use with a runtime
 
-The session status follows the same pattern as other adapters:
+```tsx title="app/page.tsx"
+import { Thread } from "@/components/assistant-ui/thread";
+import { VoiceControl } from "@/components/assistant-ui/voice";
+import { AuiIf } from "@assistant-ui/react";
 
-```mermaid
-flowchart LR
-    starting["starting"] --> running["running"] --> ended["ended"]
-```
-
-The `ended` status includes a `reason`:
-- `"finished"` — session ended normally
-- `"cancelled"` — session was cancelled by the user
-- `"error"` — session ended due to an error (includes `error` field)
-
-### Mode and Volume
-
-All adapters must implement `onModeChange` and `onVolumeChange`. If your provider doesn't support these, return a no-op unsubscribe:
-
-- **`onModeChange`** — Reports `"listening"` (user's turn) or `"speaking"` (agent's turn). The `VoiceOrb` switches to the active speaking animation.
-- **`onVolumeChange`** — Reports a real-time audio level (`0`–`1`). The `VoiceOrb` modulates its amplitude and glow, and waveform bars scale to match.
-
-When using `createVoiceSession`, these are handled automatically — call `session.emitMode()` and `session.emitVolume()` when your provider delivers data.
-
-### Transcript Handling
-
-Transcripts emitted via `onTranscript` are automatically appended to the message thread:
-
-- **User transcripts** (`role: "user"`, `isFinal: true`) are appended as user messages.
-- **Assistant transcripts** (`role: "assistant"`) are streamed into an assistant message. The message shows a "running" status until `isFinal: true` is received.
-
-## Example: ElevenLabs Conversational AI
-
-[ElevenLabs Conversational AI](https://elevenlabs.io/docs/agents-platform/overview) provides realtime voice agents via WebRTC.
-
-### Install Dependencies
-
-```bash
-npm install @elevenlabs/client
-```
-
-### Adapter
-
-```tsx title="lib/elevenlabs-voice-adapter.ts"
-import type { RealtimeVoiceAdapter, Unsubscribe } from "@assistant-ui/react";
-import { VoiceConversation } from "@elevenlabs/client";
-
-export class ElevenLabsVoiceAdapter implements RealtimeVoiceAdapter {
-  private _agentId: string;
-
-  constructor(options: { agentId: string }) {
-    this._agentId = options.agentId;
-  }
-
-  connect(options: {
-    abortSignal?: AbortSignal;
-  }): RealtimeVoiceAdapter.Session {
-    const statusCallbacks = new Set<(s: RealtimeVoiceAdapter.Status) => void>();
-    const transcriptCallbacks = new Set<(t: RealtimeVoiceAdapter.TranscriptItem) => void>();
-    const modeCallbacks = new Set<(m: RealtimeVoiceAdapter.Mode) => void>();
-    const volumeCallbacks = new Set<(v: number) => void>();
-
-    let currentStatus: RealtimeVoiceAdapter.Status = { type: "starting" };
-    let isMuted = false;
-    let conversation: VoiceConversation | null = null;
-    let disposed = false;
-
-    const updateStatus = (status: RealtimeVoiceAdapter.Status) => {
-      if (disposed) return;
-      currentStatus = status;
-      for (const cb of statusCallbacks) cb(status);
-    };
-
-    const cleanup = () => {
-      disposed = true;
-      conversation = null;
-      statusCallbacks.clear();
-      transcriptCallbacks.clear();
-      modeCallbacks.clear();
-      volumeCallbacks.clear();
-    };
-
-    const session: RealtimeVoiceAdapter.Session = {
-      get status() { return currentStatus; },
-      get isMuted() { return isMuted; },
-      disconnect: () => { conversation?.endSession(); cleanup(); },
-      mute: () => { conversation?.setMicMuted(true); isMuted = true; },
-      unmute: () => { conversation?.setMicMuted(false); isMuted = false; },
-      onStatusChange: (cb): Unsubscribe => {
-        statusCallbacks.add(cb);
-        return () => statusCallbacks.delete(cb);
-      },
-      onTranscript: (cb): Unsubscribe => {
-        transcriptCallbacks.add(cb);
-        return () => transcriptCallbacks.delete(cb);
-      },
-      onModeChange: (cb): Unsubscribe => {
-        modeCallbacks.add(cb);
-        return () => modeCallbacks.delete(cb);
-      },
-      onVolumeChange: (cb): Unsubscribe => {
-        volumeCallbacks.add(cb);
-        return () => volumeCallbacks.delete(cb);
-      },
-    };
-
-    if (options.abortSignal) {
-      options.abortSignal.addEventListener("abort", () => {
-        conversation?.endSession(); cleanup();
-      }, { once: true });
-    }
-
-    const doConnect = async () => {
-      if (disposed) return;
-      try {
-        conversation = await VoiceConversation.startSession({
-          agentId: this._agentId,
-          onConnect: () => updateStatus({ type: "running" }),
-          onDisconnect: () => { updateStatus({ type: "ended", reason: "finished" }); cleanup(); },
-          onError: (msg) => { updateStatus({ type: "ended", reason: "error", error: new Error(msg) }); cleanup(); },
-          onModeChange: ({ mode }) => {
-            if (disposed) return;
-            for (const cb of modeCallbacks) cb(mode === "speaking" ? "speaking" : "listening");
-          },
-          onMessage: (msg) => {
-            if (disposed) return;
-            for (const cb of transcriptCallbacks) {
-              cb({ role: msg.role === "user" ? "user" : "assistant", text: msg.message, isFinal: true });
-            }
-          },
-        });
-      } catch (error) {
-        updateStatus({ type: "ended", reason: "error", error }); cleanup();
-      }
-    };
-
-    doConnect();
-    return session;
-  }
-}
-```
-
-### Usage
-
-```tsx
-import { ElevenLabsVoiceAdapter } from "@/lib/elevenlabs-voice-adapter";
-
-const runtime = useChatRuntime({
-  adapters: {
-    voice: new ElevenLabsVoiceAdapter({
-      agentId: process.env.NEXT_PUBLIC_ELEVENLABS_AGENT_ID!,
-    }),
-  },
-});
-```
-
-## 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),
-      };
-    });
-  }
+export default function Chat() {
+  return (
+    <div className="flex h-full flex-col">
+      <AuiIf condition={(s) => s.thread.capabilities.voice}>
+        <VoiceControl />
+      </AuiIf>
+      <div className="min-h-0 flex-1">
+        <Thread />
+      </div>
+    </div>
+  );
 }
 ```
 
-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.
+See the [Voice UI page](/docs/ui/voice) for anatomy, variants, and state samples.
 
 ## 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.
-
-### Prerequisites
-
-1. **A LiveKit server** — create a [LiveKit Cloud](https://cloud.livekit.io/) project (grab the URL, API Key, and API Secret from the project settings) or self-host `livekit-server`.
-2. **An agent worker** — built with the [LiveKit Agents SDK](https://docs.livekit.io/agents/) (Python or Node). The worker connects to your LiveKit server and is automatically dispatched into new rooms.
+[LiveKit](https://livekit.io/) provides realtime voice over WebRTC rooms with transcription support. The browser adapter joins a room; a separate agent worker (STT, LLM, TTS) joins the same room. Without an agent in the room, the client connects but has nothing to talk to.
 
-### Install Dependencies
+The [`with-livekit`](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-livekit) example shows the full wiring:
 
-```bash
-npm install livekit-client livekit-server-sdk
-```
-
-`livekit-client` powers the browser adapter; `livekit-server-sdk` is used server-side to mint access tokens.
+1. **Adapter** (`examples/with-livekit/lib/livekit-voice-adapter.ts`): `LiveKitVoiceAdapter` implements `RealtimeVoiceAdapter`. `connect` calls `createVoiceSession`, connects a LiveKit `Room`, enables the local microphone, attaches remote audio tracks, and maps room events to helpers (`setStatus`, `end`, `emitMode`, `emitVolume`, `emitTranscript`).
+2. **Token route** (`examples/with-livekit/app/api/livekit-token/route.ts`): mints a short-lived room token server-side so secrets stay off the client.
+3. **Agent worker** (`examples/with-livekit/agent/`): a Python LiveKit Agents process that joins the room and runs the voice pipeline.
 
-### Usage
+Minimal runtime wiring:
 
 ```tsx
 import { LiveKitVoiceAdapter } from "@/lib/livekit-voice-adapter";
@@ -377,4 +294,17 @@ const runtime = useChatRuntime({
 });
 ```
 
-See the [`with-livekit` example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-livekit) for a complete implementation: the browser adapter, the token endpoint, and a minimal Python agent worker using the OpenAI Realtime API.
+Clone the example for the adapter source, token endpoint, and agent worker rather than re-implementing the full LiveKit event map from scratch.
+
+You can also scaffold it with the CLI:
+
+```bash
+npx assistant-ui create my-app -e with-livekit
+```
+
+## Related guides
+
+- [Dictation](/docs/guides/dictation): push-to-talk speech-to-text into the composer (`DictationAdapter`, `ComposerPrimitive.Dictate`).
+- [Speech](/docs/guides/speech): read-aloud for assistant messages (`SpeechSynthesisAdapter`, `ActionBarPrimitive.Speak`).
+- [Voice UI](/docs/ui/voice): registry component reference for `VoiceControl` and `VoiceOrb`.
+- [Voice API reference](/docs/api-reference/voice): generated types for sessions, speech, and dictation.

package/.docs/raw/docs/ink/primitives.mdx

@@ -3,7 +3,7 @@ title: Primitives
 description: Composable terminal components for building chat UIs with Ink.
 ---
 
-Primitives are thin wrappers around Ink components (`Box`, `Text`, `TextInput`) that integrate with the assistant-ui runtime. They accept all standard Ink props and add runtime-aware behavior.
+Primitives are thin wrappers around Ink components (`Box`, `Text`) that integrate with the assistant-ui runtime. They accept all standard Ink props and add runtime-aware behavior.
 
 Primitives use namespace imports, the same pattern as the web package (e.g. `ThreadPrimitive.Root`, `ComposerPrimitive.Input`).
 
@@ -1215,3 +1215,37 @@ Container `Box` for the status bar. Forwards all `Box` props; pass `gap` to spac
   <StatusBarPrimitive.Latency />
 </StatusBarPrimitive.Root>
 ```
+
+## TextInput
+
+```tsx
+import { TextInput } from "@assistant-ui/react-ink";
+```
+
+Store-free, controlled single/multi-line text field. Ink ships no native text input, so this is the terminal equivalent of the DOM `<textarea>` or React Native's `<TextInput>` — the editing engine (buffer, grapheme-aware cursor, and the full emacs/arrow keymap) without any runtime or composer coupling. `ComposerPrimitive.Input` is a thin adapter that wraps `TextInput` and binds it to the composer store; reach for `TextInput` directly when you need an editable field outside the thread composer (for example, editing a value before confirming an action).
+
+It is controlled on `value`/`onChange`, so an external owner can override the text at any time (the buffer absorbs the echo without thrashing the cursor). An owner may also transform the emitted text in `onChange` (uppercase, mask, reject); the buffer applies the corrected value while keeping the cursor at the edit position, snapped to a grapheme boundary. A replacement that does not respond to an edit (a programmatic set while idle) still places the cursor at the end:
+
+```tsx
+const [command, setCommand] = useState(approval.action.command);
+
+<TextInput
+  value={command}
+  onChange={setCommand}
+  submitOnEnter
+  onSubmit={(text) => runEdited(text)}
+/>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `string` | Current text (controlled) |
+| `onChange` | `(text: string) => void` | Called with the next text whenever the buffer changes |
+| `onSubmit` | `(text: string) => void` | Called on Enter when `submitOnEnter` is set, with the text as displayed; owners that validate in `onChange` should validate again in `onSubmit` |
+| `submitOnEnter` | `boolean` | Whether Enter calls `onSubmit` (default: `false`) |
+| `placeholder` | `string` | Placeholder text when empty (default: `""`) |
+| `autoFocus` | `boolean` | Auto-focus on mount (default: `true`) |
+| `multiLine` | `boolean` | When true, Enter inserts a newline unless `submitOnEnter` is enabled |
+| `...rest` | `ComponentProps<typeof Box>` | Forwarded to the underlying Ink `Box` |
+
+Keyboard bindings, grapheme handling, and terminal-capability caveats are identical to [`ComposerPrimitive.Input`](#input).

package/.docs/raw/docs/integrations/frameworks/ai-sdk.mdx

@@ -5,10 +5,10 @@ description: Wire the Vercel AI SDK into a React chat UI with assistant-ui — u
 
 import { VercelIcon } from "@/components/icons/vercel";
 
-[Vercel AI SDK](https://ai-sdk.dev/) is the most common framework people pair with assistant-ui. The full setup, attachments, persistence, tool-call patterns, and version notes are documented under [runtimes/ai-sdk](/docs/runtimes/ai-sdk); this page is the entry point in the integrations tree for discoverability and architecture context.
+[Vercel AI SDK](https://ai-sdk.dev/) is the most common framework people pair with assistant-ui. The full setup, attachments, persistence, tool-call patterns, and version notes are documented under [runtimes/ai-sdk](/docs/runtimes/ai-sdk/overview); this page is the entry point in the integrations tree for discoverability and architecture context.
 
 <Callout type="info">
-If you arrived here looking to wire up your first chat: jump to [AI SDK v6 quickstart](/docs/runtimes/ai-sdk/v6). This page is a high-level pointer.
+If you arrived here looking to wire up your first chat: jump to [AI SDK v7 quickstart](/docs/runtimes/ai-sdk/v7). This page is a high-level pointer.
 </Callout>
 
 ## Where it slots in
@@ -27,14 +27,20 @@ flowchart LR
 
 ## Pick a version
 
-Three versions of `ai` are supported. New projects should pick **v6**; v5 and v4 are documented for migration and existing apps that haven't upgraded.
+Four versions of `ai` are supported. New projects should pick **v7**; v6, v5, and v4 are documented for migration and existing apps that haven't upgraded.
 
 <Cards>
   <Card
     icon={<VercelIcon width={20} height={20} />}
-    title="AI SDK v6 (current)"
+    title="AI SDK v7 (current)"
+    description="Requires ai@^7 and @ai-sdk/react@^4. Async convertToModelMessages, tool inputSchema, toUIMessageStreamResponse."
+    href="/docs/runtimes/ai-sdk/v7"
+  />
+  <Card
+    icon={<VercelIcon width={20} height={20} />}
+    title="AI SDK v6 (legacy)"
     description="Requires ai@^6 and @ai-sdk/react@^3. Async convertToModelMessages, tool inputSchema, toUIMessageStreamResponse."
-    href="/docs/runtimes/ai-sdk/v6"
+    href="/docs/runtimes/ai-sdk/v6-legacy"
   />
   <Card
     icon={<VercelIcon width={20} height={20} />}
@@ -58,7 +64,7 @@ AI SDK is the default choice for new projects on Next.js, Remix, or any framewor
 - You will compose with a framework like [Mastra](/docs/integrations/frameworks/mastra/overview), an [observability tool](/docs/integrations/observability/helicone), an [LLM gateway](/docs/integrations/gateways), or [tools through MCP](/docs/tools/mcp), all of which assume an AI SDK route.
 - You want first-party `frontendTools`, attachments, multi-step tool calls, token-usage metadata, and persisted history via `withFormat`.
 
-If you need streaming agent state (subgraph events, generative UI messages), look at [LangGraph](/docs/runtimes/langgraph) instead. If you have a different protocol-shaped backend (A2A, AG-UI, OpenCode), see [pick a runtime](/docs/runtimes/pick-a-runtime).
+If you need streaming agent state (subgraph events, generative UI messages), look at [LangGraph](/docs/runtimes/langgraph/overview) instead. If you have a different protocol-shaped backend (A2A, AG-UI, OpenCode), see [pick a runtime](/docs/runtimes/pick-a-runtime).
 
 ## Related
 
@@ -67,7 +73,7 @@ If you need streaming agent state (subgraph events, generative UI messages), loo
     icon={<VercelIcon width={20} height={20} />}
     title="AI SDK runtime overview"
     description="The full runtime documentation and version selector."
-    href="/docs/runtimes/ai-sdk"
+    href="/docs/runtimes/ai-sdk/overview"
   />
   <Card
     title="Pick a runtime"