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

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/pages/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/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/pages/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/pages/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/pages/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,103 +0,0 @@
----
-title: Markdown
-description: Display rich text with headings, lists, links, and code blocks.
-platforms: ["react"]
----
-
-import { MarkdownSample } from "@/components/pages/docs/samples/markdown";
-import { PreviewCode } from "@/components/pages/docs/preview-code.server";
-import { MarkdownCodeBlockSample } from "@/components/pages/docs/samples/markdown/code-block-and-copy";
-import { MarkdownRichDocumentSample } from "@/components/pages/docs/samples/markdown/rich-document";
-import { MarkdownStreamingSample } from "@/components/pages/docs/samples/markdown/streaming-markdown";
-import { MarkdownGfmSample } from "@/components/pages/docs/samples/markdown/gfm-extras";
-
-<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>
-
-## Examples
-
-### Code Block and Copy
-
-Fenced code blocks get a language header and a copy button, and inline code keeps compact styling. The preview also uses [syntax highlighting](/docs/ui/syntax-highlighting), which the copied component does not include by default.
-
-<PreviewCode file="components/pages/docs/samples/markdown/code-block-and-copy" name="MarkdownWithCode">
-  <MarkdownCodeBlockSample />
-</PreviewCode>
-
-### Rich Document
-
-The renderer shows headings, emphasis, links, nested lists, a blockquote, a divider, and a table from one completed response.
-
-<PreviewCode file="components/pages/docs/samples/markdown/rich-document" name="MarkdownDocument">
-  <MarkdownRichDocumentSample />
-</PreviewCode>
-
-### Streaming Markdown
-
-Select Replay. The markdown increases in steps, and the text part shows a running status until the last chunk.
-
-<PreviewCode file="components/pages/docs/samples/markdown/streaming-markdown" name="StreamingMarkdown">
-  <MarkdownStreamingSample />
-</PreviewCode>
-
-### GitHub Flavored Markdown
-
-Task-list checkboxes, strikethrough text, a bare autolink, and an aligned table show through the built-in GFM support.
-
-<PreviewCode file="components/pages/docs/samples/markdown/gfm-extras" name="GfmMarkdown">
-  <MarkdownGfmSample />
-</PreviewCode>
-
-## 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

package/.docs/raw/docs/ui/mcp-config.mdx

@@ -1,107 +0,0 @@
----
-title: MCP Config Dialog
-description: Drop-in shadcn dialog that lists MCP connectors and custom servers, with inline OAuth/bearer auth controls and an add form.
-platforms: ["react"]
----
-
-`McpConfigDialog` is a shadcn template that wraps the [`@assistant-ui/react-mcp`](/docs/tools/user-managed-mcp) primitives. Render it anywhere inside an `McpManagerResource`-mounted client and your users get a styled MCP server panel — no manual primitive composition.
-
-## Getting Started
-
-<Steps>
-  <Step>
-
-### Install the package and the component
-
-<InstallCommand npm={["@assistant-ui/react-mcp"]} />
-
-<InstallCommand shadcn={["mcp-config"]} />
-
-  </Step>
-  <Step>
-
-### Mount the manager
-
-```tsx title="app/providers.tsx"
-"use client";
-
-import { AuiConfig, AuiProvider, useAui } from "@assistant-ui/react";
-import { McpManagerResource, defineConnector } from "@assistant-ui/react-mcp";
-
-const connectors = [
-  defineConnector({
-    id: "linear",
-    name: "Linear",
-    url: "https://mcp.linear.app",
-    auth: { type: "oauth", scopes: ["read"] },
-  }),
-];
-
-export function Providers({ children }: { children: React.ReactNode }) {
-  const aui = useAui();
-  const config = AuiConfig({ mcp: McpManagerResource({ connectors }) });
-  return (
-    <AuiProvider extends={aui} config={config}>
-      {children}
-    </AuiProvider>
-  );
-}
-```
-
-  </Step>
-  <Step>
-
-### Drop the dialog in
-
-```tsx title="app/page.tsx"
-import { McpConfigDialog } from "@/components/assistant-ui/mcp-config";
-
-export default function Page() {
-  return (
-    <header className="flex items-center justify-between">
-      <h1>My app</h1>
-      <McpConfigDialog />
-    </header>
-  );
-}
-```
-
-That's it. The default trigger is an outline `"🔌 MCP servers"` button. Click it to open the dialog, which renders a **Connectors** list (your app-defined presets with connect/authorize/disconnect controls), a **Custom servers** list (user-added entries with the same controls plus a remove button), and an inline **Add server** form for URL + name + auth selection.
-
-  </Step>
-  <Step>
-
-### Override the trigger (optional)
-
-Pass children to swap the default button for your own:
-
-```tsx
-<McpConfigDialog>
-  <Button variant="ghost">Servers</Button>
-</McpConfigDialog>
-```
-
-  </Step>
-  <Step>
-
-### Wire up the OAuth callback
-
-Required for any OAuth-enabled connector or custom server. See the [OAuth callback section in the react-mcp guide](/docs/tools/user-managed-mcp#handle-the-oauth-callback) for the route handler.
-
-  </Step>
-</Steps>
-
-## Related
-
-<Cards>
-  <Card
-    title="User-managed MCP servers"
-    description="Full @assistant-ui/react-mcp guide — connectors, custom servers, OAuth, storage, custom primitives."
-    href="/docs/tools/user-managed-mcp"
-  />
-  <Card
-    title="Server-side MCP"
-    description="App-developer-controlled MCP servers wired into the API route."
-    href="/docs/tools/mcp"
-  />
-</Cards>