@assistant-ui/mcp-docs-server 0.1.1

package/.docs/raw/docs/ui/AssistantModal.mdx

@@ -0,0 +1,46 @@
+---
+title: AssistantModal
+---
+
+import { Steps, Step } from "fumadocs-ui/components/steps";
+import { AssistantModalSample } from "../../../components/samples/assistant-modal-sample";
+
+## Overview
+
+A chat bubble shown in the bottom right corner of the screen. Useful for support or Q&A use cases.
+
+<AssistantModalSample />
+
+
+## Getting Started
+
+<Steps>
+  <Step>
+
+### Add `assistant-modal`
+
+```sh
+npx shadcn@latest add "https://r.assistant-ui.com/assistant-modal"
+```
+
+This adds `/components/assistant-ui/assistant-modal.tsx` to your project, which you can adjust as needed.
+
+  </Step>
+  <Step>
+
+### Use in your application
+
+```tsx title="/app/page.tsx" {1,6}
+import { AssistantModal } from "@/components/assistant-ui/assistant-modal";
+
+export default function Home() {
+  return (
+    <div className="h-full">
+      <AssistantModal />
+    </div>
+  );
+}
+```
+
+  </Step>
+</Steps>

package/.docs/raw/docs/ui/AssistantSidebar.mdx

@@ -0,0 +1,42 @@
+---
+title: AssistantSidebar
+---
+
+import { Steps, Step } from "fumadocs-ui/components/steps";
+
+## Overview
+
+A chat sidebar show on the right side of the screen. Useful for co-pilot use cases.
+
+## Getting Started
+
+<Steps> 
+  <Step>
+
+### Add `assistant-sidebar`
+
+```sh
+npx shadcn@latest add "https://r.assistant-ui.com/assistant-sidebar"
+```
+
+This adds `/components/assistant-ui/assistant-sidebar.tsx` to your project, which you can adjust as needed.
+
+  </Step>
+  <Step>
+
+### Use in your application
+
+```tsx title="/app/page.tsx" {1,6}
+import { AssistantSidebar } from "@/components/assistant-ui/assistant-sidebar";
+
+export default function Home() {
+  return (
+    <div className="h-full">
+      <AssistantSidebar>{/* your app */}</AssistantSidebar>
+    </div>
+  );
+}
+```
+
+  </Step>
+</Steps>

package/.docs/raw/docs/ui/Attachment.mdx

@@ -0,0 +1,82 @@
+---
+title: Attachment
+---
+
+import { Steps, Step } from "fumadocs-ui/components/steps";
+import { AttachmentSample } from "../../../components/samples/attachment-sample";
+import { Callout } from "fumadocs-ui/components/callout";
+
+## Overview
+
+The Attachment components let the user attach files and view the attachments.
+
+<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`
+
+```sh
+npx shadcn@latest add "https://r.assistant-ui.com/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.Content />
+      </div>
+
+      <BranchPicker className="..." />
+    </MessagePrimitive.Root>
+  );
+};
+```
+
+  </Step>
+</Steps>

package/.docs/raw/docs/ui/Markdown.mdx

@@ -0,0 +1,72 @@
+---
+title: Markdown
+---
+
+Allow the assistant to display rich text using markdown.
+
+import { Step, Steps } from "fumadocs-ui/components/steps";
+import { Callout } from "fumadocs-ui/components/callout";
+
+<Callout>
+  Markdown support is already included by default in the `Thread` component.
+</Callout>
+
+## Enabling markdown support
+
+<Steps>
+
+<Step>
+### Add `markdown-text`
+
+```tsx
+npx shadcn@latest add "https://r.assistant-ui.com/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.Content` component
+
+```tsx twoslash title="/components/assistant-ui/thread.tsx" {1,11}
+// @filename: /components/assistant-ui/markdown-text.tsx
+import { FC } from "react";
+export const MarkdownText: FC = () => null;
+
+// @filename: ./thread.tsx
+import { FC } from "react";
+import { MessagePrimitive } from "@assistant-ui/react";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+
+const AssistantActionBar: FC = () => null;
+const BranchPicker: FC<{ className?: string }> = () => null;
+
+// ---cut---
+import { MarkdownText } from "@/components/assistant-ui/markdown-text";
+
+const AssistantMessage: FC = () => {
+  return (
+    <MessagePrimitive.Root className="...">
+      <div className="...">
+        <MessagePrimitive.Content components={{ Text: MarkdownText }} />
+      </div>
+      <AssistantActionBar />
+
+      <BranchPicker className="..." />
+    </MessagePrimitive.Root>
+  );
+};
+```
+
+</Step>
+
+</Steps>
+
+## Syntax highlighting
+
+Syntax Highlighting is not included by default, see [Syntax Highlighting](/docs/ui/SyntaxHighlighting) to learn how to add it.
+

package/.docs/raw/docs/ui/Mermaid.mdx

@@ -0,0 +1,79 @@
+---
+title: "Mermaid Diagrams"
+---
+
+import { Callout } from "fumadocs-ui/components/callout";
+import { Step, Steps } from "fumadocs-ui/components/steps";
+
+Render Mermaid diagrams in chat messages with the `mermaid-diagram` component.
+
+<Steps>
+  <Step>
+
+### Add `mermaid-diagram` component
+
+```bash
+npx shadcn@latest add "https://r.assistant-ui.com/mermaid-diagram"
+```
+
+This will install the required dependencies and add the component to your project.
+
+  </Step>
+  <Step>
+
+### Add it to `componentsByLanguage` in `markdown-text.tsx`
+
+```tsx title="/components/assistant-ui/markdown-text.tsx"
+import { MermaidDiagram } from "@/components/assistant-ui/mermaid-diagram"; // [!code ++]
+
+const MarkdownTextImpl = () => {
+  return (
+    <MarkdownTextPrimitive
+      remarkPlugins={[remarkGfm]}
+      className="aui-md"
+      components={defaultComponents}
+      componentsByLanguage={{               // [!code ++]
+        mermaid: {                          // [!code ++]
+          SyntaxHighlighter: MermaidDiagram // [!code ++]
+        },                                  // [!code ++]
+      }}                                    // [!code ++]
+    />
+  );
+};
+
+export const MarkdownText = memo(MarkdownTextImpl);
+```
+
+  </Step>
+</Steps>
+
+## Configuration
+
+Configure mermaid options in `mermaid-diagram.tsx`:
+
+```tsx title="/components/assistant-ui/mermaid-diagram.tsx"
+mermaid.initialize({ theme: "default" });
+```
+
+## Streaming Performance
+
+The `MermaidDiagram` component is optimized for streaming scenarios:
+
+- **Smart completion detection**: Only renders when the specific code block is complete
+- **Zero failed renders**: Avoids parsing incomplete diagram code during streaming  
+
+
+## Supported Diagram Types
+
+Mermaid supports various diagram types including:
+
+- Flowcharts and decision trees
+- Sequence diagrams  
+- Gantt charts
+- Class diagrams
+- State diagrams
+- Git graphs
+- User journey maps
+- Entity relationship diagrams
+
+See the [Mermaid documentation](https://mermaid.js.org/) for complete syntax reference.

package/.docs/raw/docs/ui/Scrollbar.mdx

@@ -0,0 +1,59 @@
+---
+title: Custom Scrollbar
+---
+
+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`.
+An example implementation of this is [shadcn/ui's Scroll Area](https://ui.shadcn.com/docs/components/scroll-area).
+
+## Add shadcn Scroll Area
+
+```sh
+npx shadcn@latest add scroll-area
+```
+
+### @radix-ui/react-scroll-area v1.2.0 release candidate required
+
+The v1.2.0-rc.x release candidate can be installed via
+
+```sh
+pnpm add @radix-ui/react-scroll-area@next
+```
+
+## 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`:
+
+```css title="@/app/globals.css"
+.thread-viewport > [data-radix-scroll-area-content] {
+  @apply flex flex-col items-center self-stretch bg-inherit;
+}
+```
+
+## Integration
+
+- Wrap `Thread.Root` with `<ScrollAreaPrimitive.Root asChild>`
+- Wrap `Thread.Viewport` with `<ScrollAreaPrimitive.Viewport className="thread-viewport" asChild>`
+- Add shadcn's `<ScrollBar />` to `Thread.Root`
+
+The resulting MyThread component should look like this:
+
+```tsx {1-2,6,8,12-13,15}
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { ScrollBar } from "@/components/ui/scroll-area";
+
+const MyThread: FC = () => {
+  return (
+    <ScrollAreaPrimitive.Root asChild>
+      <ThreadPrimitive.Root className="...">
+        <ScrollAreaPrimitive.Viewport className="thread-viewport" asChild>
+          <ThreadPrimitive.Viewport className="...">
+            ...
+          </ThreadPrimitive.Viewport>
+        </ScrollAreaPrimitive.Viewport>
+        <ScrollBar />
+      </ThreadPrimitive.Root>
+    </ScrollAreaPrimitive.Root>
+  );
+};
+```

package/.docs/raw/docs/ui/SyntaxHighlighting.mdx

@@ -0,0 +1,253 @@
+---
+title: Syntax Highlighting
+---
+
+import { Steps, Step } from "fumadocs-ui/components/steps";
+import { Callout } from "fumadocs-ui/components/callout";
+import { TypeTable } from "fumadocs-ui/components/type-table";
+
+Syntax highlighting for code blocks in markdown.
+
+<Callout type="warn">Syntax highlighting is not enabled in markdown by default.</Callout>
+
+<Callout type="info">
+  `assistant-ui` provides two options for syntax highlighting: 
+  - **react-shiki** (recommended for performance & dynamic language support)
+  - **react-syntax-highlighter** (legacy - Prism or Highlight.js based)
+</Callout>
+
+---
+
+## react-shiki
+
+<Steps>
+  <Step>
+
+#### Add `shiki-highlighter`
+
+```bash
+npx shadcn@latest add "https://r.assistant-ui.com/shiki-highlighter"
+```
+
+This adds a `/components/assistant-ui/shiki-highlighter.tsx` file to your project and
+installs the `react-shiki` dependency. The highlighter can be customized by editing
+the config in the `shiki-highlighter.tsx` file.
+
+  </Step>
+  <Step>
+
+#### Add it to `defaultComponents` in `markdown-text.tsx`
+
+```tsx title="/components/assistant-ui/markdown-text.tsx"
+import { SyntaxHighlighter } from "./shiki-highlighter";
+
+export const defaultComponents = memoizeMarkdownComponents({
+  SyntaxHighlighter: SyntaxHighlighter, // [!code ++]
+  h1: /* ... */,
+  // ...other elements...
+});
+```
+
+  </Step>
+</Steps>
+
+### 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(),
+  )}
+/>
+
+### Bundle Optimization
+
+By default, `react-shiki` includes the full Shiki bundle, which contains all supported languages and themes.
+
+To reduce bundle size, you can use the web bundle by changing the import to `react-shiki/web`, to include a smaller bundle of web related languages:
+
+```tsx title="/components/assistant-ui/shiki-highlighter.tsx"
+import ShikiHighlighter, { type ShikiHighlighterProps } from "react-shiki/web";
+```
+
+#### Custom Bundles
+
+For strict bundle size control, `react-shiki` also supports custom bundles created using `createHighlighterCore` from `react-shiki/core` (re-exported from Shiki):
+
+```tsx title="/components/assistant-ui/shiki-highlighter.tsx" {3-9}
+import { createHighlighterCore, createOnigurumaEngine } from "react-shiki/core"; // [!code ++]
+
+// Create the highlighter
+// Use dynamic imports to load languages and themes on client on demand
+const customHighlighter = await createHighlighterCore({
+  themes: [import("@shikijs/themes/nord")],
+  langs: [
+    import("@shikijs/langs/javascript"),
+    import("@shikijs/langs/typescript"),
+  ],
+  engine: createOnigurumaEngine(import("shiki/wasm")), 
+});
+
+// Then pass it to the highlighter prop
+<SyntaxHighlighter
+  {...props}
+  language={language}
+  theme={theme}
+  highlighter={customHighlighter} // [!code ++]
+/>;
+```
+
+<Callout type="info">
+  For more information, see [react-shiki - bundle options](https://github.com/avgvstvs96/react-shiki#bundle-options).
+</Callout>
+
+### Dual/multi theme support
+
+To use multiple theme modes, pass an object with your multi-theme configuration to the `theme` prop in the `ShikiHighlighter` component:
+
+```tsx title="/components/assistant-ui/shiki-highlighter.tsx"
+<ShikiHighlighter
+  /* ... */
+  theme={{
+    light: "github-light",
+    dark: "github-dark",
+  }}
+  /* ... */
+>
+```
+
+To make themes responsive to your site's theme mode, add one of the following CSS snippets to your project:
+
+```css title="shiki.css"
+/* for class based dark mode */
+html.dark .shiki,
+html.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  /* Optional, if you also want font styles */
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}
+
+/* for query based dark mode */
+@media (prefers-color-scheme: dark) {
+  .shiki,
+  .shiki span {
+    color: var(--shiki-dark) !important;
+    background-color: var(--shiki-dark-bg) !important;
+    /* Optional, if you also want font styles */
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+  }
+}
+```
+
+For more information, see [Shiki's documentation on dual and multi themes](https://shiki.style/guide/dual-themes).
+
+---
+
+## react-syntax-highlighter
+
+<Callout type="warn">
+  This option may be removed in a future release. Consider using
+  [react-shiki](#react-shiki) instead.
+</Callout>
+
+<Steps>
+  <Step>
+
+#### Add `syntax-highlighter`
+
+```bash
+npx shadcn@latest add "https://r.assistant-ui.com/syntax-highlighter"
+```
+
+    Adds a `/components/assistant-ui/syntax-highlighter.tsx` file to your project and installs the `react-syntax-highlighter` dependency.
+
+  </Step>
+  <Step>
+
+#### Add it to `defaultComponents` in `markdown-text.tsx`
+
+```tsx title="/components/assistant-ui/markdown-text.tsx"
+import { SyntaxHighlighter } from "./syntax-highlighter";
+
+export const defaultComponents = memoizeMarkdownComponents({
+  SyntaxHighlighter: SyntaxHighlighter, // [!code ++]
+  h1: /* ... */,
+  // ...other elements...
+});
+```
+
+  </Step>
+</Steps>
+
+### Options
+
+Supports all options from [`react-syntax-highlighter`](https://github.com/react-syntax-highlighter/react-syntax-highlighter#props).
+
+### Bundle Optimization
+
+By default, the syntax highlighter uses a light build that only includes languages you register. To include all languages:
+
+```tsx title="/components/assistant-ui/syntax-highlighter.tsx"
+import { makePrismAsyncSyntaxHighlighter } from "@assistant-ui/react-syntax-highlighter/full";
+```

package/.docs/raw/docs/ui/Thread.mdx

@@ -0,0 +1,47 @@
+---
+title: Thread
+---
+
+import { Steps, Step } from "fumadocs-ui/components/steps";
+import { Callout } from "fumadocs-ui/components/callout";
+import { ThreadSample } from "../../../components/samples/thread-sample";
+
+
+## Overview
+
+The raw message list and message composer UI.
+
+<ThreadSample />
+
+## Getting Started
+
+<Steps>
+  <Step>
+
+### Add `thread`
+
+```sh
+npx shadcn@latest add "https://r.assistant-ui.com/thread"
+```
+
+This adds a `/components/assistant-ui/thread.tsx` file to your project, which you can adjust as needed.
+
+  </Step>
+  <Step>
+
+### Use in your application
+
+```tsx title="/app/page.tsx" {1,6}
+import { Thread } from "@/components/assistant-ui/thread";
+
+export default function Home() {
+  return (
+    <div className="h-full">
+      <Thread />
+    </div>
+  );
+}
+```
+
+  </Step>
+</Steps>