@assistant-ui/mcp-docs-server 0.1.18 → 0.1.20

package/.docs/raw/docs/ui/attachment.mdx

@@ -0,0 +1,227 @@
+---
+title: Attachment
+description: UI components for attaching and viewing files in messages.
+---
+
+import { ParametersTable } from "@/components/docs/tables/ParametersTable";
+import { AttachmentSample } from "@/components/docs/samples/attachment";
+import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
+
+<AttachmentSample />
+
+<Callout type="info">
+  **Note:** These components provide the UI for attachments, but you also need
+  to configure attachment adapters in your runtime to handle file uploads and
+  processing. See the [Attachments Guide](/docs/guides/attachments) for complete
+  setup instructions.
+</Callout>
+
+## Getting Started
+
+<Steps>
+  <Step>
+
+### Add `attachment`
+
+<InstallCommand shadcn={["attachment"]} />
+
+This adds a `/components/assistant-ui/attachment.tsx` file to your project, which you can adjust as needed.
+
+  </Step>
+  <Step>
+
+### Use in your application
+
+```tsx title="/components/assistant-ui/thread.tsx" {1-4,9-10}
+import {
+  ComposerAttachments,
+  ComposerAddAttachment,
+} from "@/components/assistant-ui/attachment";
+
+const Composer: FC = () => {
+  return (
+    <ComposerPrimitive.Root className="...">
+      <ComposerAttachments />
+      <ComposerAddAttachment />
+
+      <ComposerPrimitive.Input
+        autoFocus
+        placeholder="Write a message..."
+        rows={1}
+        className="..."
+      />
+      <ComposerAction />
+    </ComposerPrimitive.Root>
+  );
+};
+```
+
+```tsx title="/components/assistant-ui/thread.tsx" {1,8}
+import { UserMessageAttachments } from "@/components/assistant-ui/attachment";
+
+const UserMessage: FC = () => {
+  return (
+    <MessagePrimitive.Root className="...">
+      <UserActionBar />
+
+      <UserMessageAttachments />
+
+      <div className="...">
+        <MessagePrimitive.Parts />
+      </div>
+
+      <BranchPicker className="..." />
+    </MessagePrimitive.Root>
+  );
+};
+```
+
+  </Step>
+</Steps>
+
+## API Reference
+
+### Composer Attachments
+
+#### ComposerPrimitive.Attachments
+
+Renders all attachments in the composer.
+
+<ParametersTable
+  type="ComposerPrimitiveAttachmentsProps"
+  parameters={[
+    {
+      name: "components",
+      type: "AttachmentComponents",
+      description: "Components to render for different attachment types.",
+      children: [
+        {
+          type: "AttachmentComponents",
+          parameters: [
+            {
+              name: "Image",
+              type: "ComponentType",
+              description: "Component for image attachments.",
+            },
+            {
+              name: "Document",
+              type: "ComponentType",
+              description: "Component for document attachments (PDF, etc.).",
+            },
+            {
+              name: "File",
+              type: "ComponentType",
+              description: "Component for generic file attachments.",
+            },
+            {
+              name: "Attachment",
+              type: "ComponentType",
+              description: "Fallback component for all attachment types.",
+            },
+          ],
+        },
+      ],
+    },
+  ]}
+/>
+
+#### ComposerPrimitive.AddAttachment
+
+A button that opens the file picker to add attachments.
+
+<ParametersTable
+  type="ComposerPrimitiveAddAttachmentProps"
+  parameters={[
+    {
+      name: "multiple",
+      type: "boolean",
+      default: "true",
+      description: "Allow selecting multiple files at once.",
+    },
+    {
+      name: "asChild",
+      type: "boolean",
+      default: "false",
+      description: "Merge props with child element instead of rendering a wrapper button.",
+    },
+  ]}
+/>
+
+This primitive renders a `<button>` element unless `asChild` is set.
+
+### Message Attachments
+
+#### MessagePrimitive.Attachments
+
+Renders all attachments in a user message.
+
+<ParametersTable
+  type="MessagePrimitiveAttachmentsProps"
+  parameters={[
+    {
+      name: "components",
+      type: "AttachmentComponents",
+      description: "Components to render for different attachment types (same as ComposerPrimitive.Attachments).",
+    },
+  ]}
+/>
+
+### Attachment Primitives
+
+#### AttachmentPrimitive.Root
+
+Container for a single attachment.
+
+<ParametersTable
+  type="AttachmentPrimitiveRootProps"
+  parameters={[
+    {
+      name: "asChild",
+      type: "boolean",
+      default: "false",
+      description: "Merge props with child element instead of rendering a wrapper div.",
+    },
+  ]}
+/>
+
+#### AttachmentPrimitive.Name
+
+Renders the attachment's file name.
+
+#### AttachmentPrimitive.Remove
+
+A button to remove the attachment from the composer.
+
+<ParametersTable
+  type="AttachmentPrimitiveRemoveProps"
+  parameters={[
+    {
+      name: "asChild",
+      type: "boolean",
+      default: "false",
+      description: "Merge props with child element instead of rendering a wrapper button.",
+    },
+  ]}
+/>
+
+### Attachment Types
+
+Attachments have the following structure:
+
+```typescript
+type Attachment = {
+  id: string;
+  type: "image" | "document" | "file";
+  name: string;
+  contentType: string;
+  file?: File;
+  status:
+    | { type: "running" | "requires-action" | "incomplete"; progress?: number }
+    | { type: "complete" };
+};
+```
+
+## Related Components
+
+- [Thread](/docs/ui/thread) - Main chat interface that displays attachments
+- [Attachments Guide](/docs/guides/attachments) - Complete setup instructions for attachment adapters

package/.docs/raw/docs/ui/badge.mdx

@@ -0,0 +1,140 @@
+---
+title: Badge
+description: A small label component for displaying status, categories, or metadata.
+links:
+  - label: Radix UI Slot
+    url: https://www.radix-ui.com/primitives/docs/utilities/slot
+---
+
+import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
+import { ParametersTable } from "@/components/docs/tables/ParametersTable";
+import { PreviewCode } from "@/components/docs/preview-code.server";
+import {
+  BadgeSample,
+  BadgeSizesSample,
+  BadgeWithIconSample,
+  BadgeAsLinkSample,
+  BadgeAnimatedSample,
+} from "@/components/docs/samples/badge";
+
+<Callout>
+  This is a **standalone component** that does not depend on the assistant-ui runtime. Use it anywhere in your application.
+</Callout>
+
+<BadgeSample />
+
+## Installation
+
+<InstallCommand shadcn={["badge"]} />
+
+## Usage
+
+```tsx
+import { Badge } from "@/components/assistant-ui/badge";
+
+export function Example() {
+  return <Badge>Label</Badge>;
+}
+```
+
+## Examples
+
+### Variants
+
+Use the `variant` prop to change the visual style.
+
+<BadgeSample />
+
+```tsx
+<Badge variant="outline" />     // Border (default)
+<Badge variant="secondary" />   // Secondary background
+<Badge variant="muted" />       // Muted background
+<Badge variant="ghost" />       // No background
+<Badge variant="info" />        // Blue/info style
+<Badge variant="warning" />     // Amber/warning style
+<Badge variant="success" />     // Green/success style
+<Badge variant="destructive" /> // Red/error style
+```
+
+### Sizes
+
+Use the `size` prop to change the badge size.
+
+<BadgeSizesSample />
+
+```tsx
+<Badge size="sm" />      // Small
+<Badge size="default" /> // Default
+<Badge size="lg" />      // Large
+```
+
+### With Icons
+
+Badges automatically style SVG icons.
+
+<PreviewCode file="components/docs/samples/badge" name="BadgeWithIconSample">
+  <BadgeWithIconSample />
+</PreviewCode>
+
+### As Link
+
+Use the `asChild` prop to render the badge as a different element, like a link.
+
+<PreviewCode file="components/docs/samples/badge" name="BadgeAsLinkSample">
+  <BadgeAsLinkSample />
+</PreviewCode>
+
+### Animated
+
+Combine with CSS transitions for scroll and color animations.
+
+<PreviewCode file="components/docs/samples/badge" name="BadgeAnimatedSample">
+  <BadgeAnimatedSample />
+</PreviewCode>
+
+## API Reference
+
+### Badge
+
+<ParametersTable
+  type="BadgeProps"
+  parameters={[
+    {
+      name: "variant",
+      type: '"outline" | "secondary" | "muted" | "ghost" | "info" | "warning" | "success" | "destructive"',
+      default: '"outline"',
+      description: "The visual style of the badge.",
+    },
+    {
+      name: "size",
+      type: '"sm" | "default" | "lg"',
+      default: '"default"',
+      description: "The size of the badge.",
+    },
+    {
+      name: "asChild",
+      type: "boolean",
+      default: "false",
+      description: "Merge props with child element instead of rendering a span.",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "Additional CSS classes.",
+    },
+  ]}
+/>
+
+### Style Variants (CVA)
+
+| Export | Description |
+|--------|-------------|
+| `badgeVariants` | Styles for the badge component. |
+
+```tsx
+import { badgeVariants } from "@/components/assistant-ui/badge";
+
+<span className={badgeVariants({ variant: "muted", size: "sm" })}>
+  Custom Badge
+</span>
+```

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

@@ -0,0 +1,153 @@
+---
+title: File
+description: Display file message parts with icon, name, size, and download button.
+---
+
+import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
+import { FileSample } from "@/components/docs/samples/file";
+
+<FileSample />
+
+## Getting Started
+
+<Steps>
+  <Step>
+
+### Add `file`
+
+<InstallCommand shadcn={["file"]} />
+
+  </Step>
+  <Step>
+
+### Use in your application
+
+Pass `File` to `MessagePrimitive.Parts`:
+
+```tsx title="/components/assistant-ui/thread.tsx" {1,8}
+import { File } from "@/components/assistant-ui/file";
+
+const AssistantMessage: FC = () => {
+  return (
+    <MessagePrimitive.Root className="...">
+      <MessagePrimitive.Parts
+        components={{
+          File,
+        }}
+      />
+    </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 |
+
+### 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,
+  getBase64Size,
+  formatFileSize,
+} from "@/components/assistant-ui/file";
+
+// Get icon component for a MIME type
+const Icon = getMimeTypeIcon("application/pdf"); // FileTextIcon
+
+// 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/image.mdx

@@ -0,0 +1,101 @@
+---
+title: Image
+description: Display image message parts with preview, loading states, and fullscreen dialog.
+---
+
+import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
+import { ImageSample } from "@/components/docs/samples/image";
+
+<ImageSample />
+
+## Getting Started
+
+<Steps>
+  <Step>
+
+### Add `image`
+
+<InstallCommand shadcn={["image"]} />
+
+  </Step>
+  <Step>
+
+### Use in your application
+
+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
+        components={{
+          Image,
+        }}
+      />
+    </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 → markdown.mdx}

@@ -1,12 +1,12 @@
 ---
 title: Markdown
+description: Display rich text with headings, lists, links, and code blocks.
 ---
 
-Allow the assistant to display rich text using markdown.
+import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
+import { MarkdownSample } from "@/components/docs/samples/markdown";
 
-import { Step, Steps } from "fumadocs-ui/components/steps";
-import { Callout } from "fumadocs-ui/components/callout";
-import { InstallCommand } from "@/components/docs/install-command";
+<MarkdownSample />
 
 <Callout>
   Markdown support is already included by default in the `Thread` component.
@@ -31,7 +31,7 @@ This adds a `/components/assistant-ui/markdown-text.tsx` file to your project, w
 
 Pass the `MarkdownText` component to the `MessagePrimitive.Parts` component
 
-```tsx twoslash title="/components/assistant-ui/thread.tsx" {1,11}
+```tsx twoslash title="/components/assistant-ui/thread.tsx" {1,7}
 // @filename: /components/assistant-ui/markdown-text.tsx
 import { FC } from "react";
 export const MarkdownText: FC = () => null;
@@ -67,4 +67,9 @@ const AssistantMessage: FC = () => {
 
 ## Syntax highlighting
 
-Syntax Highlighting is not included by default, see [Syntax Highlighting](/docs/ui/SyntaxHighlighting) to learn how to add it.
+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/{Mermaid.mdx → mermaid.mdx}

@@ -1,12 +1,14 @@
 ---
 title: "Mermaid Diagrams"
+description: Render Mermaid diagrams in chat messages with streaming support.
 ---
 
-import { Callout } from "fumadocs-ui/components/callout";
-import { Step, Steps } from "fumadocs-ui/components/steps";
-import { InstallCommand } from "@/components/docs/install-command";
+import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
+import { MermaidSample } from "@/components/docs/samples/mermaid";
 
-Render Mermaid diagrams in chat messages with the `mermaid-diagram` component.
+<MermaidSample />
+
+## Getting Started
 
 <Steps>
   <Step>
@@ -67,7 +69,7 @@ The `MermaidDiagram` component is optimized for streaming scenarios:
 Mermaid supports various diagram types including:
 
 - Flowcharts and decision trees
-- Sequence diagrams  
+- Sequence diagrams
 - Gantt charts
 - Class diagrams
 - State diagrams
@@ -76,3 +78,8 @@ Mermaid supports various diagram types including:
 - Entity relationship diagrams
 
 See the [Mermaid documentation](https://mermaid.js.org/) for complete 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