@assistant-ui/mcp-docs-server 0.2.3 → 0.3.0

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

@@ -1,527 +0,0 @@
-# Example: with-elevenlabs-conversational
-
-## app/api/chat/route.ts
-
-```typescript
-import { openai } from "@ai-sdk/openai";
-import {
-  streamText,
-  type 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-5.6-luna"),
-    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/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 bg-background flex h-full flex-col"
-      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="bg-background sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col items-center 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 text-2xl font-semibold 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="dark:border-border dark:bg-background dark:hover:bg-accent absolute -top-12 z-10 self-center rounded-full p-4 disabled:invisible"
-      >
-        <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 bg-foreground/50 h-full w-[3px] origin-center rounded-full 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 animate-in relative mx-auto w-full max-w-(--thread-max-width) py-3 duration-150"
-      data-role="assistant"
-    >
-      <div className="aui-assistant-message-content text-foreground px-2 leading-relaxed wrap-break-word">
-        <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 animate-in mx-auto flex w-full max-w-(--thread-max-width) justify-end px-2 py-3 duration-150"
-      data-role="user"
-    >
-      <div className="aui-user-message-content bg-muted text-foreground rounded-2xl px-4 py-2.5 wrap-break-word">
-        <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
-import { withAui } from "@assistant-ui/next";
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  transpilePackages: ["@assistant-ui/react", "@assistant-ui/ai-sdk"],
-};
-
-export default withAui(nextConfig);
-
-```
-
-## package.json
-
-```json
-{
-  "name": "with-elevenlabs-conversational",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "dependencies": {
-    "@ai-sdk/openai": "^4.0.46",
-    "@ai-sdk/react": "^4.0.80",
-    "@assistant-ui/ai-sdk": "workspace:*",
-    "@assistant-ui/react": "workspace:^",
-    "@assistant-ui/react-markdown": "workspace:^",
-    "@assistant-ui/ui": "workspace:*",
-    "@elevenlabs/client": "^1.21.0",
-    "@tailwindcss/postcss": "^4.3.3",
-    "ai": "^7.0.77",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^1.33.0",
-    "motion": "^13.1.1",
-    "next": "^16.3.2",
-    "postcss": "^8.5.26",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "tailwind-merge": "^3.6.0",
-    "tailwindcss": "^4.3.3",
-    "zod": "^4.4.3"
-  },
-  "devDependencies": {
-    "@assistant-ui/next": "workspace:*",
-    "@assistant-ui/x-buildutils": "workspace:*",
-    "@types/node": "^26.2.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.5",
-    "tw-animate-css": "^1.4.0",
-    "typescript": "^7.0.2"
-  },
-  "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/*"
-      ],
-      "@/hooks/*": ["../../packages/ui/src/hooks/*"],
-      "@/components/ui/*": [
-        "../../packages/ui/src/components/ui/base/*",
-        "../../packages/ui/src/components/ui/radix/*"
-      ],
-      "@/components/ui/radix/*": [
-        "../../packages/ui/src/components/ui/radix/*"
-      ],
-      "@/lib/utils": ["../../packages/ui/src/lib/utils"],
-      "@assistant-ui/ui/*": ["../../packages/ui/src/*"],
-      "@assistant-ui/store/client": ["../../packages/store/src/client"],
-      "@assistant-ui/*": ["../../packages/*/src"],
-      "@assistant-ui/core/*": ["../../packages/core/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"]
-}
-
-```
-