npm - @assistant-ui/mcp-docs-server - Versions diffs - 0.1.25 → 0.1.27 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (62) hide show

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

@@ -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"]
+}
+```

package/.docs/organized/code-examples/with-elevenlabs-scribe.md CHANGED Viewed

@@ -562,25 +562,25 @@ export default nextConfig;
   "version": "0.0.0",
   "type": "module",
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.41",
-    "@ai-sdk/react": "^3.0.118",
+    "@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": "^0.15.1",
-    "@tailwindcss/postcss": "^4.2.1",
-    "ai": "^6.0.116",
+    "@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": "^0.577.0",
-    "motion": "^12.36.0",
-    "next": "^16.1.6",
+    "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.1",
+    "tailwindcss": "^4.2.2",
     "zod": "^4.3.6"
   },
   "devDependencies": {
@@ -589,7 +589,7 @@ export default nextConfig;
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^5.9.3"
+    "typescript": "5.9.3"
   },
   "scripts": {
     "dev": "next dev",

package/.docs/organized/code-examples/with-expo.md CHANGED Viewed

@@ -1940,29 +1940,29 @@ module.exports = config;
     "export:web": "expo export --platform web && node scripts/flatten-assets.mjs"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.41",
-    "@ai-sdk/react": "^3.0.118",
+    "@ai-sdk/openai": "^3.0.50",
+    "@ai-sdk/react": "^3.0.146",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-native": "workspace:*",
     "@expo/vector-icons": "^15.1.1",
-    "@react-navigation/drawer": "^7.7.2",
-    "@react-navigation/native": "^7.1.28",
-    "ai": "^6.0.116",
-    "expo": "~55.0.6",
-    "expo-constants": "~55.0.7",
-    "expo-font": "~55.0.4",
-    "expo-image-picker": "~55.0.12",
-    "expo-linking": "~55.0.7",
-    "expo-router": "~55.0.5",
-    "expo-server": "~55.0.6",
-    "expo-splash-screen": "~55.0.10",
-    "expo-status-bar": "~55.0.4",
-    "expo-system-ui": "~55.0.9",
+    "@react-navigation/drawer": "^7.9.8",
+    "@react-navigation/native": "^7.2.2",
+    "ai": "^6.0.144",
+    "expo": "~55.0.11",
+    "expo-constants": "~55.0.11",
+    "expo-font": "~55.0.6",
+    "expo-image-picker": "~55.0.16",
+    "expo-linking": "~55.0.11",
+    "expo-router": "~55.0.10",
+    "expo-server": "~55.0.7",
+    "expo-splash-screen": "~55.0.15",
+    "expo-status-bar": "~55.0.5",
+    "expo-system-ui": "~55.0.13",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-native": "0.83.2",
-    "react-native-gesture-handler": "~2.30.0",
-    "react-native-reanimated": "~4.2.2",
+    "react-native-gesture-handler": "~2.31.0",
+    "react-native-reanimated": "~4.3.0",
     "react-native-safe-area-context": "~5.7.0",
     "react-native-screens": "~4.24.0",
     "react-native-web": "~0.21.2",
@@ -1971,7 +1971,7 @@ module.exports = config;
   },
   "devDependencies": {
     "@types/react": "~19.2.14",
-    "typescript": "~5.9.3"
+    "typescript": "5.9.3"
   },
   "private": true
 }

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

@@ -319,22 +319,22 @@ export default nextConfig;
     "@assistant-ui/ui": "workspace:*",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.577.0",
-    "next": "^16.1.6",
+    "lucide-react": "^1.7.0",
+    "next": "^16.2.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.2.1",
+    "@tailwindcss/postcss": "^4.2.2",
     "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.8",
-    "tailwindcss": "^4.2.1",
+    "tailwindcss": "^4.2.2",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^5.9.3"
+    "typescript": "5.9.3"
   }
 }