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

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

@@ -268,15 +268,15 @@ export function TodosPanel() {
     return (
       <div className="text-muted-foreground text-sm">
         Todos from the agent will appear here. This panel reads{" "}
-        <code className="rounded bg-muted px-1">state.todos</code> via{" "}
-        <code className="rounded bg-muted px-1">useLangChainState</code>.
+        <code className="bg-muted rounded px-1">state.todos</code> via{" "}
+        <code className="bg-muted rounded px-1">useLangChainState</code>.
       </div>
     );
   }
 
   return (
     <div className="space-y-2">
-      <h2 className="font-semibold text-muted-foreground text-sm uppercase tracking-wide">
+      <h2 className="text-muted-foreground text-sm font-semibold tracking-wide uppercase">
         Agent todos
       </h2>
       <ul className="space-y-1">
@@ -307,13 +307,14 @@ export function TodosPanel() {
 ## next.config.ts
 
 ```typescript
+import { withAui } from "@assistant-ui/next";
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   transpilePackages: ["@assistant-ui/react", "@assistant-ui/react-langchain"],
 };
 
-export default nextConfig;
+export default withAui(nextConfig);
 
 ```
 
@@ -335,24 +336,25 @@ export default nextConfig;
     "@assistant-ui/react-langchain": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "@langchain/langgraph-sdk": "^1.9.1",
-    "@langchain/react": "^0.3.3",
+    "@langchain/langgraph-sdk": "^1.9.10",
+    "@langchain/react": "^1.0.10",
     "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"
   },
   "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-langgraph.md

@@ -306,13 +306,31 @@ export function MyRuntimeProvider({
 "use client";
 
 import { Thread } from "@/components/assistant-ui/thread";
-import { PriceSnapshotTool } from "@/components/tools/price-snapshot/PriceSnapshotTool";
-import { PurchaseStockTool } from "@/components/tools/purchase-stock/PurchaseStockTool";
+import { PriceSnapshotToolUI } from "@/components/tools/price-snapshot/PriceSnapshotTool";
+import { PurchaseStockToolUI } from "@/components/tools/purchase-stock/PurchaseStockTool";
 import { ThreadList } from "@/components/assistant-ui/thread-list";
-import { useAui, AuiProvider, Suggestions } from "@assistant-ui/react";
+import {
+  useAui,
+  AuiProvider,
+  Suggestions,
+  Tools,
+  type Toolkit,
+} from "@assistant-ui/react";
+
+const toolkit = {
+  price_snapshot: {
+    type: "backend",
+    render: PriceSnapshotToolUI,
+  },
+  purchase_stock: {
+    type: "backend",
+    render: PurchaseStockToolUI,
+  },
+} satisfies Toolkit;
 
 function ThreadWithSuggestions() {
   const aui = useAui({
+    tools: Tools({ toolkit }),
     suggestions: Suggestions([
       {
         title: "Check stock price",
@@ -341,8 +359,6 @@ export default function Home() {
       </div>
       <div className="flex-grow">
         <ThreadWithSuggestions />
-        <PriceSnapshotTool />
-        <PurchaseStockTool />
       </div>
     </div>
   );
@@ -414,17 +430,17 @@ export function PriceSnapshot({
   return (
     <Card className="mx-auto w-full max-w-md">
       <CardHeader>
-        <CardTitle className="font-bold text-2xl">{ticker}</CardTitle>
+        <CardTitle className="text-2xl font-bold">{ticker}</CardTitle>
       </CardHeader>
       <CardContent>
         <div className="grid grid-cols-2 gap-4">
           <div className="col-span-2">
-            <p className="font-semibold text-3xl">${price?.toFixed(2)}</p>
+            <p className="text-3xl font-semibold">${price?.toFixed(2)}</p>
           </div>
           <div>
             <p className="text-muted-foreground text-sm">Day Change</p>
             <p
-              className={`flex items-center font-medium text-lg ${changeColor}`}
+              className={`flex items-center text-lg font-medium ${changeColor}`}
             >
               <ArrowIcon className="mr-1 h-4 w-4" />$
               {Math.abs(day_change)?.toFixed(2)} (
@@ -433,7 +449,7 @@ export function PriceSnapshot({
           </div>
           <div>
             <p className="text-muted-foreground text-sm">Last Updated</p>
-            <p className="font-medium text-lg">
+            <p className="text-lg font-medium">
               {new Date(time).toLocaleTimeString()}
             </p>
           </div>
@@ -451,7 +467,7 @@ export function PriceSnapshot({
 "use client";
 
 import { PriceSnapshot } from "./price-snapshot";
-import { makeAssistantToolUI } from "@assistant-ui/react";
+import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
 
 type PriceSnapshotToolArgs = {
   ticker: string;
@@ -464,26 +480,23 @@ type PriceSnapshotToolResult = {
     time: string;
   };
 };
-export const PriceSnapshotTool = makeAssistantToolUI<
+export const PriceSnapshotToolUI: ToolCallMessagePartComponent<
   PriceSnapshotToolArgs,
   string
->({
-  toolName: "price_snapshot",
-  render: function PriceSnapshotUI({ args, argsText, result }) {
-    const resultObj = result
-      ? (JSON.parse(result) as PriceSnapshotToolResult)
-      : undefined;
-
-    return (
-      <div className="mb-4 flex flex-col items-center gap-2">
-        <pre className="whitespace-pre-wrap">price_snapshot({argsText})</pre>
-        {resultObj && (
-          <PriceSnapshot ticker={args.ticker} {...resultObj.snapshot} />
-        )}
-      </div>
-    );
-  },
-});
+> = function PriceSnapshotUI({ args, argsText, result }) {
+  const resultObj = result
+    ? (JSON.parse(result) as PriceSnapshotToolResult)
+    : undefined;
+
+  return (
+    <div className="mb-4 flex flex-col items-center gap-2">
+      <pre className="whitespace-pre-wrap">price_snapshot({argsText})</pre>
+      {resultObj && (
+        <PriceSnapshot ticker={args.ticker} {...resultObj.snapshot} />
+      )}
+    </div>
+  );
+};
 
 ```
 
@@ -494,7 +507,7 @@ export const PriceSnapshotTool = makeAssistantToolUI<
 
 import { TransactionConfirmationPending } from "./transaction-confirmation-pending";
 import { TransactionConfirmationFinal } from "./transaction-confirmation-final";
-import { makeAssistantToolUI } from "@assistant-ui/react";
+import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
 
 type PurchaseStockArgs = {
   ticker: string;
@@ -503,39 +516,28 @@ type PurchaseStockArgs = {
   maxPurchasePrice: number;
 };
 
-export const PurchaseStockTool = makeAssistantToolUI<PurchaseStockArgs, string>(
-  {
-    toolName: "purchase_stock",
-    render: function PurchaseStockUI({
-      args,
-      argsText,
-      result,
-      status,
-      addResult,
-    }) {
-      const resultObj = result
-        ? (JSON.parse(result) as { transactionId: string })
-        : undefined;
-
-      const handleConfirm = async () => {
-        addResult(JSON.stringify({ confirmed: true }));
-      };
+export const PurchaseStockToolUI: ToolCallMessagePartComponent<
+  PurchaseStockArgs,
+  string
+> = function PurchaseStockUI({ args, argsText, result, status, addResult }) {
+  const resultObj = result
+    ? (JSON.parse(result) as { transactionId: string })
+    : undefined;
 
-      return (
-        <div className="mb-4 flex flex-col items-center gap-2">
-          <pre className="whitespace-pre-wrap">purchase_stock({argsText})</pre>
-          {!resultObj && status.type !== "running" && (
-            <TransactionConfirmationPending
-              {...args}
-              onConfirm={handleConfirm}
-            />
-          )}
-          {resultObj && <TransactionConfirmationFinal {...args} />}
-        </div>
-      );
-    },
-  },
-);
+  const handleConfirm = async () => {
+    addResult(JSON.stringify({ confirmed: true }));
+  };
+
+  return (
+    <div className="mb-4 flex flex-col items-center gap-2">
+      <pre className="whitespace-pre-wrap">purchase_stock({argsText})</pre>
+      {!resultObj && status.type !== "running" && (
+        <TransactionConfirmationPending {...args} onConfirm={handleConfirm} />
+      )}
+      {resultObj && <TransactionConfirmationFinal {...args} />}
+    </div>
+  );
+};
 
 ```
 
@@ -562,13 +564,13 @@ export function TransactionConfirmationFinal(props: TransactionConfirmation) {
     <Card className="mx-auto w-full max-w-md">
       <CardHeader className="text-center">
         <CheckCircle className="mx-auto mb-4 h-16 w-16 text-green-500" />
-        <CardTitle className="font-bold text-2xl text-green-700">
+        <CardTitle className="text-2xl font-bold text-green-700">
           Transaction Confirmed
         </CardTitle>
       </CardHeader>
       <CardContent className="space-y-4">
         <div className="rounded-md border border-green-200 bg-green-50 p-4">
-          <h3 className="mb-2 font-semibold text-green-800 text-lg">
+          <h3 className="mb-2 text-lg font-semibold text-green-800">
             Purchase Summary
           </h3>
           <div className="grid grid-cols-2 gap-2 text-sm">
@@ -583,12 +585,12 @@ export function TransactionConfirmationFinal(props: TransactionConfirmation) {
           </div>
         </div>
         <div className="rounded-md border border-green-300 bg-green-100 p-4">
-          <p className="font-semibold text-green-800 text-lg">Total Cost:</p>
-          <p className="font-bold text-2xl text-green-900">
+          <p className="text-lg font-semibold text-green-800">Total Cost:</p>
+          <p className="text-2xl font-bold text-green-900">
             ${(quantity * maxPurchasePrice)?.toFixed(2)}
           </p>
         </div>
-        <p className="text-center text-green-600 text-sm">
+        <p className="text-center text-sm text-green-600">
           Your purchase of {quantity} shares of {companyName} ({ticker}) has
           been successfully processed.
         </p>
@@ -629,26 +631,26 @@ export function TransactionConfirmationPending(props: TransactionConfirmation) {
   return (
     <Card className="mx-auto w-full max-w-md">
       <CardHeader>
-        <CardTitle className="font-bold text-2xl">
+        <CardTitle className="text-2xl font-bold">
           Confirm Transaction
         </CardTitle>
       </CardHeader>
       <CardContent className="space-y-4">
         <div className="grid grid-cols-2 gap-2">
-          <p className="font-medium text-muted-foreground text-sm">Ticker:</p>
-          <p className="font-bold text-sm">{ticker}</p>
-          <p className="font-medium text-muted-foreground text-sm">Company:</p>
+          <p className="text-muted-foreground text-sm font-medium">Ticker:</p>
+          <p className="text-sm font-bold">{ticker}</p>
+          <p className="text-muted-foreground text-sm font-medium">Company:</p>
           <p className="text-sm">{companyName}</p>
-          <p className="font-medium text-muted-foreground text-sm">Quantity:</p>
+          <p className="text-muted-foreground text-sm font-medium">Quantity:</p>
           <p className="text-sm">{quantity} shares</p>
-          <p className="font-medium text-muted-foreground text-sm">
+          <p className="text-muted-foreground text-sm font-medium">
             Max Purchase Price:
           </p>
           <p className="text-sm">${maxPurchasePrice?.toFixed(2)}</p>
         </div>
-        <div className="rounded-md bg-muted p-3">
-          <p className="font-medium text-sm">Total Maximum Cost:</p>
-          <p className="font-bold text-lg">
+        <div className="bg-muted rounded-md p-3">
+          <p className="text-sm font-medium">Total Maximum Cost:</p>
+          <p className="text-lg font-bold">
             ${(quantity * maxPurchasePrice)?.toFixed(2)}
           </p>
         </div>
@@ -836,6 +838,7 @@ export const sendMessage = (params: {
 ## next.config.ts
 
 ```typescript
+import { withAui } from "@assistant-ui/next";
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
@@ -849,7 +852,7 @@ const nextConfig: NextConfig = {
   },
 };
 
-export default nextConfig;
+export default withAui(nextConfig);
 
 ```
 
@@ -871,23 +874,24 @@ export default nextConfig;
     "@assistant-ui/react-langgraph": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "@langchain/langgraph-sdk": "^1.9.1",
+    "@langchain/langgraph-sdk": "^1.9.10",
     "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"
   },
   "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"
   }
@@ -918,10 +922,13 @@ cd my-app
 Create `.env.local`:
 
 ```
-NEXT_PUBLIC_API_URL=https://stockbrokeragent-bracesprouls-projects.vercel.app/api
+LANGGRAPH_API_URL=http://localhost:2024
+LANGCHAIN_API_KEY=
 NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=stockbroker
 ```
 
+`LANGGRAPH_API_URL` is the LangGraph deployment URL the bundled `/api/[..._path]` proxy fetches from. `LANGCHAIN_API_KEY` is forwarded as `x-api-key` and can be blank for an unauthenticated dev server. `NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID` is the graph id (a key under `graphs` in your `langgraph.json`).
+
 ### Run
 
 ```bash

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

@@ -17,7 +17,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"),
     messages: await convertToModelMessages(messages),
     stopWhen: stepCountIs(10),
   });
@@ -219,7 +219,7 @@ import type { FC } from "react";
 export const VoiceThread: FC = () => {
   return (
     <ThreadPrimitive.Root
-      className="aui-root aui-thread-root flex h-full flex-col bg-background"
+      className="aui-root aui-thread-root bg-background flex h-full flex-col"
       style={{ ["--thread-max-width" as string]: "44rem" }}
     >
       <ThreadPrimitive.Viewport className="aui-thread-viewport relative flex flex-1 flex-col overflow-y-scroll scroll-smooth px-4 pt-4">
@@ -231,7 +231,7 @@ export const VoiceThread: FC = () => {
           {() => <ThreadMessage />}
         </ThreadPrimitive.Messages>
 
-        <ThreadPrimitive.ViewportFooter className="sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col items-center bg-background pt-4 pb-6">
+        <ThreadPrimitive.ViewportFooter className="bg-background sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col items-center pt-4 pb-6">
           <ThreadScrollToBottom />
           <VoiceControlCenter />
         </ThreadPrimitive.ViewportFooter>
@@ -243,7 +243,7 @@ export const VoiceThread: FC = () => {
 const VoiceWelcome: FC = () => {
   return (
     <div className="aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col items-center justify-center gap-2">
-      <p className="fade-in slide-in-from-bottom-1 animate-in fill-mode-both font-semibold text-2xl duration-200">
+      <p className="fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-2xl font-semibold duration-200">
         Voice Conversation
       </p>
       <p className="fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-muted-foreground delay-75 duration-200">
@@ -259,7 +259,7 @@ const ThreadScrollToBottom: FC = () => {
       <TooltipIconButton
         tooltip="Scroll to bottom"
         variant="outline"
-        className="absolute -top-12 z-10 self-center rounded-full p-4 disabled:invisible dark:border-border dark:bg-background dark:hover:bg-accent"
+        className="dark:border-border dark:bg-background dark:hover:bg-accent absolute -top-12 z-10 self-center rounded-full p-4 disabled:invisible"
       >
         <ArrowDownIcon />
       </TooltipIconButton>
@@ -310,7 +310,7 @@ const VoiceWaveform: FC = () => {
         return (
           <span
             key={i}
-            className="aui-voice-waveform-bar h-full w-[3px] origin-center rounded-full bg-foreground/50 transition-transform duration-100"
+            className="aui-voice-waveform-bar bg-foreground/50 h-full w-[3px] origin-center rounded-full transition-transform duration-100"
             style={{ transform: `scaleY(${scale})` }}
           />
         );
@@ -328,10 +328,10 @@ const ThreadMessage: FC = () => {
 const AssistantMessage: FC = () => {
   return (
     <MessagePrimitive.Root
-      className="aui-assistant-message-root fade-in slide-in-from-bottom-1 relative mx-auto w-full max-w-(--thread-max-width) animate-in py-3 duration-150"
+      className="aui-assistant-message-root fade-in slide-in-from-bottom-1 animate-in relative mx-auto w-full max-w-(--thread-max-width) py-3 duration-150"
       data-role="assistant"
     >
-      <div className="aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed">
+      <div className="aui-assistant-message-content text-foreground px-2 leading-relaxed wrap-break-word">
         <MessagePrimitive.Parts>
           {({ part }) => {
             if (part.type === "text") return <MarkdownText />;
@@ -346,10 +346,10 @@ const AssistantMessage: FC = () => {
 const UserMessage: FC = () => {
   return (
     <MessagePrimitive.Root
-      className="aui-user-message-root fade-in slide-in-from-bottom-1 mx-auto flex w-full max-w-(--thread-max-width) animate-in justify-end px-2 py-3 duration-150"
+      className="aui-user-message-root fade-in slide-in-from-bottom-1 animate-in mx-auto flex w-full max-w-(--thread-max-width) justify-end px-2 py-3 duration-150"
       data-role="user"
     >
-      <div className="aui-user-message-content wrap-break-word rounded-2xl bg-muted px-4 py-2.5 text-foreground">
+      <div className="aui-user-message-content bg-muted text-foreground rounded-2xl px-4 py-2.5 wrap-break-word">
         <MessagePrimitive.Parts />
       </div>
     </MessagePrimitive.Root>
@@ -535,12 +535,13 @@ export class LiveKitVoiceAdapter implements RealtimeVoiceAdapter {
 ## 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);
 
 ```
 
@@ -553,32 +554,33 @@ export default nextConfig;
   "version": "0.0.0",
   "type": "module",
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.61",
-    "@ai-sdk/react": "^3.0.177",
+    "@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/ui": "workspace:*",
-    "@tailwindcss/postcss": "^4.2.4",
-    "ai": "^6.0.175",
+    "@tailwindcss/postcss": "^4.3.0",
+    "ai": "^6.0.193",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "livekit-client": "^2.18.9",
-    "livekit-server-sdk": "^2.15.2",
-    "lucide-react": "^1.14.0",
-    "motion": "^12.38.0",
-    "next": "^16.2.4",
-    "postcss": "^8.5.14",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "tailwind-merge": "^3.5.0",
-    "tailwindcss": "^4.2.4",
+    "livekit-client": "^2.19.1",
+    "livekit-server-sdk": "^2.15.4",
+    "lucide-react": "^1.17.0",
+    "motion": "^12.40.0",
+    "next": "^16.2.6",
+    "postcss": "^8.5.15",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^4.3.0",
     "zod": "^4.4.3"
   },
   "devDependencies": {
+    "@assistant-ui/next": "workspace:*",
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@types/node": "^25.6.0",
-    "@types/react": "^19.2.14",
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
     "tw-animate-css": "^1.4.0",
     "typescript": "^6.0.3"
@@ -618,6 +620,7 @@ export default nextConfig;
       "@/lib/utils": ["../../packages/ui/src/lib/utils"],
       "@assistant-ui/ui/*": ["../../packages/ui/src/*"],
       "@assistant-ui/*": ["../../packages/*/src"],
+      "@assistant-ui/core/*": ["../../packages/core/src/*"],
       "@assistant-ui/react/*": ["../../packages/react/src/*"],
       "@assistant-ui/tap/*": ["../../packages/tap/src/*"],
       "assistant-stream": ["../../packages/assistant-stream/src"],