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

package/.docs/raw/docs/ui/mermaid.mdx

@@ -1,92 +0,0 @@
----
-title: "Mermaid Diagrams"
-description: Render Mermaid diagrams in chat messages with streaming support.
-platforms: ["react"]
----
-
-import { MermaidSample } from "@/components/pages/docs/samples/mermaid";
-
-<MermaidSample />
-
-## Getting Started
-
-<Steps>
-  <Step>
-
-### Add `mermaid-diagram` component
-
-<InstallCommand shadcn={["mermaid-diagram"]} />
-
-This will install the required dependencies and add the component to your project.
-
-  </Step>
-  <Step>
-
-### Add it to `componentsByLanguage` in `markdown-text.tsx`
-
-```tsx title="/components/assistant-ui/markdown-text.tsx"
-import { MermaidDiagram } from "@/components/assistant-ui/mermaid-diagram"; // [!code ++]
-
-const MarkdownTextImpl = () => {
-  return (
-    <MarkdownTextPrimitive
-      remarkPlugins={[remarkGfm]}
-      className="aui-md"
-      components={defaultComponents}
-      componentsByLanguage={{               // [!code ++]
-        mermaid: {                          // [!code ++]
-          SyntaxHighlighter: MermaidDiagram // [!code ++]
-        },                                  // [!code ++]
-      }}                                    // [!code ++]
-    />
-  );
-};
-
-export const MarkdownText = memo(MarkdownTextImpl);
-```
-
-  </Step>
-</Steps>
-
-## Configuration
-
-Configure rendering options in `mermaid-diagram.tsx`:
-
-```tsx title="/components/assistant-ui/mermaid-diagram.tsx"
-renderMermaidSVG(code, {
-  bg: "var(--background)",
-  fg: "var(--foreground)",
-  muted: "var(--muted-foreground)",
-  border: "var(--border)",
-  accent: "var(--foreground)",
-  transparent: true,
-});
-```
-
-The palette follows your theme's background, foreground, and shadcn color tokens, so diagrams match light and dark mode automatically.
-
-## Streaming Performance
-
-The `MermaidDiagram` component is optimized for streaming scenarios:
-
-- **Skeleton while streaming**: Shows a placeholder skeleton until the response finishes streaming, then renders the diagram synchronously
-- **Raw source fallback**: Invalid or unsupported diagrams fall back to displaying the raw source
-
-
-## Supported Diagram Types
-
-The component renders these diagram types:
-
-- Flowcharts and decision trees
-- Sequence diagrams
-- Class diagrams
-- State diagrams
-- Entity relationship diagrams
-- XY charts (bar, line, combined)
-
-Other mermaid diagram types fall back to displaying the raw source. See the [Mermaid documentation](https://mermaid.js.org/) for syntax reference.
-
-## Related Components
-
-- [Markdown](/docs/ui/markdown) - Rich text rendering where mermaid is integrated
-- [Syntax Highlighting](/docs/ui/syntax-highlighting) - Code highlighting for other languages

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

@@ -1,93 +0,0 @@
----
-title: Message Timing
-description: Display streaming performance stats — TTFT, total time, tok/s, and chunk count — as a badge with hover popover.
-platforms: ["react"]
----
-
-import { MessageTimingSample } from "@/components/pages/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.
-
-### Data Stream (accurate)
-
-When using the [Data Stream](/docs/runtimes/custom/data-stream) protocol on the backend (via `assistant-stream`), 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/model-selector.mdx

@@ -1,455 +0,0 @@
----
-title: Model Selector
-description: Composable model picker with reasoning effort levels, search, and runtime integration.
-platforms: ["react"]
----
-
-import { ModelSelectorSample } from "@/components/pages/docs/samples/model-selector";
-import * as ModelSelectorRadixSamples from "@/components/pages/docs/samples/model-selector.radix";
-import { Flavored, FlavorSwitcher } from "@/components/pages/docs/contexts/flavor.server";
-
-A picker that lets users switch between AI models and choose a reasoning effort (thinking) level. It is built on Popover + Command, so search, provider grouping, and filtering compose in without being built in. The default export integrates with assistant-ui's `ModelContext` system, so the selection reaches your backend on every request with no extra wiring.
-
-<FlavorSwitcher />
-
-<Flavored radix={<ModelSelectorRadixSamples.ModelSelectorSample />} base={<ModelSelectorSample />} />
-
-## Getting Started
-
-<Steps>
-  <Step>
-
-### Add `model-selector`
-
-<InstallCommand shadcn={["model-selector"]} />
-
-  </Step>
-  <Step>
-
-### Use in your application
-
-Place the `ModelSelector` inside your thread component, typically in the composer area. Each model needs an `id` and a display `name`; everything else is optional:
-
-```tsx title="/components/assistant-ui/thread.tsx" {1,6-15}
-import { ModelSelector } from "@/components/assistant-ui/model-selector";
-
-const ComposerAction: FC = () => {
-  return (
-    <div className="flex items-center gap-1">
-      <ModelSelector
-        models={[
-          { id: "gpt-5.6-luna", name: "GPT-5.6 Luna", description: "Fast and efficient" },
-          { id: "gpt-5.6-terra", name: "GPT-5.6 Terra", description: "Balanced performance" },
-          { id: "gpt-5.6-sol", name: "GPT-5.6 Sol", description: "Most capable", efforts: true },
-        ]}
-        defaultValue="gpt-5.6-luna"
-        defaultEffort="medium"
-        size="sm"
-      />
-    </div>
-  );
-};
-```
-
-  </Step>
-  <Step>
-
-### Read the selection in your API route
-
-The selected model's `id` arrives as `config.modelName`, and the effort level as `config.reasoningEffort`:
-
-```tsx title="app/api/chat/route.ts" {2,5-11}
-export async function POST(req: Request) {
-  const { messages, config } = await req.json();
-
-  const result = streamText({
-    model: openai(config?.modelName ?? "gpt-5.6-luna"),
-    providerOptions: {
-      openai:
-        config?.reasoningEffort !== undefined
-          ? { reasoningEffort: config.reasoningEffort }
-          : {},
-    },
-    messages: await convertToModelMessages(messages),
-  });
-
-  return result.toUIMessageStreamResponse();
-}
-```
-
-`config.reasoningEffort` is only present when the selected model supports the chosen level, so the route only forwards it when it exists. See [How It Works](#how-it-works).
-
-  </Step>
-</Steps>
-
-## Reasoning Efforts
-
-A model that declares `efforts` shows a "Thinking" row at the bottom of the popover. `efforts: true` enables the default Low / Medium / High levels; pass a list of `{ id, name }` objects to define your own:
-
-```tsx
-{
-  id: "gpt-5.6-sol",
-  name: "GPT-5.6 Sol",
-  efforts: [
-    { id: "minimal", name: "Minimal" },
-    { id: "high", name: "High" },
-  ],
-}
-```
-
-Omit `efforts` for models without configurable reasoning. The row is hidden while such a model is selected.
-
-### Sticky Selection
-
-The effort selection survives model switches. Switching to a model that doesn't support the current level omits `reasoningEffort` from the request instead of resetting the user's choice, and the level applies again when the user switches back. The exported `resolveModelEffort` helper applies the same rule if you build your own runtime integration around `ModelSelector.Root`; see [`resolveModelEffort`](#resolvemodeleffort).
-
-### Custom Effort UI
-
-`ModelSelector.Effort` lays the levels out as horizontal segments, which overflows the popover width once a model has more than a few. For those cases, or for a different layout such as a slider or a sub-dropdown, build your own control with the `useModelSelectorEfforts` hook. It exposes the selected model's levels and the active selection:
-
-```tsx
-import { useModelSelectorEfforts } from "@/components/assistant-ui/model-selector";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-
-function EffortDropdown() {
-  const { efforts, effort, setEffort } = useModelSelectorEfforts();
-  if (!efforts?.length) return null;
-
-  return (
-    <div className="flex items-center justify-between gap-3 border-t px-3 py-2">
-      <span className="text-muted-foreground text-xs">Thinking</span>
-      <DropdownMenu>
-        <DropdownMenuTrigger className="text-xs">
-          {efforts.find((e) => e.id === effort)?.name ?? "Select"}
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuRadioGroup value={effort} onValueChange={setEffort}>
-            {efforts.map((option) => (
-              <DropdownMenuRadioItem key={option.id} value={option.id}>
-                {option.name}
-              </DropdownMenuRadioItem>
-            ))}
-          </DropdownMenuRadioGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-}
-```
-
-Render it inside `ModelSelector.Content` in place of `ModelSelector.Effort`. The same hook supports any shape that reads the levels and writes the selection.
-
-## Provider Logos
-
-Each model's `icon` accepts any `ReactNode` and renders in the trigger and the dropdown items. The optional `logos` registry item ships `OpenAILogo`, `ClaudeLogo`, and `GeminiLogo` marks to plug in:
-
-<InstallCommand shadcn={["logos"]} />
-
-```tsx
-import { ClaudeLogo, GeminiLogo, OpenAILogo } from "@/components/assistant-ui/logos";
-
-<ModelSelector
-  models={[
-    { id: "gpt-5.6-sol", name: "GPT-5.6 Sol", icon: <OpenAILogo /> },
-    { id: "claude-opus-4.5", name: "Claude Opus 4.5", icon: <ClaudeLogo /> },
-    { id: "gemini-3-pro", name: "Gemini 3 Pro", icon: <GeminiLogo /> },
-  ]}
-/>;
-```
-
-Icons are opt-in per model — omit `icon` and the entry renders text-only.
-
-## Search
-
-Search is opt-in. Pass `searchable` to the default component:
-
-```tsx
-<ModelSelector models={models} searchable />
-```
-
-The same prop works on `ModelSelector.Content` when it renders its default children. Or compose `ModelSelector.Search` into a custom layout. Matching runs against each model's `id`, `name`, and `keywords`; add the provider name to `keywords` so typing "openai" finds its models.
-
-## Composition
-
-All parts are exported individually. The default popover content is `List` + `Effort`; replace it to add search, provider groups, or anything else:
-
-```tsx
-import {
-  ModelSelectorRoot,
-  ModelSelectorTrigger,
-  ModelSelectorContent,
-  ModelSelectorSearch,
-  ModelSelectorList,
-  ModelSelectorEmpty,
-  ModelSelectorGroup,
-  ModelSelectorItem,
-  ModelSelectorEffort,
-} from "@/components/assistant-ui/model-selector";
-
-<ModelSelectorRoot
-  models={models}
-  value={modelId}
-  onValueChange={setModelId}
-  effort={effort}
-  onEffortChange={setEffort}
->
-  <ModelSelectorTrigger variant="outline" />
-  <ModelSelectorContent>
-    <ModelSelectorSearch placeholder="Search models..." />
-    <ModelSelectorList>
-      <ModelSelectorEmpty />
-      <ModelSelectorGroup heading="OpenAI">
-        {openaiModels.map((model) => (
-          <ModelSelectorItem key={model.id} model={model} />
-        ))}
-      </ModelSelectorGroup>
-      <ModelSelectorGroup heading="Anthropic">
-        {anthropicModels.map((model) => (
-          <ModelSelectorItem key={model.id} model={model} />
-        ))}
-      </ModelSelectorGroup>
-    </ModelSelectorList>
-    <ModelSelectorEffort label="Thinking" />
-  </ModelSelectorContent>
-</ModelSelectorRoot>
-```
-
-| Component | Description |
-|-----------|-------------|
-| `ModelSelector` | Default export with runtime integration |
-| `ModelSelector.Root` | Presentational root (no runtime, controlled state) |
-| `ModelSelector.Trigger` | CVA-styled trigger showing the current selection |
-| `ModelSelector.Value` | Selected model name, icon, and active effort |
-| `ModelSelector.Content` | Popover content wrapping a Command |
-| `ModelSelector.Search` | Search input that filters the list |
-| `ModelSelector.FocusAnchor` | Visually hidden input that anchors keyboard navigation when there is no search box |
-| `ModelSelector.List` | List of model items (renders all models by default) |
-| `ModelSelector.Empty` | Empty state shown when search has no matches |
-| `ModelSelector.Group` | Labeled group of items (e.g. by provider) |
-| `ModelSelector.Separator` | Divider between groups or items |
-| `ModelSelector.Item` | Individual model option |
-| `ModelSelector.Effort` | Thinking level row for the selected model |
-
-`ModelSelector.List` is a Command list, so filtering and keyboard navigation work across groups automatically. Custom sorting is plain code: order the models before rendering items.
-
-Keyboard navigation needs a focused input to drive it. When content is unfiltered (`searchable={false}` on `ModelSelector.Content`, or the default children), `ModelSelector.Content` renders a visually hidden `ModelSelector.FocusAnchor` automatically, so custom layouts without a search box stay keyboard-operable. In a custom layout that renders neither `ModelSelector.Search` nor `searchable={false}`, place `ModelSelector.FocusAnchor` yourself to keep the list reachable from the keyboard.
-
-<Callout type="warn">
-  `ModelSelector.Content` wraps a Command whose root keydown handler claims
-  <Kbd>Enter</Kbd> to select the highlighted model and the arrow keys to move
-  through the list. Interactive elements composed inside it (filter chips,
-  custom effort controls) should stop propagation for the keys they handle in
-  their own `onKeyDown` so the focused control responds instead.
-  `ModelSelector.Effort` does this for <Kbd>Home</Kbd> / <Kbd>End</Kbd> (which
-  cmdk would otherwise use to jump to the first / last model), lets its
-  radiogroup own <Kbd>ArrowLeft</Kbd> / <Kbd>ArrowRight</Kbd>, and hands
-  <Kbd>ArrowUp</Kbd> / <Kbd>ArrowDown</Kbd> back to the model list by
-  refocusing cmdk's input, so the highlight only moves while a following
-  <Kbd>Enter</Kbd> can act on it.
-</Callout>
-
-## Variants
-
-Use the `variant` prop to change the trigger's visual style.
-
-```tsx
-<ModelSelector variant="outline" /> // Border (default)
-<ModelSelector variant="ghost" />   // No background
-<ModelSelector variant="muted" />   // Solid background
-```
-
-| Variant   | Description                                    |
-| --------- | ---------------------------------------------- |
-| `outline` | Border with transparent background (default)   |
-| `ghost`   | No background, subtle hover                    |
-| `muted`   | Solid secondary background                     |
-
-## Sizes
-
-Use the `size` prop to control the trigger dimensions.
-
-```tsx
-<ModelSelector size="sm" />      // Compact (h-8, text-xs)
-<ModelSelector size="default" /> // Standard (h-9)
-<ModelSelector size="lg" />      // Large (h-10)
-```
-
-## Keyboard Navigation
-
-The picker is fully operable from the keyboard, including when search is disabled.
-
-| Key | Action |
-| --- | --- |
-| <Kbd>ArrowDown</Kbd> / <Kbd>ArrowUp</Kbd> | Open the popover from the focused trigger; move between models once open, returning focus to the list from the Thinking row |
-| <Kbd>Enter</Kbd> | Select the highlighted model and close |
-| <Kbd>Escape</Kbd> | Close the popover and return focus to the trigger |
-| <Kbd>Tab</Kbd> | Move from the model list to the Thinking row |
-| <Kbd>ArrowLeft</Kbd> / <Kbd>ArrowRight</Kbd> | Move between reasoning effort levels (Thinking row) |
-| <Kbd>Home</Kbd> / <Kbd>End</Kbd> | Jump to the first / last model (list) or effort level (Thinking row) |
-
-When `searchable` is set, typing filters the list; otherwise the keys above drive selection directly.
-
-## Accessibility
-
-The picker implements the WAI-ARIA combobox pattern over Popover + Command.
-
-- The trigger is `role="combobox"` with `aria-haspopup="listbox"`; the popover primitive manages `aria-expanded` and `aria-controls`.
-- The model list is a Command (cmdk) listbox: each item is `role="option"` with `aria-selected`, and the active item is tracked with `aria-activedescendant`.
-- Keyboard navigation works without a visible search box: `ModelSelector.Content` renders a visually hidden input (`ModelSelector.FocusAnchor`) that anchors cmdk's focus so the list stays reachable. Pass `searchable` to surface a real search input instead.
-- The Thinking row (`ModelSelector.Effort`) is a `role="radiogroup"` of `role="radio"` toggles with roving tabindex, so it is a single tab stop and <Kbd>ArrowLeft</Kbd> / <Kbd>ArrowRight</Kbd> move focus and select in one step. <Kbd>ArrowUp</Kbd> / <Kbd>ArrowDown</Kbd> return focus to the model list.
-
-## How It Works
-
-The default `ModelSelector` export registers the selection with assistant-ui's `ModelContext` system:
-
-1. The component calls `aui.modelContext.register()` with `config.modelName`, plus `config.reasoningEffort` when the selected model supports the chosen level
-2. The `AssistantChatTransport` includes `config` in the request body of every chat request
-3. Your API route reads `config.modelName` and `config.reasoningEffort`
-
-This works out of the box with `@assistant-ui/ai-sdk`. `ModelSelector.Root` performs no registration; it is purely presentational, with controlled and uncontrolled props for the value, effort, and open state.
-
-## API Reference
-
-### ModelSelector
-
-<ParametersTable
-  type="ModelSelectorProps"
-  parameters={[
-    {
-      name: "models",
-      type: "ModelOption[]",
-      required: true,
-      description: "Array of available models to display.",
-    },
-    {
-      name: "defaultValue",
-      type: "string",
-      description: "Initial model ID for uncontrolled usage. Defaults to the first model, captured on first render; if models loads asynchronously, control the value instead.",
-    },
-    {
-      name: "value",
-      type: "string",
-      description: "Controlled selected model ID.",
-    },
-    {
-      name: "onValueChange",
-      type: "(value: string) => void",
-      description: "Callback when selected model changes.",
-    },
-    {
-      name: "defaultEffort",
-      type: "string",
-      description: "Initial effort level ID for uncontrolled usage.",
-    },
-    {
-      name: "effort",
-      type: "string",
-      description: "Controlled effort level ID.",
-    },
-    {
-      name: "onEffortChange",
-      type: "(effort: string) => void",
-      description: "Callback when effort level changes.",
-    },
-    {
-      name: "searchable",
-      type: "boolean",
-      default: "false",
-      description: "Render a search input above the model list.",
-    },
-    {
-      name: "variant",
-      type: '"outline" | "ghost" | "muted"',
-      default: '"outline"',
-      description: "Visual style of the trigger button.",
-    },
-    {
-      name: "size",
-      type: '"sm" | "default" | "lg"',
-      default: '"default"',
-      description: "Size of the trigger button.",
-    },
-    {
-      name: "align",
-      type: '"start" | "center" | "end"',
-      default: '"start"',
-      description: "Alignment of the dropdown relative to the trigger.",
-    },
-    {
-      name: "contentClassName",
-      type: "string",
-      description: "Additional class name for the dropdown content.",
-    },
-  ]}
-/>
-
-### ModelOption
-
-<ParametersTable
-  type="ModelOption"
-  parameters={[
-    {
-      name: "id",
-      type: "string",
-      required: true,
-      description: "Unique identifier sent to the backend as modelName.",
-    },
-    {
-      name: "name",
-      type: "string",
-      required: true,
-      description: "Display name shown in trigger and dropdown.",
-    },
-    {
-      name: "description",
-      type: "string",
-      description: "Optional subtitle shown below the model name.",
-    },
-    {
-      name: "icon",
-      type: "React.ReactNode",
-      description: "Optional icon displayed before the model name.",
-    },
-    {
-      name: "disabled",
-      type: "boolean",
-      description: "Disable selection of this model.",
-    },
-    {
-      name: "keywords",
-      type: "string[]",
-      description: "Extra search terms matched by ModelSelector.Search (e.g. the provider name).",
-    },
-    {
-      name: "efforts",
-      type: "boolean | ModelSelectorEffortOption[]",
-      description: "Reasoning effort levels. true enables the default Low/Medium/High; pass a custom { id, name } list to override. Omit for models without configurable reasoning.",
-    },
-  ]}
-/>
-
-### `useModelSelectorEfforts`
-
-```tsx
-const { efforts, effort, setEffort } = useModelSelectorEfforts();
-```
-
-The selected model's effort levels and the active selection, for building a [custom effort UI](#custom-effort-ui) inside `ModelSelector.Content`. `efforts` is `undefined` for models without configurable reasoning.
-
-### `resolveModelEffort`
-
-```tsx
-resolveModelEffort(models, modelId, effort); // => string | undefined
-```
-
-Returns the effort ID when the given model supports it, otherwise `undefined`. This is the [sticky selection](#sticky-selection) rule the default component applies before registering the selection.
-
-## Related
-
-- [Model Context](/docs/copilots/model-context): How registered context (instructions, tools, config) reaches your backend