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

package/.docs/raw/docs/ui/directive-text.mdx

@@ -1,114 +0,0 @@
----
-title: Directive Text
-description: Render mention directives as inline chips in user messages.
-platforms: ["react"]
----
-
-import { DirectiveTextSample } from "@/components/docs/samples/directive-text";
-
-<DirectiveTextSample />
-
-`DirectiveText` parses the directive syntax written by [`ComposerTriggerPopover`](/docs/ui/composer-trigger-popover) (default: `:type[label]{name=id}`) and renders each segment as an inline chip. Use it as the `Text` component in user messages so the raw directive syntax never shows up.
-
-## Getting Started
-
-<Steps>
-  <Step>
-
-### Add `directive-text`
-
-<InstallCommand shadcn={["directive-text"]} />
-
-This adds `/components/assistant-ui/directive-text.tsx` with `DirectiveText` and the `createDirectiveText(formatter, options?)` factory.
-
-  </Step>
-  <Step>
-
-### Use in user messages
-
-Pass `DirectiveText` as the `Text` component in `MessagePrimitive.Parts`:
-
-```tsx title="components/assistant-ui/thread.tsx"
-import { DirectiveText } from "@/components/assistant-ui/directive-text";
-
-const UserMessage = () => (
-  <MessagePrimitive.Root>
-    <MessagePrimitive.Parts components={{ Text: DirectiveText }} />
-  </MessagePrimitive.Root>
-);
-```
-
-Keep your markdown renderer (e.g. `MarkdownText`) for assistant messages — assistants rarely emit directive syntax.
-
-  </Step>
-</Steps>
-
-## Icons per Directive Type
-
-`DirectiveText` ships icon-free by default — every parsed segment renders as a plain label chip regardless of its `type`. To add icons, use the `createDirectiveText` factory and pass an `iconMap` that routes each `type` string to an icon component, plus an optional `fallbackIcon` for unmapped types:
-
-```tsx
-import { createDirectiveText } from "@/components/assistant-ui/directive-text";
-import { unstable_defaultDirectiveFormatter } from "@assistant-ui/react";
-import { FileTextIcon, SparklesIcon, UserIcon, WrenchIcon } from "lucide-react";
-
-const DirectiveTextWithIcons = createDirectiveText(
-  unstable_defaultDirectiveFormatter,
-  {
-    iconMap: {
-      tool: WrenchIcon,
-      user: UserIcon,
-      file: FileTextIcon,
-    },
-    fallbackIcon: SparklesIcon,
-  },
-);
-
-<MessagePrimitive.Parts components={{ Text: DirectiveTextWithIcons }} />;
-```
-
-A matching `iconMap` / `fallbackIcon` option is accepted by [`ComposerTriggerPopover`](/docs/ui/composer-trigger-popover), where it routes `item.metadata.icon` strings instead of `type` — keeping icon configuration consistent across the composer and the rendered message.
-
-## Custom Formatter
-
-The default format is `:type[label]{name=id}`. For a different format, build a custom `Unstable_DirectiveFormatter` and wrap it with `createDirectiveText`:
-
-```tsx
-import type { Unstable_DirectiveFormatter } from "@assistant-ui/react";
-import { createDirectiveText } from "@/components/assistant-ui/directive-text";
-
-const slashFormatter: Unstable_DirectiveFormatter = {
-  serialize: (item) => `/${item.id}`,
-  parse: (text) => {
-    /* return alternating text / mention segments */
-  },
-};
-
-const SlashDirectiveText = createDirectiveText(slashFormatter);
-```
-
-Pass the **same formatter** to the composer trigger's `directive={{ formatter }}` (or `action={{ formatter }}`) so insertion and rendering stay consistent.
-
-## Customizing the Chip
-
-Because `directive-text.tsx` is copied into your project, you can also edit it directly — swap the chip styling, read `data-directive-id` to link to a detail page, or replace the chip wrapper entirely.
-
-## API Reference
-
-### `DirectiveText`
-
-A `TextMessagePartComponent` that parses `:type[label]{name=id}` directives and renders them as inline chips. Uses the default formatter from `@assistant-ui/react` and renders chips without icons. For per-type icons, build a component with `createDirectiveText(formatter, { iconMap })`.
-
-### `createDirectiveText(formatter, options?)`
-
-Factory that returns a `TextMessagePartComponent` bound to a custom `Unstable_DirectiveFormatter`.
-
-| Option | Type | Description |
-| --- | --- | --- |
-| `iconMap` | `Record<string, ComponentType<{ className?: string }>>` | Maps a directive segment's `type` to an icon rendered inside the chip |
-| `fallbackIcon` | `ComponentType<{ className?: string }>` | Icon used when no `iconMap` entry matches. When neither option resolves, the chip renders without an icon. |
-
-## Related
-
-- [Composer Trigger Popover](/docs/ui/composer-trigger-popover) — the picker that inserts directives
-- [Mentions guide](/docs/guides/mentions) — directive format, backend parsing

package/.docs/raw/docs/ui/dot-matrix.mdx

@@ -1,133 +0,0 @@
----
-title: Dot Matrix
-description: Tiny 5x5 dot-matrix indicator with 20 state-specific blink patterns.
-platforms: ["react"]
----
-
-import { PreviewCode } from "@/components/docs/preview-code.server";
-import {
-  DotMatrixSample,
-  DotMatrixLifecycleSample,
-  DotMatrixInlineSample,
-  DotMatrixSizesSample,
-} from "@/components/docs/samples/dot-matrix";
-
-<Callout>
-  This is a **standalone component** that does not depend on the assistant-ui runtime. Use it anywhere in your application.
-</Callout>
-
-<DotMatrixSample />
-
-## Installation
-
-<InstallCommand shadcn={["dot-matrix"]} />
-
-This adds a `/components/assistant-ui/dot-matrix.tsx` file to your project, which you can adjust as needed. The component has no dependencies beyond React.
-
-## Usage
-
-```tsx
-import { DotMatrix } from "@/components/assistant-ui/dot-matrix";
-
-export function RunIndicator({ isRunning }: { isRunning: boolean }) {
-  return <DotMatrix state={isRunning ? "loading" : "success"} />;
-}
-```
-
-Dots inherit the surrounding text color, so the matrix renders dark dots on light backgrounds and light dots on dark backgrounds without configuration. Every state is a combination of a dot pattern, a motion, and a color, and switching states cross-fades each dot into its new pattern.
-
-## States
-
-| State | Pattern |
-|-------|---------|
-| `idle` | Dim static grid |
-| `loading` | Randomized twinkle (default) |
-| `thinking` | Diagonal wave |
-| `streaming` | Falling rain, per-column streaks |
-| `searching` | Horizontal sweep |
-| `syncing` | Rotating sweep around the center |
-| `connecting` | Ripple expanding from the center |
-| `waiting` | Ellipsis dots blinking in sequence |
-| `uploading` | Wave rising upward |
-| `downloading` | Wave falling downward |
-| `listening` | Slow equalizer columns |
-| `speaking` | Fast equalizer columns |
-| `recording` | Red center dot breathing |
-| `success` | Green check glyph, static |
-| `error` | Red cross glyph, blinking |
-| `warning` | Amber exclamation glyph, slow blink |
-| `info` | Blue info glyph, static |
-| `paused` | Pause bars glyph, static |
-| `stopped` | Square glyph, static |
-| `offline` | Very dim static grid |
-
-The component exports `dotMatrixStates` (the ordered list above) and the `DotMatrixState` union type, so UIs can enumerate or map states without duplicating the list. New states are added by extending the `STATES` record in the component source with a glyph and a per-dot blink function.
-
-## Examples
-
-### State Lifecycle
-
-Drive the `state` prop from your run status; the matrix morphs between patterns instead of swapping components.
-
-<PreviewCode file="components/docs/samples/dot-matrix" name="DotMatrixLifecycleSample">
-  <DotMatrixLifecycleSample />
-</PreviewCode>
-
-### Inline With Text
-
-At the default `size-4` the matrix aligns with text like an icon, and the dots adapt to inverted surfaces through `currentColor`.
-
-<PreviewCode file="components/docs/samples/dot-matrix" name="DotMatrixInlineSample">
-  <DotMatrixInlineSample />
-</PreviewCode>
-
-### Sizes
-
-The matrix is an SVG, so any size utility scales it crisply.
-
-<DotMatrixSizesSample />
-
-## How It Works
-
-The grid is a 5x5 SVG of `currentColor` circles. Blinking is a single CSS keyframe animation whose high/low opacity bounds come from registered per-dot CSS variables; the animation runs in every state (static states collapse the bounds) and the bounds carry a transition, which is what makes state changes cross-fade per dot. The randomized loading rhythm uses deterministic per-dot delays and durations, so server and client render identical markup and no JavaScript runs after render. With `prefers-reduced-motion`, the dots hold their resting opacity instead of blinking.
-
-The root is a `role="status"` live region whose text content is the state name (or the `label` prop), so screen readers announce state changes; the SVG itself is `aria-hidden`.
-
-## API Reference
-
-### DotMatrix
-
-<ParametersTable
-  type="DotMatrixProps"
-  parameters={[
-    {
-      name: "state",
-      type: "DotMatrixState",
-      default: '"loading"',
-      description:
-        "One of the 20 built-in states listed above, controlling pattern, motion, and color.",
-    },
-    {
-      name: "label",
-      type: "string",
-      description:
-        "Accessible label announced by screen readers. Defaults to the state name.",
-    },
-    {
-      name: "className",
-      type: "string",
-      description:
-        "Additional CSS classes. Use size utilities to scale and text color utilities to recolor.",
-    },
-  ]}
-/>
-
-### Styling
-
-Color follows `currentColor`, so `className="text-blue-500"` recolors the whole matrix; the outcome states (`success`, `error`, `warning`, `info`, `recording`, and the muted static states) set their own color which a `className` can override. Dots are targetable via `[data-slot="dot-matrix"]` and `[data-slot="dot-matrix-dot"]`, and the current state is exposed as `data-state` on the root.
-
-## Related Components
-
-- [Number Roll](/docs/ui/number-roll) - Animated rolling number
-- [Badge](/docs/ui/badge) - Small status and metadata labels
-- [Voice](/docs/ui/voice) - Voice activity visualization

package/.docs/raw/docs/ui/file.mdx

@@ -1,159 +0,0 @@
----
-title: File
-description: Display file message parts with icon, name, size, and download button.
-platforms: ["react"]
----
-
-import { FileSample } from "@/components/docs/samples/file";
-
-<FileSample />
-
-## Getting Started
-
-<Steps>
-  <Step>
-
-### Add `file`
-
-<InstallCommand shadcn={["file"]} />
-
-  </Step>
-  <Step>
-
-### Use in your application
-
-The shipped `Thread` component renders `file` parts through `File` by default, in both assistant and user messages. In a custom thread, pass `File` to `MessagePrimitive.Parts`:
-
-```tsx title="/components/assistant-ui/thread.tsx" {1,8}
-import { File } from "@/components/assistant-ui/file";
-
-const UserMessage: FC = () => {
-  return (
-    <MessagePrimitive.Root className="...">
-      <MessagePrimitive.Parts>
-        {({ part }) => {
-          if (part.type === "file") return <File {...part} />;
-          return null;
-        }}
-      </MessagePrimitive.Parts>
-    </MessagePrimitive.Root>
-  );
-};
-```
-
-  </Step>
-</Steps>
-
-## Variants
-
-Use the `variant` prop to change the visual style.
-
-```tsx
-<File.Root variant="outline" /> // Border (default)
-<File.Root variant="ghost" />   // No border
-<File.Root variant="muted" />   // Background fill
-```
-
-## Sizes
-
-Use the `size` prop to change padding and font size.
-
-```tsx
-<File.Root size="sm" />      // Compact
-<File.Root size="default" /> // Default
-<File.Root size="lg" />      // Larger
-```
-
-## MimeType Icons
-
-The component automatically selects an appropriate icon based on the file's MIME type:
-
-| MIME Type | Icon |
-|-----------|------|
-| `image/*` | ImageIcon |
-| `application/pdf` | FileTextIcon |
-| `application/json` | BracesIcon |
-| `text/*` | FileTextIcon |
-| `audio/*` | MusicIcon |
-| `video/*` | VideoIcon |
-| fallback | FileIcon |
-
-## API Reference
-
-### Composable API
-
-The component exports composable sub-components:
-
-```tsx
-import {
-  File,
-  FileRoot,
-  FileIconDisplay,
-  FileName,
-  FileSize,
-  FileDownload,
-} from "@/components/assistant-ui/file";
-
-<FileRoot variant="muted" size="lg">
-  <FileIconDisplay mimeType="application/pdf" />
-  <div className="flex flex-col gap-0.5">
-    <FileName>report.pdf</FileName>
-    <FileSize bytes={2048} className="text-xs" />
-  </div>
-  <FileDownload
-    data="SGVsbG8gV29ybGQh"
-    mimeType="application/pdf"
-    filename="report.pdf"
-  />
-</FileRoot>
-```
-
-| Component | Description |
-|-----------|-------------|
-| `File` | Default export, renders complete file part |
-| `File.Root` | Container with variant and size styling |
-| `File.Icon` | MIME type-aware icon, or pass custom `children` |
-| `File.Name` | Truncated filename |
-| `File.Size` | Human-readable file size |
-| `File.Download` | Download link button; renders nothing without a browser-resolvable target (`sourceType: "id"`, urls that are not http(s)/blob/data) |
-
-### Custom Icon
-
-Pass `children` to `File.Icon` to override the default MIME type icon:
-
-```tsx
-<File.Icon>
-  <MyCustomIcon className="size-5" />
-</File.Icon>
-```
-
-## Utilities
-
-The component also exports utility functions:
-
-```tsx
-import {
-  getMimeTypeIcon,
-  getFileDataKind,
-  getBase64Size,
-  formatFileSize,
-} from "@/components/assistant-ui/file";
-
-// Get icon component for a MIME type
-const Icon = getMimeTypeIcon("application/pdf"); // FileTextIcon
-
-// Classify the data field of a file part; a declared sourceType wins over sniffing, except a data: payload declared as "url"
-const kind = getFileDataKind("https://example.com/report.pdf"); // "url"
-const ref = getFileDataKind("file-abc123", "id"); // "id"
-
-// Calculate size from base64 string
-const bytes = getBase64Size("SGVsbG8gV29ybGQh"); // 12
-
-// Format bytes to human-readable
-const size = formatFileSize(2048); // "2.0 KB"
-```
-
-## Related Components
-
-- [Image](/docs/ui/image) - Image message parts
-- [Attachment](/docs/ui/attachment) - File attachments in composer and messages

package/.docs/raw/docs/ui/follow-up-suggestions.mdx

@@ -1,82 +0,0 @@
----
-title: Follow-Up Suggestions
-description: Render runtime-generated follow-up prompt chips after an assistant response.
-platforms: ["react"]
----
-
-import { FollowUpSuggestionsSample } from "@/components/docs/samples/follow-up-suggestions";
-
-<FollowUpSuggestionsSample />
-
-`ThreadFollowupSuggestions` renders the current thread's runtime suggestions as clickable prompt chips. Use it for follow-up prompts that arrive after a response, such as suggested next questions, refinements, or task shortcuts.
-
-<Callout type="info">
-  This component reads from `thread.suggestions`. For static welcome-screen prompts, use `ThreadPrimitive.Suggestions` instead.
-</Callout>
-
-## Getting Started
-
-<Steps>
-  <Step>
-
-### Add `follow-up-suggestions`
-
-<InstallCommand shadcn={["follow-up-suggestions"]} />
-
-This adds a `/components/assistant-ui/follow-up-suggestions.tsx` file to your project. The default `thread` component already renders `ThreadFollowupSuggestions`, so installing it standalone is only needed when you build your own thread layout.
-
-  </Step>
-  <Step>
-
-### Provide runtime suggestions
-
-Pass suggestions through your runtime. External-store runtimes, AI SDK runtimes, and local runtimes can all surface follow-up prompts through `thread.suggestions`.
-
-```tsx title="/app/assistant.tsx" {7-10}
-const runtime = useExternalStoreRuntime({
-  messages,
-  convertMessage,
-  onNew: async (message) => {
-    // append the message in your store
-  },
-  suggestions: [
-    { prompt: "Summarize this as action items" },
-    { prompt: "Write a shorter version" },
-  ],
-});
-```
-
-  </Step>
-  <Step>
-
-### Render after messages
-
-Place `ThreadFollowupSuggestions` near the bottom of your thread viewport, after the assistant message list and before the composer.
-
-```tsx title="/components/assistant-ui/thread.tsx" {1,10}
-import { ThreadFollowupSuggestions } from "@/components/assistant-ui/follow-up-suggestions";
-
-const ThreadViewportFooter = () => {
-  return (
-    <ThreadPrimitive.ViewportFooter>
-      <ThreadPrimitive.ScrollToBottom />
-      <ThreadFollowupSuggestions />
-      <Composer />
-    </ThreadPrimitive.ViewportFooter>
-  );
-};
-```
-
-  </Step>
-</Steps>
-
-## Behavior
-
-The component only renders when the thread is not empty, not currently running, and has at least one suggestion. Each suggestion uses `ThreadPrimitive.Suggestion`, replaces the composer text with the prompt, and sends it immediately.
-
-Suggestions stay on a single line. When they overflow, the row scrolls horizontally without a scrollbar, and each edge with clipped content fades out — so no fade shows at the start edge until you scroll.
-
-## Related Components
-
-- [Thread](/docs/ui/thread) - Complete chat interface with message list and composer
-- [Suggestions guide](/docs/guides/suggestions) - Runtime and static suggestion patterns

package/.docs/raw/docs/ui/image.mdx

@@ -1,102 +0,0 @@
----
-title: Image
-description: Display image message parts with preview, loading states, and fullscreen dialog.
-platforms: ["react"]
----
-
-import { ImageSample } from "@/components/docs/samples/image";
-
-<ImageSample />
-
-## Getting Started
-
-<Steps>
-  <Step>
-
-### Add `image`
-
-<InstallCommand shadcn={["image"]} />
-
-  </Step>
-  <Step>
-
-### Use in your application
-
-The shipped `Thread` component renders `image` parts through `Image` by default, in both assistant and user messages. In a custom thread, pass `Image` to `MessagePrimitive.Parts`:
-
-```tsx title="/components/assistant-ui/thread.tsx" {1,8}
-import { Image } from "@/components/assistant-ui/image";
-
-const AssistantMessage: FC = () => {
-  return (
-    <MessagePrimitive.Root className="...">
-      <MessagePrimitive.Parts>
-        {({ part }) => {
-          if (part.type === "image") return <Image {...part} />;
-          return null;
-        }}
-      </MessagePrimitive.Parts>
-    </MessagePrimitive.Root>
-  );
-};
-```
-
-  </Step>
-</Steps>
-
-## Variants
-
-Use the `variant` prop to change the visual style.
-
-```tsx
-<Image.Root variant="outline" /> // Border (default)
-<Image.Root variant="ghost" />   // No border
-<Image.Root variant="muted" />   // Background fill
-```
-
-## Sizes
-
-Use the `size` prop to control the maximum width.
-
-```tsx
-<Image.Root size="sm" />      // max-w-64 (256px)
-<Image.Root size="default" /> // max-w-96 (384px)
-<Image.Root size="lg" />      // max-w-[512px]
-<Image.Root size="full" />    // w-full
-```
-
-## API Reference
-
-### Composable API
-
-The component exports composable sub-components:
-
-```tsx
-import {
-  Image,
-  ImageRoot,
-  ImagePreview,
-  ImageFilename,
-  ImageZoom,
-} from "@/components/assistant-ui/image";
-
-<ImageRoot variant="muted" size="lg">
-  <ImageZoom src="https://example.com/photo.jpg" alt="Photo">
-    <ImagePreview src="https://example.com/photo.jpg" alt="Photo" />
-  </ImageZoom>
-  <ImageFilename>photo.jpg</ImageFilename>
-</ImageRoot>
-```
-
-| Component | Description |
-|-----------|-------------|
-| `Image` | Default export, renders complete image part |
-| `Image.Root` | Container with variant and size styling |
-| `Image.Preview` | Image container with loading/error states |
-| `Image.Filename` | Optional filename display below image |
-| `Image.Zoom` | Medium-style zoom overlay (click to expand, ESC to close) |
-
-## Related Components
-
-- [Attachment](/docs/ui/attachment) - File attachments in composer and messages
-- [File](/docs/ui/file) - Non-image file message parts

package/.docs/raw/docs/ui/markdown.mdx

@@ -1,64 +0,0 @@
----
-title: Markdown
-description: Display rich text with headings, lists, links, and code blocks.
-platforms: ["react"]
----
-
-import { MarkdownSample } from "@/components/docs/samples/markdown";
-
-<MarkdownSample />
-
-<Callout>
-  Markdown support is already included by default in the `Thread` component.
-</Callout>
-
-## Enabling markdown support
-
-<Steps>
-
-<Step>
-### Add `markdown-text`
-
-<InstallCommand shadcn={["markdown-text"]} />
-
-This adds a `/components/assistant-ui/markdown-text.tsx` file to your project, which you can adjust as needed.
-
-</Step>
-
-<Step>
-
-### Use it in your application
-
-Pass the `MarkdownText` component to the `MessagePrimitive.Parts` component
-
-```tsx title="/components/assistant-ui/thread.tsx" {1,7}
-import { MarkdownText } from "@/components/assistant-ui/markdown-text";
-
-const AssistantMessage: FC = () => {
-  return (
-    <MessagePrimitive.Root className="...">
-      <div className="...">
-        <MessagePrimitive.Parts>
-          {({ part }) => part.type === "text" ? <MarkdownText /> : null}
-        </MessagePrimitive.Parts>
-      </div>
-      <AssistantActionBar />
-
-      <BranchPicker className="..." />
-    </MessagePrimitive.Root>
-  );
-};
-```
-
-</Step>
-
-</Steps>
-
-## Syntax highlighting
-
-Syntax Highlighting is not included by default, see [Syntax Highlighting](/docs/ui/syntax-highlighting) to learn how to add it.
-
-## Related Components
-
-- [Syntax Highlighting](/docs/ui/syntax-highlighting) - Add code highlighting to markdown
-- [Mermaid](/docs/ui/mermaid) - Render diagrams in markdown code blocks