@assistant-ui/mcp-docs-server 0.2.0 → 0.2.2

package/dist/xulux/catalog-client.js.map

@@ -1 +1 @@
-{"version":3,"file":"catalog-client.js","names":[],"sources":["../../src/xulux/catalog-client.ts"],"sourcesContent":["import { logger } from \"../utils/logger.js\";\nimport { FALLBACK_CATALOG, FALLBACK_NOTE } from \"./fallback-catalog.js\";\nimport type { XuluxCatalog, XuluxCatalogResult } from \"./types.js\";\n\nexport const DEFAULT_CATALOG_URL =\n  \"https://www.assistant-ui.com/api/xulux/mcp-catalog\";\n\nconst CATALOG_TTL_MS = 5 * 60 * 1000;\n\nexport function getCatalogUrl(): string {\n  const override = process.env.XULUX_CATALOG_URL?.trim();\n  return override || DEFAULT_CATALOG_URL;\n}\n\nfunction validateCatalog(data: unknown): XuluxCatalog {\n  if (!data || typeof data !== \"object\" || Array.isArray(data)) {\n    throw new Error(\"Catalog response is not a JSON object.\");\n  }\n  const catalog = data as XuluxCatalog;\n  if (catalog.version !== 1) {\n    throw new Error(\n      `Unsupported catalog version: ${String(catalog.version)}. Expected 1.`,\n    );\n  }\n  if (!Array.isArray(catalog.templates)) {\n    throw new Error(\"Catalog response has no templates array.\");\n  }\n  for (const template of catalog.templates) {\n    if (\n      !template ||\n      typeof template !== \"object\" ||\n      typeof template.id !== \"string\" ||\n      typeof template.templateId !== \"string\" ||\n      (template.kind !== \"template\" && template.kind !== \"example\")\n    ) {\n      throw new Error(\n        \"Catalog response contains a malformed template entry (missing id/templateId/kind).\",\n      );\n    }\n  }\n  return catalog;\n}\n\ninterface CacheEntry {\n  catalog: XuluxCatalog;\n  fetchedAt: number;\n  url: string;\n}\n\nlet cache: CacheEntry | null = null;\n\nexport function clearCatalogCache(): void {\n  cache = null;\n}\n\nasync function fetchCatalog(url: string): Promise<XuluxCatalog> {\n  const res = await fetch(url, {\n    headers: { Accept: \"application/json\" },\n  });\n  if (!res.ok) {\n    throw new Error(`Catalog fetch failed: HTTP ${res.status}`);\n  }\n  const data: unknown = await res.json();\n  return validateCatalog(data);\n}\n\n/**\n * Returns the assistant-ui template catalog. Uses an in-memory five-minute cache, and falls\n * back to a minimal bundled catalog (marked degraded) when the live fetch\n * fails and no cached copy exists.\n */\nexport async function getXuluxCatalog(): Promise<XuluxCatalogResult> {\n  const url = getCatalogUrl();\n  const now = Date.now();\n\n  if (cache && cache.url === url && now - cache.fetchedAt < CATALOG_TTL_MS) {\n    return { catalog: cache.catalog, degraded: false };\n  }\n\n  try {\n    const catalog = await fetchCatalog(url);\n    cache = { catalog, fetchedAt: now, url };\n    return { catalog, degraded: false };\n  } catch (error) {\n    const message = error instanceof Error ? error.message : String(error);\n    logger.warn(\n      `assistant-ui template catalog fetch failed (${url}): ${message}`,\n    );\n\n    // Prefer a stale cached copy over the minimal fallback.\n    if (cache && cache.url === url) {\n      return {\n        catalog: cache.catalog,\n        degraded: true,\n        degradedReason: `Live catalog refresh failed (${message}); using previously fetched catalog.`,\n      };\n    }\n\n    return {\n      catalog: FALLBACK_CATALOG,\n      degraded: true,\n      degradedReason: `${message} ${FALLBACK_NOTE}`,\n    };\n  }\n}\n"],"mappings":";;;AAIA,MAAa,sBACX;AAEF,MAAM,iBAAiB,MAAS;AAEhC,SAAgB,gBAAwB;CAEtC,OADiB,QAAQ,IAAI,mBAAmB,KAAK,KAAA;AAEvD;AAEA,SAAS,gBAAgB,MAA6B;CACpD,IAAI,CAAC,QAAQ,OAAO,SAAS,YAAY,MAAM,QAAQ,IAAI,GACzD,MAAM,IAAI,MAAM,wCAAwC;CAE1D,MAAM,UAAU;CAChB,IAAI,QAAQ,YAAY,GACtB,MAAM,IAAI,MACR,gCAAgC,OAAO,QAAQ,OAAO,EAAE,cAC1D;CAEF,IAAI,CAAC,MAAM,QAAQ,QAAQ,SAAS,GAClC,MAAM,IAAI,MAAM,0CAA0C;CAE5D,KAAK,MAAM,YAAY,QAAQ,WAC7B,IACE,CAAC,YACD,OAAO,aAAa,YACpB,OAAO,SAAS,OAAO,YACvB,OAAO,SAAS,eAAe,YAC9B,SAAS,SAAS,cAAc,SAAS,SAAS,WAEnD,MAAM,IAAI,MACR,oFACF;CAGJ,OAAO;AACT;AAQA,IAAI,QAA2B;AAE/B,SAAgB,oBAA0B;CACxC,QAAQ;AACV;AAEA,eAAe,aAAa,KAAoC;CAC9D,MAAM,MAAM,MAAM,MAAM,KAAK,EAC3B,SAAS,EAAE,QAAQ,mBAAmB,EACxC,CAAC;CACD,IAAI,CAAC,IAAI,IACP,MAAM,IAAI,MAAM,8BAA8B,IAAI,QAAQ;CAG5D,OAAO,gBAAgB,MADK,IAAI,KAAK,CACV;AAC7B;;;;;;AAOA,eAAsB,kBAA+C;CACnE,MAAM,MAAM,cAAc;CAC1B,MAAM,MAAM,KAAK,IAAI;CAErB,IAAI,SAAS,MAAM,QAAQ,OAAO,MAAM,MAAM,YAAY,gBACxD,OAAO;EAAE,SAAS,MAAM;EAAS,UAAU;CAAM;CAGnD,IAAI;EACF,MAAM,UAAU,MAAM,aAAa,GAAG;EACtC,QAAQ;GAAE;GAAS,WAAW;GAAK;EAAI;EACvC,OAAO;GAAE;GAAS,UAAU;EAAM;CACpC,SAAS,OAAO;EACd,MAAM,UAAU,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK;EACrE,OAAO,KACL,+CAA+C,IAAI,KAAK,SAC1D;EAGA,IAAI,SAAS,MAAM,QAAQ,KACzB,OAAO;GACL,SAAS,MAAM;GACf,UAAU;GACV,gBAAgB,gCAAgC,QAAQ;EAC1D;EAGF,OAAO;GACL,SAAS;GACT,UAAU;GACV,gBAAgB,GAAG,QAAQ,GAAG;EAChC;CACF;AACF"}
+{"version":3,"file":"catalog-client.js","names":[],"sources":["../../src/xulux/catalog-client.ts"],"sourcesContent":["import { logger } from \"../utils/logger.js\";\nimport { FALLBACK_CATALOG, FALLBACK_NOTE } from \"./fallback-catalog.js\";\nimport type { XuluxCatalog, XuluxCatalogResult } from \"./types.js\";\n\nexport const DEFAULT_CATALOG_URL =\n  \"https://www.assistant-ui.com/api/xulux/mcp-catalog\";\n\nconst CATALOG_TTL_MS = 5 * 60 * 1000;\n\nexport function getCatalogUrl(): string {\n  const override = process.env.XULUX_CATALOG_URL?.trim();\n  return override || DEFAULT_CATALOG_URL;\n}\n\nfunction validateCatalog(data: unknown): XuluxCatalog {\n  if (!data || typeof data !== \"object\" || Array.isArray(data)) {\n    throw new Error(\"Catalog response is not a JSON object.\");\n  }\n  const catalog = data as XuluxCatalog;\n  if (catalog.version !== 1) {\n    throw new Error(\n      `Unsupported catalog version: ${String(catalog.version)}. Expected 1.`,\n    );\n  }\n  if (!Array.isArray(catalog.templates)) {\n    throw new Error(\"Catalog response has no templates array.\");\n  }\n  for (const template of catalog.templates) {\n    if (\n      !template ||\n      typeof template !== \"object\" ||\n      typeof template.id !== \"string\" ||\n      typeof template.templateId !== \"string\" ||\n      (template.kind !== \"template\" && template.kind !== \"example\")\n    ) {\n      throw new Error(\n        \"Catalog response contains a malformed template entry (missing id/templateId/kind).\",\n      );\n    }\n  }\n  return catalog;\n}\n\ninterface CacheEntry {\n  catalog: XuluxCatalog;\n  fetchedAt: number;\n  url: string;\n}\n\nlet cache: CacheEntry | null = null;\n\nexport function clearCatalogCache(): void {\n  cache = null;\n}\n\nasync function fetchCatalog(url: string): Promise<XuluxCatalog> {\n  const res = await fetch(url, {\n    headers: { Accept: \"application/json\" },\n  });\n  if (!res.ok) {\n    throw new Error(`Catalog fetch failed: HTTP ${res.status}`);\n  }\n  const data: unknown = await res.json();\n  return validateCatalog(data);\n}\n\n/**\n * Returns the assistant-ui template catalog. Uses an in-memory five-minute cache, and falls\n * back to a minimal bundled catalog (marked degraded) when the live fetch\n * fails and no cached copy exists.\n */\nexport async function getXuluxCatalog(): Promise<XuluxCatalogResult> {\n  const url = getCatalogUrl();\n  const now = Date.now();\n\n  if (cache && cache.url === url && now - cache.fetchedAt < CATALOG_TTL_MS) {\n    return { catalog: cache.catalog, degraded: false };\n  }\n\n  try {\n    const catalog = await fetchCatalog(url);\n    cache = { catalog, fetchedAt: now, url };\n    return { catalog, degraded: false };\n  } catch (error) {\n    const message = error instanceof Error ? error.message : String(error);\n    logger.warn(\n      `assistant-ui template catalog fetch failed (${url}): ${message}`,\n    );\n\n    // Prefer a stale cached copy over the minimal fallback.\n    if (cache && cache.url === url) {\n      return {\n        catalog: cache.catalog,\n        degraded: true,\n        degradedReason: `Live catalog refresh failed (${message}); using previously fetched catalog.`,\n      };\n    }\n\n    return {\n      catalog: FALLBACK_CATALOG,\n      degraded: true,\n      degradedReason: `${message} ${FALLBACK_NOTE}`,\n    };\n  }\n}\n"],"mappings":";;;AAIA,MAAa,sBACX;AAEF,MAAM,iBAAiB;AAEvB,SAAgB,gBAAwB;CAEtC,OADiB,QAAQ,IAAI,mBAAmB,KAAK,KAAA;AAEvD;AAEA,SAAS,gBAAgB,MAA6B;CACpD,IAAI,CAAC,QAAQ,OAAO,SAAS,YAAY,MAAM,QAAQ,IAAI,GACzD,MAAM,IAAI,MAAM,wCAAwC;CAE1D,MAAM,UAAU;CAChB,IAAI,QAAQ,YAAY,GACtB,MAAM,IAAI,MACR,gCAAgC,OAAO,QAAQ,OAAO,EAAE,cAC1D;CAEF,IAAI,CAAC,MAAM,QAAQ,QAAQ,SAAS,GAClC,MAAM,IAAI,MAAM,0CAA0C;CAE5D,KAAK,MAAM,YAAY,QAAQ,WAC7B,IACE,CAAC,YACD,OAAO,aAAa,YACpB,OAAO,SAAS,OAAO,YACvB,OAAO,SAAS,eAAe,YAC9B,SAAS,SAAS,cAAc,SAAS,SAAS,WAEnD,MAAM,IAAI,MACR,oFACF;CAGJ,OAAO;AACT;AAQA,IAAI,QAA2B;AAE/B,SAAgB,oBAA0B;CACxC,QAAQ;AACV;AAEA,eAAe,aAAa,KAAoC;CAC9D,MAAM,MAAM,MAAM,MAAM,KAAK,EAC3B,SAAS,EAAE,QAAQ,mBAAmB,EACxC,CAAC;CACD,IAAI,CAAC,IAAI,IACP,MAAM,IAAI,MAAM,8BAA8B,IAAI,QAAQ;CAG5D,OAAO,gBAAgB,MADK,IAAI,KAAK,CACV;AAC7B;;;;;;AAOA,eAAsB,kBAA+C;CACnE,MAAM,MAAM,cAAc;CAC1B,MAAM,MAAM,KAAK,IAAI;CAErB,IAAI,SAAS,MAAM,QAAQ,OAAO,MAAM,MAAM,YAAY,gBACxD,OAAO;EAAE,SAAS,MAAM;EAAS,UAAU;CAAM;CAGnD,IAAI;EACF,MAAM,UAAU,MAAM,aAAa,GAAG;EACtC,QAAQ;GAAE;GAAS,WAAW;GAAK;EAAI;EACvC,OAAO;GAAE;GAAS,UAAU;EAAM;CACpC,SAAS,OAAO;EACd,MAAM,UAAU,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK;EACrE,OAAO,KACL,+CAA+C,IAAI,KAAK,SAC1D;EAGA,IAAI,SAAS,MAAM,QAAQ,KACzB,OAAO;GACL,SAAS,MAAM;GACf,UAAU;GACV,gBAAgB,gCAAgC,QAAQ;EAC1D;EAGF,OAAO;GACL,SAAS;GACT,UAAU;GACV,gBAAgB,GAAG,QAAQ,GAAG;EAChC;CACF;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/mcp-docs-server",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "MCP server for assistant-ui documentation and examples",
   "keywords": [
     "mcp",
@@ -38,10 +38,10 @@
   },
   "devDependencies": {
     "@modelcontextprotocol/core": "^2.0.0",
-    "@types/node": "^26.1.1",
-    "tsx": "^4.23.1",
+    "@types/node": "^26.2.0",
+    "tsx": "^4.23.12",
     "vitest": "^4.1.10",
-    "@assistant-ui/x-buildutils": "0.0.20"
+    "@assistant-ui/x-buildutils": "0.0.23"
   },
   "publishConfig": {
     "access": "public",

package/src/tools/tests/docs.test.ts

@@ -42,7 +42,7 @@ describe("assistantUIDocs", () => {
     expect(result.found).toBe(true);
     expect(result.type).toBe("file");
     expect(result.content).toBeDefined();
-    expect(result.content).toContain("assistant-ui");
+    expect(result.content).toContain("title: Documentation");
   });
 
   it("should handle non-existent paths", async () => {
@@ -88,7 +88,7 @@ describe("assistantUIDocs", () => {
 
     expect(result.content).toBeDefined();
     expect(result.content).toContain("title:");
-    expect(result.content).toContain("assistant-ui");
+    expect(result.content).toContain("description:");
   });
 
   it("includes title and excerpt on a file response", async () => {

package/.docs/raw/docs/tools/interactables-legacy.mdx

@@ -1,410 +0,0 @@
----
-title: Interactables (legacy)
-description: Build persistent UI elements whose state the AI can read and update — copilot interactables in React with assistant-ui for forms, dashboards, and tools.
-platforms: ["react"]
----
-
-<Callout type="warn">
-This legacy API is deprecated. For new code, use the [`unstable_` interactables API](/docs/tools/interactables). We recomment switching beccause this legacy API passes state by mutating the system message, the new, `unstable_` tagged API solves this.
-</Callout>
-
-Interactables are React components that live outside the chat message flow and have state that both the user and the AI can read and write. This enables AI-driven UI patterns where the assistant controls parts of your application beyond the chat window.
-
-
-## Overview
-
-Unlike regular tool UIs that appear inline within messages, interactables:
-
-- **Persist across messages** — they live outside the chat thread
-- **Have shared state** — both the user (via React) and the AI (via auto-generated tools) can update them
-- **Support partial updates** — the AI only needs to send the fields it wants to change
-- **Are developer-placed** — you decide where they render in your app
-- **Auto-register tools** — the AI automatically gets a tool to update each interactable's state
-
-Common use cases:
-
-- Task boards that the AI can add items to
-- Data dashboards that update based on conversation
-- Forms that the AI pre-fills
-- Canvas/editor components that the AI can manipulate
-
-## Quick Start
-
-### 1. Register the Interactables scope
-
-```tsx
-import { useAui, Interactables, AssistantRuntimeProvider } from "@assistant-ui/react";
-import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
-
-function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
-  const runtime = useChatRuntime();
-
-  const aui = useAui({
-    interactables: Interactables(), // [!code ++]
-  });
-
-  return (
-    <AssistantRuntimeProvider aui={aui} runtime={runtime}>
-      {children}
-    </AssistantRuntimeProvider>
-  );
-}
-```
-
-<Callout type="idea">
-  The legacy `interactables: Interactables()` scope and the new
-  `unstable_interactables: unstable_Interactables()` scope are mutually
-  exclusive. Mount only one interactables API in a single `useAui` provider.
-</Callout>
-
-### 2. Create an interactable
-
-```tsx
-import { useAssistantInteractable, useInteractableState } from "@assistant-ui/react";
-import { z } from "zod";
-
-const taskBoardSchema = z.object({
-  tasks: z.array(
-    z.object({
-      id: z.string(),
-      title: z.string(),
-      done: z.boolean(),
-    }),
-  ),
-});
-
-const taskBoardInitialState = { tasks: [] };
-
-function 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>
-      <h2>Tasks</h2>
-      <ul>
-        {state.tasks.map((task) => (
-          <li key={task.id}>
-            <label>
-              <input
-                type="checkbox"
-                checked={task.done}
-                onChange={() =>
-                  setState((prev) => ({
-                    tasks: prev.tasks.map((t) =>
-                      t.id === task.id ? { ...t, done: !t.done } : t,
-                    ),
-                  }))
-                }
-              />
-              {task.title}
-            </label>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}
-```
-
-<Callout type="warn">
-  Define the `stateSchema` and `initialState` **outside** the component (or
-  memoize them). Creating a new schema on every render will cause the
-  interactable to re-register and reset its state.
-</Callout>
-
-### 3. Place it in your layout
-
-```tsx
-function App() {
-  return (
-    <MyRuntimeProvider>
-      <div className="flex">
-        <Thread className="flex-1" />
-        <TaskBoard /> {/* Lives outside the chat */}
-      </div>
-    </MyRuntimeProvider>
-  );
-}
-```
-
-Now when the user says _"Add a task called 'Buy groceries'"_, the AI will automatically call the `update_taskBoard` tool to update the state. Thanks to partial updates, the AI only needs to send the fields it wants to change.
-
-## Partial Updates
-
-Auto-generated tools use a partial schema — all fields become optional. The AI only sends the fields it wants to change; omitted fields keep their current values.
-
-```tsx
-// If the state is { title: "My Note", content: "Hello", color: "yellow" }
-// The AI can call: update_note({ color: "blue" })
-// Result: { title: "My Note", content: "Hello", color: "blue" }
-```
-
-This is especially useful for large state objects where regenerating the entire state would be expensive and error-prone.
-
-<Callout type="info">
-  Merge is shallow (one level deep). If the AI sends a nested object, it replaces
-  that entire field rather than deep-merging into it.
-</Callout>
-
-## Multiple Instances
-
-You can render multiple interactables with the same `name` but different `id`s. Each gets its own update tool:
-
-```tsx
-import { useAssistantInteractable, useInteractableState } from "@assistant-ui/react";
-import { z } from "zod";
-
-const noteSchema = z.object({
-  title: z.string(),
-  content: z.string(),
-  color: z.enum(["yellow", "blue", "green", "pink"]),
-});
-
-const noteInitialState = { title: "New Note", content: "", color: "yellow" as const };
-
-function NoteCard({ noteId }: { noteId: string }) {
-  useAssistantInteractable("note", {
-    id: noteId,
-    description: "A sticky note",
-    stateSchema: noteSchema,
-    initialState: noteInitialState,
-  });
-  const [state] = useInteractableState(noteId, noteInitialState);
-
-  return <div>{state.title}</div>;
-}
-
-function App() {
-  return (
-    <>
-      <NoteCard noteId="note-1" /> {/* → update_note_note-1 tool */}
-      <NoteCard noteId="note-2" /> {/* → update_note_note-2 tool */}
-    </>
-  );
-}
-```
-
-When only one instance of a name exists, the tool is named `update_{name}` (e.g., `update_note`). When multiple instances exist, tools are named `update_{name}_{id}` (e.g., `update_note_note-1`).
-
-## Selection
-
-When multiple interactables are present, you can mark one as "selected" to tell the AI which one the user is focused on:
-
-```tsx
-function NoteCard({ noteId }: { noteId: string }) {
-  useAssistantInteractable("note", {
-    id: noteId,
-    description: "A sticky note",
-    stateSchema: noteSchema,
-    initialState: noteInitialState,
-  });
-  const [state, { setSelected }] = useInteractableState(noteId, noteInitialState);
-
-  return (
-    <div onClick={() => setSelected(true)}>
-      {state.title}
-    </div>
-  );
-}
-```
-
-The AI sees `(SELECTED)` in the system prompt for the focused interactable, allowing it to prioritize that one in responses. For example, the user can say _"Change the color to blue"_ and the AI knows which note to update.
-
-## API Reference
-
-### `useAssistantInteractable`
-
-Registers an interactable with the AI assistant. Returns the instance id.
-
-```tsx
-const id = useAssistantInteractable(name, config);
-```
-
-**Parameters:**
-
-| Parameter | Type | Description |
-| --- | --- | --- |
-| `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` | `unknown` | Initial state value |
-| `config.id` | `string?` | Optional unique instance ID (auto-generated if omitted) |
-| `config.selected` | `boolean?` | Whether this interactable is selected |
-
-**Returns:** `string` — the instance id (auto-generated or provided).
-
-### `useInteractableState`
-
-Reads and writes the state of a registered interactable.
-
-```tsx
-const [state, { setState, setSelected, isPending, error, flush }] = useInteractableState<TState>(id, fallback?);
-```
-
-**Parameters:**
-
-| 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`
-
-The scope resource that manages all interactables. Register it via `useAui`:
-
-```tsx
-const aui = useAui({
-  interactables: Interactables(),
-});
-```
-
-## How It Works
-
-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}`.
-3. **System prompt** — the AI receives a system message describing the interactable, its current state, and whether it is selected.
-4. **Streaming updates** — as the AI generates the tool arguments, the interactable's state updates progressively rather than waiting for complete arguments. This gives users immediate visual feedback.
-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`:
-
-```tsx
-const aui = useAui({
-  tools: Tools({ toolkit: myToolkit }),
-  interactables: Interactables(),
-});
-```
-
-## Streaming Updates
-
-While the AI is generating tool arguments, `useInteractableState` reflects the partial state in real time as fields stream in. You can use the partial state itself plus the thread's running status to show a skeleton UI while the AI is mid-stream:
-
-```tsx
-import { useAuiState } from "@assistant-ui/react";
-
-function TaskBoard() {
-  const id = useAssistantInteractable("taskBoard", config);
-  const [state] = useInteractableState(id, taskBoardInitialState);
-  const isRunning = useAuiState((s) => s.thread.isRunning);
-
-  const isLoading = isRunning && state.tasks.length === 0;
-
-  return (
-    <div>
-      <h2>Tasks</h2>
-      {isLoading ? (
-        <div className="animate-pulse h-8 rounded bg-muted" />
-      ) : (
-        <ul>
-          {state.tasks.map((task) => (
-            <li key={task.id}>{task.title}</li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-}
-```
-
-The state object updates progressively as the AI streams in each field, so partial renders work without any extra wiring. Use the runtime's `isRunning` to distinguish "still streaming, no fields yet" from "model returned an empty result".
-
-## Schema Evolution
-
-<Callout type="warn">
-  If you change a Zod schema after state has been persisted, the imported snapshot may silently mis-match the new shape. The adapter does a shallow merge, so extra fields are preserved and missing fields keep their initial values, but type mismatches are not caught at runtime. To avoid silent corruption, version your schema key (e.g. `"taskBoard_v2"`) or namespace it by schema hash whenever you make breaking changes. Alternatively, add a migration step in your `importState` call.
-</Callout>
-
-## Unmount Behavior
-
-When a component that called `useAssistantInteractable` unmounts, the interactable is unregistered from the AI's tool list and system prompt. However, its state is preserved in the `Interactables` scope. When the component mounts again with the same name and id, the scope re-merges the preserved state rather than resetting to `initialState`. This means transient unmounts (such as React Strict Mode double-mounts or tab switches) do not lose state.
-
-## 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`)
-
-## Related
-
-- [Tool UI](/docs/tools/tool-ui) — Inline tool call UIs rendered inside messages
-- [LangGraph Generative UI](/docs/runtimes/langgraph/generative-ui) — Structured UI components emitted by a LangGraph graph alongside messages