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

package/.docs/raw/docs/ui/mention.mdx

@@ -0,0 +1,168 @@
+---
+title: Mention
+description: Let users @-mention tools in the composer with a keyboard-navigable popover picker and inline chips.
+---
+
+## Getting Started
+
+<Steps>
+  <Step>
+
+### Add `composer-mention`
+
+<InstallCommand shadcn={["composer-mention"]} />
+
+This adds a `/components/assistant-ui/composer-mention.tsx` file with `ComposerMentionPopover`, `ComposerMentionRoot`, and `DirectiveText`.
+
+  </Step>
+  <Step>
+
+### Wrap the Composer
+
+Wrap your composer with `ComposerMentionPopover.Root` and add `<ComposerMentionPopover />` inside:
+
+```tsx title="components/assistant-ui/thread.tsx" {1,7,10}
+import { ComposerMentionPopover } from "@/components/assistant-ui/composer-mention";
+
+const Composer = () => {
+  return (
+    <ComposerMentionPopover.Root>
+      <ComposerPrimitive.Root>
+        <ComposerPrimitive.Input placeholder="Type @ to mention a tool..." />
+        <ComposerPrimitive.Send />
+        <ComposerMentionPopover />
+      </ComposerPrimitive.Root>
+    </ComposerMentionPopover.Root>
+  );
+};
+```
+
+The popover automatically shows registered tools when the user types `@`.
+
+  </Step>
+  <Step>
+
+### Render Mentions in User Messages
+
+Use `DirectiveText` as the `Text` component for **user messages** so mention directives render as inline chips instead of raw `:tool[label]` syntax:
+
+```tsx title="components/assistant-ui/thread.tsx" {1,8}
+import { DirectiveText } from "@/components/assistant-ui/composer-mention";
+
+const UserMessage = () => {
+  return (
+    <MessagePrimitive.Root>
+      <MessagePrimitive.Parts
+        components={{
+          Text: DirectiveText,
+        }}
+      />
+    </MessagePrimitive.Root>
+  );
+};
+```
+
+<Callout>
+  `DirectiveText` renders plain text with mention chips. For assistant messages
+  that contain markdown, keep using your markdown renderer (e.g. `MarkdownText`).
+</Callout>
+
+  </Step>
+</Steps>
+
+## With Lexical Rich Editor
+
+For inline mention chips in the composer (not just the popover), use `LexicalComposerInput` from `@assistant-ui/react-lexical`:
+
+```bash
+npm install @assistant-ui/react-lexical lexical @lexical/react
+```
+
+Replace `ComposerPrimitive.Input` with `LexicalComposerInput`:
+
+```tsx title="components/assistant-ui/thread.tsx" {1,8}
+import { LexicalComposerInput } from "@assistant-ui/react-lexical";
+
+const Composer = () => {
+  return (
+    <ComposerMentionPopover.Root>
+      <ComposerPrimitive.Root>
+        <LexicalComposerInput placeholder="Type @ to mention a tool..." />
+        <ComposerPrimitive.Send />
+        <ComposerMentionPopover />
+      </ComposerPrimitive.Root>
+    </ComposerMentionPopover.Root>
+  );
+};
+```
+
+`LexicalComposerInput` auto-wires to `MentionContext` — no extra props needed. Selected mentions appear as inline chips that are treated as atomic units (select, delete, undo as a whole).
+
+## Custom Formatter
+
+The default directive format is `:type[label]{name=id}`. To use a custom format, pass a `formatter` to both the mention root and the message renderer:
+
+```tsx
+import { ComposerMentionPopover } from "@/components/assistant-ui/composer-mention";
+import { createDirectiveText } from "@/components/assistant-ui/composer-mention";
+
+const myFormatter = {
+  serialize: (item) => `@${item.id}`,
+  parse: (text) => [{ kind: "text", text }], // implement your parsing
+};
+
+// In composer (textarea path):
+<ComposerMentionPopover.Root formatter={myFormatter}>
+  ...
+</ComposerMentionPopover.Root>
+
+// In composer (Lexical path — also pass formatter):
+<ComposerMentionPopover.Root formatter={myFormatter}>
+  <ComposerPrimitive.Root>
+    <LexicalComposerInput formatter={myFormatter} />
+    ...
+  </ComposerPrimitive.Root>
+</ComposerMentionPopover.Root>
+
+// In user messages:
+const MyDirectiveText = createDirectiveText(myFormatter);
+<MessagePrimitive.Parts components={{ Text: MyDirectiveText }} />
+```
+
+## Keyboard Navigation
+
+The mention popover supports full keyboard navigation out of the box:
+
+| Key | Action |
+| --- | --- |
+| <Kbd>ArrowDown</Kbd> | Highlight next item |
+| <Kbd>ArrowUp</Kbd> | Highlight previous item |
+| <Kbd>Enter</Kbd> | Select highlighted item / drill into category |
+| <Kbd>Escape</Kbd> | Close popover |
+| <Kbd>Backspace</Kbd> | Go back to categories (when query is empty) |
+
+## Components
+
+### `ComposerMentionPopover.Root`
+
+Wraps the composer with mention context and a tool mention adapter. Provides the `@`-trigger detection, keyboard navigation, and popover state.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `adapter` | `Unstable_MentionAdapter` | Tool adapter | Custom mention adapter |
+| `trigger` | `string` | `"@"` | Character(s) that open the popover |
+| `formatter` | `Unstable_DirectiveFormatter` | Default | Custom directive serializer/parser |
+| `formatLabel` | `(name: string) => string` | Title case | Format tool names for display |
+| `categoryLabel` | `string` | `"Tools"` | Label for the tools category |
+
+### `ComposerMentionPopover`
+
+Pre-built popover containing categories and items lists. Only renders when the `@` trigger is active.
+
+### `DirectiveText`
+
+A `TextMessagePartComponent` that parses `:type[label]{name=id}` directives and renders them as styled inline chips.
+
+### `createDirectiveText(formatter)`
+
+Factory function that creates a `TextMessagePartComponent` using a custom `Unstable_DirectiveFormatter`.

package/.docs/raw/docs/ui/model-selector.mdx

@@ -50,7 +50,7 @@ const ComposerAction: FC = () => {
 
 ### Read the model in your API route
 
-The selected model name is sent as `config.modelName` in the request body:
+The selected model's `id` is sent as `config.modelName` in the request body:
 
 ```tsx title="app/api/chat/route.ts" {2,5}
 export async function POST(req: Request) {

package/.docs/raw/docs/ui/voice.mdx

@@ -0,0 +1,172 @@
+---
+title: Voice
+description: Realtime voice session controls with connect, mute, and status indicator.
+---
+
+import { VoiceSample, VoiceVariantsSample, VoiceStatesSample } from "@/components/docs/samples/voice";
+
+A control bar for realtime bidirectional voice sessions with an animated orb indicator. Works with any `RealtimeVoiceAdapter` (LiveKit, ElevenLabs, etc.).
+
+<VoiceSample />
+
+## Getting Started
+
+<Steps>
+  <Step>
+
+### Add the component
+
+<InstallCommand shadcn={["voice"]} />
+
+This adds `/components/assistant-ui/voice.tsx` to your project, which you can adjust as needed.
+
+  </Step>
+  <Step>
+
+### Configure a voice adapter
+
+Pass a `RealtimeVoiceAdapter` to your runtime. See the [Realtime Voice guide](/docs/guides/voice) for details.
+
+```tsx
+const runtime = useChatRuntime({
+  adapters: {
+    voice: myVoiceAdapter,
+  },
+});
+```
+
+  </Step>
+  <Step>
+
+### Use in your application
+
+```tsx title="app/page.tsx"
+import { Thread } from "@/components/assistant-ui/thread";
+import { VoiceControl } from "@/components/assistant-ui/voice";
+import { AuiIf } from "@assistant-ui/react";
+
+export default function Chat() {
+  return (
+    <div className="flex h-full flex-col">
+      <AuiIf condition={(s) => s.thread.capabilities.voice}>
+        <VoiceControl />
+      </AuiIf>
+      <div className="min-h-0 flex-1">
+        <Thread />
+      </div>
+    </div>
+  );
+}
+```
+
+  </Step>
+</Steps>
+
+## Anatomy
+
+The `VoiceControl` component is built with the following hooks and conditionals:
+
+```tsx
+import { AuiIf, useVoiceState, useVoiceControls } from "@assistant-ui/react";
+
+<div className="aui-voice-control">
+  <VoiceIndicator />
+
+  <AuiIf condition={(s) => s.thread.voice == null}>
+    <VoiceConnectButton />
+  </AuiIf>
+
+  <AuiIf condition={(s) => s.thread.voice?.status.type === "running"}>
+    <VoiceMuteButton />
+    <VoiceDisconnectButton />
+  </AuiIf>
+</div>
+```
+
+## Examples
+
+### Conditionally show voice controls
+
+Only render when a voice adapter is configured:
+
+```tsx
+<AuiIf condition={(s) => s.thread.capabilities.voice}>
+  <VoiceControl />
+</AuiIf>
+```
+
+### Voice toggle in composer
+
+Add a compact voice toggle button inside the composer action area:
+
+```tsx
+function ComposerVoiceToggle() {
+  const voiceState = useVoiceState();
+  const { connect, disconnect } = useVoiceControls();
+  const isActive =
+    voiceState?.status.type === "running" ||
+    voiceState?.status.type === "starting";
+
+  return (
+    <AuiIf condition={(s) => s.thread.capabilities.voice}>
+      <button
+        type="button"
+        onClick={() => (isActive ? disconnect() : connect())}
+        aria-label={isActive ? "End voice" : "Start voice"}
+      >
+        {isActive ? <PhoneOffIcon /> : <PhoneIcon />}
+      </button>
+    </AuiIf>
+  );
+}
+```
+
+### Custom indicator colors
+
+Override the indicator styles by targeting the `aui-voice-indicator` class:
+
+```css
+.aui-voice-indicator {
+  /* Override active color */
+  &.bg-green-500 {
+    background: theme("colors.blue.500");
+  }
+}
+```
+
+## States
+
+The `VoiceOrb` responds to five voice session states with distinct animations:
+
+<VoiceStatesSample />
+
+## Variants
+
+Four built-in color palettes. Size is controlled via `className`.
+
+<VoiceVariantsSample />
+
+## Sub-components
+
+| Component | Description |
+|-----------|-------------|
+| `VoiceOrb` | Animated orb visual with gradient, glow, and ripple effects. Accepts `state` and `variant` props. |
+| `VoiceControl` | Control bar with status dot, connect/disconnect, and mute/unmute buttons. |
+| `VoiceConnectButton` | Calls `connect()`. Shown when no session is active. |
+| `VoiceMuteButton` | Toggles `mute()`/`unmute()`. Shown when session is running. |
+| `VoiceDisconnectButton` | Calls `disconnect()`. Shown when session is active. |
+
+All sub-components are exported and can be used independently for custom layouts.
+
+## State Selectors
+
+Use these with `AuiIf` or `useAuiState` to build custom voice UI:
+
+| Selector | Type | Description |
+|----------|------|-------------|
+| `s.thread.capabilities.voice` | `boolean` | Whether a voice adapter is configured |
+| `s.thread.voice` | `VoiceSessionState \| undefined` | `undefined` when no session |
+| `s.thread.voice?.status.type` | `"starting" \| "running" \| "ended"` | Session phase |
+| `s.thread.voice?.isMuted` | `boolean` | Microphone muted state |
+| `s.thread.voice?.mode` | `"listening" \| "speaking"` | Who is currently active (user or agent) |
+| `useVoiceVolume()` | `number` | Real-time audio level (0–1), separate from main state to avoid 20Hz re-renders |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/mcp-docs-server",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "description": "MCP server for assistant-ui documentation and examples",
   "keywords": [
     "mcp",
@@ -15,7 +15,6 @@
   "type": "module",
   "exports": {
     ".": {
-      "aui-source": "./src/index.ts",
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     }
@@ -33,14 +32,14 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.27.1",
+    "@modelcontextprotocol/sdk": "^1.29.0",
     "gray-matter": "^4.0.3",
     "zod": "^4.3.6"
   },
   "devDependencies": {
     "@types/node": "^25.5.0",
     "tsx": "^4.21.0",
-    "vitest": "^4.1.0",
+    "vitest": "^4.1.2",
     "@assistant-ui/x-buildutils": "0.0.3"
   },
   "publishConfig": {