@assistant-ui/mcp-docs-server 0.1.26 → 0.1.27

package/.docs/organized/code-examples/with-tanstack.md

@@ -65,8 +65,8 @@
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@tailwindcss/vite": "^4.2.2",
-    "@tanstack/react-router": "^1.168.4",
-    "@tanstack/react-start": "^1.167.8",
+    "@tanstack/react-router": "^1.168.10",
+    "@tanstack/react-start": "^1.167.16",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.7.0",
@@ -86,7 +86,7 @@
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
     "typescript": "5.9.3",
-    "vite": "^8.0.2"
+    "vite": "^8.0.3"
   }
 }
 

package/.docs/organized/code-examples/with-tap-runtime.md

@@ -598,7 +598,7 @@ export default nextConfig;
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.7.0",
-    "next": "^16.2.1",
+    "next": "^16.2.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwind-merge": "^3.5.0"

package/.docs/raw/docs/(docs)/copilots/model-context.mdx

@@ -14,17 +14,25 @@ System instructions define the base behavior and knowledge available to the assi
 ```tsx
 import {
   useAssistantInstructions,
+  useAssistantContext,
   makeAssistantVisible,
 } from "@assistant-ui/react";
 
-// Via useAssistantInstructions
+// Static instructions
 useAssistantInstructions("You are a helpful assistant...");
 
+// Dynamic context — callback is evaluated lazily at send-time
+useAssistantContext({
+  getContext: () => `Current page: ${window.location.href}`,
+});
+
 // Via makeAssistantVisible
 const ReadableComponent = makeAssistantVisible(MyComponent);
 // Automatically provides component HTML as system context
 ```
 
+`useAssistantInstructions` takes a static string that re-registers when changed. `useAssistantContext` takes a callback that is evaluated fresh each time the model context is read, making it ideal for injecting frequently-changing application state without triggering re-registrations.
+
 ### Tools
 
 Tools are functions that the assistant can use to interact with your application. They can be provided through various mechanisms:

package/.docs/raw/docs/(docs)/guides/interactables.mdx

@@ -58,7 +58,7 @@ function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
 </Callout>
 
 ```tsx
-import { useInteractable } from "@assistant-ui/react";
+import { useAssistantInteractable, useInteractableState } from "@assistant-ui/react";
 import { z } from "zod";
 
 const taskBoardSchema = z.object({
@@ -74,11 +74,12 @@ const taskBoardSchema = z.object({
 const taskBoardInitialState = { tasks: [] };
 
 function TaskBoard() {
-  const [state, setState] = useInteractable("taskBoard", {
+  const id = useAssistantInteractable("taskBoard", {
     description: "A task board showing the user's tasks",
     stateSchema: taskBoardSchema,
     initialState: taskBoardInitialState,
   });
+  const [state, { setState }] = useInteractableState(id, taskBoardInitialState);
 
   return (
     <div>
@@ -147,7 +148,7 @@ This is especially useful for large state objects where regenerating the entire
 You can render multiple interactables with the same `name` but different `id`s. Each gets its own update tool:
 
 ```tsx
-import { useInteractable } from "@assistant-ui/react";
+import { useAssistantInteractable, useInteractableState } from "@assistant-ui/react";
 import { z } from "zod";
 
 const noteSchema = z.object({
@@ -159,12 +160,13 @@ const noteSchema = z.object({
 const noteInitialState = { title: "New Note", content: "", color: "yellow" as const };
 
 function NoteCard({ noteId }: { noteId: string }) {
-  const [state] = useInteractable("note", {
+  useAssistantInteractable("note", {
     id: noteId,
     description: "A sticky note",
     stateSchema: noteSchema,
     initialState: noteInitialState,
   });
+  const [state] = useInteractableState(noteId, noteInitialState);
 
   return <div>{state.title}</div>;
 }
@@ -187,12 +189,13 @@ When multiple interactables are present, you can mark one as "selected" to tell
 
 ```tsx
 function NoteCard({ noteId }: { noteId: string }) {
-  const [state, setState, { setSelected }] = useInteractable("note", {
+  useAssistantInteractable("note", {
     id: noteId,
     description: "A sticky note",
     stateSchema: noteSchema,
     initialState: noteInitialState,
   });
+  const [state, { setSelected }] = useInteractableState(noteId, noteInitialState);
 
   return (
     <div onClick={() => setSelected(true)}>
@@ -206,12 +209,12 @@ The AI sees `(SELECTED)` in the system prompt for the focused interactable, allo
 
 ## API Reference
 
-### `useInteractable`
+### `useAssistantInteractable`
 
-Hook that registers an interactable and returns its state with a setter.
+Registers an interactable with the AI assistant. Returns the instance id.
 
 ```tsx
-const [state, setState, meta] = useInteractable<TState>(name, config);
+const id = useAssistantInteractable(name, config);
 ```
 
 **Parameters:**
@@ -221,43 +224,37 @@ const [state, setState, meta] = useInteractable<TState>(name, config);
 | `name` | `string` | Name for the interactable (used in tool names) |
 | `config.description` | `string` | Description shown to the AI |
 | `config.stateSchema` | `StandardSchemaV1 \| JSONSchema7` | Schema for the state (e.g., a Zod schema) |
-| `config.initialState` | `TState` | Initial state value |
+| `config.initialState` | `unknown` | Initial state value |
 | `config.id` | `string?` | Optional unique instance ID (auto-generated if omitted) |
 | `config.selected` | `boolean?` | Whether this interactable is selected |
 
-**Returns:** `[state, setState, { id, setSelected }]`
+**Returns:** `string` — the instance id (auto-generated or provided).
 
-| Return | Type | Description |
-| --- | --- | --- |
-| `state` | `TState` | Current state |
-| `setState` | `(updater: TState \| (prev: TState) => TState) => void` | State setter (like `useState`) |
-| `meta.id` | `string` | The instance ID (auto-generated or provided) |
-| `meta.setSelected` | `(selected: boolean) => void` | Mark this interactable as selected |
-
-### `makeInteractable`
+### `useInteractableState`
 
-Declarative API that creates a component which registers an interactable when mounted. Useful for static configurations.
+Reads and writes the state of a registered interactable.
 
 ```tsx
-import { makeInteractable } from "@assistant-ui/react";
+const [state, { setState, setSelected, isPending, error, flush }] = useInteractableState<TState>(id, fallback?);
+```
 
-const TaskBoardInteractable = makeInteractable({
-  name: "taskBoard",
-  description: "A task board showing the user's tasks",
-  stateSchema: taskBoardSchema,
-  initialState: taskBoardInitialState,
-});
+**Parameters:**
 
-// Mount it anywhere — renders nothing, just registers the interactable
-function App() {
-  return (
-    <>
-      <TaskBoardInteractable />
-      <Thread />
-    </>
-  );
-}
-```
+| Parameter | Type | Description |
+| --- | --- | --- |
+| `id` | `string` | The interactable instance id (from `useAssistantInteractable`) |
+| `fallback` | `TState?` | Fallback value before the interactable is registered |
+
+**Returns:** `[state, methods]`
+
+| Return | Type | Description |
+| --- | --- | --- |
+| `state` | `TState` | Current state |
+| `setState` | `(updater: TState \| (prev: TState) => TState) => void` | State setter (like `useState`) |
+| `setSelected` | `(selected: boolean) => void` | Mark this interactable as selected |
+| `isPending` | `boolean` | Whether a persistence save is in-flight |
+| `error` | `unknown` | Error from the last failed save |
+| `flush` | `() => Promise<void>` | Force an immediate persistence save |
 
 ### `Interactables`
 
@@ -271,7 +268,7 @@ const aui = useAui({
 
 ## How It Works
 
-When you call `useInteractable("taskBoard", config)`:
+When you call `useAssistantInteractable("taskBoard", config)`:
 
 1. **Registration** — the interactable is registered in the `interactables` scope with its name, description, schema, and initial state.
 2. **Tool generation** — an `update_taskBoard` frontend tool is automatically created with a partial schema (all fields optional). For multiple instances, tools are named `update_{name}_{id}`.
@@ -280,6 +277,62 @@ When you call `useInteractable("taskBoard", config)`:
 5. **Partial merge** — only the fields the AI sends are updated; the rest are preserved.
 6. **Bidirectional updates** — when the AI calls the tool, the state updates and React re-renders. When the user updates state via `setState`, the model context is notified so the AI sees the latest state on the next turn.
 
+## Persistence
+
+By default, interactable state is in-memory and lost on page refresh. You can add persistence by providing a save callback:
+
+```tsx
+import { useEffect } from "react";
+import { useAui, Interactables } from "@assistant-ui/react";
+
+function MyRuntimeProvider({ children }) {
+  const aui = useAui({ interactables: Interactables() });
+
+  useEffect(() => {
+    // Set up persistence adapter
+    aui.interactables().setPersistenceAdapter({
+      save: async (state) => {
+        localStorage.setItem("interactables", JSON.stringify(state));
+      },
+    });
+
+    // Restore saved state on mount
+    const saved = localStorage.getItem("interactables");
+    if (saved) {
+      aui.interactables().importState(JSON.parse(saved));
+    }
+  }, [aui]);
+
+  return /* ... */;
+}
+```
+
+### Sync Status
+
+When a persistence adapter is set, `useInteractableState` exposes sync metadata:
+
+```tsx
+const [state, { setState, isPending, error, flush }] = useInteractableState(id, fallback);
+
+// isPending — true while a save is in-flight
+// error — the error from the last failed save, if any
+// flush() — force an immediate save (useful before navigation)
+```
+
+State changes are automatically debounced (500ms) before saving. When a component unregisters, any pending save is flushed immediately.
+
+### Export / Import
+
+For custom persistence strategies, use `exportState` and `importState` directly:
+
+```tsx
+const snapshot = aui.interactables().exportState();
+// => { "note-1": { name: "note", state: { title: "Hello" } }, ... }
+
+aui.interactables().importState(snapshot);
+// Imported state is picked up when components next register
+```
+
 ## Combining with Tools
 
 You can use `Interactables` alongside `Tools`:
@@ -290,3 +343,12 @@ const aui = useAui({
   interactables: Interactables(),
 });
 ```
+
+## Full Example
+
+See the complete [with-interactables example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-interactables) for a working implementation featuring:
+
+- **Task Board** — single-instance interactable with a custom `manage_tasks` tool
+- **Sticky Notes** — multi-instance interactables with selection and partial updates
+- **localStorage persistence** — state survives page refresh via `setPersistenceAdapter`
+- **Sync indicator** — spinning icon while a save is in-flight (`isPending`)

package/.docs/raw/docs/(docs)/guides/tool-ui.mdx

@@ -748,6 +748,35 @@ useAssistantToolUI({
   server.
 </Callout>
 
+## Per-Property Streaming Status
+
+When rendering a tool UI, you can track which arguments have finished streaming using `useToolArgsStatus`. This must be used inside a tool-call message part context.
+
+```tsx
+import { useToolArgsStatus } from "@assistant-ui/react";
+
+const WeatherUI = makeAssistantToolUI({
+  toolName: "weather",
+  render: ({ args }) => {
+    const { status, propStatus } = useToolArgsStatus<{
+      location: string;
+      unit: string;
+    }>();
+
+    return (
+      <div>
+        <span className={propStatus.location === "streaming" ? "animate-pulse" : ""}>
+          {args.location ?? "..."}
+        </span>
+        {status === "complete" && <WeatherChart data={args} />}
+      </div>
+    );
+  },
+});
+```
+
+`propStatus` maps each key to `"streaming"` | `"complete"` once the key appears in the partial JSON. Keys not yet present in the stream are absent from `propStatus`.
+
 ## Related Guides
 
 - [Tools Guide](/docs/guides/tools) - Learn how to create and use tools with AI models

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

@@ -0,0 +1,333 @@
+---
+title: Realtime Voice
+description: Bidirectional realtime voice conversations with AI agents.
+---
+
+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.
+
+<VoiceSample />
+
+## How It Works
+
+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.
+
+| 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) |
+
+## Configuration
+
+Pass a `RealtimeVoiceAdapter` implementation to the runtime via `adapters.voice`:
+
+```tsx
+const runtime = useChatRuntime({
+  adapters: {
+    voice: new MyVoiceAdapter({ /* ... */ }),
+  },
+});
+```
+
+When a voice adapter is provided, `capabilities.voice` is automatically set to `true`.
+
+## Hooks
+
+### useVoiceState
+
+Returns the current voice session state, or `undefined` when no session is active.
+
+```tsx
+import { useVoiceState, useVoiceVolume } from "@assistant-ui/react";
+
+const voiceState = useVoiceState();
+// voiceState?.status.type — "starting" | "running" | "ended"
+// voiceState?.isMuted — boolean
+// voiceState?.mode — "listening" | "speaking"
+
+const volume = useVoiceVolume();
+// volume — number (0–1, real-time audio level via separate subscription)
+```
+
+### useVoiceControls
+
+Returns methods to control the voice session.
+
+```tsx
+import { useVoiceControls } from "@assistant-ui/react";
+
+const { connect, disconnect, mute, unmute } = useVoiceControls();
+```
+
+## UI Example
+
+```tsx
+import { useVoiceState, useVoiceControls } from "@assistant-ui/react";
+import { PhoneIcon, PhoneOffIcon, MicIcon, MicOffIcon } from "lucide-react";
+
+function VoiceControls() {
+  const voiceState = useVoiceState();
+  const { connect, disconnect, mute, unmute } = useVoiceControls();
+
+  const isRunning = voiceState?.status.type === "running";
+  const isStarting = voiceState?.status.type === "starting";
+  const isMuted = voiceState?.isMuted ?? false;
+
+  if (!isRunning && !isStarting) {
+    return (
+      <button onClick={() => connect()}>
+        <PhoneIcon /> Connect
+      </button>
+    );
+  }
+
+  return (
+    <>
+      <button onClick={() => (isMuted ? unmute() : mute())} disabled={!isRunning}>
+        {isMuted ? <MicOffIcon /> : <MicIcon />}
+        {isMuted ? "Unmute" : "Mute"}
+      </button>
+      <button onClick={() => disconnect()}>
+        <PhoneOffIcon /> Disconnect
+      </button>
+    </>
+  );
+}
+```
+
+## Custom Adapters
+
+Implement the `RealtimeVoiceAdapter` interface to integrate with any voice provider.
+
+### 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
+      },
+
+      onTranscript: (callback) => {
+        // callback({ role: "user" | "assistant", text: "...", isFinal: true })
+        // Transcripts are automatically appended as messages in the thread.
+        return () => {};
+      },
+
+      // Report who is speaking (drives the VoiceOrb speaking animation)
+      onModeChange: (callback) => {
+        // callback("listening") — user's turn
+        // callback("speaking") — agent's turn
+        return () => {};
+      },
+
+      // Report real-time audio level (0–1) for visual feedback
+      onVolumeChange: (callback) => {
+        // callback(0.72) — drives VoiceOrb amplitude and waveform bar heights
+        return () => {};
+      },
+    };
+  }
+}
+```
+
+### Session Lifecycle
+
+The session status follows the same pattern as other adapters:
+
+```
+starting → running → 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!,
+    }),
+  },
+});
+```
+
+## Example: LiveKit
+
+[LiveKit](https://livekit.io/) provides realtime voice via WebRTC rooms with transcription support.
+
+### Install Dependencies
+
+```bash
+npm install livekit-client
+```
+
+### Usage
+
+```tsx
+import { LiveKitVoiceAdapter } from "@/lib/livekit-voice-adapter";
+
+const runtime = useChatRuntime({
+  adapters: {
+    voice: new LiveKitVoiceAdapter({
+      url: process.env.NEXT_PUBLIC_LIVEKIT_URL!,
+      token: async () => {
+        const res = await fetch("/api/livekit-token", { method: "POST" });
+        const { token } = await res.json();
+        return token;
+      },
+    }),
+  },
+});
+```
+
+See the `examples/with-livekit` directory in the repository for a complete implementation including the adapter and token endpoint.

package/.docs/raw/docs/(reference)/api-reference/primitives/message-part.mdx

@@ -37,6 +37,29 @@ Custom data events that can be rendered as UI at their position in the message s
 
 You can use either the explicit format `{ type: "data", name: "workflow", data: {...} }` or the shorthand `data-*` prefixed format `{ type: "data-workflow", data: {...} }`. The prefixed format is automatically converted to a `DataMessagePart` (stripping the `data-` prefix as the `name`). Unknown message part types that don't match any built-in type are silently skipped with a console warning.
 
+#### Streaming Data Parts
+
+Data parts can be sent from the server using `appendData()` on the stream controller:
+
+```ts
+controller.appendData({
+  type: "data",
+  name: "chart",
+  data: { labels: ["Q1", "Q2"], values: [10, 20] },
+});
+```
+
+Register a renderer with `makeAssistantDataUI` to display data parts:
+
+```tsx
+import { makeAssistantDataUI } from "@assistant-ui/react";
+
+const ChartUI = makeAssistantDataUI({
+  name: "chart",
+  render: ({ data }) => <MyChart data={data} />,
+});
+```
+
 ## Anatomy
 
 ```tsx