npm - @assistant-ui/mcp-docs-server - Versions diffs - 0.1.26 → 0.1.28 - Mend

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

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 (43) hide show

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

@@ -0,0 +1,591 @@
+# Example: with-livekit
+## 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/api/livekit-token/route.ts
+```typescript
+import { AccessToken } from "livekit-server-sdk";
+import { NextResponse } from "next/server";
+export async function POST() {
+  const apiKey = process.env.LIVEKIT_API_KEY;
+  const apiSecret = process.env.LIVEKIT_API_SECRET;
+  const roomName = process.env.LIVEKIT_ROOM_NAME ?? "assistant-room";
+  if (!apiKey || !apiSecret) {
+    return NextResponse.json(
+      { error: "LIVEKIT_API_KEY and LIVEKIT_API_SECRET must be set" },
+      { status: 500 },
+    );
+  }
+  const participantIdentity = `user-${Date.now()}`;
+  const at = new AccessToken(apiKey, apiSecret, {
+    identity: participantIdentity,
+  });
+  at.addGrant({
+    roomJoin: true,
+    room: roomName,
+    canPublish: true,
+    canSubscribe: true,
+  });
+  const token = await at.toJwt();
+  return NextResponse.json({ token });
+}
+```
+## 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: "LiveKit Voice Example",
+  description:
+    "Example using @assistant-ui/react with LiveKit 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 { LiveKitVoiceAdapter } from "@/lib/livekit-voice-adapter";
+import { VoiceThread } from "./voice-thread";
+export default function Home() {
+  const runtime = useChatRuntime({
+    adapters: {
+      voice: new LiveKitVoiceAdapter({
+        url: process.env.NEXT_PUBLIC_LIVEKIT_URL ?? "ws://localhost:7880",
+        token: async () => {
+          const res = await fetch("/api/livekit-token", { method: "POST" });
+          const { token } = await res.json();
+          return token;
+        },
+      }),
+    },
+  });
+  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/livekit-voice-adapter.ts
+```typescript
+import type { RealtimeVoiceAdapter } from "@assistant-ui/react";
+import { createVoiceSession } from "@assistant-ui/react";
+import { Room, RoomEvent, type RoomOptions } from "livekit-client";
+export type LiveKitVoiceAdapterOptions = {
+  url: string;
+  token: string | (() => Promise<string>);
+  roomOptions?: RoomOptions;
+};
+export class LiveKitVoiceAdapter implements RealtimeVoiceAdapter {
+  private _url: string;
+  private _token: string | (() => Promise<string>);
+  private _roomOptions: RoomOptions | undefined;
+  constructor(options: LiveKitVoiceAdapterOptions) {
+    this._url = options.url;
+    this._token = options.token;
+    this._roomOptions = options.roomOptions;
+  }
+  connect(options: {
+    abortSignal?: AbortSignal;
+  }): RealtimeVoiceAdapter.Session {
+    const room = new Room(this._roomOptions);
+    return createVoiceSession(options, async (session) => {
+      let volumeInterval: ReturnType<typeof setInterval> | null = null;
+      room.on(RoomEvent.Connected, () => {
+        session.setStatus({ type: "running" });
+        if (volumeInterval) clearInterval(volumeInterval);
+        volumeInterval = setInterval(() => {
+          if (session.isDisposed()) return;
+          const localLevel = room.localParticipant.audioLevel ?? 0;
+          let remoteLevel = 0;
+          for (const p of room.remoteParticipants.values()) {
+            remoteLevel = Math.max(remoteLevel, p.audioLevel ?? 0);
+          }
+          session.emitVolume(Math.max(localLevel, remoteLevel));
+        }, 100);
+      });
+      room.on(RoomEvent.Disconnected, () => {
+        if (volumeInterval) clearInterval(volumeInterval);
+        session.end("finished");
+      });
+      room.on(RoomEvent.MediaDevicesError, (error) => {
+        if (volumeInterval) clearInterval(volumeInterval);
+        session.end("error", error);
+      });
+      room.on(RoomEvent.ActiveSpeakersChanged, (speakers) => {
+        if (session.isDisposed()) return;
+        const remoteIsSpeaking = speakers.some(
+          (s) => s !== room.localParticipant,
+        );
+        session.emitMode(remoteIsSpeaking ? "speaking" : "listening");
+      });
+      room.on(
+        RoomEvent.TranscriptionReceived,
+        (segments, participant, _publication) => {
+          if (session.isDisposed()) return;
+          const role =
+            participant === room.localParticipant ? "user" : "assistant";
+          for (const segment of segments) {
+            session.emitTranscript({
+              role,
+              text: segment.text,
+              isFinal: segment.final,
+            });
+          }
+        },
+      );
+      const token =
+        typeof this._token === "function" ? await this._token() : this._token;
+      if (session.isDisposed())
+        return { disconnect: () => {}, mute: () => {}, unmute: () => {} };
+      await room.connect(this._url, token);
+      if (session.isDisposed())
+        return { disconnect: () => {}, mute: () => {}, unmute: () => {} };
+      await room.localParticipant.setMicrophoneEnabled(true);
+      return {
+        disconnect: () => {
+          if (volumeInterval) clearInterval(volumeInterval);
+          room.disconnect();
+        },
+        mute: () => {
+          room.localParticipant.setMicrophoneEnabled(false).catch(() => {});
+        },
+        unmute: () => {
+          room.localParticipant.setMicrophoneEnabled(true).catch(() => {});
+        },
+      };
+    });
+  }
+}
+```
+## 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-livekit",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "dependencies": {
+    "@ai-sdk/openai": "^3.0.51",
+    "@ai-sdk/react": "^3.0.150",
+    "@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",
+    "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",
+    "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.2",
+    "@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-parent-id-grouping.md CHANGED Viewed

@@ -474,14 +474,14 @@ export default nextConfig;
     "start": "next start"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.48",
+    "@ai-sdk/openai": "^3.0.51",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/ui": "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"
@@ -489,7 +489,7 @@ export default nextConfig;
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.2.2",
-    "@types/node": "^25.5.0",
+    "@types/node": "^25.5.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.8",

package/.docs/organized/code-examples/with-react-hook-form.md CHANGED Viewed

@@ -537,26 +537,26 @@ export default nextConfig;
     "start": "next start"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.48",
+    "@ai-sdk/openai": "^3.0.51",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-hook-form": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "ai": "^6.0.138",
+    "ai": "^6.0.148",
     "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",
-    "react-hook-form": "^7.72.0",
+    "react-hook-form": "^7.72.1",
     "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.2.2",
-    "@types/node": "^25.5.0",
+    "@types/node": "^25.5.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.8",

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

@@ -21,7 +21,7 @@
   },
   "devDependencies": {
     "@types/react": "^19.2.14",
-    "esbuild": "^0.27.4",
+    "esbuild": "^0.28.0",
     "tsx": "^4.21.0",
     "typescript": "5.9.3"
   }

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

@@ -772,30 +772,30 @@ export default function Home() {
   "dependencies": {
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
-    "@react-router/node": "^7.13.2",
-    "@react-router/serve": "^7.13.2",
+    "@react-router/node": "^7.14.0",
+    "@react-router/serve": "^7.14.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "eventsource-parser": "^3.0.6",
-    "isbot": "^5.1.36",
+    "isbot": "^5.1.37",
     "lucide-react": "^1.7.0",
     "openai": "^6.33.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "react-router": "^7.13.2",
+    "react-router": "^7.14.0",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
-    "@react-router/dev": "^7.13.2",
+    "@react-router/dev": "^7.14.0",
     "@tailwindcss/vite": "^4.2.2",
-    "@types/node": "^25.5.0",
+    "@types/node": "^25.5.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "tailwindcss": "^4.2.2",
     "tw-animate-css": "^1.4.0",
     "typescript": "5.9.3",
-    "vite": "^8.0.2",
+    "vite": "^8.0.5",
     "vite-tsconfig-paths": "^6.1.1"
   }
 }