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

package/.docs/raw/docs/runtimes/custom/local-runtime.mdx

@@ -353,7 +353,7 @@ const openai = new OpenAI();
 const MyModelAdapter: ChatModelAdapter = {
   async *run({ messages, abortSignal, context }) {
     const stream = await openai.chat.completions.create({
-      model: "gpt-5.4-mini",
+      model: "gpt-5.6-luna",
       messages: convertToOpenAIMessages(messages),
       stream: true,
       signal: abortSignal,
@@ -372,6 +372,34 @@ const MyModelAdapter: ChatModelAdapter = {
 
 Each yield replaces the previous content. Yield the full state every time, not deltas.
 
+### Only the last part streams
+
+A text or reasoning part reports `status.type === "running"` only while it is the last part of the message. Every earlier one reads as complete, and the components that react to streaming follow that status: the reasoning disclosure auto-opens and pins its live preview while its part is running, and part status indicators resolve the same way. Tool-call parts are exempt, since their status comes from whether they have a result.
+
+That makes an empty trailing part destructive. Yielding `[reasoning, text("")]` to reserve the text slot marks the reasoning part complete the moment the empty text part appears, even though reasoning is still streaming, and nothing in the UI signals why. Add a part on its first token instead of reserving it:
+
+```tsx
+let reasoning = "";
+let text = "";
+
+for await (const chunk of stream) {
+  const delta = chunk.choices[0]?.delta;
+  text += delta?.content ?? "";
+  // Reasoning deltas are provider-specific; read whichever field yours sends
+  reasoning += (delta as { reasoning?: string })?.reasoning ?? "";
+
+  // Include each part only once it has content
+  yield {
+    content: [
+      ...(reasoning ? [{ type: "reasoning" as const, text: reasoning }] : []),
+      ...(text ? [{ type: "text" as const, text }] : []),
+    ],
+  };
+}
+```
+
+Guard every text or reasoning part this way, not just the trailing one. An empty part that is never filled also renders as an empty block, and whichever part ends up last is the only one that can report `running`.
+
 ### Streaming with tool calls
 
 Accumulate tool calls in a `Map` outside the streaming loop so they persist across chunks:
@@ -379,7 +407,7 @@ Accumulate tool calls in a `Map` outside the streaming loop so they persist acro
 ```tsx
 async *run({ messages, abortSignal, context }) {
   const stream = await openai.chat.completions.create({
-    model: "gpt-5.4-mini",
+    model: "gpt-5.6-luna",
     messages: convertToOpenAIMessages(messages),
     tools: context.tools,
     stream: true,
@@ -415,7 +443,7 @@ If you build the `content` array fresh from the current chunk each iteration, to
 
 ## Tool calling
 
-`LocalRuntime` supports OpenAI-compatible function calling. Register tools through `useAui` so the runtime exposes them to your adapter via `context.tools`:
+`LocalRuntime` supports OpenAI-compatible function calling. Register tools through the provider's `config` so the runtime exposes them to your adapter via `context.tools`:
 
 ```tsx title="app/toolkit.tsx"
 "use generative";
@@ -440,15 +468,14 @@ export default defineToolkit({
 ```
 
 ```tsx title="app/MyRuntimeProvider.tsx"
-import { useAui, Tools } from "@assistant-ui/react";
+import { AuiConfig, Tools } from "@assistant-ui/react";
 import toolkit from "./toolkit";
 
 function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
   const runtime = useLocalRuntime(MyModelAdapter);
-  const aui = useAui({ tools: Tools({ toolkit }) });
-
+  const config = AuiConfig({ tools: Tools({ toolkit }) });
   return (
-    <AssistantRuntimeProvider aui={aui} runtime={runtime}>
+    <AssistantRuntimeProvider runtime={runtime} config={config}>
       {children}
     </AssistantRuntimeProvider>
   );
@@ -627,7 +654,7 @@ function useStreamReconnect(threadId: string) {
 
 ## Queueing messages during a run
 
-Set `unstable_enableMessageQueue` to keep the composer usable while a run is in progress. A message sent during a run is held in `composer.queue` and sent once the run settles; steering a queued message runs it next.
+Set `unstable_enableMessageQueue` to keep the composer usable while a run is in progress. A message sent during a queued run steers by default — it lands in the steer lane, ahead of previously queued items; `send({ steer: false })` queues a follow-up behind them instead. Pending items are held in `composer.queue` and drain once the run settles.
 
 ```tsx
 const runtime = useLocalRuntime(MyModelAdapter, {
@@ -674,7 +701,7 @@ const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
 const OpenAIAdapter: ChatModelAdapter = {
   async *run({ messages, abortSignal, context }) {
     const stream = await openai.chat.completions.create({
-      model: "gpt-5.4-mini",
+      model: "gpt-5.6-luna",
       messages: messages.map((m) => ({
         role: m.role,
         content: m.content

package/.docs/raw/docs/runtimes/eve/overview.mdx

@@ -49,6 +49,57 @@ export default function Home() {
 }
 ```
 
+The `custom` bag of a per-turn `runConfig` is forwarded to Eve as
+`clientContext`, so `runConfig: { custom: { page: "/pricing" } }` arrives as
+`clientContext: { page: "/pricing" }`. An empty or absent bag is omitted, and
+every value must be JSON-serializable.
+
+Eve turns that object into a model context message, which is why the
+assistant-ui `custom` envelope is unwrapped: the envelope would put a literal
+`custom` key in the prompt. It is page or client context rather than run
+configuration, and it cannot select a model or change how the turn executes.
+Keep secrets, credentials, and personal data out of it, since the model reads
+it as message text.
+
+## Connector authorization
+
+When Eve pauses for connector authorization, the runtime emits an assistant
+data part named `authorization`. Its data includes `state`, `name`, and the
+available display fields such as `displayName`, `description`, `url`,
+`userCode`, `instructions`, and `expiresAt`. Completed parts may also include
+`outcome` and `reason`. `url` is present only when the connector supplied an
+`http(s)` address; the adapter drops other schemes so a renderer can link to it
+directly.
+
+The Eve template ships this renderer as `components/eve-authorization.tsx` and
+mounts it next to `<Thread />`. To add it to an existing app, register a data UI
+for the part and type it with the exported `EveAuthorizationData`:
+
+```tsx title="authorization-ui.tsx"
+import type { EveAuthorizationData } from "@assistant-ui/eve";
+import { makeAssistantDataUI } from "@assistant-ui/react";
+
+export const AuthorizationUI = makeAssistantDataUI<EveAuthorizationData>({
+  name: "authorization",
+  render: ({ data }) => (
+    <div>
+      {data.state === "required" ? (
+        <>
+          <p>{data.instructions ?? `Sign in to ${data.displayName ?? data.name}`}</p>
+          {data.userCode && <code>{data.userCode}</code>}
+          {data.url && <a href={data.url}>Continue to sign in</a>}
+        </>
+      ) : (
+        <p>{data.outcome ?? "Authorization completed"}</p>
+      )}
+    </div>
+  ),
+});
+```
+
+Mount `<AuthorizationUI />` inside the `AssistantRuntimeProvider` tree. The
+standard thread intentionally leaves unmatched data parts unrendered.
+
 ## Requirements
 
 - Node.js 24 or higher.

package/.docs/raw/docs/runtimes/eve/quickstart.mdx

@@ -1,9 +1,9 @@
 ---
 title: Quickstart
-description: From-template and manual setup paths to a working Eve agent chat in assistant-ui.
+description: Template, Eve CLI, and manual setup paths to a working Eve agent chat in assistant-ui.
 ---
 
-Two paths to a running Eve-powered assistant-ui app. The template is fastest; the manual path is what you adapt when integrating into an existing Next.js project.
+Three paths to a running Eve-powered assistant-ui app. The template is fastest, `eve add` drops assistant-ui into an Eve app you already have, and the manual path is what you adapt when integrating into an existing Next.js project.
 
 ## From the template
 
@@ -45,6 +45,55 @@ Use Eve's terminal UI directly for command-line agent sessions.
 </Tab>
 </PlatformTabs>
 
+## With the Eve CLI
+
+For an Eve app that already exists, register the assistant-ui registry once and install the chat page from it:
+
+```sh
+eve registry add @assistant-ui=https://r.assistant-ui.com/{name}.json
+eve add @assistant-ui/eve-chat --overwrite
+```
+
+`eve registry add` records the namespace in your `package.json`. `eve add` then installs `@assistant-ui/react` and `@assistant-ui/eve`, writes `app/page.tsx`, and writes the thread component together with everything it imports into `components/assistant-ui` and `components/ui`. It expects an Eve app that carries the Next.js Web Chat scaffold, because the installed files import `@/lib/utils` through the `@/*` alias that `eve init --channel-web-nextjs` sets up.
+
+`--overwrite` is global rather than per file. It is what lets the item replace the scaffold's own `app/page.tsx`, and it also replaces any `components/assistant-ui` or `components/ui` file already in the project, including `avatar`, `button`, `collapsible`, `dialog`, and `tooltip`, so install on a clean tree and read the diff before keeping it. A plain `eve add` skips every pre-existing file instead, which leaves `app/page.tsx` untouched. Inspect an item before installing it with `eve registry view @assistant-ui/eve-chat`, and browse the rest of the registry with `eve registry list --registry @assistant-ui`.
+
+That namespace serves the Radix flavor, which matches the shadcn components in Eve's Next.js scaffold. Point it at `https://r.assistant-ui.com/base/{name}.json` instead for a Base UI project.
+
+The Eve CLI writes registry files without editing CSS, so add the styles the reasoning and tool components animate with to `app/globals.css` yourself:
+
+```css title="app/globals.css"
+@import "tw-shimmer";
+
+@custom-variant data-open (&:where([data-state="open"], [data-open]:not([data-open="false"])));
+@custom-variant data-closed (&:where([data-state="closed"], [data-closed]:not([data-closed="false"])));
+
+@theme inline {
+  @keyframes collapsible-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(
+        --radix-collapsible-content-height,
+        var(--collapsible-panel-height, auto)
+      );
+    }
+  }
+  @keyframes collapsible-up {
+    from {
+      height: var(
+        --radix-collapsible-content-height,
+        var(--collapsible-panel-height, auto)
+      );
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+```
+
 ## Manual setup in an existing app
 
 <Steps>

package/.docs/raw/docs/runtimes/google-adk/hooks.mdx

@@ -389,9 +389,9 @@ Register the renderer with a backend toolkit entry inside `AssistantRuntimeProvi
 ```tsx
 import {
   AssistantRuntimeProvider,
+  AuiConfig,
   defineToolkit,
   Tools,
-  useAui,
 } from "@assistant-ui/react";
 import {
   createAdkStream,
@@ -410,10 +410,9 @@ function App() {
   const runtime = useAdkRuntime({
     stream: createAdkStream({ api: "/api/chat" }),
   });
-  const aui = useAui({ tools: Tools({ toolkit }) });
-
+  const config = AuiConfig({ tools: Tools({ toolkit }) });
   return (
-    <AssistantRuntimeProvider aui={aui} runtime={runtime}>
+    <AssistantRuntimeProvider runtime={runtime} config={config}>
       <Thread />
     </AssistantRuntimeProvider>
   );
@@ -426,9 +425,9 @@ function App() {
 ```tsx
 import {
   AssistantRuntimeProvider,
+  AuiConfig,
   defineToolkit,
   Tools,
-  useAui,
 } from "@assistant-ui/react-native";
 import {
   createAdkStream,
@@ -450,10 +449,9 @@ function App() {
   const runtime = useAdkRuntime({
     stream: createAdkStream({ api: `${API_URL}/api/chat` }),
   });
-  const aui = useAui({ tools: Tools({ toolkit }) });
-
+  const config = AuiConfig({ tools: Tools({ toolkit }) });
   return (
-    <AssistantRuntimeProvider aui={aui} runtime={runtime}>
+    <AssistantRuntimeProvider runtime={runtime} config={config}>
       <View style={{ flex: 1 }}>
         <Thread />
       </View>
@@ -468,9 +466,9 @@ function App() {
 ```tsx
 import {
   AssistantRuntimeProvider,
+  AuiConfig,
   defineToolkit,
   Tools,
-  useAui,
 } from "@assistant-ui/react-ink";
 import {
   createAdkStream,
@@ -490,10 +488,9 @@ function App() {
   const runtime = useAdkRuntime({
     stream: createAdkStream({ api: "http://localhost:3000/api/chat" }),
   });
-  const aui = useAui({ tools: Tools({ toolkit }) });
-
+  const config = AuiConfig({ tools: Tools({ toolkit }) });
   return (
-    <AssistantRuntimeProvider aui={aui} runtime={runtime}>
+    <AssistantRuntimeProvider runtime={runtime} config={config}>
       <Box flexDirection="column">
         <Thread />
       </Box>

package/.docs/raw/docs/runtimes/langgraph/streaming.mdx

@@ -108,7 +108,7 @@ See [Generative UI](/docs/runtimes/langgraph/generative-ui) for full setup: enab
 
 ## Queueing messages during a run
 
-Set `unstable_enableMessageQueue` to keep the composer usable while a run is streaming. A message sent during a run is held in `composer.queue` and sent once the run settles; steering a queued message runs it next.
+Set `unstable_enableMessageQueue` to keep the composer usable while a run is streaming. A message sent during a queued run steers by default — it lands in the steer lane, ahead of previously queued items; `send({ steer: false })` queues a follow-up behind them instead. Pending items are held in `composer.queue` and drain once the run settles.
 
 ```tsx
 const runtime = useLangGraphRuntime({

package/.docs/raw/docs/runtimes/langgraph/tutorial/part-2.mdx

@@ -94,7 +94,7 @@ This simply displays the tool name and arguments passed to it, but not the resul
 
 import { Thread } from "@/components/assistant-ui/thread";
 import { PriceSnapshotToolUI } from "@/components/tools/price-snapshot/PriceSnapshotTool";
-import { AuiProvider, defineToolkit, Tools, useAui } from "@assistant-ui/react";
+import { AuiConfig, AuiProvider, defineToolkit, Tools, useAui } from "@assistant-ui/react";
 
 const toolkit = defineToolkit({
   price_snapshot: {
@@ -104,10 +104,10 @@ const toolkit = defineToolkit({
 });
 
 export default function Home() {
-  const aui = useAui({ tools: Tools({ toolkit }) });
-
+  const aui = useAui();
+  const config = AuiConfig({ tools: Tools({ toolkit }) });
   return (
-    <AuiProvider value={aui}>
+    <AuiProvider extends={aui} config={config}>
       <Thread />
     </AuiProvider>
   );
@@ -334,10 +334,10 @@ const toolkit = defineToolkit({
 });
 
 export default function Home() {
-  const aui = useAui({ tools: Tools({ toolkit }) });
-
+  const aui = useAui();
+  const config = AuiConfig({ tools: Tools({ toolkit }) });
   return (
-    <AuiProvider value={aui}>
+    <AuiProvider extends={aui} config={config}>
       <Thread />
     </AuiProvider>
   );

package/.docs/raw/docs/runtimes/langgraph/tutorial/part-3.mdx

@@ -212,7 +212,7 @@ export function TransactionConfirmationPending(props: TransactionConfirmation) {
 import { Thread } from "@/components/assistant-ui/thread";
 import { PriceSnapshotToolUI } from "@/components/tools/price-snapshot/PriceSnapshotTool";
 import { PurchaseStockToolUI } from "@/components/tools/purchase-stock/PurchaseStockTool";
-import { AuiProvider, defineToolkit, Tools, useAui } from "@assistant-ui/react";
+import { AuiConfig, AuiProvider, defineToolkit, Tools, useAui } from "@assistant-ui/react";
 
 const toolkit = defineToolkit({
   price_snapshot: {
@@ -226,10 +226,10 @@ const toolkit = defineToolkit({
 });
 
 export default function Home() {
-  const aui = useAui({ tools: Tools({ toolkit }) });
-
+  const aui = useAui();
+  const config = AuiConfig({ tools: Tools({ toolkit }) });
   return (
-    <AuiProvider value={aui}>
+    <AuiProvider extends={aui} config={config}>
       <Thread />
     </AuiProvider>
   );

package/.docs/raw/docs/runtimes/opencode/hooks.mdx

@@ -112,6 +112,7 @@ The returned `OpenCodeThreadState` includes:
 
 - `sessionId`, `session`, `sessionStatus`, `loadState`, `runState`
 - `messageOrder`, `messagesById`, `pendingUserMessages`
+- `childSessionsById` (OpenCode `task` child-session projections keyed by session ID)
 - `interactions.permissions` (pending + resolved), `interactions.questions` (pending + answered + rejected)
 - `unhandledEvents`, `sync` timestamps
 

package/.docs/raw/docs/runtimes/opencode/overview.mdx

@@ -28,6 +28,16 @@ If your backend is not OpenCode-based, see [picking a runtime](/docs/runtimes/pi
 - A running [OpenCode](https://opencode.ai/) server (defaults to `http://localhost:4096`).
 - React 18 or 19.
 
+## Sub-agent conversations
+
+OpenCode `task` tool calls expose their child session through tool metadata. The runtime loads those child sessions, keeps them synchronized from the same OpenCode event stream, and projects their transcripts into `ToolCallMessagePart.messages`. Parallel and recursively nested tasks are supported.
+
+Loading is eager, not keyed to what a renderer displays. Once a thread is subscribed, every `task` part in its transcript fetches its child session, and each child does the same for its own nested tasks, so a long session with many task calls fetches every sub-agent transcript whether or not any of them is expanded. Each child session is fetched once and then kept current from the event stream, so re-subscribing a thread does not refetch it.
+
+A `task` part carries `messages` only once its child session has loaded. While the child is still loading, the part projects as an ordinary tool call, so an empty `messages` array always means the sub-agent produced nothing rather than that its transcript is still in flight.
+
+Use assistant-ui's [`MessagePartPrimitive.Messages`](/docs/tools/multi-agent) inside a `task` tool renderer to display the child conversation. Nested conversations are read-only and inherit the parent thread's tool renderers.
+
 ## Install
 
 <InstallCommand npm={["@assistant-ui/react", "@assistant-ui/react-opencode", "@opencode-ai/sdk"]} />

package/.docs/raw/docs/tools/backend.mdx

@@ -42,7 +42,7 @@ export async function POST(req: Request) {
   const { messages, system, tools } = await req.json();
 
   const result = streamText({
-    model: openai("gpt-5.4-nano"),
+    model: openai("gpt-5.6-luna"),
     system,
     messages: await convertToModelMessages(messages),
     tools: await aiToolkit.tools({ frontend: tools }),
@@ -79,7 +79,7 @@ export async function POST(req: Request) {
   const { messages, tools } = await req.json();
 
   const result = streamText({
-    model: openai("gpt-5.4-nano"),
+    model: openai("gpt-5.6-luna"),
     messages: await convertToModelMessages(messages),
     tools: {
       ...frontendTools(tools ?? {}),

package/.docs/raw/docs/tools/defining-tools.mdx

@@ -115,21 +115,23 @@ The inner `"use client"` inside `execute` marks this as a **frontend** tool —
 
 ### Register the toolkit
 
-Import the toolkit in your runtime provider and pass it to `useAui` via `Tools`:
+Import the toolkit in your runtime provider and pass it to `config` via `Tools`:
 
 ```tsx title="app/MyRuntimeProvider.tsx"
 "use client";
 
-import { AssistantRuntimeProvider, Tools, useAui } from "@assistant-ui/react";
+import { AssistantRuntimeProvider, AuiConfig, Tools } from "@assistant-ui/react";
 import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
 import toolkit from "./toolkit";
 
 export function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
   const runtime = useChatRuntime();
-  const aui = useAui({ tools: Tools({ toolkit }) });
-
+  const config = AuiConfig({ tools: Tools({ toolkit }) });
   return (
-    <AssistantRuntimeProvider aui={aui} runtime={runtime}>
+    <AssistantRuntimeProvider
+      runtime={runtime}
+      config={config}
+    >
       {children}
     </AssistantRuntimeProvider>
   );
@@ -157,7 +159,7 @@ export async function POST(req: Request) {
   const { messages, tools } = await req.json();
 
   const result = streamText({
-    model: openai("gpt-5.4-nano"),
+    model: openai("gpt-5.6-luna"),
     messages: await convertToModelMessages(messages),
     tools: await aiToolkit.tools({ frontend: tools }),
   });
@@ -368,7 +370,7 @@ export const toolkit = defineToolkit({
 });
 ```
 
-Register it exactly like a generative toolkit: `useAui({ tools: Tools({ toolkit }) })`. The key must match the tool name your backend or MCP server publishes. Render-only entries upload no schema and run no browser code — they only attach UI to matching tool-call message parts.
+Register it exactly like a generative toolkit: hoist `const config = AuiConfig({ tools: Tools({ toolkit }) })` in the component body and pass `config={config}`. The key must match the tool name your backend or MCP server publishes. Render-only entries upload no schema and run no browser code — they only attach UI to matching tool-call message parts.
 
 <Callout type="warn">
   This `{ type: "backend", render }` shape is **plain-toolkit only**. Inside a

package/.docs/raw/docs/tools/dynamic-tools.mdx

@@ -43,6 +43,7 @@ The component that owns the state registers the toolkit, then renders a small nu
 
 ```tsx title="app/TaskBoard.tsx"
 import {
+  AuiConfig,
   AuiProvider,
   Tools,
   useAui,
@@ -54,10 +55,10 @@ import toolkit from "./task-board-toolkit";
 
 function TaskBoard() {
   const [tasks, setTasks] = useState<Task[]>([]);
-  const aui = useAui({ tools: Tools({ toolkit }) });
-
+  const aui = useAui();
+  const config = AuiConfig({ tools: Tools({ toolkit }) });
   return (
-    <AuiProvider value={aui}>
+    <AuiProvider extends={aui} config={config}>
       <TaskBoardToolOverrides setTasks={setTasks} />
       <TaskList tasks={tasks} />
     </AuiProvider>
@@ -102,7 +103,8 @@ The override supplies **only** the `execute`; the description, parameters, and `
 <Callout type="info">
   Keep the override keys stable after mount, and let only one mounted provider
   define a given tool name at a time. The null-returning overrides component
-  re-binds the executor whenever the setter changes, without re-running `useAui`.
+  re-binds the executor whenever the setter changes, without remounting the
+  provider.
 </Callout>
 
 ## When to reach for this vs. Interactables

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

@@ -33,18 +33,20 @@ Common use cases:
 ### 1. Register the Interactables scope
 
 ```tsx
-import { useAui, Interactables, AssistantRuntimeProvider } from "@assistant-ui/react";
+import { AuiConfig, 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({
+  const config = AuiConfig({
     interactables: Interactables(), // [!code ++]
   });
 
   return (
-    <AssistantRuntimeProvider aui={aui} runtime={runtime}>
+    <AssistantRuntimeProvider
+      runtime={runtime}
+      config={config}
+    >
       {children}
     </AssistantRuntimeProvider>
   );
@@ -54,7 +56,7 @@ function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
 <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.
+  exclusive. Mount only one interactables API in a single provider config.
 </Callout>
 
 ### 2. Create an interactable
@@ -266,10 +268,10 @@ const [state, { setState, setSelected, isPending, error, flush }] = useInteracta
 
 ### `Interactables`
 
-The scope resource that manages all interactables. Register it via `useAui`:
+The scope resource that manages all interactables. Register it via your provider's `config`:
 
 ```tsx
-const aui = useAui({
+AuiConfig({
   interactables: Interactables(),
 });
 ```
@@ -291,10 +293,21 @@ By default, interactable state is in-memory and lost on page refresh. You can ad
 
 ```tsx
 import { useEffect } from "react";
-import { useAui, Interactables } from "@assistant-ui/react";
+import { AuiConfig, AuiProvider, Interactables, useAui } from "@assistant-ui/react";
 
 function MyRuntimeProvider({ children }) {
-  const aui = useAui({ interactables: Interactables() });
+  const aui = useAui();
+  const config = AuiConfig({ interactables: Interactables() });
+  return (
+    <AuiProvider extends={aui} config={config}>
+      <PersistenceSetup />
+      {children}
+    </AuiProvider>
+  );
+}
+
+function PersistenceSetup() {
+  const aui = useAui();
 
   useEffect(() => {
     // Set up persistence adapter
@@ -311,7 +324,7 @@ function MyRuntimeProvider({ children }) {
     }
   }, [aui]);
 
-  return /* ... */;
+  return null;
 }
 ```
 
@@ -346,7 +359,7 @@ aui.interactables.importState(snapshot);
 You can use `Interactables` alongside `Tools`:
 
 ```tsx
-const aui = useAui({
+AuiConfig({
   tools: Tools({ toolkit: myToolkit }),
   interactables: Interactables(),
 });