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

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/docs/samples/model-selector";
-import * as ModelSelectorRadixSamples from "@/components/docs/samples/model-selector.radix";
-import { Flavored, FlavorSwitcher } from "@/components/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/react-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

package/.docs/raw/docs/ui/number-roll.mdx

@@ -1,154 +0,0 @@
----
-title: Number Roll
-description: Animated number that rolls digits odometer-style when the value changes.
-platforms: ["react"]
----
-
-import { PreviewCode } from "@/components/docs/preview-code.server";
-import {
-  NumberRollSample,
-  NumberRollCompactSample,
-  NumberRollFormatSample,
-  NumberRollLiveSample,
-} from "@/components/docs/samples/number-roll";
-
-<Callout>
-  This is a **standalone component** that does not depend on the assistant-ui runtime. Use it anywhere in your application.
-</Callout>
-
-<NumberRollSample />
-
-## Installation
-
-<InstallCommand shadcn={["number-roll"]} />
-
-This adds a `/components/assistant-ui/number-roll.tsx` file to your project, which you can adjust as needed. The component has no dependencies beyond React.
-
-## Usage
-
-```tsx
-import { NumberRoll } from "@/components/assistant-ui/number-roll";
-
-export function TokenCounter({ count }: { count: number }) {
-  return <NumberRoll value={count} format={{ notation: "compact" }} />;
-}
-```
-
-When `value` changes, each digit rolls in place to its new value. Formatting is handled by `Intl.NumberFormat`, so structural changes animate too: when `700` becomes `1.1K` with compact notation, the surviving ones digit rolls from 0 to 1 while the leading `70` slides out and the decimal point, fraction digit, and `K` suffix slide in.
-
-## Examples
-
-### Compact Notation
-
-Pass any `Intl.NumberFormatOptions` via the `format` prop. Crossing a compact-notation threshold animates the formatting change instead of remounting the whole string.
-
-<PreviewCode file="components/docs/samples/number-roll" name="NumberRollCompactSample">
-  <NumberRollCompactSample />
-</PreviewCode>
-
-### Formats and Locales
-
-Currencies, percentages, suffixes, and non-English locales all work through the same `Intl.NumberFormat` pipeline. Compact thresholds and suffixes are locale-dependent (`1.2万` in `zh-CN`), so never hardcode them.
-
-<PreviewCode file="components/docs/samples/number-roll" name="NumberRollFormatSample">
-  <NumberRollFormatSample />
-</PreviewCode>
-
-### Live Counter
-
-Rapid successive updates retarget the in-flight roll smoothly, which makes the component suitable for streaming token counts and other live metrics.
-
-<PreviewCode file="components/docs/samples/number-roll" name="NumberRollLiveSample">
-  <NumberRollLiveSample />
-</PreviewCode>
-
-## How It Works
-
-The value is formatted with `Intl.NumberFormat.formatToParts` and split into keyed parts. Integer digits are keyed by place value counted from the right, so when `999` becomes `1,000` the existing columns keep their identity and roll in place while only the new leading digit and separator enter. Symbols (decimal point, group separators, currency signs, compact suffixes) cross-fade and collapse via animated `grid-template-columns`.
-
-Each digit renders a strip of 0 to 9 and animates a registered CSS custom property; CSS `mod()` math wraps the strip into an endless ribbon, so rolling from 9 to 0 continues in the trend direction instead of spinning backwards. There is no JavaScript animation loop and no animation library dependency.
-
-In browsers without CSS `mod()` support, and during server rendering, the component renders the plain formatted string. With `prefers-reduced-motion`, values swap instantly without rolling. When server rendering, pass an explicit `locales`: the server's default locale can differ from the visitor's browser locale, and a mismatched formatted string causes a React hydration error. Locales whose default numbering system is non-Latin (such as `ar-EG`) cross-fade their digits as symbols instead of rolling.
-
-The formatted value is exposed to screen readers as plain text while the animated digits are `aria-hidden`. Value changes are not announced automatically; wrap the component in an `aria-live` region if you need announcements.
-
-## API Reference
-
-### NumberRoll
-
-<ParametersTable
-  type="NumberRollProps"
-  parameters={[
-    {
-      name: "value",
-      type: "number",
-      required: true,
-      description: "The number to display.",
-    },
-    {
-      name: "format",
-      type: "Intl.NumberFormatOptions",
-      description:
-        "Number formatting options, e.g. `{ notation: \"compact\" }` or `{ style: \"currency\", currency: \"USD\" }`.",
-    },
-    {
-      name: "locales",
-      type: "Intl.LocalesArgument",
-      description:
-        "Locale(s) passed to `Intl.NumberFormat`. Pass an explicit value in server-rendered apps so the server and client format identically.",
-    },
-    {
-      name: "prefix",
-      type: "string",
-      description: "Static text rendered before the number.",
-    },
-    {
-      name: "suffix",
-      type: "string",
-      description: "Static text rendered after the number.",
-    },
-    {
-      name: "trend",
-      type: '"auto" | "up" | "down"',
-      default: '"auto"',
-      description:
-        "Roll direction. `auto` follows the sign of the value change; `up` and `down` force a direction, wrapping digits through 9/0 as needed.",
-    },
-    {
-      name: "duration",
-      type: "number",
-      default: "500",
-      description:
-        "Digit roll duration in milliseconds. Enter/exit fades run at 60% of this value.",
-    },
-    {
-      name: "className",
-      type: "string",
-      description: "Additional CSS classes.",
-    },
-  ]}
-/>
-
-### Styling
-
-The root applies `tabular-nums` so digits keep a constant width while rolling; the font you use must provide tabular figures for the layout to stay stable. Size and color are inherited from the surrounding text, so style it like any span:
-
-```tsx
-<NumberRoll value={value} className="text-4xl font-semibold" />
-```
-
-Change the animation speed via the `duration` prop; it drives both the CSS timing and the cleanup that unmounts exited characters, so overriding the duration variable in CSS alone would remove them mid-fade. The fade and easing variables are safe to override via the `style` prop (the defaults are set as inline styles, so plain `className` overrides do not apply):
-
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--aui-number-roll-duration` | `500ms` (from the `duration` prop) | Digit roll duration. |
-| `--aui-number-roll-fade` | 60% of the duration | Enter/exit fade and width-collapse duration. |
-| `--aui-number-roll-ease` | `cubic-bezier(0.23, 1, 0.32, 1)` | Digit roll easing. |
-
-Parts are targetable via data attributes: `[data-slot="number-roll"]`, `[data-slot="number-roll-part"]`, `[data-slot="number-roll-digit"]`, and `[data-slot="number-roll-symbol"]`.
-
-## Related Components
-
-- [Context Display](/docs/ui/context-display) - Live token usage ring and bar
-- [Message Timing](/docs/ui/message-timing) - Streaming stats badge
-- [Badge](/docs/ui/badge) - Small status and metadata labels