@assistant-ui/mcp-docs-server 0.1.22 → 0.1.24

package/.docs/raw/docs/ui/message-timing.mdx

@@ -0,0 +1,92 @@
+---
+title: Message Timing
+description: Display streaming performance stats — TTFT, total time, tok/s, and chunk count — as a badge with hover popover.
+---
+
+import { MessageTimingSample } from "@/components/docs/samples/message-timing";
+
+<MessageTimingSample />
+
+<Callout type="warn">
+  This component is experimental. The API and displayed metrics may change in future versions. When used with the Vercel AI SDK, token counts and tok/s are **estimated** client-side and may be inaccurate — see [Accuracy](#accuracy) below.
+</Callout>
+
+## Getting Started
+
+<Steps>
+  <Step>
+
+### Add `message-timing`
+
+<InstallCommand shadcn={["message-timing"]} />
+
+This adds a `/components/assistant-ui/message-timing.tsx` file to your project.
+
+  </Step>
+  <Step>
+
+### Use in your application
+
+Place `MessageTiming` inside `ActionBarPrimitive.Root` in your `thread.tsx`. It will inherit the action bar's auto-hide behaviour and only renders after the stream completes.
+
+```tsx title="/components/assistant-ui/thread.tsx" {2,12}
+import { ActionBarPrimitive } from "@assistant-ui/react";
+import { MessageTiming } from "@/components/assistant-ui/message-timing";
+
+const AssistantActionBar: FC = () => {
+  return (
+    <ActionBarPrimitive.Root
+      hideWhenRunning
+      autohide="not-last"
+    >
+      <ActionBarPrimitive.Copy />
+      <ActionBarPrimitive.Reload />
+      <MessageTiming />
+    </ActionBarPrimitive.Root>
+  );
+};
+```
+
+  </Step>
+</Steps>
+
+## What It Shows
+
+The badge displays `totalStreamTime` inline and reveals a popover on hover with the full breakdown:
+
+| Metric | Description |
+|--------|-------------|
+| **First token** | Time from request start to first text chunk (TTFT) |
+| **Total** | Total wall-clock time from start to stream end |
+| **Speed** | Output tokens per second (hidden for very short messages) |
+| **Chunks** | Number of stream chunks received |
+
+## Accuracy
+
+Timing accuracy depends on how your backend is connected.
+
+### assistant-stream (accurate)
+
+When using `assistant-stream` on the backend, token counts come directly from the model's usage data sent in `step-finish` chunks. The `tokensPerSecond` metric is exact whenever your backend reports `outputTokens`.
+
+### Vercel AI SDK (estimated)
+
+When using the AI SDK integration (`useChatRuntime`), token counts are **estimated** client-side using a 4 characters per token approximation. This can overcount significantly for short messages.
+
+## API Reference
+
+### `MessageTiming` component
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | — | Additional class names on the root element |
+| `side` | `"top" \| "right" \| "bottom" \| "left"` | `"right"` | Side of the tooltip relative to the badge |
+
+Renders `null` until `totalStreamTime` is available (i.e., while streaming or for user messages).
+
+For the underlying `useMessageTiming()` hook, field definitions, and runtime-specific setup (LocalRuntime, ExternalStore, etc.), see the [Message Timing guide](/docs/guides/message-timing).
+
+## Related
+
+- [Message Timing guide](/docs/guides/message-timing) — `useMessageTiming()` hook, runtime support table, and custom timing UI
+- [Thread](/docs/ui/thread) — The action bar context that `MessageTiming` is typically placed inside

package/.docs/raw/docs/ui/part-grouping.mdx

@@ -517,7 +517,7 @@ import { useAuiState } from "@assistant-ui/react";
 const DynamicGroup: FC<
   PropsWithChildren<{ groupKey: string | undefined; indices: number[] }>
 > = ({ groupKey, indices, children }) => {
-  const parts = useAuiState(({ message }) => message.content);
+  const parts = useAuiState((s) => s.message.content);
   const groupParts = indices.map((i) => parts[i]);
 
   // Analyze group content

package/.docs/raw/docs/ui/reasoning.mdx

@@ -90,11 +90,11 @@ const ReasoningGroupImpl: ReasoningGroupComponent = ({
   startIndex,
   endIndex,
 }) => {
-  const isReasoningStreaming = useAuiState(({ message }) => {
-    if (message.status?.type !== "running") return false;
-    const lastIndex = message.parts.length - 1;
+  const isReasoningStreaming = useAuiState((s) => {
+    if (s.message.status?.type !== "running") return false;
+    const lastIndex = s.message.parts.length - 1;
     if (lastIndex < 0) return false;
-    const lastType = message.parts[lastIndex]?.type;
+    const lastType = s.message.parts[lastIndex]?.type;
     if (lastType !== "reasoning") return false;
     return lastIndex >= startIndex && lastIndex <= endIndex;
   });

package/.docs/raw/docs/ui/scrollbar.mdx

@@ -7,7 +7,7 @@ import { ScrollbarSample } from "@/components/docs/samples/scrollbar";
 
 <ScrollbarSample />
 
-If you want to show a custom scrollbar UI of the `ThreadPrimitive.Viewport` in place of the system default, you can integrate `@radix-ui/react-scroll-area`.
+If you want to show a custom scrollbar UI of the `ThreadPrimitive.Viewport` in place of the system default, you can integrate `radix-ui`'s Scroll Area.
 An example implementation of this is [shadcn/ui's Scroll Area](https://ui.shadcn.com/docs/components/scroll-area).
 
 <Steps>
@@ -48,7 +48,7 @@ Add the following CSS to your `globals.css`:
 The resulting MyThread component should look like this:
 
 ```tsx {1-2,6,8,12-13,15}
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
 import { ScrollBar } from "@/components/ui/scroll-area";
 
 const MyThread: FC = () => {

package/.docs/raw/docs/ui/syntax-highlighting.mdx

@@ -5,10 +5,10 @@ description: Code block syntax highlighting with react-shiki or react-syntax-hig
 
 import { SyntaxHighlightingSample } from "@/components/docs/samples/syntax-highlighting";
 
-<SyntaxHighlightingSample />
-
 <Callout type="warn">Syntax highlighting is not enabled in markdown by default.</Callout>
 
+<SyntaxHighlightingSample />
+
 <Callout type="info">
   `assistant-ui` provides two options for syntax highlighting: 
   - **react-shiki** (recommended for performance & dynamic language support)
@@ -53,11 +53,61 @@ export const defaultComponents = memoizeMarkdownComponents({
 See [react-shiki documentation](https://github.com/AVGVSTVS96/react-shiki#props) for all available options.
 
 Key options:
-- `theme` - Shiki theme (default: `"github-dark"`)
+- `theme` - Shiki theme or multi-theme object (`{ light, dark, ... }`)
 - `language` - Language for highlighting (default: `"text"`)
+- `defaultColor` - Default color mode (`string | false`, e.g. `light-dark()`)
 - `delay` - Delay between highlights, useful for streaming (default: `0`)
-- `customLanguages` - Custom languages to preload
-- `codeToHastOptions` - Options passed to Shiki's `codeToHast`
+- `customLanguages` - Custom languages to preload for dynamic support
+- `codeToHastOptions` - All other options accepted by Shiki's [`codeToHast`](https://github.com/shikijs/shiki/blob/main/packages/types/src/options.ts#L121)
+
+### Dual/multi theme support
+
+To use multiple themes, pass a theme object:
+
+```tsx title="/components/assistant-ui/shiki-highlighter.tsx"
+<ShikiHighlighter
+  /* ... */
+  theme={{
+    light: "github-light",
+    dark: "github-dark",
+  }}
+  defaultColor="light-dark()"
+  /* ... */
+>
+```
+
+> **Note:** The `shiki-highlighter` component sets `defaultColor="light-dark()"` automatically.
+> Only set this manually if using `ShikiHighlighter` directly.
+
+With `defaultColor="light-dark()"`, theme switching is automatic based on your site's `color-scheme`.
+No custom Shiki CSS overrides are required.
+
+Set `color-scheme` on your app root:
+
+System-based (follows OS/browser preference):
+
+```css title="globals.css"
+:root {
+  color-scheme: light dark;
+}
+```
+
+Class-based theme switching:
+
+```css title="globals.css"
+:root {
+  color-scheme: light;
+}
+:root.dark {
+  color-scheme: dark;
+}
+```
+
+If you need broader support for older browsers, you can still use the manual CSS-variable switching approach from the Shiki dual-theme docs.
+
+For more information:
+- [react-shiki multi-theme/reactive themes](https://github.com/AVGVSTVS96/react-shiki)
+- [Shiki dual themes + `light-dark()`](https://shiki.style/guide/dual-themes)
 
 ### Bundle Optimization
 
@@ -100,51 +150,6 @@ const customHighlighter = await createHighlighterCore({
   For more information, see [react-shiki - bundle options](https://github.com/avgvstvs96/react-shiki#bundle-options).
 </Callout>
 
-### Dual/multi theme support
-
-To use multiple theme modes, pass an object with your multi-theme configuration to the `theme` prop in the `ShikiHighlighter` component:
-
-```tsx title="/components/assistant-ui/shiki-highlighter.tsx"
-<ShikiHighlighter
-  /* ... */
-  theme={{
-    light: "github-light",
-    dark: "github-dark",
-  }}
-  /* ... */
->
-```
-
-To make themes responsive to your site's theme mode, add one of the following CSS snippets to your project:
-
-```css title="shiki.css"
-/* for class based dark mode */
-html.dark .shiki,
-html.dark .shiki span {
-  color: var(--shiki-dark) !important;
-  background-color: var(--shiki-dark-bg) !important;
-  /* Optional, if you also want font styles */
-  font-style: var(--shiki-dark-font-style) !important;
-  font-weight: var(--shiki-dark-font-weight) !important;
-  text-decoration: var(--shiki-dark-text-decoration) !important;
-}
-
-/* for query based dark mode */
-@media (prefers-color-scheme: dark) {
-  .shiki,
-  .shiki span {
-    color: var(--shiki-dark) !important;
-    background-color: var(--shiki-dark-bg) !important;
-    /* Optional, if you also want font styles */
-    font-style: var(--shiki-dark-font-style) !important;
-    font-weight: var(--shiki-dark-font-weight) !important;
-    text-decoration: var(--shiki-dark-text-decoration) !important;
-  }
-}
-```
-
-For more information, see [Shiki's documentation on dual and multi themes](https://shiki.style/guide/dual-themes).
-
 ---
 
 ## react-syntax-highlighter

package/.docs/raw/docs/ui/thread.mdx

@@ -16,11 +16,11 @@ attachments, and conditional UI states. Fully customizable and composable.
 The `Thread` component is built with the following primitives:
 
 ```tsx
-import { ThreadPrimitive, AuiIf } from "@assistant-ui/react";
+import { ThreadPrimitive, SelectionToolbarPrimitive, AuiIf } from "@assistant-ui/react";
 
 <ThreadPrimitive.Root>
   <ThreadPrimitive.Viewport>
-    <ThreadPrimitive.Empty />
+    <AuiIf condition={(s) => s.thread.isEmpty} />
     <ThreadPrimitive.Messages
       components={{
         EditComposer,
@@ -32,6 +32,11 @@ import { ThreadPrimitive, AuiIf } from "@assistant-ui/react";
   </ThreadPrimitive.Viewport>
   <ThreadPrimitive.Suggestions />
   <AuiIf condition={...} />
+
+  {/* Floating toolbar — appears when text is selected in a message */}
+  <SelectionToolbarPrimitive.Root>
+    <SelectionToolbarPrimitive.Quote>Quote</SelectionToolbarPrimitive.Quote>
+  </SelectionToolbarPrimitive.Root>
 </ThreadPrimitive.Root>
 ```
 
@@ -71,7 +76,7 @@ export default function Chat() {
 ### Welcome Screen
 
 ```tsx
-<AuiIf condition={({ thread }) => thread.isEmpty}>
+<AuiIf condition={(s) => s.thread.isEmpty}>
   <ThreadWelcome />
 </AuiIf>
 ```
@@ -79,7 +84,7 @@ export default function Chat() {
 ### Viewport Spacer
 
 ```tsx
-<AuiIf condition={({ thread }) => !thread.isEmpty}>
+<AuiIf condition={(s) => !s.thread.isEmpty}>
   <div className="min-h-8 grow" />
 </AuiIf>
 ```
@@ -87,13 +92,13 @@ export default function Chat() {
 ### Conditional Send/Cancel Button
 
 ```tsx
-<AuiIf condition={({ thread }) => !thread.isRunning}>
+<AuiIf condition={(s) => !s.thread.isRunning}>
   <ComposerPrimitive.Send>
     Send
   </ComposerPrimitive.Send>
 </AuiIf>
 
-<AuiIf condition={({ thread }) => thread.isRunning}>
+<AuiIf condition={(s) => s.thread.isRunning}>
   <ComposerPrimitive.Cancel>
     Cancel
   </ComposerPrimitive.Cancel>
@@ -349,15 +354,15 @@ Conditionally renders children based on assistant state. This is a generic compo
 ```tsx
 import { AuiIf } from "@assistant-ui/react";
 
-<AuiIf condition={({ thread }) => thread.isEmpty}>
+<AuiIf condition={(s) => s.thread.isEmpty}>
   <WelcomeScreen />
 </AuiIf>
 
-<AuiIf condition={({ thread }) => thread.isRunning}>
+<AuiIf condition={(s) => s.thread.isRunning}>
   <LoadingIndicator />
 </AuiIf>
 
-<AuiIf condition={({ message }) => message.role === "assistant"}>
+<AuiIf condition={(s) => s.message.role === "assistant"}>
   <AssistantAvatar />
 </AuiIf>
 ```
@@ -382,3 +387,5 @@ The condition function receives an `AssistantState` object with access to `threa
 ## Related Components
 
 - [ThreadList](/docs/ui/thread-list) - List of threads, with or without sidebar
+- [Quoting guide](/docs/guides/quoting) - Quote selected text from messages
+- [SelectionToolbarPrimitive](/docs/reference/primitives/selection-toolbar) - Floating toolbar API reference

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { McpServer } from "@modelcontextprotocol/sdk";
 export declare const server: McpServer;
 export declare function runServer(): Promise<void>;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAcpE,eAAO,MAAM,MAAM,WAGjB,CAAC;AAeH,wBAAsB,SAAS,kBAW9B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,kCAAgD;AAcpE,eAAO,MAAM,MAAM,WAGjB,CAAC;AAeH,wBAAsB,SAAS,kBAW9B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/mcp-docs-server",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "description": "MCP server for assistant-ui documentation and examples",
   "keywords": [
     "mcp",
@@ -33,12 +33,12 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.26.0",
+    "@modelcontextprotocol/sdk": "^1.27.1",
     "gray-matter": "^4.0.3",
     "zod": "^4.3.6"
   },
   "devDependencies": {
-    "@types/node": "^25.2.1",
+    "@types/node": "^25.3.3",
     "tsx": "^4.21.0",
     "vitest": "^4.0.18",
     "@assistant-ui/x-buildutils": "0.0.1"

package/src/tools/tests/integration.test.ts

@@ -36,11 +36,11 @@ describe("MCP Server Integration", () => {
     const docsResult = await docsTools.execute({ paths: ["/"] });
     expect(docsResult).toBeDefined();
     expect(docsResult.content).toBeDefined();
-    expect(docsResult.content[0].type).toBe("text");
+    expect(docsResult.content[0]!.type).toBe("text");
 
     const examplesResult = await examplesTools.execute({});
     expect(examplesResult).toBeDefined();
     expect(examplesResult.content).toBeDefined();
-    expect(examplesResult.content[0].type).toBe("text");
+    expect(examplesResult.content[0]!.type).toBe("text");
   });
 });

package/src/tools/tests/json-parsing.test.ts

@@ -9,7 +9,7 @@ describe("JSON parsing error handling", () => {
 
   it("should provide helpful error message for invalid JSON", async () => {
     vi.spyOn(docsTools, "execute").mockResolvedValue({
-      content: [{ text: "invalid json {not valid}" }],
+      content: [{ type: "text" as const, text: "invalid json {not valid}" }],
     });
 
     await expect(

package/src/tools/tests/mcp-protocol.test.ts

@@ -17,9 +17,7 @@ describe("MCP Protocol Integration", () => {
       method: "initialize",
       params: {
         protocolVersion: "2024-11-05",
-        capabilities: {
-          tools: {},
-        },
+        capabilities: {},
         clientInfo: {
           name: "test-client",
           version: "1.0.0",

package/.docs/raw/docs/cloud/persistence/ai-sdk.mdx

@@ -1,108 +0,0 @@
----
-title: Chat History for AI SDK
-description: Integrate cloud persistence and thread management with Vercel AI SDK.
----
-
-
-## Overview
-
-assistant-cloud provides thread management and persistent chat history for applications built with the [AI SDK by Vercel](https://sdk.vercel.ai/). This guide shows you how to integrate cloud persistence into your AI SDK application.
-
-## Prerequisites
-
-<Callout type="info">
-  You need an assistant-cloud account to follow this guide. [Sign up here](https://cloud.assistant-ui.com/) to get started.
-</Callout>
-
-## Setup Guide
-
-<Steps>
-
-<Step>
-
-### Create a Cloud Project
-
-Create a new project in the [assistant-cloud dashboard](https://cloud.assistant-ui.com/) and from the settings page, copy:
-
-- **Frontend API URL**: `https://proj-[ID].assistant-api.com`
-- **Assistant Cloud API Key**: `sk_aui_proj_*`
-
-</Step>
-
-<Step>
-
-### Configure Environment Variables
-
-Add the following environment variables to your project:
-
-```bash title=".env.local"
-# Frontend API URL from your cloud project settings
-NEXT_PUBLIC_ASSISTANT_BASE_URL=https://proj-[YOUR-ID].assistant-api.com
-
-# API key for server-side operations
-ASSISTANT_API_KEY=your-api-key-here
-```
-
-</Step>
-
-<Step>
-
-### Install Dependencies
-
-Install the required packages:
-
-<InstallCommand npm={["@assistant-ui/react", "@assistant-ui/react-ai-sdk"]} />
-
-</Step>
-
-<Step>
-
-### Set Up the Cloud Runtime
-
-Create a client-side AssistantCloud instance and integrate it with your AI SDK runtime:
-
-```tsx title="app/chat/page.tsx"
-"use client";
-
-import { AssistantCloud, AssistantRuntimeProvider } from "@assistant-ui/react";
-import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
-import { ThreadList } from "@/components/assistant-ui/thread-list";
-import { Thread } from "@/components/assistant-ui/thread";
-
-export default function ChatPage() {
-  const cloud = new AssistantCloud({
-    baseUrl: process.env.NEXT_PUBLIC_ASSISTANT_BASE_URL!,
-    anonymous: true, // Creates browser-session based user ID
-  });
-
-  const runtime = useChatRuntime({
-    api: "/api/chat", // Your AI SDK endpoint
-    cloud,
-  });
-
-  return (
-    <AssistantRuntimeProvider runtime={runtime}>
-      <div className="grid h-dvh grid-cols-[200px_1fr] gap-x-2 px-4 py-4">
-        <ThreadList />
-        <Thread />
-      </div>
-    </AssistantRuntimeProvider>
-  );
-}
-```
-
-</Step>
-
-</Steps>
-
-## Authentication
-
-The example above uses `anonymous: true` which creates a browser session-based user ID. This is suitable for public demos or prototypes.
-
-For production apps with user accounts, see the [Cloud Authorization](/docs/cloud/authorization) guide to persist threads per user or workspace.
-
-## Next Steps
-
-- Learn about [user authentication](/docs/cloud/authorization) for multi-user applications
-- Explore [runtime hooks](/docs/api-reference/integrations/vercel-ai-sdk) and integration options
-- Check out the [complete example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-cloud) on GitHub