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

package/.docs/raw/docs/ui/streamdown.mdx

@@ -0,0 +1,348 @@
+---
+title: Streamdown
+description: Alternative markdown renderer with built-in syntax highlighting, math, and diagram support.
+links:
+  - label: Streamdown
+    url: https://github.com/vercel/streamdown
+---
+
+import { PackageManagerTabs } from "@/components/docs/fumadocs/install/package-manager-tabs";
+import { StreamdownSample } from "@/components/docs/samples/streamdown";
+
+<StreamdownSample />
+
+<Callout type="info">
+  `@assistant-ui/react-streamdown` is an **alternative** to `@assistant-ui/react-markdown`. Choose based on your needs:
+  - **react-markdown**: Lightweight, bring-your-own syntax highlighter
+  - **react-streamdown**: Feature-rich with built-in Shiki, KaTeX, Mermaid support
+</Callout>
+
+## Installation
+
+<PackageManagerTabs packages={["@assistant-ui/react-streamdown", "streamdown"]} />
+
+For additional features, install the optional plugins:
+
+<PackageManagerTabs packages={["@streamdown/code", "@streamdown/math", "@streamdown/mermaid", "@streamdown/cjk"]} />
+
+## Basic Usage
+
+```tsx
+import { StreamdownTextPrimitive } from "@assistant-ui/react-streamdown";
+
+// Inside a MessagePrimitive.Parts component
+<MessagePrimitive.Parts components={{ Text: StreamdownText }} />
+
+// Where StreamdownText is:
+const StreamdownText = () => <StreamdownTextPrimitive />;
+```
+
+## With Plugins (Recommended)
+
+```tsx
+import { StreamdownTextPrimitive } from "@assistant-ui/react-streamdown";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import { mermaid } from "@streamdown/mermaid";
+import "katex/dist/katex.min.css";
+
+const StreamdownText = () => (
+  <StreamdownTextPrimitive
+    plugins={{ code, math, mermaid }}
+    shikiTheme={["github-light", "github-dark"]}
+  />
+);
+```
+
+When `@streamdown/code` is provided, the default theme is `["github-light", "github-dark"]` for light/dark mode support.
+
+## Migration from react-markdown
+
+If you're migrating from `@assistant-ui/react-markdown`, your existing `SyntaxHighlighter` and `CodeHeader` components still work:
+
+```tsx
+import { StreamdownTextPrimitive } from "@assistant-ui/react-streamdown";
+
+const StreamdownText = () => (
+  <StreamdownTextPrimitive
+    components={{
+      SyntaxHighlighter: MySyntaxHighlighter,
+      CodeHeader: MyCodeHeader,
+    }}
+    componentsByLanguage={{
+      mermaid: { SyntaxHighlighter: MermaidRenderer }
+    }}
+  />
+);
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `mode` | `"streaming" \| "static"` | `"streaming"` | Rendering mode |
+| `plugins` | `PluginConfig` | - | Streamdown plugins (code, math, mermaid, cjk) |
+| `shikiTheme` | `[string, string]` | `["github-light", "github-dark"]` | Light and dark theme for Shiki |
+| `components` | `object` | - | Custom components including `SyntaxHighlighter` and `CodeHeader` |
+| `componentsByLanguage` | `object` | - | Language-specific component overrides |
+| `preprocess` | `(text: string) => string` | - | Text preprocessing function |
+| `controls` | `boolean \| object` | `true` | Enable/disable UI controls for code blocks and tables |
+| `caret` | `"block" \| "circle"` | - | Streaming caret style |
+| `mermaid` | `MermaidOptions` | - | Mermaid diagram configuration |
+| `linkSafety` | `LinkSafetyConfig` | - | Link safety confirmation dialog |
+| `remend` | `RemendConfig` | - | Incomplete markdown auto-completion |
+| `allowedTags` | `Record<string, string[]>` | - | HTML tags whitelist |
+| `containerProps` | `object` | - | Props for the container div |
+| `containerClassName` | `string` | - | Class name for the container |
+| `remarkRehypeOptions` | `object` | - | Options passed to remark-rehype |
+| `BlockComponent` | `ComponentType` | - | Custom component for rendering blocks |
+| `parseMarkdownIntoBlocksFn` | `(md: string) => string[]` | - | Custom block parsing function |
+| `parseIncompleteMarkdown` | `boolean` | `false` | Parse incomplete markdown as-is (skip remend) |
+| `security` | `SecurityConfig` | - | URL/image security restrictions |
+
+## Plugin Configuration
+
+### Code Highlighting
+
+```tsx
+import { code } from "@streamdown/code";
+
+<StreamdownTextPrimitive
+  plugins={{ code }}
+  shikiTheme={["github-light", "github-dark"]}
+/>
+```
+
+### Math (LaTeX)
+
+```tsx
+import { math } from "@streamdown/math";
+import "katex/dist/katex.min.css";
+
+<StreamdownTextPrimitive plugins={{ math }} />
+```
+
+### Mermaid Diagrams
+
+```tsx
+import { mermaid } from "@streamdown/mermaid";
+
+<StreamdownTextPrimitive plugins={{ mermaid }} />
+```
+
+### CJK Text Optimization
+
+```tsx
+import { cjk } from "@streamdown/cjk";
+
+<StreamdownTextPrimitive plugins={{ cjk }} />
+```
+
+## Advanced Configuration
+
+### Mermaid Options
+
+Customize Mermaid diagram rendering with configuration and error handling:
+
+```tsx
+import { mermaid } from "@streamdown/mermaid";
+
+<StreamdownTextPrimitive
+  plugins={{ mermaid }}
+  mermaid={{
+    config: { theme: "dark" },
+    errorComponent: ({ error, chart, retry }) => (
+      <div>
+        <p>Failed to render diagram: {error}</p>
+        <button onClick={retry}>Retry</button>
+      </div>
+    ),
+  }}
+/>
+```
+
+### Streaming Caret
+
+Display a caret indicator during streaming:
+
+```tsx
+<StreamdownTextPrimitive caret="block" />  // ▋
+<StreamdownTextPrimitive caret="circle" /> // ●
+```
+
+### Link Safety
+
+Show confirmation before opening external links:
+
+```tsx
+<StreamdownTextPrimitive
+  linkSafety={{
+    enabled: true,
+    onLinkCheck: (url) => url.startsWith("https://trusted.com"),
+  }}
+/>
+```
+
+### Incomplete Markdown Handling (Remend)
+
+Configure how incomplete markdown syntax is handled during streaming:
+
+```tsx
+<StreamdownTextPrimitive
+  remend={{
+    links: true,      // Complete incomplete links
+    images: true,     // Handle incomplete images
+    bold: true,       // Complete **text → **text**
+    italic: true,     // Complete *text → *text*
+    inlineCode: true, // Complete `code → `code`
+    katex: true,      // Complete $$equation → $$equation$$
+  }}
+/>
+```
+
+### Allowed HTML Tags
+
+Allow specific HTML tags in markdown content:
+
+```tsx
+<StreamdownTextPrimitive
+  allowedTags={{
+    div: ["class", "id"],
+    span: ["class", "style"],
+    iframe: ["src", "width", "height"],
+  }}
+/>
+```
+
+### Security Configuration
+
+Restrict allowed URLs for links and images. This overrides streamdown's default allow-all policy:
+
+```tsx
+<StreamdownTextPrimitive
+  security={{
+    // Only allow links to trusted domains
+    allowedLinkPrefixes: ["https://example.com", "https://docs.example.com"],
+    // Only allow images from your CDN
+    allowedImagePrefixes: ["https://cdn.example.com"],
+    // Restrict protocols
+    allowedProtocols: ["https", "mailto"],
+    // Disable base64 data images
+    allowDataImages: false,
+    // CSS class for blocked elements
+    blockedLinkClass: "blocked-link",
+    blockedImageClass: "blocked-image",
+  }}
+/>
+```
+
+## Detecting Inline vs Block Code
+
+When building custom code components, you can use `useIsStreamdownCodeBlock` to detect whether you're inside a code block or inline code:
+
+```tsx
+import { useIsStreamdownCodeBlock } from "@assistant-ui/react-streamdown";
+
+function MyCodeComponent({ children, ...props }) {
+  const isCodeBlock = useIsStreamdownCodeBlock();
+
+  if (!isCodeBlock) {
+    return <code className="inline-code" {...props}>{children}</code>;
+  }
+
+  return <pre><code {...props}>{children}</code></pre>;
+}
+```
+
+You can also use `useStreamdownPreProps` to access the props passed to the parent `<pre>` element:
+
+```tsx
+import { useStreamdownPreProps } from "@assistant-ui/react-streamdown";
+
+function MyCodeComponent({ children }) {
+  const preProps = useStreamdownPreProps();
+
+  if (!preProps) {
+    // Inline code
+    return <code>{children}</code>;
+  }
+
+  // Block code - preProps contains className, node, etc.
+  return <code className={preProps.className}>{children}</code>;
+}
+```
+
+## Comparison with react-markdown
+
+| Feature | react-markdown | react-streamdown |
+|---------|---------------|------------------|
+| Bundle size | Smaller | Larger (with plugins) |
+| Syntax highlighting | Bring your own | Built-in Shiki |
+| Math rendering | Manual setup | Built-in KaTeX |
+| Mermaid diagrams | Manual setup | Built-in support |
+| CJK optimization | None | Built-in |
+| Streaming | `smooth` prop | `mode` + block-based |
+
+## Re-exported Utilities
+
+The package re-exports useful utilities:
+
+```tsx
+import {
+  // Context for accessing streamdown state
+  StreamdownContext,
+  // Parse markdown into blocks (for custom implementations)
+  parseMarkdownIntoBlocks,
+  // Hooks for custom code components
+  useIsStreamdownCodeBlock,
+  useStreamdownPreProps,
+  // Memo comparison utility for custom components
+  memoCompareNodes,
+  // Default Shiki theme: ["github-light", "github-dark"]
+  DEFAULT_SHIKI_THEME,
+} from "@assistant-ui/react-streamdown";
+```
+
+### Available Types
+
+```tsx
+import type {
+  // Component props
+  StreamdownTextPrimitiveProps,
+  SyntaxHighlighterProps,
+  CodeHeaderProps,
+  ComponentsByLanguage,
+  StreamdownTextComponents,
+  StreamdownProps,
+  // Plugin types
+  PluginConfig,
+  ResolvedPluginConfig,
+  CodeHighlighterPlugin,
+  DiagramPlugin,
+  MathPlugin,
+  CjkPlugin,
+  HighlightOptions,
+  // Shiki types
+  BundledTheme,
+  BundledLanguage,
+  // Configuration types
+  CaretStyle,
+  ControlsConfig,
+  MermaidOptions,
+  MermaidErrorComponentProps,
+  LinkSafetyConfig,
+  LinkSafetyModalProps,
+  RemendConfig,
+  RemendHandler,
+  AllowedTags,
+  RemarkRehypeOptions,
+  BlockProps,
+  SecurityConfig,
+} from "@assistant-ui/react-streamdown";
+```
+
+## Related Components
+
+- [Markdown](/docs/ui/markdown) - Lightweight markdown with react-markdown
+- [Syntax Highlighting](/docs/ui/syntax-highlighting) - Add code highlighting to react-markdown
+- [Mermaid](/docs/ui/mermaid) - Render diagrams in react-markdown

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

@@ -0,0 +1,259 @@
+---
+title: Tabs
+description: A multi-variant tabs component for organizing content into switchable panels.
+links:
+  - label: Radix UI Tabs
+    url: https://www.radix-ui.com/primitives/docs/components/tabs
+---
+
+import { PreviewCode } from "@/components/docs/preview-code.server";
+import {
+  TabsSample,
+  TabsVariantsSample,
+  TabsSizesSample,
+  TabsWithIconsSample,
+  TabsControlledSample,
+  TabsAsLinkSample,
+  TabsAnimatedIndicatorSample,
+} from "@/components/docs/samples/tabs";
+
+<Callout>
+  This is a **standalone component** that does not depend on the assistant-ui runtime. Use it anywhere in your application.
+</Callout>
+
+<TabsSample />
+
+## Installation
+
+<InstallCommand shadcn={["tabs"]} />
+
+## Usage
+
+```tsx
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from "@/components/assistant-ui/tabs";
+
+export function Example() {
+  return (
+    <Tabs defaultValue="account">
+      <TabsList>
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account">Account settings here.</TabsContent>
+      <TabsContent value="password">Password settings here.</TabsContent>
+    </Tabs>
+  );
+}
+```
+
+## Examples
+
+### Variants
+
+Use the `variant` prop on `TabsList` to change the visual style. Child components inherit the variant automatically.
+
+<TabsVariantsSample />
+
+```tsx
+<TabsList variant="default" />  // Muted background with shadow (default)
+<TabsList variant="line" />     // Underline indicator
+<TabsList variant="ghost" />    // Transparent with hover states
+<TabsList variant="pills" />    // Rounded pill buttons
+<TabsList variant="outline" />  // Border with background on active
+```
+
+### Sizes
+
+Use the `size` prop on `TabsList` to change the tab height. Child components inherit the size automatically.
+
+<TabsSizesSample />
+
+```tsx
+<TabsList size="sm" />      // 32px height
+<TabsList size="default" /> // 36px height
+<TabsList size="lg" />      // 40px height
+```
+
+### With Icons
+
+Tabs automatically style SVG icons placed inside triggers.
+
+<PreviewCode file="components/docs/samples/tabs" name="TabsWithIconsSample">
+  <TabsWithIconsSample />
+</PreviewCode>
+
+### Controlled
+
+Use `value` and `onValueChange` for controlled tab state.
+
+<PreviewCode file="components/docs/samples/tabs" name="TabsControlledSample">
+  <TabsControlledSample />
+</PreviewCode>
+
+### As Link
+
+Use the `asChild` prop on `TabsTrigger` to render as a different element, like a navigation link.
+
+<PreviewCode file="components/docs/samples/tabs" name="TabsAsLinkSample">
+  <TabsAsLinkSample />
+</PreviewCode>
+
+### Animated Indicator
+
+All variants feature smooth animated indicators that slide between tabs:
+
+| Variant | Indicator Style |
+|---------|-----------------|
+| `default` | Sliding background with shadow |
+| `line` | Sliding underline |
+| `ghost` | Sliding background with hover effect |
+| `pills` | Sliding pill background |
+| `outline` | Sliding border |
+
+<PreviewCode file="components/docs/samples/tabs" name="TabsAnimatedIndicatorSample">
+  <TabsAnimatedIndicatorSample />
+</PreviewCode>
+
+## API Reference
+
+### Composable API
+
+| Component | Description |
+|-----------|-------------|
+| `Tabs` | The root component that manages tab state. |
+| `TabsList` | The container for tab triggers. Set `variant` and `size` here. |
+| `TabsTrigger` | An individual tab button. Inherits variant/size from TabsList. |
+| `TabsContent` | The content panel for a tab. |
+
+### Tabs
+
+The root component that manages tab state.
+
+<ParametersTable
+  type="TabsProps"
+  parameters={[
+    {
+      name: "defaultValue",
+      type: "string",
+      description: "The default active tab value (uncontrolled).",
+    },
+    {
+      name: "value",
+      type: "string",
+      description: "The controlled active tab value.",
+    },
+    {
+      name: "onValueChange",
+      type: "(value: string) => void",
+      description: "Callback when the active tab changes.",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "Additional CSS classes.",
+    },
+  ]}
+/>
+
+### TabsList
+
+The container for tab triggers. Set `variant` and `size` here to style all child components.
+
+<ParametersTable
+  type="TabsListProps"
+  parameters={[
+    {
+      name: "variant",
+      type: '"default" | "line" | "ghost" | "pills" | "outline"',
+      default: '"default"',
+      description: "The visual style of the tabs. Child components inherit this automatically.",
+    },
+    {
+      name: "size",
+      type: '"sm" | "default" | "lg"',
+      default: '"default"',
+      description: "The size of the tabs. Child components inherit this automatically.",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "Additional CSS classes.",
+    },
+  ]}
+/>
+
+### TabsTrigger
+
+An individual tab button.
+
+<ParametersTable
+  type="TabsTriggerProps"
+  parameters={[
+    {
+      name: "value",
+      type: "string",
+      required: true,
+      description: "The unique value for this tab.",
+    },
+    {
+      name: "asChild",
+      type: "boolean",
+      default: "false",
+      description: "Merge props with child element instead of rendering a button.",
+    },
+    {
+      name: "disabled",
+      type: "boolean",
+      description: "Whether the tab is disabled.",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "Additional CSS classes.",
+    },
+  ]}
+/>
+
+### TabsContent
+
+The content panel for a tab.
+
+<ParametersTable
+  type="TabsContentProps"
+  parameters={[
+    {
+      name: "value",
+      type: "string",
+      required: true,
+      description: "The value matching the corresponding TabsTrigger.",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "Additional CSS classes.",
+    },
+  ]}
+/>
+
+### Style Variants (CVA)
+
+| Export | Description |
+|--------|-------------|
+| `tabsListVariants` | Styles for the tabs list container. |
+| `tabsActiveIndicatorVariants` | Styles for the animated active indicator. |
+
+```tsx
+import {
+  tabsListVariants,
+  tabsActiveIndicatorVariants,
+} from "@/components/assistant-ui/tabs";
+
+<div className={tabsListVariants({ variant: "ghost", size: "sm" })}>
+  Custom Tabs Container
+</div>
+```