@assistant-ui/mcp-docs-server 0.1.22 → 0.1.23

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

@@ -223,11 +223,34 @@ export function MyRuntimeProvider({
 "use client";
 
 import { Thread } from "@/components/assistant-ui/thread";
+import { useAui, AuiProvider, Suggestions } from "@assistant-ui/react";
+
+function ThreadWithSuggestions() {
+  const aui = useAui({
+    suggestions: Suggestions([
+      {
+        title: "Send a test message",
+        label: "to see the external store in action",
+        prompt: "Hello! How does the external store work?",
+      },
+      {
+        title: "Tell me a story",
+        label: "to generate multiple messages",
+        prompt: "Tell me a short story about a robot learning to paint.",
+      },
+    ]),
+  });
+  return (
+    <AuiProvider value={aui}>
+      <Thread />
+    </AuiProvider>
+  );
+}
 
 export default function Home() {
   return (
     <main className="h-dvh">
-      <Thread />
+      <ThreadWithSuggestions />
     </main>
   );
 }
@@ -264,18 +287,6 @@ export default function Home() {
 
 ```
 
-## lib/utils.ts
-
-```typescript
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-```
-
 ## next.config.ts
 
 ```typescript
@@ -303,31 +314,26 @@ export default nextConfig;
     "start": "next start"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.25",
+    "@ai-sdk/openai": "^3.0.33",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-tooltip": "^1.2.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.563.0",
+    "lucide-react": "^0.575.0",
     "next": "^16.1.6",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "tailwind-merge": "^3.4.0"
+    "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.2.1",
-    "@types/react": "^19.2.13",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/node": "^25.3.0",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3"
   }
@@ -391,6 +397,7 @@ npm run dev
         "../../packages/ui/src/components/assistant-ui/*"
       ],
       "@/components/ui/*": ["../../packages/ui/src/components/ui/*"],
+      "@/lib/utils": ["../../packages/ui/src/lib/utils"],
       "@assistant-ui/ui/*": ["../../packages/ui/src/*"]
     }
   },

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

@@ -268,7 +268,10 @@ export default dynamic(() => Promise.resolve(NoSSRWrapper), {
 import {
   useAssistantInstructions,
   useAssistantTool,
+  useAui,
   useAuiState,
+  AuiProvider,
+  Suggestions,
 } from "@assistant-ui/react";
 import { z } from "zod";
 import { FFmpeg } from "@ffmpeg/ffmpeg";
@@ -417,13 +420,28 @@ const FfmpegTool: FC<{ file: File }> = ({ file }) => {
 
 export default function Home() {
   const [lastFile, setLastFile] = useState<File | null>(null);
-  const attachments = useAuiState(({ thread }) => thread.composer.attachments);
+  const attachments = useAuiState((s) => s.thread.composer.attachments);
   useEffect(() => {
     const lastAttachment = attachments[attachments.length - 1];
     if (!lastAttachment) return;
     setLastFile(lastAttachment.file!);
   }, [attachments]);
 
+  const aui = useAui({
+    suggestions: Suggestions([
+      {
+        title: "Convert video to GIF",
+        label: "attach a video file first",
+        prompt: "Convert my video to an animated GIF.",
+      },
+      {
+        title: "Compress an MP4",
+        label: "to reduce file size",
+        prompt: "Compress my video file to reduce its size.",
+      },
+    ]),
+  });
+
   return (
     <div className="flex h-full flex-col">
       <div className="border-b">
@@ -438,7 +456,9 @@ export default function Home() {
           )
         </p>
       </div>
-      <Thread />
+      <AuiProvider value={aui}>
+        <Thread />
+      </AuiProvider>
       {lastFile && <FfmpegTool file={lastFile} />}
     </div>
   );
@@ -476,18 +496,6 @@ export default function Home() {
 
 ```
 
-## lib/utils.ts
-
-```typescript
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-```
-
 ## next.config.ts
 
 ```typescript
@@ -515,36 +523,31 @@ export default nextConfig;
     "start": "next start"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.25",
+    "@ai-sdk/openai": "^3.0.33",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
     "@ffmpeg/ffmpeg": "^0.12.15",
     "@ffmpeg/util": "^0.12.2",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "ai": "^6.0.73",
+    "ai": "^6.0.98",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.563.0",
+    "lucide-react": "^0.575.0",
     "next": "^16.1.6",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "tailwind-merge": "^3.4.0",
+    "tailwind-merge": "^3.5.0",
     "zod": "^4.3.6"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.2.1",
-    "@types/react": "^19.2.13",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/node": "^25.3.0",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3"
   }
@@ -609,6 +612,7 @@ npm run dev
         "../../packages/ui/src/components/assistant-ui/*"
       ],
       "@/components/ui/*": ["../../packages/ui/src/components/ui/*"],
+      "@/lib/utils": ["../../packages/ui/src/lib/utils"],
       "@assistant-ui/ui/*": ["../../packages/ui/src/*"]
     }
   },

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

@@ -242,7 +242,12 @@ export default function RootLayout({
 
 import { AssistantRuntimeProvider } from "@assistant-ui/react";
 import { useLangGraphRuntime } from "@assistant-ui/react-langgraph";
-import { createThread, getThreadState, sendMessage } from "@/lib/chatApi";
+import {
+  createThread,
+  getThreadState,
+  getCheckpointId,
+  sendMessage,
+} from "@/lib/chatApi";
 import { LangChainMessage } from "@assistant-ui/react-langgraph";
 
 export function MyRuntimeProvider({
@@ -251,13 +256,14 @@ export function MyRuntimeProvider({
   children: React.ReactNode;
 }>) {
   const runtime = useLangGraphRuntime({
-    stream: async function* (messages, { initialize }) {
+    stream: async function* (messages, { initialize, ...config }) {
       const { externalId } = await initialize();
       if (!externalId) throw new Error("Thread not found");
 
       const generator = sendMessage({
         threadId: externalId,
         messages,
+        config,
       });
 
       yield* generator;
@@ -274,6 +280,13 @@ export function MyRuntimeProvider({
         interrupts: state.tasks[0]?.interrupts ?? [],
       };
     },
+    getCheckpointId,
+    eventHandlers: {
+      onMessageChunk: (chunk, metadata) => {
+        console.log("[messages-tuple] chunk:", chunk);
+        console.log("[messages-tuple] metadata:", metadata);
+      },
+    },
   });
 
   return (
@@ -294,6 +307,29 @@ import { Thread } from "@/components/assistant-ui/thread";
 import { PriceSnapshotTool } from "@/components/tools/price-snapshot/PriceSnapshotTool";
 import { PurchaseStockTool } from "@/components/tools/purchase-stock/PurchaseStockTool";
 import { ThreadList } from "@/components/assistant-ui/thread-list";
+import { useAui, AuiProvider, Suggestions } from "@assistant-ui/react";
+
+function ThreadWithSuggestions() {
+  const aui = useAui({
+    suggestions: Suggestions([
+      {
+        title: "Check stock price",
+        label: "get the latest AAPL snapshot",
+        prompt: "What's the current price of AAPL?",
+      },
+      {
+        title: "Buy shares",
+        label: "execute a stock purchase",
+        prompt: "Buy 10 shares of TSLA.",
+      },
+    ]),
+  });
+  return (
+    <AuiProvider value={aui}>
+      <Thread />
+    </AuiProvider>
+  );
+}
 
 export default function Home() {
   return (
@@ -302,7 +338,7 @@ export default function Home() {
         <ThreadList />
       </div>
       <div className="flex-grow">
-        <Thread />
+        <ThreadWithSuggestions />
         <PriceSnapshotTool />
         <PurchaseStockTool />
       </div>
@@ -687,6 +723,7 @@ import { ThreadState, Client } from "@langchain/langgraph-sdk";
 import {
   LangChainMessage,
   LangGraphMessagesEvent,
+  LangGraphSendMessageConfig,
 } from "@assistant-ui/react-langgraph";
 
 const createClient = () => {
@@ -715,6 +752,43 @@ export const getThreadState = async (
   return client.threads.getState(threadId);
 };
 
+const matchesParentMessages = (
+  stateMessages: LangChainMessage[] | undefined,
+  parentMessages: LangChainMessage[],
+) => {
+  if (!stateMessages || stateMessages.length !== parentMessages.length) {
+    return false;
+  }
+
+  const hasStableIds =
+    parentMessages.every((message) => typeof message.id === "string") &&
+    stateMessages.every((message) => typeof message.id === "string");
+
+  if (!hasStableIds) {
+    return false;
+  }
+
+  return parentMessages.every(
+    (message, index) => message.id === stateMessages[index]?.id,
+  );
+};
+
+export const getCheckpointId = async (
+  threadId: string,
+  parentMessages: LangChainMessage[],
+): Promise<string | null> => {
+  const client = createClient();
+  const history = await client.threads.getHistory(threadId);
+  for (const state of history) {
+    const stateMessages = (state.values as { messages?: LangChainMessage[] })
+      .messages;
+    if (matchesParentMessages(stateMessages, parentMessages)) {
+      return state.checkpoint.checkpoint_id ?? null;
+    }
+  }
+  return null;
+};
+
 export const updateState = async (
   threadId: string,
   fields: {
@@ -732,43 +806,31 @@ export const updateState = async (
 export const sendMessage = (params: {
   threadId: string;
   messages: LangChainMessage[];
+  config?: LangGraphSendMessageConfig;
 }): AsyncGenerator<LangGraphMessagesEvent<LangChainMessage>> => {
   const client = createClient();
 
-  const input: Record<string, unknown> | null = {
-    messages: params.messages,
-  };
-  const config = {
-    configurable: {
-      model_name: "openai",
-    },
-  };
+  const { checkpointId, ...restConfig } = params.config ?? {};
 
   return client.runs.stream(
     params.threadId,
     process.env["NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID"]!,
     {
-      input,
-      config,
-      streamMode: "messages",
+      input: params.messages.length > 0 ? { messages: params.messages } : null,
+      config: {
+        configurable: {
+          model_name: "openai",
+        },
+      },
+      streamMode: "messages-tuple",
+      ...(checkpointId && { checkpoint_id: checkpointId }),
+      ...restConfig,
     },
   ) as AsyncGenerator<LangGraphMessagesEvent<LangChainMessage>>;
 };
 
 ```
 
-## lib/utils.ts
-
-```typescript
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-```
-
 ## next.config.ts
 
 ```typescript
@@ -807,28 +869,23 @@ export default nextConfig;
     "@assistant-ui/react-langgraph": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "@langchain/langgraph-sdk": "^1.5.6",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-tooltip": "^1.2.8",
+    "@langchain/langgraph-sdk": "^1.6.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.563.0",
+    "lucide-react": "^0.575.0",
     "next": "^16.1.6",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "tailwind-merge": "^3.4.0"
+    "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.2.1",
-    "@types/react": "^19.2.13",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/node": "^25.3.0",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3"
   }
@@ -896,6 +953,7 @@ npm run dev
         "../../packages/ui/src/components/assistant-ui/*"
       ],
       "@/components/ui/*": ["../../packages/ui/src/components/ui/*"],
+      "@/lib/utils": ["../../packages/ui/src/lib/utils"],
       "@assistant-ui/ui/*": ["../../packages/ui/src/*"]
     }
   },

package/.docs/organized/code-examples/with-parent-id-grouping.md

@@ -383,11 +383,34 @@ export function MyRuntimeProvider({
 "use client";
 
 import { Thread } from "@/components/assistant-ui/thread";
+import { useAui, AuiProvider, Suggestions } from "@assistant-ui/react";
+
+function ThreadWithSuggestions() {
+  const aui = useAui({
+    suggestions: Suggestions([
+      {
+        title: "Tell me a story",
+        label: "with multiple parts",
+        prompt: "Tell me a short story with a beginning, middle, and end.",
+      },
+      {
+        title: "Explain quantum computing",
+        label: "in simple terms",
+        prompt: "Explain quantum computing like I'm five years old.",
+      },
+    ]),
+  });
+  return (
+    <AuiProvider value={aui}>
+      <Thread />
+    </AuiProvider>
+  );
+}
 
 export default function Home() {
   return (
     <main className="h-dvh">
-      <Thread />
+      <ThreadWithSuggestions />
     </main>
   );
 }
@@ -424,18 +447,6 @@ export default function Home() {
 
 ```
 
-## lib/utils.ts
-
-```typescript
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-```
-
 ## next.config.ts
 
 ```typescript
@@ -463,31 +474,26 @@ export default nextConfig;
     "start": "next start"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.25",
+    "@ai-sdk/openai": "^3.0.33",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-tooltip": "^1.2.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.563.0",
+    "lucide-react": "^0.575.0",
     "next": "^16.1.6",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "tailwind-merge": "^3.4.0"
+    "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.2.1",
-    "@types/react": "^19.2.13",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/node": "^25.3.0",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3"
   }
@@ -578,6 +584,7 @@ This pattern is useful for:
         "../../packages/ui/src/components/assistant-ui/*"
       ],
       "@/components/ui/*": ["../../packages/ui/src/components/ui/*"],
+      "@/lib/utils": ["../../packages/ui/src/lib/utils"],
       "@assistant-ui/ui/*": ["../../packages/ui/src/*"]
     }
   },