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

package/.docs/organized/code-examples/with-resumable-stream.md

@@ -476,9 +476,8 @@ async function createStore(): Promise<ResumableStreamStore> {
   }
 
   const { createClient } = await import("redis");
-  const { createRedisResumableStreamStore } = await import(
-    "assistant-stream/resumable/redis"
-  );
+  const { createRedisResumableStreamStore } =
+    await import("assistant-stream/resumable/redis");
 
   const client = createClient({ url });
   client.on("error", (err) => {
@@ -493,10 +492,11 @@ async function createStore(): Promise<ResumableStreamStore> {
 ## next.config.js
 
 ```javascript
+import { withAui } from "@assistant-ui/next";
 /** @type {import('next').NextConfig} */
 const nextConfig = {};
 
-export default nextConfig;
+export default withAui(nextConfig);
 
 ```
 
@@ -514,27 +514,28 @@ export default nextConfig;
     "start": "next start"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.64",
-    "@ai-sdk/react": "^3.0.190",
+    "@ai-sdk/openai": "^3.0.67",
+    "@ai-sdk/react": "^3.0.195",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/store": "workspace:*",
     "@assistant-ui/tap": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "ai": "^6.0.188",
+    "ai": "^6.0.193",
     "assistant-stream": "workspace:*",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.16.0",
+    "lucide-react": "^1.17.0",
     "next": "^16.2.6",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "redis": "^5.12.1",
+    "redis": "^6.0.0",
     "tailwind-merge": "^3.6.0",
     "zod": "^4.4.3"
   },
   "devDependencies": {
+    "@assistant-ui/next": "workspace:*",
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.3.0",
     "@types/node": "^25.9.1",

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

@@ -82,10 +82,10 @@ export default function Home() {
     <div className="min-h-screen bg-linear-to-br from-gray-50 to-gray-100 p-8 dark:from-gray-900 dark:to-gray-800">
       <div className="mx-auto max-w-4xl">
         <div className="mb-8">
-          <h1 className="mb-2 font-bold text-4xl text-gray-900 dark:text-white">
+          <h1 className="mb-2 text-4xl font-bold text-gray-900 dark:text-white">
             @assistant-ui/store Example
           </h1>
-          <p className="text-gray-600 text-lg dark:text-gray-400">
+          <p className="text-lg text-gray-600 dark:text-gray-400">
             Demonstrating tap-based state management with scopes, lists, and
             providers
           </p>
@@ -134,15 +134,15 @@ const Foo = () => {
     <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-md transition-shadow hover:shadow-lg dark:border-gray-700 dark:bg-gray-800">
       <div className="space-y-3">
         <div className="flex items-center gap-2">
-          <span className="font-semibold text-gray-500 text-sm dark:text-gray-400">
+          <span className="text-sm font-semibold text-gray-500 dark:text-gray-400">
             ID:
           </span>
-          <span className="font-mono text-gray-900 text-sm dark:text-white">
+          <span className="font-mono text-sm text-gray-900 dark:text-white">
             {fooId}
           </span>
         </div>
         <div className="flex items-center gap-2">
-          <span className="font-semibold text-gray-500 text-sm dark:text-gray-400">
+          <span className="text-sm font-semibold text-gray-500 dark:text-gray-400">
             Value:
           </span>
           <span className="text-gray-900 dark:text-white">{fooBar}</span>
@@ -151,14 +151,14 @@ const Foo = () => {
           <button
             type="button"
             onClick={handleUpdate}
-            className="flex-1 rounded-md bg-blue-600 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
+            className="flex-1 rounded-md bg-blue-600 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none dark:focus:ring-offset-gray-800"
           >
             Update
           </button>
           <button
             type="button"
             onClick={() => aui.foo().remove()}
-            className="rounded-md bg-red-600 px-4 py-2 font-medium text-white transition-colors hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
+            className="rounded-md bg-red-600 px-4 py-2 font-medium text-white transition-colors hover:bg-red-700 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:outline-none dark:focus:ring-offset-gray-800"
           >
             Delete
           </button>
@@ -183,7 +183,7 @@ const AddFooButton = () => {
     <button
       type="button"
       onClick={() => aui.fooList().addFoo()}
-      className="rounded-md bg-green-600 px-4 py-2 font-medium text-white transition-colors hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
+      className="rounded-md bg-green-600 px-4 py-2 font-medium text-white transition-colors hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:outline-none dark:focus:ring-offset-gray-800"
     >
       Add New
     </button>
@@ -224,7 +224,7 @@ const EventLog = () => {
       </h3>
       <div className="max-h-48 space-y-2 overflow-y-auto">
         {logs.length === 0 ? (
-          <p className="text-gray-500 text-sm dark:text-gray-400">
+          <p className="text-sm text-gray-500 dark:text-gray-400">
             No events yet. Try updating or deleting a foo.
           </p>
         ) : (
@@ -266,12 +266,12 @@ export const ExampleApp = () => {
       <div className="space-y-6">
         <div className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
           <div className="flex items-center justify-between">
-            <h2 className="font-semibold text-gray-900 text-xl dark:text-white">
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
               Foo List <FooListLength />
             </h2>
             <AddFooButton />
           </div>
-          <p className="mt-1 text-gray-600 text-sm dark:text-gray-400">
+          <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
             Each item is rendered in its own FooProvider with scoped access
           </p>
         </div>
@@ -465,13 +465,14 @@ export const FooList = ({
 ## next.config.ts
 
 ```typescript
+import { withAui } from "@assistant-ui/next";
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   /* config options here */
 };
 
-export default nextConfig;
+export default withAui(nextConfig);
 
 ```
 
@@ -496,6 +497,7 @@ export default nextConfig;
     "react-dom": "^19.2.6"
   },
   "devDependencies": {
+    "@assistant-ui/next": "workspace:*",
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.3.0",
     "@types/node": "^25.9.1",

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

@@ -65,13 +65,13 @@
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@tailwindcss/vite": "^4.3.0",
-    "@tanstack/react-router": "^1.170.6",
-    "@tanstack/react-start": "^1.168.9",
+    "@tanstack/react-router": "^1.170.10",
+    "@tanstack/react-start": "^1.168.18",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.16.0",
+    "lucide-react": "^1.17.0",
     "nitro": "^3.0.260311-beta",
-    "openai": "^6.38.0",
+    "openai": "^6.39.1",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "remark-gfm": "^4.0.1",
@@ -303,7 +303,6 @@ export const Route = createRootRoute({
 function RootDocument({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      {/* biome-ignore lint/style/noHeadElement: TanStack Start uses standard HTML head */}
       <head>
         <HeadContent />
       </head>
@@ -556,15 +555,16 @@ export const chatStream = createServerFn({ method: "POST" })
   }
   body {
     @apply bg-background text-foreground m-0;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    font-family:
+      -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
       "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
       sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   code {
-    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-      monospace;
+    font-family:
+      source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
   }
 }
 
@@ -737,7 +737,6 @@ export const chatStream = createServerFn({ method: "POST" })
 {
   "extends": "@assistant-ui/x-buildutils/ts/base",
   "compilerOptions": {
-    "types": ["vite/client"],
     "paths": {
       "@/*": ["./src/*"],
       "@/components/assistant-ui/*": [

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

@@ -363,7 +363,7 @@ export function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
           {children}
 
           {/* Control panel */}
-          <div className="border-t bg-card p-4">
+          <div className="bg-card border-t p-4">
             <div className="mx-auto flex max-w-2xl flex-col gap-2">
               <div className="flex items-center gap-2">
                 <span className="text-muted-foreground text-sm">Controls:</span>
@@ -379,7 +379,7 @@ export function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
                       },
                     ]);
                   }}
-                  className="rounded-md bg-primary px-3 py-1 font-medium text-primary-foreground text-sm hover:bg-primary/90"
+                  className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-3 py-1 text-sm font-medium"
                 >
                   Add User Message
                 </button>
@@ -397,21 +397,21 @@ export function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
                       },
                     ]);
                   }}
-                  className="rounded-md bg-secondary px-3 py-1 font-medium text-secondary-foreground text-sm hover:bg-secondary/80"
+                  className="bg-secondary text-secondary-foreground hover:bg-secondary/80 rounded-md px-3 py-1 text-sm font-medium"
                 >
                   Add Assistant Message
                 </button>
                 <button
                   type="button"
                   onClick={() => setIsRunning(!isRunning)}
-                  className="rounded-md bg-accent px-3 py-1 font-medium text-accent-foreground text-sm hover:bg-accent/80"
+                  className="bg-accent text-accent-foreground hover:bg-accent/80 rounded-md px-3 py-1 text-sm font-medium"
                 >
                   {isRunning ? "Stop" : "Start"} Running
                 </button>
                 <button
                   type="button"
                   onClick={() => updateCurrentThreadMessages(() => [])}
-                  className="rounded-md bg-destructive px-3 py-1 font-medium text-sm text-white hover:bg-destructive/90"
+                  className="bg-destructive hover:bg-destructive/90 rounded-md px-3 py-1 text-sm font-medium text-white"
                 >
                   Clear
                 </button>
@@ -431,9 +431,9 @@ export function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
 
 function ThreadListSidebar() {
   return (
-    <ThreadListPrimitive.Root className="flex w-64 flex-col border-r bg-muted/30">
+    <ThreadListPrimitive.Root className="bg-muted/30 flex w-64 flex-col border-r">
       <div className="border-b p-4">
-        <h2 className="font-semibold text-lg">Threads</h2>
+        <h2 className="text-lg font-semibold">Threads</h2>
       </div>
 
       <div className="flex-1 overflow-y-auto p-2">
@@ -443,7 +443,7 @@ function ThreadListSidebar() {
       </div>
 
       <div className="border-t p-2">
-        <ThreadListPrimitive.New className="w-full rounded-md bg-primary px-3 py-2 font-medium text-primary-foreground text-sm hover:bg-primary/90">
+        <ThreadListPrimitive.New className="bg-primary text-primary-foreground hover:bg-primary/90 w-full rounded-md px-3 py-2 text-sm font-medium">
           + New Thread
         </ThreadListPrimitive.New>
       </div>
@@ -453,7 +453,7 @@ function ThreadListSidebar() {
 
 function ThreadListItem() {
   return (
-    <ThreadListItemPrimitive.Root className="mb-1 w-full rounded-md p-3 text-left transition-colors hover:bg-muted data-active:bg-primary data-active:text-primary-foreground">
+    <ThreadListItemPrimitive.Root className="hover:bg-muted data-active:bg-primary data-active:text-primary-foreground mb-1 w-full rounded-md p-3 text-left transition-colors">
       <ThreadListItemPrimitive.Trigger className="w-full text-left">
         <div className="font-medium">
           <ThreadListItemPrimitive.Title fallback="New Thread" />
@@ -486,8 +486,8 @@ export default function Home() {
 
   return (
     <div className="flex h-full flex-col">
-      <header className="border-b bg-card px-6 py-4">
-        <h1 className="font-bold text-2xl">Tap-Native Runtime Example</h1>
+      <header className="bg-card border-b px-6 py-4">
+        <h1 className="text-2xl font-bold">Tap-Native Runtime Example</h1>
         <p className="text-muted-foreground text-sm">
           Built with ExternalThread and InMemoryThreadList
         </p>
@@ -497,7 +497,7 @@ export default function Home() {
         {isEmpty ? (
           <div className="flex h-full items-center justify-center">
             <div className="text-center">
-              <h2 className="mb-2 font-semibold text-xl">No messages yet</h2>
+              <h2 className="mb-2 text-xl font-semibold">No messages yet</h2>
               <p className="text-muted-foreground text-sm">
                 Use the controls below to add messages
               </p>
@@ -507,14 +507,14 @@ export default function Home() {
           <>
             <Thread />
             <div className="mx-auto mt-4 max-w-2xl space-y-2">
-              <div className="rounded-lg border bg-card p-4">
-                <h3 className="mb-2 font-semibold text-sm">
+              <div className="bg-card rounded-lg border p-4">
+                <h3 className="mb-2 text-sm font-semibold">
                   About This Example
                 </h3>
-                <ul className="space-y-1 text-muted-foreground text-sm">
+                <ul className="text-muted-foreground space-y-1 text-sm">
                   <li>
                     • Uses{" "}
-                    <code className="rounded bg-muted px-1">
+                    <code className="bg-muted rounded px-1">
                       ExternalThread
                     </code>{" "}
                     to display messages
@@ -525,7 +525,7 @@ export default function Home() {
                 </ul>
               </div>
 
-              <div className="text-center text-muted-foreground text-xs">
+              <div className="text-muted-foreground text-center text-xs">
                 This is a minimal implementation. Features like editing,
                 branching, and attachments can be added.
               </div>
@@ -572,13 +572,14 @@ export default function Home() {
 ## next.config.ts
 
 ```typescript
+import { withAui } from "@assistant-ui/next";
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   /* config options here */
 };
 
-export default nextConfig;
+export default withAui(nextConfig);
 
 ```
 
@@ -601,13 +602,14 @@ export default nextConfig;
     "@assistant-ui/ui": "workspace:*",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.16.0",
+    "lucide-react": "^1.17.0",
     "next": "^16.2.6",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
+    "@assistant-ui/next": "workspace:*",
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.3.0",
     "@types/node": "^25.9.1",

package/.docs/raw/docs/(docs)/architecture.mdx

@@ -33,7 +33,26 @@ A React state management context for assistant chat. The runtime handles data co
 A hosted service that enhances your assistant experience with comprehensive thread management and message history. Assistant Cloud stores complete message history, automatically persists threads, supports human-in-the-loop workflows, and integrates with common auth providers to seamlessly allow users to resume conversations at any point. [Cloud Docs](/docs/cloud)
 
 
-### There are three common ways to architect your assistant-ui application:
+## What each layer owns
+
+Before picking a runtime or wiring components, it helps to see which layer owns which responsibility. assistant-ui draws hard lines between rendering, conversation state, and where the model actually runs.
+
+### UI layer
+Primitives and prebuilt components render the assistant experience: thread, messages, composer, message parts, actions, attachments, suggestions. They read and write through the runtime context, not directly against the backend or model.
+
+### Runtime layer
+The state and behavior boundary between UI and backend. The runtime owns or adapts conversation state: messages, thread state, composer state, run lifecycle, branching, editing, regeneration. Different runtimes exist because different backends own this state differently. `LocalRuntime` keeps state internal; `ExternalStoreRuntime` delegates to your store.
+
+### Backend / agent layer
+Produces assistant output and app-specific behavior. Depending on the runtime and protocol, the backend may emit text, message parts, tool calls, metadata, agent state, attachments, or other events that the runtime maps into UI state.
+
+### Integration / protocol layer
+Runtime adapters and protocols bridge assistant-ui to different backend shapes: AI SDK, LangGraph, LangChain, ADK, A2A, AG-UI, OpenCode, or your own. The DataStream and AssistantTransport protocols let a generic backend talk to assistant-ui without a custom adapter per app.
+
+### Persistence layer
+Thread and message history can be stored by Assistant Cloud or by your own database via thread and history adapters. Persistence is separate from rendering and backend generation, though the runtime coordinates with it.
+
+## There are three common ways to architect your assistant-ui application:
 
 #### **1. Direct Integration with External Providers**
 
@@ -90,4 +109,26 @@ graph TD
     style E fill:#fca5a5,stroke:#7f1d1d,stroke-width:2px,color:#7f1d1d,font-weight:bold
     
     class A,B,C,D,E default
-```
+```
+
+## Going deeper
+
+These pages go one level deeper on runtime internals, adapters, and persistence.
+
+<Cards>
+  <Card
+    title="Runtime architecture"
+    description="Core runtimes, protocol layers, and framework adapters — what each layer owns."
+    href="/docs/runtimes/concepts/architecture"
+  />
+  <Card
+    title="Adapters"
+    description="Attachments, speech, feedback, history, suggestions across runtimes."
+    href="/docs/runtimes/concepts/adapters"
+  />
+  <Card
+    title="Threads"
+    description="Multi-thread support: cloud, custom database, ExternalStore."
+    href="/docs/runtimes/concepts/threads"
+  />
+</Cards>

package/.docs/raw/docs/(docs)/cli.mdx

@@ -72,13 +72,12 @@ Use `--example` to create a project from one of the monorepo examples with full
 | `with-ag-ui` | [AG-UI protocol](/docs/runtimes/ag-ui) integration | `npx assistant-ui create my-app -e with-ag-ui` |
 | `with-assistant-transport` | Custom backend via Assistant Transport | `npx assistant-ui create my-app -e with-assistant-transport` |
 | `with-resumable-stream` | Resumable LLM stream that survives reload mid-response | `npx assistant-ui create my-app -e with-resumable-stream` |
-| `with-chain-of-thought` | Chain-of-thought with JS execution | `npx assistant-ui create my-app -e with-chain-of-thought` |
+| `with-chain-of-thought` | Chain-of-thought reasoning, tool calls, and source citations | `npx assistant-ui create my-app -e with-chain-of-thought` |
 | `with-external-store` | External message store | `npx assistant-ui create my-app -e with-external-store` |
 | `with-custom-thread-list` | Custom thread list UI | `npx assistant-ui create my-app -e with-custom-thread-list` |
 | `with-react-hook-form` | React Hook Form integration | `npx assistant-ui create my-app -e with-react-hook-form` |
 | `with-ffmpeg` | FFmpeg video processing tool | `npx assistant-ui create my-app -e with-ffmpeg` |
 | `with-elevenlabs-scribe` | ElevenLabs voice transcription | `npx assistant-ui create my-app -e with-elevenlabs-scribe` |
-| `with-parent-id-grouping` | Message part grouping | `npx assistant-ui create my-app -e with-parent-id-grouping` |
 | `with-expo` | Expo / React Native | `npx assistant-ui create my-app -e with-expo` |
 | `with-react-ink` | Terminal UI chat | `npx assistant-ui create my-app -e with-react-ink` |
 | `with-react-router` | React Router v7 integration | `npx assistant-ui create my-app -e with-react-router` |

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

@@ -38,43 +38,51 @@ const ReadableComponent = makeAssistantVisible(MyComponent);
 
 Tools are functions that the assistant can use to interact with your application. They can be provided through various mechanisms:
 
-```tsx
+```tsx title="app/form-toolkit.tsx"
+"use generative";
+
+import { defineToolkit } from "@assistant-ui/react";
+import { z } from "zod";
+
+export default defineToolkit({
+  submitForm: {
+    description: "Submit the form with the user's details.",
+    parameters: z.object({
+      email: z.string().email(),
+      name: z.string(),
+    }),
+    execute: async ({ email, name }) => {
+      "use client";
+      // Implementation
+      return { success: true };
+    },
+    renderText: { running: "Submitting…", complete: "Submitted" },
+  },
+});
+```
+
+```tsx title="app/Form.tsx"
 import {
+  AuiProvider,
   makeAssistantVisible,
-  makeAssistantTool,
-  tool,
+  Tools,
+  useAui,
 } from "@assistant-ui/react";
-import { z } from "zod";
+import toolkit from "./form-toolkit";
 
 // Via makeAssistantVisible's clickable option
 const ClickableButton = makeAssistantVisible(Button, {
   clickable: true, // Provides a click tool
 });
 
-// Via makeAssistantTool
-const submitForm = tool({
-  parameters: z.object({
-    email: z.string().email(),
-    name: z.string(),
-  }),
-  execute: async ({ email, name }) => {
-    // Implementation
-    return { success: true };
-  },
-});
-
-const SubmitFormTool = makeAssistantTool({
-  ...submitForm,
-  toolName: "submitForm"
-});
-
 // Use in your component
 function Form() {
+  const aui = useAui({ tools: Tools({ toolkit }) });
+
   return (
-    <div>
+    <AuiProvider value={aui}>
       <form>{/* form fields */}</form>
-      <SubmitFormTool />
-    </div>
+    </AuiProvider>
   );
 }
 ```
@@ -134,8 +142,8 @@ Multiple providers can be registered, and their contexts will be composed:
 
 2. **Tools**
 
-   - Use the tool() helper to define tool schemas and behavior
-   - Prefer makeAssistantTool for reusable tools
+   - Use toolkit entries to define tool schemas and behavior
+   - Prefer `Tools({ toolkit })` for reusable tools
    - Handle errors gracefully
    - Consider async operations and loading states
    - Use the built-in click tool when possible

package/.docs/raw/docs/(docs)/copilots/motivation.mdx

@@ -98,44 +98,50 @@ function SmartTransactionHistory() {
 }
 ```
 
-### 3. Creating Tools (makeAssistantTool)
+### 3. Creating Tools
 
 Let's add transaction-specific tools for the assistant:
 
-```tsx
-import { makeAssistantTool, tool } from "@assistant-ui/react";
+```tsx title="app/transaction-toolkit.tsx"
+"use generative";
+
+import { defineToolkit } from "@assistant-ui/react";
 import { z } from "zod";
 
-// Define a tool to analyze transactions
-const analyzeTransaction = tool({
-  parameters: z.object({
-    transactionId: z.string(),
-    merchantName: z.string(),
-  }),
-  execute: async ({ transactionId, merchantName }) => {
-    // Analyze transaction patterns, merchant reputation, etc.
-    return {
-      isSuspicious: false,
-      merchantRating: 4.5,
-      similarTransactions: 3,
-      refundEligible: true,
-    };
+export default defineToolkit({
+  analyzeTransaction: {
+    description: "Analyze a transaction's risk and refund eligibility.",
+    parameters: z.object({
+      transactionId: z.string(),
+      merchantName: z.string(),
+    }),
+    execute: async ({ transactionId, merchantName }) => {
+      "use client";
+      // Analyze transaction patterns, merchant reputation, etc.
+      return {
+        isSuspicious: false,
+        merchantRating: 4.5,
+        similarTransactions: 3,
+        refundEligible: true,
+      };
+    },
+    renderText: { running: "Analyzing transaction…", complete: "Analysis ready" },
   },
 });
+```
 
-// Create a tool component
-const TransactionAnalyzer = makeAssistantTool({
-  ...analyzeTransaction,
-  toolName: "analyzeTransaction",
-});
+```tsx title="app/SmartTransactionHistory.tsx"
+import { AuiProvider, Tools, useAui } from "@assistant-ui/react";
+import toolkit from "./transaction-toolkit";
 
 function SmartTransactionHistory() {
+  const aui = useAui({ tools: Tools({ toolkit }) });
+
   // Previous instructions...
   return (
-    <>
+    <AuiProvider value={aui}>
       <TransactionHistory transactions={transactions} />
-      <TransactionAnalyzer />
-    </>
+    </AuiProvider>
   );
 }
 ```
@@ -191,6 +197,6 @@ This creates a more intuitive and safer banking experience while maintaining the
 Learn more about each API:
 
 - [makeAssistantVisible](make-assistant-visible) for component understanding
-- [makeAssistantTool](make-assistant-tool) for transaction analysis
+- [Tools](/docs/tools/defining-tools) for transaction analysis
 - [useAssistantInstructions](use-assistant-instructions) for behavior guidance
 - [Model Context](model-context) for dynamic context management

package/.docs/raw/docs/(docs)/installation.mdx

@@ -465,7 +465,7 @@ export default function MyApp() {
   <Card
     title="Generative UI"
     description="Create rich UI components for tool executions"
-    href="/docs/guides/tool-ui"
+    href="/docs/tools/tool-ui"
   />
   <Card
     title="Add Persistence"

package/.docs/raw/docs/(reference)/api-reference/adapters/persistence.mdx

@@ -3,7 +3,7 @@ title: Persistence Adapters
 description: Persistence adapters for saving assistant-ui message history, remote thread lists, and long-running chat sessions across browser reloads.
 ---
 
-import { GenericThreadHistoryAdapter, InMemoryThreadListAdapter, MessageFormatAdapter, RemoteThreadListAdapter, ThreadHistoryAdapter } from "@/generated/typeDocs";
+import { ExportedMessageRepository, GenericThreadHistoryAdapter, InMemoryThreadListAdapter, MessageFormatAdapter, RemoteThreadListAdapter, ThreadHistoryAdapter } from "@/generated/typeDocs";
 
 {/* AUTO-GENERATED PAGE by scripts/generate-api-reference.mts */}
 {/* Do not edit manually. */}
@@ -14,6 +14,10 @@ import { GenericThreadHistoryAdapter, InMemoryThreadListAdapter, MessageFormatAd
 
 ## API Reference
 
+### ExportedMessageRepository
+
+<ParametersTable {...ExportedMessageRepository} />
+
 ### GenericThreadHistoryAdapter
 
 <ParametersTable {...GenericThreadHistoryAdapter} />