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

package/.docs/organized/code-examples/waterfall.md

@@ -88,13 +88,13 @@ import { WaterfallPage } from "@/lib/waterfall-page";
 
 export default function Home() {
   return (
-    <div className="min-h-screen bg-background p-8">
+    <div className="bg-background min-h-screen p-8">
       <div className="mx-auto max-w-6xl">
         <div className="mb-8">
-          <h1 className="mb-2 font-bold text-4xl text-foreground">
+          <h1 className="text-foreground mb-2 text-4xl font-bold">
             Waterfall Timeline
           </h1>
-          <p className="text-lg text-muted-foreground">
+          <p className="text-muted-foreground text-lg">
             Span visualization powered by @assistant-ui/react-o11y
           </p>
         </div>
@@ -411,14 +411,14 @@ export function WaterfallRow() {
       <SpanPrimitive.Indent
         baseIndent={8}
         indentPerLevel={12}
-        className="sticky left-0 z-10 flex shrink-0 items-center gap-1 overflow-hidden border-border border-r bg-background px-2 group-hover:bg-accent/50"
+        className="border-border bg-background group-hover:bg-accent/50 sticky left-0 z-10 flex shrink-0 items-center gap-1 overflow-hidden border-r px-2"
         style={{ width: LABEL_WIDTH, height: barHeight }}
       >
         <AuiIf condition={(s) => s.span.hasChildren}>
-          <SpanPrimitive.CollapseToggle className="flex shrink-0 items-center justify-center rounded p-0.5 text-muted-foreground hover:text-foreground">
+          <SpanPrimitive.CollapseToggle className="text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center rounded p-0.5">
             <svg
               aria-hidden="true"
-              className="size-3.5 transition-transform data-[collapsed=true]:[-rotate-90]"
+              className="data-[collapsed=true]:[-rotate-90] size-3.5 transition-transform"
               viewBox="0 0 16 16"
               fill="currentColor"
             >
@@ -430,7 +430,7 @@ export function WaterfallRow() {
           <span className="w-4.5 shrink-0" />
         </AuiIf>
         <SpanPrimitive.StatusIndicator className="size-1.5 shrink-0 rounded-full bg-current" />
-        <SpanPrimitive.TypeBadge className="shrink-0 rounded border border-border px-1 text-[10px] text-muted-foreground" />
+        <SpanPrimitive.TypeBadge className="border-border text-muted-foreground shrink-0 rounded border px-1 text-[10px]" />
         <SpanPrimitive.Name className="truncate text-sm" />
       </SpanPrimitive.Indent>
 
@@ -569,7 +569,6 @@ export function WaterfallTimeline() {
   ) as SpanState["timeRange"];
 
   // Measure outer container width — re-attach when scroll container mounts
-  // biome-ignore lint/correctness/useExhaustiveDependencies: hasSpans triggers re-attach when scroll container mounts
   useEffect(() => {
     const el = outerRef.current;
     if (!el) return;
@@ -588,7 +587,6 @@ export function WaterfallTimeline() {
   }, [hasSpans]);
 
   // Cmd + scroll wheel zoom — re-attach when scroll container mounts
-  // biome-ignore lint/correctness/useExhaustiveDependencies: hasSpans triggers re-attach when scroll container mounts
   useEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -653,14 +651,14 @@ export function WaterfallTimeline() {
 
   if (!hasSpans) {
     return (
-      <div className="rounded-lg border border-border py-12 text-center text-muted-foreground text-sm">
+      <div className="border-border text-muted-foreground rounded-lg border py-12 text-center text-sm">
         No spans recorded.
       </div>
     );
   }
 
   return (
-    <div ref={outerRef} className="rounded-lg border border-border">
+    <div ref={outerRef} className="border-border rounded-lg border">
       <div
         ref={scrollRef}
         className="overflow-auto"
@@ -668,11 +666,11 @@ export function WaterfallTimeline() {
       >
         {/* Time axis */}
         <div
-          className="sticky top-0 z-20 flex border-border border-b bg-background"
+          className="border-border bg-background sticky top-0 z-20 flex border-b"
           style={{ width: contentWidth }}
         >
           <div
-            className="sticky left-0 z-30 shrink-0 border-border border-r bg-background px-2 py-1.5 text-muted-foreground text-xs"
+            className="border-border bg-background text-muted-foreground sticky left-0 z-30 shrink-0 border-r px-2 py-1.5 text-xs"
             style={{ width: LABEL_WIDTH }}
           >
             Span
@@ -684,8 +682,6 @@ export function WaterfallTimeline() {
 
         {/* Span rows */}
         <WaterfallLayoutContext.Provider value={layoutValue}>
-          {/* biome-ignore lint/a11y/useKeyWithClickEvents: event delegation on span rows */}
-          {/* biome-ignore lint/a11y/noStaticElementInteractions: event delegation on span rows */}
           <div
             style={{ width: contentWidth }}
             onClick={(e) => {
@@ -704,7 +700,7 @@ export function WaterfallTimeline() {
       </div>
 
       {/* Legend */}
-      <div className="flex items-center gap-4 border-border border-t px-3 py-2 text-muted-foreground text-xs">
+      <div className="border-border text-muted-foreground flex items-center gap-4 border-t px-3 py-2 text-xs">
         <div className="flex items-center gap-1.5">
           <span
             className="size-2.5 rounded-sm"
@@ -750,13 +746,14 @@ export function WaterfallTimeline() {
 ## 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);
 
 ```
 
@@ -782,6 +779,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-a2a.md

@@ -257,7 +257,7 @@ function StateBadge({ state }: { state: A2ATaskState }) {
 
   return (
     <span
-      className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 font-medium text-xs ${config.color} ${config.bg}`}
+      className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ${config.color} ${config.bg}`}
     >
       {isActive ? (
         <span className="relative flex size-1.5">
@@ -286,7 +286,7 @@ function TaskStatusBar() {
       <StateBadge state={state} />
       <span className="text-muted-foreground">Task {task.id.slice(0, 8)}</span>
       {errorText && (
-        <span className="ml-auto text-red-600 text-xs">{errorText}</span>
+        <span className="ml-auto text-xs text-red-600">{errorText}</span>
       )}
     </div>
   );
@@ -295,18 +295,18 @@ function TaskStatusBar() {
 function ArtifactPartView({ part }: { part: A2APart }) {
   if (part.text !== undefined) {
     return (
-      <pre className="overflow-x-auto whitespace-pre-wrap rounded border bg-background p-2 font-mono text-xs">
+      <pre className="bg-background overflow-x-auto rounded border p-2 font-mono text-xs whitespace-pre-wrap">
         {part.text}
       </pre>
     );
   }
   if (part.data !== undefined) {
     return (
-      <div className="rounded border bg-background p-2">
-        <div className="mb-1 font-medium text-muted-foreground text-xs">
+      <div className="bg-background rounded border p-2">
+        <div className="text-muted-foreground mb-1 text-xs font-medium">
           Data
         </div>
-        <pre className="overflow-x-auto whitespace-pre-wrap font-mono text-xs">
+        <pre className="overflow-x-auto font-mono text-xs whitespace-pre-wrap">
           {JSON.stringify(part.data, null, 2)}
         </pre>
       </div>
@@ -316,7 +316,6 @@ function ArtifactPartView({ part }: { part: A2APart }) {
     const isImage = part.mediaType?.startsWith("image/");
     if (isImage) {
       return (
-        // biome-ignore lint/performance/noImgElement: example component
         <img
           src={part.url}
           alt={part.filename ?? "image"}
@@ -329,7 +328,7 @@ function ArtifactPartView({ part }: { part: A2APart }) {
         href={part.url}
         target="_blank"
         rel="noopener noreferrer"
-        className="inline-flex items-center gap-2 rounded border bg-background p-2 text-sm hover:bg-muted"
+        className="bg-background hover:bg-muted inline-flex items-center gap-2 rounded border p-2 text-sm"
       >
         <span>📄</span>
         <span>{part.filename ?? "Download"}</span>
@@ -345,7 +344,6 @@ function ArtifactPartView({ part }: { part: A2APart }) {
     const isImage = part.mediaType?.startsWith("image/");
     if (isImage) {
       return (
-        // biome-ignore lint/performance/noImgElement: example component
         <img
           src={`data:${part.mediaType};base64,${part.raw}`}
           alt={part.filename ?? "image"}
@@ -358,7 +356,7 @@ function ArtifactPartView({ part }: { part: A2APart }) {
       <a
         href={dataUri}
         download={part.filename ?? "download"}
-        className="inline-flex items-center gap-2 rounded border bg-background p-2 text-sm hover:bg-muted"
+        className="bg-background hover:bg-muted inline-flex items-center gap-2 rounded border p-2 text-sm"
       >
         <span>📎</span>
         <span>{part.filename ?? "File"}</span>
@@ -380,17 +378,17 @@ function ArtifactPanel() {
 
   return (
     <div className="max-h-80 overflow-y-auto border-t px-4 py-3">
-      <h3 className="mb-2 font-medium text-muted-foreground text-xs">
+      <h3 className="text-muted-foreground mb-2 text-xs font-medium">
         Artifacts ({artifacts.length})
       </h3>
       <div className="space-y-2">
         {artifacts.map((artifact) => (
           <div
             key={artifact.artifactId}
-            className="overflow-hidden rounded-md border bg-muted/30"
+            className="bg-muted/30 overflow-hidden rounded-md border"
           >
-            <div className="flex items-center gap-2 border-b bg-muted/50 px-3 py-1.5">
-              <span className="font-medium text-xs">
+            <div className="bg-muted/50 flex items-center gap-2 border-b px-3 py-1.5">
+              <span className="text-xs font-medium">
                 {artifact.name ?? artifact.artifactId}
               </span>
               {artifact.description && (
@@ -417,16 +415,16 @@ function AgentCardBanner() {
   if (!card) return null;
 
   return (
-    <div className="flex items-center gap-3 border-b bg-muted/30 px-4 py-2">
+    <div className="bg-muted/30 flex items-center gap-3 border-b px-4 py-2">
       <div className="flex-1">
-        <div className="font-medium text-sm">{card.name}</div>
+        <div className="text-sm font-medium">{card.name}</div>
         <div className="text-muted-foreground text-xs">{card.description}</div>
       </div>
       <div className="flex flex-wrap gap-1">
         {card.skills.map((skill) => (
           <span
             key={skill.id}
-            className="rounded-md bg-muted px-2 py-0.5 text-xs"
+            className="bg-muted rounded-md px-2 py-0.5 text-xs"
             title={skill.description}
           >
             {skill.name}
@@ -526,13 +524,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);
 
 ```
 
@@ -556,13 +555,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/organized/code-examples/with-ag-ui.md

@@ -263,17 +263,17 @@ export function MyRuntimeProvider({
 "use client";
 
 import {
-  useAssistantTool,
   useAui,
   AuiProvider,
   Suggestions,
+  Tools,
+  type Toolkit,
 } from "@assistant-ui/react";
 import { Thread } from "@/components/assistant-ui/thread";
 import { PlusIcon } from "lucide-react";
 
-function BrowserAlertTool() {
-  useAssistantTool<{ message: string }, { status: string }>({
-    toolName: "browser_alert",
+const toolkit = {
+  browser_alert: {
     description: "Display a native browser alert dialog to the user.",
     parameters: {
       type: "object",
@@ -291,24 +291,22 @@ function BrowserAlertTool() {
     },
     render: ({ args, result }) => (
       <div className="mt-3 w-full max-w-(--thread-max-width) rounded-lg border px-4 py-3 text-sm">
-        <p className="font-semibold text-muted-foreground">browser_alert</p>
+        <p className="text-muted-foreground font-semibold">browser_alert</p>
         <p className="mt-1">
           Requested alert with message:
-          <span className="ml-1 font-mono text-foreground">
+          <span className="text-foreground ml-1 font-mono">
             {JSON.stringify(args.message)}
           </span>
         </p>
         {result?.status === "shown" && (
-          <p className="mt-2 text-foreground/70 text-xs">
+          <p className="text-foreground/70 mt-2 text-xs">
             Alert displayed in this tab.
           </p>
         )}
       </div>
     ),
-  });
-
-  return null;
-}
+  },
+} satisfies Toolkit;
 
 function NewThreadButton() {
   const aui = useAui();
@@ -317,7 +315,7 @@ function NewThreadButton() {
     <button
       type="button"
       onClick={() => aui.threads().switchToNewThread()}
-      className="absolute top-4 right-4 z-10 flex items-center gap-2 rounded-lg border bg-background px-3 py-2 font-medium text-sm shadow-sm transition-colors hover:bg-accent"
+      className="bg-background hover:bg-accent absolute top-4 right-4 z-10 flex items-center gap-2 rounded-lg border px-3 py-2 text-sm font-medium shadow-sm transition-colors"
     >
       <PlusIcon className="size-4" />
       New Thread
@@ -348,12 +346,17 @@ function ThreadWithSuggestions() {
 }
 
 export default function Home() {
+  const aui = useAui({
+    tools: Tools({ toolkit }),
+  });
+
   return (
-    <main className="relative h-dvh">
-      <NewThreadButton />
-      <ThreadWithSuggestions />
-      <BrowserAlertTool />
-    </main>
+    <AuiProvider value={aui}>
+      <main className="relative h-dvh">
+        <NewThreadButton />
+        <ThreadWithSuggestions />
+      </main>
+    </AuiProvider>
   );
 }
 
@@ -392,13 +395,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);
 
 ```
 
@@ -416,20 +420,21 @@ export default nextConfig;
     "start": "next start"
   },
   "dependencies": {
-    "@ag-ui/client": "^0.0.53",
+    "@ag-ui/client": "^0.0.54",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ag-ui": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@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/organized/code-examples/with-ai-sdk-v6.md

@@ -292,12 +292,13 @@ export default function Home() {
 ## next.config.js
 
 ```javascript
+import { withAui } from "@assistant-ui/next";
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   transpilePackages: ["@assistant-ui/react", "@assistant-ui/react-ai-sdk"],
 };
 
-export default nextConfig;
+export default withAui(nextConfig);
 
 ```
 
@@ -315,15 +316,15 @@ export default nextConfig;
     "start": "next start"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.64",
+    "@ai-sdk/openai": "^3.0.67",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "ai": "^6.0.188",
+    "ai": "^6.0.193",
     "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",
@@ -331,6 +332,7 @@ export default nextConfig;
     "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-artifacts.md

@@ -211,7 +211,8 @@ export default function RootLayout({
 import { Thread } from "@/components/assistant-ui/thread";
 import {
   AssistantRuntimeProvider,
-  makeAssistantTool,
+  Tools,
+  type Toolkit,
   useAui,
   useAuiState,
   AuiProvider,
@@ -223,25 +224,26 @@ import { TerminalIcon, CodeIcon, EyeIcon } from "lucide-react";
 import { useState } from "react";
 import { z } from "zod";
 
-const RenderHTMLTool = makeAssistantTool({
-  toolName: "render_html",
-  description:
-    "Whenever the user asks for HTML code, call this function. The user will see the HTML code rendered in their browser.",
-  parameters: z.object({
-    code: z.string(),
-  }),
-  execute: async () => {
-    return {};
-  },
-  render: () => {
-    return (
-      <div className="my-2 inline-flex items-center gap-2 rounded-full border bg-primary px-4 py-2 text-primary-foreground">
-        <TerminalIcon className="size-4" />
-        render_html(&#123; code: &quot;...&quot; &#125;)
-      </div>
-    );
+const toolkit = {
+  render_html: {
+    description:
+      "Whenever the user asks for HTML code, call this function. The user will see the HTML code rendered in their browser.",
+    parameters: z.object({
+      code: z.string(),
+    }),
+    execute: async () => {
+      return {};
+    },
+    render: () => {
+      return (
+        <div className="bg-primary text-primary-foreground my-2 inline-flex items-center gap-2 rounded-full border px-4 py-2">
+          <TerminalIcon className="size-4" />
+          render_html(&#123; code: &quot;...&quot; &#125;)
+        </div>
+      );
+    },
   },
-});
+} satisfies Toolkit;
 
 function ArtifactsView() {
   const [tab, setTab] = useState<"source" | "preview">("source");
@@ -270,7 +272,7 @@ function ArtifactsView() {
           <button
             type="button"
             onClick={() => setTab("source")}
-            className={`inline-flex flex-1 items-center justify-center gap-2 px-4 py-2.5 font-medium text-sm transition-colors ${
+            className={`inline-flex flex-1 items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors ${
               tab === "source"
                 ? "bg-background text-foreground"
                 : "text-muted-foreground hover:text-foreground"
@@ -283,7 +285,7 @@ function ArtifactsView() {
             type="button"
             onClick={() => isComplete && setTab("preview")}
             disabled={!isComplete}
-            className={`inline-flex flex-1 items-center justify-center gap-2 px-4 py-2.5 font-medium text-sm transition-colors ${
+            className={`inline-flex flex-1 items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors ${
               !isComplete
                 ? "cursor-not-allowed opacity-50"
                 : tab === "preview"
@@ -296,7 +298,7 @@ function ArtifactsView() {
           </button>
         </div>
         {tab === "source" || !isComplete ? (
-          <div className="h-full overflow-y-auto whitespace-pre-line break-words px-4 py-2 font-mono text-sm">
+          <div className="h-full overflow-y-auto px-4 py-2 font-mono text-sm break-words whitespace-pre-line">
             {code}
           </div>
         ) : (
@@ -339,14 +341,16 @@ function ThreadWithSuggestions() {
 
 export default function Home() {
   const runtime = useChatRuntime();
+  const aui = useAui({
+    tools: Tools({ toolkit }),
+  });
 
   return (
-    <AssistantRuntimeProvider runtime={runtime}>
+    <AssistantRuntimeProvider aui={aui} runtime={runtime}>
       <main className="flex h-full justify-stretch">
         <div className="flex-grow basis-full">
           <ThreadWithSuggestions />
         </div>
-        <RenderHTMLTool />
         <ArtifactsView />
       </main>
     </AssistantRuntimeProvider>
@@ -388,6 +392,7 @@ export default function Home() {
 ## next.config.js
 
 ```javascript
+import { withAui } from "@assistant-ui/next";
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   transpilePackages: [
@@ -397,7 +402,7 @@ const nextConfig = {
   ],
 };
 
-export default nextConfig;
+export default withAui(nextConfig);
 
 ```
 
@@ -415,15 +420,15 @@ export default nextConfig;
     "start": "next start"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.64",
+    "@ai-sdk/openai": "^3.0.67",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "ai": "^6.0.188",
+    "ai": "^6.0.193",
     "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",
@@ -431,6 +436,7 @@ export default nextConfig;
     "zod": "^4.4.3"
   },
   "devDependencies": {
+    "@assistant-ui/next": "workspace:*",
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.3.0",
     "@types/node": "^25.9.1",