@assistant-ui/mcp-docs-server 0.1.28 → 0.1.30

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.8.9",
+    "@langchain/react": "^0.3.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.8.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.10",
+    "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: {
@@ -824,7 +824,7 @@ export const sendMessage = (params: {
           model_name: "openai",
         },
       },
-      streamMode: ["messages-tuple", "values"],
+      streamMode: ["messages-tuple", "values", "custom"],
       ...(checkpointId && { checkpoint_id: checkpointId }),
       ...restConfig,
     },
@@ -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.8.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.7.0",
-    "next": "^16.2.2",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "lucide-react": "^1.8.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",
-    "@types/node": "^25.5.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.8",
-    "tailwindcss": "^4.2.2",
+    "postcss": "^8.5.10",
+    "tailwindcss": "^4.2.4",
     "tw-animate-css": "^1.4.0",
-    "typescript": "5.9.3"
+    "typescript": "^6.0.3"
   }
 }
 

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

@@ -4,7 +4,12 @@
 
 ```typescript
 import { openai } from "@ai-sdk/openai";
-import { streamText, UIMessage, convertToModelMessages, stepCountIs } from "ai";
+import {
+  streamText,
+  type UIMessage,
+  convertToModelMessages,
+  stepCountIs,
+} from "ai";
 
 export const maxDuration = 30;
 
@@ -388,7 +393,13 @@ const UserMessage: FC = () => {
 ```typescript
 import type { RealtimeVoiceAdapter } from "@assistant-ui/react";
 import { createVoiceSession } from "@assistant-ui/react";
-import { Room, RoomEvent, type RoomOptions } from "livekit-client";
+import {
+  Room,
+  RoomEvent,
+  Track,
+  type RemoteTrack,
+  type RoomOptions,
+} from "livekit-client";
 
 export type LiveKitVoiceAdapterOptions = {
   url: string;
@@ -414,6 +425,31 @@ export class LiveKitVoiceAdapter implements RealtimeVoiceAdapter {
 
     return createVoiceSession(options, async (session) => {
       let volumeInterval: ReturnType<typeof setInterval> | null = null;
+      const attachedAudioElements = new Set<HTMLMediaElement>();
+
+      const attachRemoteAudio = (track: RemoteTrack) => {
+        if (track.kind !== Track.Kind.Audio) return;
+        const element = track.attach();
+        element.style.display = "none";
+        document.body.appendChild(element);
+        attachedAudioElements.add(element);
+      };
+
+      const detachRemoteAudio = (track: RemoteTrack) => {
+        if (track.kind !== Track.Kind.Audio) return;
+        for (const element of track.detach()) {
+          element.remove();
+          attachedAudioElements.delete(element);
+        }
+      };
+
+      const cleanupAudioElements = () => {
+        for (const element of attachedAudioElements) element.remove();
+        attachedAudioElements.clear();
+      };
+
+      room.on(RoomEvent.TrackSubscribed, attachRemoteAudio);
+      room.on(RoomEvent.TrackUnsubscribed, detachRemoteAudio);
 
       room.on(RoomEvent.Connected, () => {
         session.setStatus({ type: "running" });
@@ -464,18 +500,23 @@ export class LiveKitVoiceAdapter implements RealtimeVoiceAdapter {
 
       const token =
         typeof this._token === "function" ? await this._token() : this._token;
-      if (session.isDisposed())
+      if (session.isDisposed()) {
+        cleanupAudioElements();
         return { disconnect: () => {}, mute: () => {}, unmute: () => {} };
+      }
 
       await room.connect(this._url, token);
-      if (session.isDisposed())
+      if (session.isDisposed()) {
+        cleanupAudioElements();
         return { disconnect: () => {}, mute: () => {}, unmute: () => {} };
+      }
 
       await room.localParticipant.setMicrophoneEnabled(true);
 
       return {
         disconnect: () => {
           if (volumeInterval) clearInterval(volumeInterval);
+          cleanupAudioElements();
           room.disconnect();
         },
         mute: () => {
@@ -512,35 +553,35 @@ export default nextConfig;
   "version": "0.0.0",
   "type": "module",
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.51",
-    "@ai-sdk/react": "^3.0.150",
+    "@ai-sdk/openai": "^3.0.53",
+    "@ai-sdk/react": "^3.0.170",
     "@assistant-ui/react": "workspace:^",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:^",
     "@assistant-ui/ui": "workspace:*",
-    "@tailwindcss/postcss": "^4.2.2",
-    "ai": "^6.0.148",
+    "@tailwindcss/postcss": "^4.2.4",
+    "ai": "^6.0.168",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "livekit-client": "^2.18.1",
-    "livekit-server-sdk": "^2.15.0",
-    "lucide-react": "^1.7.0",
+    "livekit-client": "^2.18.4",
+    "livekit-server-sdk": "^2.15.1",
+    "lucide-react": "^1.8.0",
     "motion": "^12.38.0",
-    "next": "^16.2.2",
-    "postcss": "^8.5.8",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "next": "^16.2.4",
+    "postcss": "^8.5.10",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "tailwind-merge": "^3.5.0",
-    "tailwindcss": "^4.2.2",
+    "tailwindcss": "^4.2.4",
     "zod": "^4.3.6"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@types/node": "^25.5.2",
+    "@types/node": "^25.6.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "tw-animate-css": "^1.4.0",
-    "typescript": "5.9.3"
+    "typescript": "^6.0.3"
   },
   "scripts": {
     "dev": "next dev",