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

package/.docs/organized/code-examples/with-google-adk.md

@@ -304,26 +304,26 @@ export default nextConfig;
     "@assistant-ui/react-google-adk": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "@google/adk": "^0.6.1",
+    "@google/adk": "^1.1.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.8.0",
-    "next": "^16.2.3",
+    "lucide-react": "^1.14.0",
+    "next": "^16.2.4",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
     "tailwind-merge": "^3.5.0",
-    "zod": "^4.3.6"
+    "zod": "^4.4.3"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.2.2",
+    "@tailwindcss/postcss": "^4.2.4",
     "@types/node": "^25.6.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.9",
-    "tailwindcss": "^4.2.2",
+    "postcss": "^8.5.14",
+    "tailwindcss": "^4.2.4",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^6.0.2"
+    "typescript": "^6.0.3"
   }
 }
 

package/.docs/organized/code-examples/with-heat-graph.md

@@ -270,19 +270,19 @@ export default nextConfig;
   },
   "dependencies": {
     "heat-graph": "workspace:*",
-    "next": "^16.2.3",
+    "next": "^16.2.4",
     "react": "^19.2.5",
     "react-dom": "^19.2.5"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.2.2",
+    "@tailwindcss/postcss": "^4.2.4",
     "@types/node": "^25.6.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.9",
-    "tailwindcss": "^4.2.2",
-    "typescript": "^6.0.2"
+    "postcss": "^8.5.14",
+    "tailwindcss": "^4.2.4",
+    "typescript": "^6.0.3"
   }
 }
 

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

@@ -238,10 +238,6 @@ import {
   PlusIcon,
 } from "lucide-react";
 
-// ===========================================================================
-// 1. Task Board — single-instance interactable + custom tool
-// ===========================================================================
-
 type Task = { id: string; title: string; done: boolean };
 type TaskBoardState = { tasks: Task[] };
 
@@ -392,10 +388,6 @@ function TaskBoard() {
   );
 }
 
-// ===========================================================================
-// 2. Sticky Notes — multi-instance interactable + selection + partial updates
-// ===========================================================================
-
 type NoteState = { title: string; content: string; color: string };
 
 const noteSchema = z.object({
@@ -428,9 +420,6 @@ function NoteCard({
   onSelect: (id: string) => void;
   onRemove: (id: string) => void;
 }) {
-  // Multi-instance: each NoteCard has a unique `id`, all share name "note"
-  // Partial updates: AI can send { color: "blue" } without resending title/content
-  // Selection: clicking a note calls setSelected(true)
   useAssistantInteractable("note", {
     id: noteId,
     description:
@@ -452,6 +441,7 @@ function NoteCard({
   };
 
   return (
+    // biome-ignore lint/a11y/useSemanticElements: styled interactive card
     <div
       role="button"
       tabIndex={0}
@@ -517,7 +507,6 @@ function NotesPanel() {
   const setSelectedIdRef = useRef(setSelectedId);
   setSelectedIdRef.current = setSelectedId;
 
-  // Tool to add/remove notes (manages the list, not the note content)
   useAssistantTool({
     toolName: "manage_notes",
     description:
@@ -603,10 +592,6 @@ function NotesPanel() {
   );
 }
 
-// ===========================================================================
-// App
-// ===========================================================================
-
 const STORAGE_KEY = "interactables-example";
 
 function useInteractablePersistence(aui: ReturnType<typeof useAui>) {
@@ -735,30 +720,30 @@ export default nextConfig;
     "start": "next start"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.52",
+    "@ai-sdk/openai": "^3.0.61",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "ai": "^6.0.159",
+    "ai": "^6.0.175",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.8.0",
-    "next": "^16.2.3",
+    "lucide-react": "^1.14.0",
+    "next": "^16.2.4",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
     "tailwind-merge": "^3.5.0",
-    "zod": "^4.3.6"
+    "zod": "^4.4.3"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.2.2",
+    "@tailwindcss/postcss": "^4.2.4",
     "@types/node": "^25.6.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.9",
-    "tailwindcss": "^4.2.2",
+    "postcss": "^8.5.14",
+    "tailwindcss": "^4.2.4",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^6.0.2"
+    "typescript": "^6.0.3"
   }
 }
 

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

@@ -0,0 +1,437 @@
+# Example: with-langchain
+
+## app/globals.css
+
+```css
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@source "../../../packages/ui/src";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+```
+
+## app/layout.tsx
+
+```tsx
+import type { Metadata } from "next";
+import "./globals.css";
+import { MyRuntimeProvider } from "./MyRuntimeProvider";
+
+export const metadata: Metadata = {
+  title: "LangChain useStream Example",
+  description:
+    "Example using @assistant-ui/react-langchain with LangChain's useStream hook.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <MyRuntimeProvider>
+      <html lang="en">
+        <body className="h-dvh">{children}</body>
+      </html>
+    </MyRuntimeProvider>
+  );
+}
+
+```
+
+## app/MyRuntimeProvider.tsx
+
+```tsx
+"use client";
+
+import { AssistantRuntimeProvider } from "@assistant-ui/react";
+import { useStreamRuntime } from "@assistant-ui/react-langchain";
+
+export function MyRuntimeProvider({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const runtime = useStreamRuntime({
+    assistantId: process.env.NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID!,
+    apiUrl: process.env.NEXT_PUBLIC_LANGGRAPH_API_URL,
+  });
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      {children}
+    </AssistantRuntimeProvider>
+  );
+}
+
+```
+
+## app/page.tsx
+
+```tsx
+"use client";
+
+import { Thread } from "@/components/assistant-ui/thread";
+import { TodosPanel } from "@/components/TodosPanel";
+
+export default function Home() {
+  return (
+    <div className="flex h-dvh">
+      <div className="flex-grow">
+        <Thread />
+      </div>
+      <aside className="w-80 overflow-y-auto border-l p-4">
+        <TodosPanel />
+      </aside>
+    </div>
+  );
+}
+
+```
+
+## components.json
+
+```json
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide",
+  "registries": {
+    "@assistant-ui": "https://r.assistant-ui.com/{name}.json"
+  }
+}
+
+```
+
+## components/TodosPanel.tsx
+
+```tsx
+"use client";
+
+import { useLangChainState } from "@assistant-ui/react-langchain";
+
+type Todo = {
+  id?: string;
+  content: string;
+  status?: "pending" | "in_progress" | "completed";
+};
+
+const statusIcon = (status: Todo["status"]) => {
+  switch (status) {
+    case "completed":
+      return "✓";
+    case "in_progress":
+      return "◐";
+    default:
+      return "○";
+  }
+};
+
+export function TodosPanel() {
+  const todos = useLangChainState<Todo[]>("todos", []);
+
+  if (todos.length === 0) {
+    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>.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      <h2 className="font-semibold text-muted-foreground text-sm uppercase tracking-wide">
+        Agent todos
+      </h2>
+      <ul className="space-y-1">
+        {todos.map((todo, i) => (
+          <li
+            key={todo.id ?? i}
+            className="flex items-start gap-2 text-sm leading-relaxed"
+          >
+            <span aria-hidden>{statusIcon(todo.status)}</span>
+            <span
+              className={
+                todo.status === "completed"
+                  ? "text-muted-foreground line-through"
+                  : undefined
+              }
+            >
+              {todo.content}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+```
+
+## next.config.ts
+
+```typescript
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  transpilePackages: ["@assistant-ui/react", "@assistant-ui/react-langchain"],
+};
+
+export default nextConfig;
+
+```
+
+## package.json
+
+```json
+{
+  "name": "with-langchain",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@assistant-ui/react": "workspace:*",
+    "@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",
+    "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"
+  },
+  "devDependencies": {
+    "@assistant-ui/x-buildutils": "workspace:*",
+    "@tailwindcss/postcss": "^4.2.4",
+    "@types/node": "^25.6.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "postcss": "^8.5.14",
+    "tailwindcss": "^4.2.4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^6.0.3"
+  }
+}
+
+```
+
+## README.md
+
+```markdown
+# LangChain `useStream` Example
+
+Demonstrates `@assistant-ui/react-langchain`, which wraps `useStream` from `@langchain/react` and exposes it as an assistant-ui runtime.
+
+> assistant-ui also ships `@assistant-ui/react-langgraph`, which integrates with `@langchain/langgraph-sdk` directly and currently has a broader feature set. Pick the adapter that matches your upstream choice. See [the comparison](https://www.assistant-ui.com/docs/runtimes/langchain/comparison).
+
+## Quick Start
+
+```bash
+pnpm install
+```
+
+### Environment Variables
+
+Create `.env.local`:
+
+```sh
+NEXT_PUBLIC_LANGGRAPH_API_URL=http://localhost:2024
+NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=your_graph_id
+```
+
+Start a local LangGraph server via [LangGraph Studio](https://github.com/langchain-ai/langgraph-studio) pointing at your graph, or use [LangSmith](https://www.langchain.com/langsmith) for a hosted deployment.
+
+### Run
+
+```bash
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000).
+
+## Key Features
+
+- `useStreamRuntime` — thin wrapper around `useStream` from `@langchain/react`.
+- `useLangChainState<T>(key)` — reads arbitrary custom state keys (demo uses `state.todos` in `TodosPanel`).
+- No hand-written stream generator, no `create` / `load` / `getCheckpointId` glue.
+
+## Files of interest
+
+- `app/MyRuntimeProvider.tsx` — entire runtime setup in ~15 lines.
+- `components/TodosPanel.tsx` — demonstrates `useLangChainState<Todo[]>("todos", [])`.
+
+## Related Documentation
+
+- [assistant-ui Documentation](https://www.assistant-ui.com/docs)
+- [LangChain useStream Integration](https://www.assistant-ui.com/docs/runtimes/langchain)
+- [react-langgraph vs react-langchain](https://www.assistant-ui.com/docs/runtimes/langchain/comparison)
+
+```
+
+## tsconfig.json
+
+```json
+{
+  "extends": "@assistant-ui/x-buildutils/ts/next",
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"],
+      "@/components/assistant-ui/*": [
+        "../../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/*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+
+```
+

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

@@ -3,7 +3,7 @@
 ## app/api/[..._path]/route.ts
 
 ```typescript
-import { NextRequest, NextResponse } from "next/server";
+import { type NextRequest, NextResponse } from "next/server";
 
 function getCorsHeaders() {
   return {
@@ -27,7 +27,7 @@ async function handleRequest(req: NextRequest, method: string) {
     const options: RequestInit = {
       method,
       headers: {
-        "x-api-key": process.env["LANGCHAIN_API_KEY"] || "",
+        "x-api-key": process.env.LANGCHAIN_API_KEY || "",
       },
     };
 
@@ -36,7 +36,7 @@ async function handleRequest(req: NextRequest, method: string) {
     }
 
     const res = await fetch(
-      `${process.env["LANGGRAPH_API_URL"]}/${path}${queryString}`,
+      `${process.env.LANGGRAPH_API_URL}/${path}${queryString}`,
       options,
     );
 
@@ -250,7 +250,7 @@ import {
   getCheckpointId,
   sendMessage,
 } from "@/lib/chatApi";
-import { LangChainMessage } from "@assistant-ui/react-langgraph";
+import type { LangChainMessage } from "@assistant-ui/react-langgraph";
 
 export function MyRuntimeProvider({
   children,
@@ -672,7 +672,7 @@ export function TransactionConfirmationPending(props: TransactionConfirmation) {
 ## components/tools/ToolFallback.tsx
 
 ```tsx
-import { ToolCallMessagePartComponent } from "@assistant-ui/react";
+import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
@@ -721,8 +721,8 @@ export const ToolFallback: ToolCallMessagePartComponent = ({
 ## lib/chatApi.ts
 
 ```typescript
-import { ThreadState, Client } from "@langchain/langgraph-sdk";
-import {
+import { type ThreadState, Client } from "@langchain/langgraph-sdk";
+import type {
   LangChainMessage,
   LangGraphMessagesEvent,
   LangGraphSendMessageConfig,
@@ -730,7 +730,7 @@ import {
 
 const createClient = () => {
   const apiUrl =
-    process.env["NEXT_PUBLIC_LANGGRAPH_API_URL"] ||
+    process.env.NEXT_PUBLIC_LANGGRAPH_API_URL ||
     new URL("/api", window.location.href).href;
   return new Client({
     apiUrl,
@@ -816,7 +816,7 @@ export const sendMessage = (params: {
 
   return client.runs.stream(
     params.threadId,
-    process.env["NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID"]!,
+    process.env.NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID!,
     {
       input: params.messages.length > 0 ? { messages: params.messages } : null,
       config: {
@@ -871,25 +871,25 @@ export default nextConfig;
     "@assistant-ui/react-langgraph": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "@langchain/langgraph-sdk": "^1.8.8",
+    "@langchain/langgraph-sdk": "^1.9.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.8.0",
-    "next": "^16.2.3",
+    "lucide-react": "^1.14.0",
+    "next": "^16.2.4",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
     "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.2.2",
+    "@tailwindcss/postcss": "^4.2.4",
     "@types/node": "^25.6.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.9",
-    "tailwindcss": "^4.2.2",
+    "postcss": "^8.5.14",
+    "tailwindcss": "^4.2.4",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^6.0.2"
+    "typescript": "^6.0.3"
   }
 }