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

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

@@ -20,7 +20,7 @@ export async function POST(req: Request) {
   const { messages }: { messages: UIMessage[] } = await req.json();
 
   const result = streamText({
-    model: openai("gpt-4o"),
+    model: openai("gpt-5.4-nano"),
     system:
       "You are a helpful assistant that can generate HTML code. When the user asks you to create any visual content, UI, or webpage, use the render_html tool to render it in the browser. Always use the render_html tool for HTML output rather than showing code in a code block.",
     messages: await convertToModelMessages(messages),
@@ -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,29 +420,30 @@ export default nextConfig;
     "start": "next start"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.61",
+    "@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.175",
+    "ai": "^6.0.193",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.14.0",
-    "next": "^16.2.4",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "tailwind-merge": "^3.5.0",
+    "lucide-react": "^1.17.0",
+    "next": "^16.2.6",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "tailwind-merge": "^3.6.0",
     "zod": "^4.4.3"
   },
   "devDependencies": {
+    "@assistant-ui/next": "workspace:*",
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.2.4",
-    "@types/node": "^25.6.0",
-    "@types/react": "^19.2.14",
+    "@tailwindcss/postcss": "^4.3.0",
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.14",
-    "tailwindcss": "^4.2.4",
+    "postcss": "^8.5.15",
+    "tailwindcss": "^4.3.0",
     "tw-animate-css": "^1.4.0",
     "typescript": "^6.0.3"
   }

package/.docs/organized/code-examples/with-assistant-transport.md

@@ -149,8 +149,8 @@ export default function RootLayout({
     <html lang="en">
       <body className="font-sans antialiased">
         <div className="flex h-screen flex-col">
-          <header className="border-b bg-background px-4 py-2">
-            <h1 className="font-semibold text-lg">
+          <header className="bg-background border-b px-4 py-2">
+            <h1 className="text-lg font-semibold">
               Assistant Transport Example
             </h1>
           </header>
@@ -170,9 +170,11 @@ export default function RootLayout({
 
 import {
   AssistantRuntimeProvider,
+  Tools,
   type AssistantTransportConnectionMetadata,
-  makeAssistantTool,
+  type Toolkit,
   unstable_createMessageConverter as createMessageConverter,
+  useAui,
   useAssistantTransportRuntime,
 } from "@assistant-ui/react";
 import {
@@ -182,48 +184,55 @@ import {
 import type { ReactNode } from "react";
 import { z } from "zod";
 
-// Frontend tool with execute function
-const WeatherTool = makeAssistantTool({
-  type: "frontend",
-  toolName: "get_weather",
-  description: "Get the current weather for a city",
-  parameters: z.object({
-    location: z.string().describe("The city to get weather for"),
-    unit: z
-      .enum(["celsius", "fahrenheit"])
-      .optional()
-      .describe("Temperature unit"),
-  }),
-  execute: async ({ location, unit = "celsius" }) => {
-    console.log(`Getting weather for ${location} in ${unit}`);
-    // Simulate API call
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-
-    const temp = Math.floor(Math.random() * 30) + 10;
-    const conditions = ["sunny", "cloudy", "rainy", "partly cloudy"];
-    const condition = conditions[Math.floor(Math.random() * conditions.length)];
-
-    return {
-      location,
-      temperature: temp,
-      unit,
-      condition,
-      humidity: Math.floor(Math.random() * 40) + 40,
-      windSpeed: Math.floor(Math.random() * 20) + 5,
-    };
-  },
-  streamCall: async (reader) => {
-    console.log("streamCall", reader);
-    const city = await reader.args.get("location");
-    console.log("location", city);
+const toolkit = {
+  get_weather: {
+    type: "frontend",
+    description: "Get the current weather for a city",
+    parameters: z.object({
+      location: z.string().describe("The city to get weather for"),
+      unit: z
+        .enum(["celsius", "fahrenheit"])
+        .optional()
+        .describe("Temperature unit"),
+    }),
+    execute: async ({ location, unit = "celsius" }) => {
+      console.log(`Getting weather for ${location} in ${unit}`);
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      const temp = Math.floor(Math.random() * 30) + 10;
+      const conditions = ["sunny", "cloudy", "rainy", "partly cloudy"];
+      const condition =
+        conditions[Math.floor(Math.random() * conditions.length)];
+
+      return {
+        location,
+        temperature: temp,
+        unit,
+        condition,
+        humidity: Math.floor(Math.random() * 40) + 40,
+        windSpeed: Math.floor(Math.random() * 20) + 5,
+      };
+    },
+    streamCall: async (reader) => {
+      console.log("streamCall", reader);
+      const city = await reader.args.get("location");
+      console.log("location", city);
 
-    const args = await reader.args.get();
-    console.log("args", args);
+      const args = await reader.args.get();
+      console.log("args", args);
 
-    const result = await reader.response.get();
-    console.log("result", result);
+      const result = await reader.response.get();
+      console.log("result", result);
+    },
+    renderText: {
+      running: ({ args }) => `Getting weather for ${args.location ?? "..."}`,
+      complete: ({ args, result }) =>
+        result
+          ? `${args.location}: ${result.temperature}° ${result.unit}, ${result.condition}`
+          : "Weather lookup complete",
+    },
   },
-});
+} satisfies Toolkit;
 
 type MyRuntimeProviderProps = {
   children: ReactNode;
@@ -295,11 +304,12 @@ export function MyRuntimeProvider({ children }: MyRuntimeProviderProps) {
       console.log("Request cancelled");
     },
   });
+  const aui = useAui({
+    tools: Tools({ toolkit }),
+  });
 
   return (
-    <AssistantRuntimeProvider runtime={runtime}>
-      <WeatherTool />
-
+    <AssistantRuntimeProvider aui={aui} runtime={runtime}>
       {children}
     </AssistantRuntimeProvider>
   );
@@ -383,6 +393,7 @@ export default function Home() {
 ## next.config.js
 
 ```javascript
+import { withAui } from "@assistant-ui/next";
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   experimental: {
@@ -398,7 +409,7 @@ const nextConfig = {
   },
 };
 
-export default nextConfig;
+export default withAui(nextConfig);
 
 ```
 
@@ -422,21 +433,22 @@ export default nextConfig;
     "@assistant-ui/ui": "workspace:*",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.14.0",
-    "next": "^16.2.4",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "tailwind-merge": "^3.5.0",
+    "lucide-react": "^1.17.0",
+    "next": "^16.2.6",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "tailwind-merge": "^3.6.0",
     "zod": "^4.4.3"
   },
   "devDependencies": {
+    "@assistant-ui/next": "workspace:*",
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.2.4",
-    "@types/node": "^25.6.0",
-    "@types/react": "^19.2.14",
+    "@tailwindcss/postcss": "^4.3.0",
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.14",
-    "tailwindcss": "^4.2.4",
+    "postcss": "^8.5.15",
+    "tailwindcss": "^4.3.0",
     "tw-animate-css": "^1.4.0",
     "typescript": "^6.0.3"
   }