@assistant-ui/mcp-docs-server 0.1.26 → 0.1.27

package/.docs/organized/code-examples/waterfall.md

@@ -769,7 +769,7 @@ export default nextConfig;
     "@assistant-ui/react-o11y": "workspace:*",
     "@assistant-ui/store": "workspace:*",
     "@assistant-ui/tap": "workspace:*",
-    "next": "^16.2.1",
+    "next": "^16.2.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },

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

@@ -569,7 +569,7 @@ export default nextConfig;
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.7.0",
-    "next": "^16.2.1",
+    "next": "^16.2.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwind-merge": "^3.5.0"

package/.docs/organized/code-examples/with-ag-ui.md

@@ -413,7 +413,7 @@ export default nextConfig;
     "start": "next start"
   },
   "dependencies": {
-    "@ag-ui/client": "^0.0.48",
+    "@ag-ui/client": "^0.0.49",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ag-ui": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
@@ -421,7 +421,7 @@ export default nextConfig;
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.7.0",
-    "next": "^16.2.1",
+    "next": "^16.2.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwind-merge": "^3.5.0"

package/.docs/organized/code-examples/with-ai-sdk-v6.md

@@ -315,16 +315,16 @@ export default nextConfig;
     "start": "next start"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.48",
+    "@ai-sdk/openai": "^3.0.50",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "ai": "^6.0.138",
+    "ai": "^6.0.144",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.7.0",
-    "next": "^16.2.1",
+    "next": "^16.2.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwind-merge": "^3.5.0",

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

@@ -413,16 +413,16 @@ export default nextConfig;
     "start": "next start"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.48",
+    "@ai-sdk/openai": "^3.0.50",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "ai": "^6.0.138",
+    "ai": "^6.0.144",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.7.0",
-    "next": "^16.2.1",
+    "next": "^16.2.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwind-merge": "^3.5.0",

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

@@ -424,7 +424,7 @@ export default nextConfig;
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.7.0",
-    "next": "^16.2.1",
+    "next": "^16.2.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwind-merge": "^3.5.0",

package/.docs/organized/code-examples/with-chain-of-thought.md

@@ -557,16 +557,16 @@ export default nextConfig;
     "start": "next start"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.48",
+    "@ai-sdk/openai": "^3.0.50",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "ai": "^6.0.138",
+    "ai": "^6.0.144",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.7.0",
-    "next": "^16.2.1",
+    "next": "^16.2.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwind-merge": "^3.5.0",

package/.docs/organized/code-examples/with-cloud-standalone.md

@@ -565,13 +565,13 @@ export default nextConfig;
     "start": "next start"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.48",
+    "@ai-sdk/openai": "^3.0.50",
     "@assistant-ui/cloud-ai-sdk": "workspace:*",
-    "ai": "^6.0.138",
+    "ai": "^6.0.144",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.7.0",
-    "next": "^16.2.1",
+    "next": "^16.2.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwind-merge": "^3.5.0"

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

@@ -327,16 +327,16 @@ export default nextConfig;
     "start": "next start"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.48",
+    "@ai-sdk/openai": "^3.0.50",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "ai": "^6.0.138",
+    "ai": "^6.0.144",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.7.0",
-    "next": "^16.2.1",
+    "next": "^16.2.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwind-merge": "^3.5.0"

package/.docs/organized/code-examples/with-custom-thread-list.md

@@ -414,17 +414,17 @@ export default nextConfig;
     "start": "next start"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.48",
+    "@ai-sdk/openai": "^3.0.50",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "ai": "^6.0.138",
+    "ai": "^6.0.144",
     "assistant-stream": "workspace:*",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.7.0",
-    "next": "^16.2.1",
+    "next": "^16.2.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwind-merge": "^3.5.0",

package/.docs/organized/code-examples/with-elevenlabs-conversational.md

@@ -0,0 +1,511 @@
+# Example: with-elevenlabs-conversational
+
+## app/api/chat/route.ts
+
+```typescript
+import { openai } from "@ai-sdk/openai";
+import { streamText, UIMessage, convertToModelMessages, stepCountIs } from "ai";
+
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages }: { messages: UIMessage[] } = await req.json();
+
+  const result = streamText({
+    model: openai("gpt-4o"),
+    messages: await convertToModelMessages(messages),
+    stopWhen: stepCountIs(10),
+  });
+
+  return result.toUIMessageStreamResponse();
+}
+
+```
+
+## 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);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --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);
+  --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);
+}
+
+@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";
+
+export const metadata: Metadata = {
+  title: "ElevenLabs Conversational AI Example",
+  description:
+    "Example using @assistant-ui/react with ElevenLabs Conversational AI for realtime voice",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className="h-dvh">{children}</body>
+    </html>
+  );
+}
+
+```
+
+## app/page.tsx
+
+```tsx
+"use client";
+
+import { AssistantRuntimeProvider } from "@assistant-ui/react";
+import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+import { ElevenLabsVoiceAdapter } from "@/lib/elevenlabs-voice-adapter";
+import { VoiceThread } from "./voice-thread";
+
+export default function Home() {
+  const runtime = useChatRuntime({
+    adapters: {
+      voice: new ElevenLabsVoiceAdapter({
+        agentId: process.env.NEXT_PUBLIC_ELEVENLABS_AGENT_ID ?? "",
+      }),
+    },
+  });
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <VoiceThread />
+    </AssistantRuntimeProvider>
+  );
+}
+
+```
+
+## app/voice-thread.tsx
+
+```tsx
+"use client";
+
+import { MarkdownText } from "@/components/assistant-ui/markdown-text";
+import {
+  VoiceOrb,
+  VoiceConnectButton,
+  VoiceMuteButton,
+  VoiceDisconnectButton,
+  deriveVoiceOrbState,
+} from "@/components/assistant-ui/voice";
+import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
+import {
+  AuiIf,
+  MessagePrimitive,
+  ThreadPrimitive,
+  useAuiState,
+  useVoiceState,
+  useVoiceVolume,
+} from "@assistant-ui/react";
+import { ArrowDownIcon } from "lucide-react";
+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"
+      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">
+        <AuiIf condition={(s) => s.thread.isEmpty}>
+          <VoiceWelcome />
+        </AuiIf>
+
+        <ThreadPrimitive.Messages>
+          {() => <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">
+          <ThreadScrollToBottom />
+          <VoiceControlCenter />
+        </ThreadPrimitive.ViewportFooter>
+      </ThreadPrimitive.Viewport>
+    </ThreadPrimitive.Root>
+  );
+};
+
+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">
+        Voice Conversation
+      </p>
+      <p className="fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-muted-foreground delay-75 duration-200">
+        Tap connect to start speaking
+      </p>
+    </div>
+  );
+};
+
+const ThreadScrollToBottom: FC = () => {
+  return (
+    <ThreadPrimitive.ScrollToBottom asChild>
+      <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"
+      >
+        <ArrowDownIcon />
+      </TooltipIconButton>
+    </ThreadPrimitive.ScrollToBottom>
+  );
+};
+
+const VoiceControlCenter: FC = () => {
+  return (
+    <div className="aui-voice-control-center flex flex-col items-center gap-4">
+      <VoiceOrb variant="blue" className="size-20" />
+      <VoiceWaveform />
+
+      <div className="flex items-center gap-3">
+        <AuiIf
+          condition={(s) =>
+            s.thread.voice == null || s.thread.voice.status.type === "ended"
+          }
+        >
+          <VoiceConnectButton />
+        </AuiIf>
+
+        <AuiIf condition={(s) => s.thread.voice?.status.type === "starting"}>
+          <span className="text-muted-foreground text-sm">Connecting...</span>
+        </AuiIf>
+
+        <AuiIf condition={(s) => s.thread.voice?.status.type === "running"}>
+          <VoiceMuteButton />
+          <VoiceDisconnectButton />
+        </AuiIf>
+      </div>
+    </div>
+  );
+};
+
+const BAR_WEIGHTS = [0.4, 0.65, 0.85, 1.0, 0.9, 0.75, 0.5];
+
+const VoiceWaveform: FC = () => {
+  const voiceState = useVoiceState();
+  const state = deriveVoiceOrbState(voiceState);
+  const volume = useVoiceVolume();
+  const isActive = state === "listening" || state === "speaking";
+
+  return (
+    <div className="aui-voice-waveform flex h-8 items-center justify-center gap-[3px]">
+      {BAR_WEIGHTS.map((weight, i) => {
+        const scale = isActive ? 0.1 + volume * 0.9 * weight : 0.1;
+        return (
+          <span
+            key={i}
+            className="aui-voice-waveform-bar h-full w-[3px] origin-center rounded-full bg-foreground/50 transition-transform duration-100"
+            style={{ transform: `scaleY(${scale})` }}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+const ThreadMessage: FC = () => {
+  const role = useAuiState((s) => s.message.role);
+  if (role === "user") return <UserMessage />;
+  return <AssistantMessage />;
+};
+
+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"
+      data-role="assistant"
+    >
+      <div className="aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed">
+        <MessagePrimitive.Parts>
+          {({ part }) => {
+            if (part.type === "text") return <MarkdownText />;
+            return null;
+          }}
+        </MessagePrimitive.Parts>
+      </div>
+    </MessagePrimitive.Root>
+  );
+};
+
+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"
+      data-role="user"
+    >
+      <div className="aui-user-message-content wrap-break-word rounded-2xl bg-muted px-4 py-2.5 text-foreground">
+        <MessagePrimitive.Parts />
+      </div>
+    </MessagePrimitive.Root>
+  );
+};
+
+```
+
+## 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"
+  }
+}
+
+```
+
+## lib/elevenlabs-voice-adapter.ts
+
+```typescript
+import type { RealtimeVoiceAdapter } from "@assistant-ui/react";
+import { createVoiceSession } from "@assistant-ui/react";
+import { VoiceConversation } from "@elevenlabs/client";
+
+export type ElevenLabsVoiceAdapterOptions = {
+  agentId: string;
+};
+
+export class ElevenLabsVoiceAdapter implements RealtimeVoiceAdapter {
+  private _agentId: string;
+
+  constructor(options: ElevenLabsVoiceAdapterOptions) {
+    this._agentId = options.agentId;
+  }
+
+  connect(options: {
+    abortSignal?: AbortSignal;
+  }): RealtimeVoiceAdapter.Session {
+    return createVoiceSession(options, async (session) => {
+      let volumeInterval: ReturnType<typeof setInterval> | null = null;
+
+      const conversation = await VoiceConversation.startSession({
+        agentId: this._agentId,
+        onConnect: () => {
+          session.setStatus({ type: "running" });
+          volumeInterval = setInterval(() => {
+            if (session.isDisposed()) return;
+            const vol = Math.max(
+              conversation.getInputVolume(),
+              conversation.getOutputVolume(),
+            );
+            session.emitVolume(vol);
+          }, 50);
+        },
+        onDisconnect: () => {
+          if (volumeInterval) clearInterval(volumeInterval);
+          session.end("finished");
+        },
+        onError: (message) => {
+          if (volumeInterval) clearInterval(volumeInterval);
+          session.end("error", new Error(message));
+        },
+        onModeChange: ({ mode }) => {
+          session.emitMode(mode === "speaking" ? "speaking" : "listening");
+        },
+        onMessage: (message) => {
+          session.emitTranscript({
+            role: message.role === "user" ? "user" : "assistant",
+            text: message.message,
+            isFinal: true,
+          });
+        },
+      });
+
+      return {
+        disconnect: () => {
+          if (volumeInterval) clearInterval(volumeInterval);
+          conversation.endSession();
+        },
+        mute: () => conversation.setMicMuted(true),
+        unmute: () => conversation.setMicMuted(false),
+      };
+    });
+  }
+}
+
+```
+
+## next.config.js
+
+```javascript
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ["@assistant-ui/react", "@assistant-ui/react-ai-sdk"],
+};
+
+export default nextConfig;
+
+```
+
+## package.json
+
+```json
+{
+  "name": "with-elevenlabs-conversational",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "dependencies": {
+    "@ai-sdk/openai": "^3.0.50",
+    "@ai-sdk/react": "^3.0.146",
+    "@assistant-ui/react": "workspace:^",
+    "@assistant-ui/react-ai-sdk": "workspace:*",
+    "@assistant-ui/react-markdown": "workspace:^",
+    "@assistant-ui/ui": "workspace:*",
+    "@elevenlabs/client": "^1.1.0",
+    "@tailwindcss/postcss": "^4.2.2",
+    "ai": "^6.0.144",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.7.0",
+    "motion": "^12.38.0",
+    "next": "^16.2.2",
+    "postcss": "^8.5.8",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.2",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@assistant-ui/x-buildutils": "workspace:*",
+    "@types/node": "^25.5.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "5.9.3"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  }
+}
+
+```
+
+## tsconfig.json
+
+```json
+{
+  "extends": "@assistant-ui/x-buildutils/ts/base",
+  "compilerOptions": {
+    "target": "ES6",
+    "module": "ESNext",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "allowJs": true,
+    "strictNullChecks": true,
+    "jsx": "preserve",
+    "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/*"],
+      "@assistant-ui/*": ["../../packages/*/src"],
+      "@assistant-ui/react/*": ["../../packages/react/src/*"],
+      "@assistant-ui/tap/*": ["../../packages/tap/src/*"],
+      "assistant-stream": ["../../packages/assistant-stream/src"],
+      "assistant-stream/*": ["../../packages/assistant-stream/src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+
+```
+