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

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

@@ -3,7 +3,6 @@ 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 />

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

@@ -3,7 +3,6 @@ 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 />

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 />

package/.docs/raw/docs/ui/model-selector.mdx

@@ -3,8 +3,6 @@ title: ModelSelector
 description: Model picker with unified overlay positioning and runtime integration.
 ---
 
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 import { ModelSelectorSample } from "@/components/docs/samples/model-selector";
 
 A select component that lets users switch between AI models. Uses item-aligned positioning so the selected model overlays the trigger for a unified look. Integrates with assistant-ui's `ModelContext` system to automatically propagate the selected model to your backend.

package/.docs/raw/docs/ui/part-grouping.mdx

@@ -3,7 +3,6 @@ title: Message Part Grouping
 description: Organize message parts into custom groups with flexible grouping functions.
 ---
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 import { PartGroupingSample } from "@/components/docs/samples/part-grouping";
 
 <PartGroupingSample />
@@ -464,7 +463,7 @@ type MessagePartGroup = {
 
 ### Group Component Props
 
-The Group component receives:
+The `Group` component receives:
 
 - `groupKey`: The group identifier (or `undefined` for ungrouped parts)
 - `indices`: Array of indices for the parts in this group
@@ -535,4 +534,4 @@ const DynamicGroup: FC<
     </div>
   );
 };
-```
+```

package/.docs/raw/docs/ui/reasoning.mdx

@@ -3,7 +3,6 @@ title: Reasoning
 description: Collapsible UI for displaying AI reasoning and thinking messages.
 ---
 
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 import { ReasoningSample, ReasoningGroupSample } from "@/components/docs/samples/reasoning";
 
 <ReasoningSample />
@@ -55,8 +54,8 @@ const AssistantMessage: FC = () => {
 
 The component consists of two parts:
 
-1. **Reasoning**: Renders individual reasoning message part content (with markdown support)
-2. **ReasoningGroup**: Wraps consecutive reasoning parts in a collapsible container
+1. `Reasoning`: Renders individual reasoning message part content (with markdown support)
+2. `ReasoningGroup`: Wraps consecutive reasoning parts in a collapsible container
 
 Consecutive reasoning parts are automatically grouped together by the `ReasoningGroup` component.
 

package/.docs/raw/docs/ui/scrollbar.mdx

@@ -3,19 +3,28 @@ title: Custom Scrollbar
 description: Replace the default scrollbar with a custom Radix UI scroll area.
 ---
 
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 import { ScrollbarSample } from "@/components/docs/samples/scrollbar";
 
 <ScrollbarSample />
 
-If you want to show a custom scrollbar UI of the Thread.Viewport in place of the system default, you can integrate `@radix-ui/react-scroll-area`.
+If you want to show a custom scrollbar UI of the `ThreadPrimitive.Viewport` in place of the system default, you can integrate `@radix-ui/react-scroll-area`.
 An example implementation of this is [shadcn/ui's Scroll Area](https://ui.shadcn.com/docs/components/scroll-area).
 
-## Add shadcn Scroll Area
+<Steps>
 
-<InstallCommand shadcn={["scroll-area"]} />
+<Step>
 
-## Additional Styles
+### Add shadcn Scroll Area
+
+```bash
+npx shadcn@latest add scroll-area
+```
+
+</Step>
+
+<Step>
+
+### Add Additional Styles
 
 The Radix UI Viewport component adds an intermediate `<div data-radix-scroll-area-content>` element.
 Add the following CSS to your `globals.css`:
@@ -26,11 +35,15 @@ Add the following CSS to your `globals.css`:
 }
 ```
 
-## Integration
+</Step>
 
-- Wrap `Thread.Root` with `<ScrollAreaPrimitive.Root asChild>`
-- Wrap `Thread.Viewport` with `<ScrollAreaPrimitive.Viewport className="thread-viewport" asChild>`
-- Add shadcn's `<ScrollBar />` to `Thread.Root`
+<Step>
+
+### Integrate with Thread
+
+- Wrap `ThreadPrimitive.Root` with `<ScrollAreaPrimitive.Root asChild>`
+- Wrap `ThreadPrimitive.Viewport` with `<ScrollAreaPrimitive.Viewport className="thread-viewport" asChild>`
+- Add shadcn's `<ScrollBar />` to `ThreadPrimitive.Root`
 
 The resulting MyThread component should look like this:
 
@@ -54,6 +67,10 @@ const MyThread: FC = () => {
 };
 ```
 
+</Step>
+
+</Steps>
+
 ## Related Components
 
 - [Thread](/docs/ui/thread) - The main chat interface where the scrollbar is used

package/.docs/raw/docs/ui/select.mdx

@@ -6,8 +6,6 @@ links:
     url: https://www.radix-ui.com/primitives/docs/components/select
 ---
 
-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 {
   SelectSample,

package/.docs/raw/docs/ui/sources.mdx

@@ -3,7 +3,6 @@ title: Sources
 description: Display URL sources with favicon, title, and external link.
 ---
 
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 import { SourcesSample } from "@/components/docs/samples/sources";
 
 <SourcesSample />

package/.docs/raw/docs/ui/syntax-highlighting.mdx

@@ -3,7 +3,6 @@ title: Syntax Highlighting
 description: Code block syntax highlighting with react-shiki or react-syntax-highlighter.
 ---
 
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 import { SyntaxHighlightingSample } from "@/components/docs/samples/syntax-highlighting";
 
 <SyntaxHighlightingSample />
@@ -51,68 +50,14 @@ export const defaultComponents = memoizeMarkdownComponents({
 
 ### Options
 
-<TypeTable
-  type={Object.fromEntries(
-    Object.entries({
-      theme: {
-        description:
-          "Shiki built-in or custom textmate themes. Accepts a single theme or an object of themes mapped to theme mode strings.",
-        type: "Theme | Themes",
-        typeDescriptionLink:
-          "https://github.com/AVGVSTVS96/react-shiki/blob/694433ef697c9791b3816cf94d12d571e8abbb3a/package/src/types.ts#L51",
-        default: "github-dark",
-        required: true,
-      },
-      language: {
-        description:
-          "Shiki built-in or custom textmate grammar object for highlighting",
-        type: "Language (string | object)",
-        typeDescriptionLink:
-          "https://github.com/AVGVSTVS96/react-shiki/blob/694433ef697c9791b3816cf94d12d571e8abbb3a/package/src/types.ts#L24",
-        default: "text",
-        required: true,
-      },
-      as: {
-        description: "The code block container element type",
-        type: "React.ElementType",
-        default: "pre",
-      },
-      className: {
-        description: "Custom CSS classes for the code block container element",
-        type: "string",
-        default: "",
-      },
-      style: {
-        description: "Inline styles for the code block container element",
-        type: "React.CSSProperties",
-        default: undefined,
-      },
-      delay: {
-        description:
-          "Delay in milliseconds between consecutive highlights, useful for streamed code responses.",
-        type: "number",
-        default: 0,
-      },
-      customLanguages: {
-        description: "Custom languages to preload for highlighting",
-        type: "Language[]",
-        typeDescriptionLink:
-          "https://github.com/AVGVSTVS96/react-shiki/blob/694433ef697c9791b3816cf94d12d571e8abbb3a/package/src/types.ts#L24",
-        default: "",
-      },
-      codeToHastOptions: {
-        description: "All other options supported by Shiki's `codeToHast`",
-        type: "CodeToHastOptions",
-        typeDescriptionLink:
-          "https://github.com/shikijs/shiki/blob/main/packages/types/src/options.ts#L121",
-        default: "{}",
-        required: true,
-      },
-      // This reverts the order of the type table, fumadocs reversed the order on 4/22/25 in:
-      // https://github.com/fuma-nama/fumadocs/commit/3a5595aa65acfa5c20be2377d09c03fbb1de72a6
-    }).reverse(),
-  )}
-/>
+See [react-shiki documentation](https://github.com/AVGVSTVS96/react-shiki#props) for all available options.
+
+Key options:
+- `theme` - Shiki theme (default: `"github-dark"`)
+- `language` - Language for highlighting (default: `"text"`)
+- `delay` - Delay between highlights, useful for streaming (default: `0`)
+- `customLanguages` - Custom languages to preload
+- `codeToHastOptions` - Options passed to Shiki's `codeToHast`
 
 ### Bundle Optimization
 

package/.docs/raw/docs/ui/tabs.mdx

@@ -6,8 +6,6 @@ links:
     url: https://www.radix-ui.com/primitives/docs/components/tabs
 ---
 
-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 {
   TabsSample,