@assistant-ui/mcp-docs-server 0.1.19 → 0.1.21

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

@@ -0,0 +1,138 @@
+---
+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 { 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/diff-viewer.mdx

@@ -0,0 +1,279 @@
+---
+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
+---
+
+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

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

@@ -0,0 +1,152 @@
+---
+title: File
+description: Display file message parts with icon, name, size, and download button.
+---
+
+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,100 @@
+---
+title: Image
+description: Display image message parts with preview, loading states, and fullscreen dialog.
+---
+
+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

@@ -3,7 +3,6 @@ title: Markdown
 description: Display rich text with headings, lists, links, and code blocks.
 ---
 
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 import { MarkdownSample } from "@/components/docs/samples/markdown";
 
 <MarkdownSample />

package/.docs/raw/docs/ui/mermaid.mdx

@@ -3,7 +3,6 @@ title: "Mermaid Diagrams"
 description: Render Mermaid diagrams in chat messages with streaming support.
 ---
 
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 import { MermaidSample } from "@/components/docs/samples/mermaid";
 
 <MermaidSample />