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

package/.docs/raw/docs/ui/composer-trigger-popover.mdx

@@ -1,212 +0,0 @@
----
-title: Composer Trigger Popover
-description: Reusable picker UI for @ mentions, / slash commands, and any other character-triggered popover.
-platforms: ["react"]
----
-
-import { ComposerTriggerPopoverSample } from "@/components/docs/samples/composer-trigger-popover";
-
-<ComposerTriggerPopoverSample />
-
-## Getting Started
-
-<Steps>
-  <Step>
-
-### Add `composer-trigger-popover`
-
-<InstallCommand shadcn={["composer-trigger-popover"]} />
-
-This adds `/components/assistant-ui/composer-trigger-popover.tsx` — a generic picker UI (Categories + Items + Back) driven by an adapter and one of two behavior props: `directive` (insert a chip) or `action` (run a callback).
-
-  </Step>
-  <Step>
-
-### Wrap the composer
-
-Place `ComposerPrimitive.Unstable_TriggerPopoverRoot` around your composer. Any number of `ComposerTriggerPopover` declarations can live inside — each with its own trigger character, adapter, and behavior prop.
-
-```tsx title="components/assistant-ui/thread.tsx"
-import { ComposerPrimitive } from "@assistant-ui/react";
-import { ComposerTriggerPopover } from "@/components/assistant-ui/composer-trigger-popover";
-
-const Composer = () => (
-  <ComposerPrimitive.Unstable_TriggerPopoverRoot>
-    <ComposerPrimitive.Root>
-      <ComposerPrimitive.Input placeholder="Type @ to mention, / for commands..." />
-      <ComposerPrimitive.Send />
-
-      {/* triggers declared here */}
-    </ComposerPrimitive.Root>
-  </ComposerPrimitive.Unstable_TriggerPopoverRoot>
-);
-```
-
-  </Step>
-</Steps>
-
-## @ Mention
-
-Pair the popover with `unstable_useMentionAdapter` — the hook returns a spreadable `{ adapter, directive }` bundle so selecting an item writes a `:tool[Label]{name=id}` directive into the composer text.
-
-```tsx
-import { unstable_useMentionAdapter } from "@assistant-ui/react";
-import { WrenchIcon } from "lucide-react";
-
-const mention = unstable_useMentionAdapter();
-
-<ComposerTriggerPopover
-  char="@"
-  {...mention}
-  fallbackIcon={WrenchIcon}
-/>;
-```
-
-Override formatter or add an `onInserted` callback via hook options: `unstable_useMentionAdapter({ formatter, onInserted })`.
-
-`unstable_useMentionAdapter` also accepts `items` (flat custom list), `categories` (multi-category drill-down), and `includeModelContextTools` for fine-grained control. See the [Mentions guide](/docs/guides/mentions#built-in-mention-adapter).
-
-Render selected mentions as chips in user messages with [`DirectiveText`](/docs/ui/directive-text). For inline chips **inside** the composer, use [`LexicalComposerInput`](/docs/guides/mentions#textarea-vs-lexical).
-
-## / Slash Command
-
-Use [`unstable_useSlashCommandAdapter`](/docs/guides/slash-commands) to bundle commands (data + `execute`) into `{ adapter, action }` — then plug both into `ComposerTriggerPopover`. By default a directive chip is left in the composer as an audit trail; pass `removeOnExecute` to strip the `/command` text entirely. `iconMap` maps `metadata.icon` strings on items and categories to Lucide icons.
-
-```tsx
-import {
-  unstable_useSlashCommandAdapter,
-  type Unstable_SlashCommand,
-} from "@assistant-ui/react";
-import { FileTextIcon, GlobeIcon, LanguagesIcon, SlashIcon } from "lucide-react";
-
-const SLASH_COMMANDS: readonly Unstable_SlashCommand[] = [
-  {
-    id: "summarize",
-    description: "Summarize the conversation",
-    icon: "FileText",
-    execute: () => {/* ... */},
-  },
-  {
-    id: "translate",
-    description: "Translate to another language",
-    icon: "Languages",
-    execute: () => {/* ... */},
-  },
-  {
-    id: "search",
-    description: "Search the web",
-    icon: "Globe",
-    execute: () => {/* ... */},
-  },
-];
-
-function SlashComposer() {
-  const slash = unstable_useSlashCommandAdapter({ commands: SLASH_COMMANDS });
-
-  return (
-    <ComposerTriggerPopover
-      char="/"
-      {...slash}
-      iconMap={{
-        FileText: FileTextIcon,
-        Languages: LanguagesIcon,
-        Globe: GlobeIcon,
-      }}
-      fallbackIcon={SlashIcon}
-    />
-  );
-}
-```
-
-## Combining Triggers
-
-Multiple popovers coexist under one `TriggerPopoverRoot`. Each reads state from its own declaration, so `@` and `/` never collide.
-
-```tsx
-const commandHandlers: Record<string, () => void> = {
-  summarize: () => {/* ... */},
-  translate: () => {/* ... */},
-};
-
-<ComposerPrimitive.Unstable_TriggerPopoverRoot>
-  <ComposerPrimitive.Root>
-    <ComposerPrimitive.Input placeholder="Type @ to mention, / for commands..." />
-
-    <ComposerTriggerPopover
-      char="@"
-      adapter={mentionAdapter}
-      directive={{ formatter: unstable_defaultDirectiveFormatter }}
-      fallbackIcon={WrenchIcon}
-    />
-    <ComposerTriggerPopover
-      char="/"
-      adapter={slashAdapter}
-      action={{
-        formatter: unstable_defaultDirectiveFormatter,
-        onExecute: (item) => commandHandlers[item.id]?.(),
-      }}
-      iconMap={slashIcons}
-      fallbackIcon={SlashIcon}
-    />
-  </ComposerPrimitive.Root>
-</ComposerPrimitive.Unstable_TriggerPopoverRoot>
-```
-
-## Keyboard Navigation
-
-| Key | Action |
-| --- | --- |
-| <Kbd>ArrowDown</Kbd> | Highlight next item |
-| <Kbd>ArrowUp</Kbd> | Highlight previous item |
-| <Kbd>Enter</Kbd> / <Kbd>Tab</Kbd> | Select highlighted item / drill into category |
-| <Kbd>Shift + Enter</Kbd> | Insert newline (popover stays open) |
-| <Kbd>Shift + Tab</Kbd> | Pass through (native focus traversal) |
-| <Kbd>Escape</Kbd> | Close popover |
-| <Kbd>Backspace</Kbd> | Go back to categories (when query is empty) |
-
-## Accessibility
-
-The popover implements the WAI-ARIA editable combobox pattern.
-
-- The listbox container has `role="listbox"` and each item has `role="option"` plus `aria-selected`.
-- When a popover is open, `ComposerPrimitive.Input` (the underlying `<textarea>`) automatically receives `aria-controls`, `aria-expanded="true"`, `aria-haspopup="listbox"`, and `aria-activedescendant` pointing at the highlighted option. Attributes are removed when the popover closes.
-- When `ComposerPrimitive.Input` is rendered outside a `TriggerPopoverRoot`, no ARIA attributes are added.
-
-## API Reference
-
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `char` | `string` | — | Trigger character, e.g. `"@"` or `"/"` (required; unique within the root) |
-| `adapter` | `Unstable_TriggerAdapter` | — | Provides categories, items, and search (required) |
-| `directive` | `{ formatter, onInserted?, chip? }` | — | Enables directive-insert behavior. Mutually exclusive with `action`. |
-| `action` | `{ formatter, onExecute, removeOnExecute?, chip? }` | — | Enables action behavior. Mutually exclusive with `directive`. |
-| `iconMap` | `Record<string, IconComponent>` | — | Maps `item.metadata.icon` / `category.metadata.icon` strings to icons |
-| `fallbackIcon` | `IconComponent` | `SparklesIcon` | Icon used when no `iconMap` entry matches |
-| `backLabel` | `string` | `"Back"` | Back button label |
-| `emptyCategoriesLabel` | `string` | `"No items available"` | Shown when no categories are available |
-| `emptyItemsLabel` | `string` | `"No matching items"` | Shown when no items match |
-| `isLoading` | `boolean` | `false` | Whether the adapter is resolving items (async sources). Pair with `unstable_useLiveCompletionAdapter`. |
-| `loadingLabel` | `string` | `"Loading…"` | Shown in place of `emptyItemsLabel` while `isLoading` and no items are present |
-
-All other props (`className`, etc.) forward to the underlying popover `div`.
-
-### `directive` object
-
-| Field | Type | Description |
-| --- | --- | --- |
-| `formatter` | `Unstable_DirectiveFormatter` | Serializes the selected item into the directive text written to the composer |
-| `onInserted` | `(item) => void` | Optional callback fired after the directive has been inserted |
-
-### `action` object
-
-| Field | Type | Description |
-| --- | --- | --- |
-| `formatter` | `Unstable_DirectiveFormatter` | Serializes the selected item into the chip left behind (unused when `removeOnExecute`) |
-| `onExecute` | `(item) => void` | Callback fired when an item is selected |
-| `removeOnExecute` | `boolean` | When `true`, strips the trigger text instead of leaving a chip. Default `false`. |
-
-## Related
-
-- [Directive Text](/docs/ui/directive-text) — renderer for mention chips in user messages
-- [Mentions guide](/docs/guides/mentions) — `@`-mention architecture and formatter details
-- [Slash Commands guide](/docs/guides/slash-commands) — `/`-command architecture

package/.docs/raw/docs/ui/context-display.mdx

@@ -1,148 +0,0 @@
----
-title: Context Display
-description: Visualize token usage relative to a model's context window — ring, bar, or text — with a detailed hover popover.
-platforms: ["react"]
----
-
-import { ContextDisplaySample } from "@/components/docs/samples/context-display";
-
-<ContextDisplaySample />
-
-<Callout type="info">
-  This component requires server-side setup to [forward token usage metadata](#forward-token-usage-from-your-route-handler). Without it, ContextDisplay will show 0 usage and no breakdown data.
-</Callout>
-
-## Getting Started
-
-<Steps>
-  <Step>
-
-### Add `context-display`
-
-<InstallCommand shadcn={["context-display"]} />
-
-This adds a `/components/assistant-ui/context-display.tsx` file to your project.
-
-  </Step>
-  <Step>
-
-### Forward token usage from your route handler
-
-Use `messageMetadata` in your Next.js route to attach `usage` from `finish` and `modelId` from `finish-step`:
-
-```tsx title="app/api/chat/route.ts"
-import { streamText, convertToModelMessages } from "ai";
-
-export async function POST(req: Request) {
-  const { messages, config } = await req.json();
-  const result = streamText({
-    model: getModel(config?.modelName),
-    messages: await convertToModelMessages(messages),
-  });
-  return result.toUIMessageStreamResponse({
-    messageMetadata: ({ part }) => {
-      if (part.type === "finish") {
-        return {
-          usage: part.totalUsage,
-        };
-      }
-      if (part.type === "finish-step") {
-        return {
-          modelId: part.response.modelId,
-        };
-      }
-      return undefined;
-    },
-  });
-}
-```
-
-  </Step>
-  <Step>
-
-### Use in your application
-
-Pick a variant and place it in your thread footer, composer, or sidebar. Pass `modelContextWindow` with your model's token limit.
-
-```tsx title="/components/assistant-ui/thread.tsx" {1,8}
-import { ContextDisplay } from "@/components/assistant-ui/context-display";
-
-const ThreadFooter: FC = () => {
-  return (
-    <div className="flex items-center justify-end px-3 py-1.5">
-      <ContextDisplay.Bar modelContextWindow={128000} />
-    </div>
-  );
-};
-```
-
-  </Step>
-</Steps>
-
-## Variants
-
-Three preset variants are available, each wrapping the shared tooltip popover:
-
-```tsx
-// SVG donut ring (default, compact)
-<ContextDisplay.Ring modelContextWindow={128000} />
-
-// Horizontal progress bar with label
-<ContextDisplay.Bar modelContextWindow={128000} />
-
-// Minimal monospace text
-<ContextDisplay.Text modelContextWindow={128000} />
-```
-
-All presets accept `className` for styling overrides and `side` to control tooltip placement (`"top"`, `"bottom"`, `"left"`, `"right"`).
-
-## Composable API
-
-For custom visualizations, use the building blocks directly:
-
-```tsx
-import { ContextDisplay } from "@/components/assistant-ui/context-display";
-
-<ContextDisplay.Root modelContextWindow={128000}>
-  <ContextDisplay.Trigger aria-label="Context usage">
-    <MyCustomGauge />
-  </ContextDisplay.Trigger>
-  <ContextDisplay.Content side="top" />
-</ContextDisplay.Root>
-```
-
-| Component | Description |
-|-----------|-------------|
-| `Root` | Uses provided `usage` when supplied, otherwise fetches token usage internally; provides shared context and wraps children in a tooltip |
-| `Trigger` | Button that opens the tooltip on hover |
-| `Content` | Tooltip popover with the token breakdown (Usage %, Input, Cached, Output, Reasoning, Total) |
-
-## API Reference
-
-### Preset Props
-
-All preset variants (`Ring`, `Bar`, `Text`) share the same props:
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelContextWindow` | `number` | — | Maximum token limit of the current model (required) |
-| `className` | `string` | — | Additional class names on the trigger button |
-| `side` | `"top" \| "bottom" \| "left" \| "right"` | `"top"` | Tooltip placement |
-| `usage` | `ThreadTokenUsage` | — | Optional externally-provided usage data (skips internal usage fetch when provided) |
-
-### Color Thresholds
-
-Ring and Bar share the same severity colors:
-
-| Level | Threshold | Ring | Bar |
-|-------|-----------|------|-----|
-| Low | `< 65%` | `stroke-emerald-500` | `bg-emerald-500` |
-| Warning | `65% – 85%` | `stroke-amber-500` | `bg-amber-500` |
-| Critical | `> 85%` | `stroke-red-500` | `bg-red-500` |
-
-Text displays numeric values only — no severity color.
-
-## Related
-
-- [Message Timing](/docs/ui/message-timing) — Streaming performance stats (TTFT, tok/s)
-- [Thread](/docs/ui/thread) — The thread component where ContextDisplay is typically placed

package/.docs/raw/docs/ui/diff-viewer.mdx

@@ -1,280 +0,0 @@
----
-title: "Diff Viewer"
-description: Render code diffs with syntax highlighting for additions and deletions.
-links:
-  - label: parse-diff
-    url: https://github.com/sergeyt/parse-diff
-  - label: diff
-    url: https://github.com/kpdecker/jsdiff
-platforms: ["react"]
----
-
-import { PreviewCode } from "@/components/docs/preview-code.server";
-import {
-  DiffViewerSample,
-  DiffViewerSplitSample,
-  DiffViewerViewModesSample,
-  DiffViewerVariantsSample,
-  DiffViewerSizesSample,
-} from "@/components/docs/samples/diff-viewer";
-
-<Callout>
-  This is a **standalone component** that does not depend on the assistant-ui runtime.
-</Callout>
-
-<DiffViewerViewModesSample />
-
-## Installation
-
-<InstallCommand shadcn={["diff-viewer"]} />
-
-## Usage
-
-```tsx
-import { DiffViewer } from "@/components/assistant-ui/diff-viewer";
-
-// With a unified diff patch
-<DiffViewer patch={diffString} />
-
-// With file comparison
-<DiffViewer
-  oldFile={{ content: "old content", name: "file.txt" }}
-  newFile={{ content: "new content", name: "file.txt" }}
-/>
-```
-
-### As Markdown Language Override
-
-Integrate with `MarkdownTextPrimitive` to render diff code blocks:
-
-```tsx title="/components/assistant-ui/markdown-text.tsx"
-import { DiffViewer } from "@/components/assistant-ui/diff-viewer"; // [!code ++]
-
-const MarkdownTextImpl = () => {
-  return (
-    <MarkdownTextPrimitive
-      remarkPlugins={[remarkGfm]}
-      className="aui-md"
-      components={defaultComponents}
-      componentsByLanguage={{                                       // [!code ++]
-        diff: {                                                     // [!code ++]
-          SyntaxHighlighter: ({ code }) => <DiffViewer patch={code} /> // [!code ++]
-        },                                                          // [!code ++]
-      }}                                                            // [!code ++]
-    />
-  );
-};
-
-export const MarkdownText = memo(MarkdownTextImpl);
-```
-
-## Examples
-
-### Unified View
-
-Shows all changes in a single column with `+`/`-` indicators. This is the default mode.
-
-<DiffViewerSample />
-
-```tsx
-<DiffViewer patch={diffString} viewMode="unified" />
-```
-
-### Split View
-
-Shows old content on the left, new content on the right side-by-side.
-
-<DiffViewerSplitSample />
-
-```tsx
-<DiffViewer patch={diffString} viewMode="split" />
-```
-
-### Interactive Mode Toggle
-
-<PreviewCode file="components/docs/samples/diff-viewer" name="DiffViewerViewModesSample">
-  <DiffViewerViewModesSample />
-</PreviewCode>
-
-### Variants
-
-<DiffViewerVariantsSample />
-
-### Sizes
-
-<DiffViewerSizesSample />
-
-### Theming
-
-DiffViewer uses CSS variables for colors. Override them in your CSS:
-
-```css
-[data-slot="diff-viewer"] {
-  --diff-add-bg: rgba(46, 160, 67, 0.15);
-  --diff-add-text: #1a7f37;
-  --diff-add-text-dark: #3fb950;
-  --diff-del-bg: rgba(248, 81, 73, 0.15);
-  --diff-del-text: #cf222e;
-  --diff-del-text-dark: #f85149;
-}
-```
-
-| Variable | Description |
-|----------|-------------|
-| `--diff-add-bg` | Background for added lines |
-| `--diff-add-text` | Text color for added lines (light mode) |
-| `--diff-add-text-dark` | Text color for added lines (dark mode) |
-| `--diff-del-bg` | Background for deleted lines |
-| `--diff-del-text` | Text color for deleted lines (light mode) |
-| `--diff-del-text-dark` | Text color for deleted lines (dark mode) |
-
-## API Reference
-
-### DiffViewer
-
-The main component for rendering diffs.
-
-<ParametersTable
-  type="DiffViewerProps"
-  parameters={[
-    {
-      name: "patch",
-      type: "string",
-      description: "Unified diff string (e.g., output from git diff).",
-    },
-    {
-      name: "code",
-      type: "string",
-      description: "Alias for patch (for markdown integration).",
-    },
-    {
-      name: "oldFile",
-      type: "{ content: string; name?: string }",
-      description: "Old file for direct comparison.",
-    },
-    {
-      name: "newFile",
-      type: "{ content: string; name?: string }",
-      description: "New file for direct comparison.",
-    },
-    {
-      name: "viewMode",
-      type: '"unified" | "split"',
-      default: '"unified"',
-      description: "Display mode for the diff.",
-    },
-    {
-      name: "variant",
-      type: '"default" | "ghost" | "muted"',
-      default: '"default"',
-      description: "Visual style variant.",
-    },
-    {
-      name: "size",
-      type: '"sm" | "default" | "lg"',
-      default: '"default"',
-      description: "Font size.",
-    },
-    {
-      name: "showLineNumbers",
-      type: "boolean",
-      default: "true",
-      description: "Show line numbers.",
-    },
-    {
-      name: "showIcon",
-      type: "boolean",
-      default: "true",
-      description: "Show file extension badge in header.",
-    },
-    {
-      name: "showStats",
-      type: "boolean",
-      default: "true",
-      description: "Show addition/deletion counts in header.",
-    },
-    {
-      name: "className",
-      type: "string",
-      description: "Additional CSS classes.",
-    },
-  ]}
-/>
-
-### Composable API
-
-| Component | Description |
-|-----------|-------------|
-| `DiffViewer` | Main component that renders the diff. |
-| `DiffViewerFile` | Wrapper for each file in multi-file diffs. |
-| `DiffViewerHeader` | File name header with icon and stats. |
-| `DiffViewerContent` | Scrollable content area. |
-| `DiffViewerLine` | Individual line in unified mode. |
-| `DiffViewerSplitLine` | Side-by-side line pair in split mode. |
-| `DiffViewerFileBadge` | File extension badge (e.g., "TS"). |
-| `DiffViewerStats` | Addition/deletion count display. |
-
-### Style Variants (CVA)
-
-| Export | Description |
-|--------|-------------|
-| `diffViewerVariants` | Styles for the root container. |
-| `diffLineVariants` | Background styles for diff lines. |
-| `diffLineTextVariants` | Text color styles for diff lines. |
-
-```tsx
-import {
-  diffViewerVariants,
-  diffLineVariants,
-  diffLineTextVariants,
-} from "@/components/assistant-ui/diff-viewer";
-
-// Use variants directly
-<div className={diffViewerVariants({ variant: "ghost", size: "sm" })}>
-  Custom diff container
-</div>
-```
-
-### Utilities
-
-| Export | Description |
-|--------|-------------|
-| `parsePatch(patch)` | Parse unified diff string into structured data. |
-| `computeDiff(old, new)` | Compute diff between two strings. |
-| `ParsedLine` | Type for a single diff line. |
-| `ParsedFile` | Type for a parsed file with lines and stats. |
-| `SplitLinePair` | Type for a side-by-side line pair. |
-
-## Styling
-
-### Data Attributes
-
-Use data attributes for custom styling:
-
-| Attribute | Values | Description |
-|-----------|--------|-------------|
-| `data-slot` | `"diff-viewer"`, `"diff-viewer-header"`, `"diff-viewer-line"`, etc. | Component identification |
-| `data-type` | `"add"`, `"del"`, `"normal"`, `"empty"` | Line type |
-| `data-view-mode` | `"unified"`, `"split"` | Current view mode |
-| `data-variant` | `"default"`, `"ghost"`, `"muted"` | Current variant |
-
-### Custom CSS Example
-
-```css
-[data-slot="diff-viewer"][data-view-mode="split"] {
-  /* Custom split view styles */
-}
-
-[data-slot="diff-viewer-line"][data-type="add"] {
-  /* Custom addition styles */
-}
-
-[data-slot="diff-viewer-line"][data-type="del"] {
-  /* Custom deletion styles */
-}
-```
-
-## Related Components
-
-- [Markdown](/docs/ui/markdown) - Rich text rendering where diff viewer can be integrated
-- [Syntax Highlighting](/docs/ui/syntax-highlighting) - Code highlighting for other languages