@assistant-ui/mcp-docs-server 0.2.2 → 0.3.0

package/.docs/raw/docs/ui/assistant-modal.mdx

@@ -1,166 +0,0 @@
----
-title: AssistantModal
-description: Floating chat bubble for support widgets and help desks.
-platforms: ["react"]
----
-
-import { AssistantModalSample } from "@/components/docs/samples/assistant-modal";
-import * as AssistantModalRadixSamples from "@/components/docs/samples/assistant-modal.radix";
-import { Flavored, FlavorSwitcher } from "@/components/docs/contexts/flavor.server";
-
-A floating chat modal built on the popover primitive of your configured style (Radix UI Popover on Radix styles, Base UI Popover on `base-*` styles). Ideal for support widgets, help desks, and embedded assistants.
-
-<FlavorSwitcher />
-
-<Flavored radix={<AssistantModalRadixSamples.AssistantModalSample />} base={<AssistantModalSample />} />
-
-## Getting Started
-
-<Steps>
-  <Step>
-
-### Add `assistant-modal`
-
-<InstallCommand shadcn={["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>
-
-## Anatomy
-
-The Radix flavor of `AssistantModal` is built with the following primitives. The Base UI flavor composes your project's Base UI Popover instead.
-
-```tsx
-import { AssistantModalPrimitive } from "@assistant-ui/react";
-
-<AssistantModalPrimitive.Root>
-  <AssistantModalPrimitive.Anchor />
-  <AssistantModalPrimitive.Trigger />
-  <AssistantModalPrimitive.Content>
-    {/* Thread component goes here */}
-  </AssistantModalPrimitive.Content>
-</AssistantModalPrimitive.Root>
-```
-
-## API Reference
-
-### Root
-
-Contains all parts of the modal when using `AssistantModalPrimitive` (the Radix flavor). The Base UI flavor uses your project's Base UI Popover instead.
-
-<ParametersTable
-  type="AssistantModalPrimitiveRootProps"
-  parameters={[
-    {
-      name: "defaultOpen",
-      type: "boolean",
-      description: "The initial open state when uncontrolled.",
-    },
-    {
-      name: "open",
-      type: "boolean",
-      description: "The controlled open state.",
-    },
-    {
-      name: "onOpenChange",
-      type: "(open: boolean) => void",
-      description: "Callback when the open state changes.",
-    },
-    {
-      name: "unstable_openOnRunStart",
-      type: "boolean",
-      description: "Automatically open the modal when the assistant starts running.",
-    },
-  ]}
-/>
-
-### Trigger
-
-A button that toggles the modal open/closed state.
-
-<ParametersTable
-  type="AssistantModalPrimitiveTriggerProps"
-  parameters={[
-    {
-      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.
-
-### Content
-
-The popover content container that holds the chat interface.
-
-<ParametersTable
-  type="AssistantModalPrimitiveContentProps"
-  parameters={[
-    {
-      name: "side",
-      type: "'top' | 'right' | 'bottom' | 'left'",
-      default: "'top'",
-      description: "The preferred side of the anchor to render against.",
-    },
-    {
-      name: "align",
-      type: "'start' | 'center' | 'end'",
-      default: "'end'",
-      description: "The preferred alignment against the anchor.",
-    },
-    {
-      name: "dissmissOnInteractOutside",
-      type: "boolean",
-      description: "Whether to close the modal when clicking outside.",
-    },
-    {
-      name: "asChild",
-      type: "boolean",
-      default: "false",
-      description: "Merge props with child element instead of rendering a wrapper div.",
-    },
-  ]}
-/>
-
-### Anchor
-
-An optional anchor element to position the modal relative to.
-
-<ParametersTable
-  type="AssistantModalPrimitiveAnchorProps"
-  parameters={[
-    {
-      name: "asChild",
-      type: "boolean",
-      default: "false",
-      description: "Merge props with child element instead of rendering a wrapper div.",
-    },
-  ]}
-/>
-
-## Related Components
-
-- [Thread](/docs/ui/thread) - The main chat interface used inside the modal
-- [AssistantSidebar](/docs/ui/assistant-sidebar) - Alternative layout for side panel chat

package/.docs/raw/docs/ui/assistant-sidebar.mdx

@@ -1,89 +0,0 @@
----
-title: AssistantSidebar
-description: Side panel chat for co-pilot experiences and inline assistance.
-platforms: ["react"]
----
-
-import { AssistantSidebarSample } from "@/components/docs/samples/assistant-sidebar";
-
-A resizable side panel layout with your main content on the left and a Thread chat interface on the right. Ideal for co-pilot experiences and inline assistance.
-
-<AssistantSidebarSample />
-
-## Getting Started
-
-<Steps>
-  <Step>
-
-### Add `assistant-sidebar`
-
-<InstallCommand shadcn={["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>
-
-## API Reference
-
-### AssistantSidebar
-
-A layout component that creates a resizable two-panel interface.
-
-<ParametersTable
-  type="AssistantSidebarProps"
-  parameters={[
-    {
-      name: "children",
-      type: "ReactNode",
-      description: "Content to display in the left panel (your main application).",
-    },
-  ]}
-/>
-
-The component uses `ResizablePanelGroup` from shadcn/ui internally, creating:
-- **Left panel**: Your application content (passed as `children`)
-- **Right panel**: The Thread chat interface (rendered automatically)
-- **Resize handle**: Draggable divider between panels
-
-## Customization
-
-Since this component is copied to your project at `/components/assistant-ui/assistant-sidebar.tsx`, you can customize:
-
-- Panel default sizes and min/max constraints
-- Resize handle styling
-- Thread component configuration
-
-```tsx title="/components/assistant-ui/assistant-sidebar.tsx"
-<ResizablePanelGroup direction="horizontal">
-  <ResizablePanel defaultSize={60} minSize={30}>
-    {children}
-  </ResizablePanel>
-  <ResizableHandle withHandle />
-  <ResizablePanel defaultSize={40} minSize={20}>
-    <Thread />
-  </ResizablePanel>
-</ResizablePanelGroup>
-```
-
-## Related Components
-
-- [Thread](/docs/ui/thread) - The chat interface displayed in the sidebar
-- [AssistantModal](/docs/ui/assistant-modal) - Alternative floating modal layout

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

@@ -1,259 +0,0 @@
----
-title: Attachment
-description: UI components for attaching and viewing files in messages.
-platforms: ["react"]
----
-
-import { AttachmentSample } from "@/components/docs/samples/attachment";
-import * as AttachmentRadixSamples from "@/components/docs/samples/attachment.radix";
-import { Flavored, FlavorSwitcher } from "@/components/docs/contexts/flavor.server";
-import { PreviewCode } from "@/components/docs/preview-code.server";
-import { AttachmentComposerSample } from "@/components/docs/samples/attachment/composer-attachments";
-import * as AttachmentComposerRadixSample from "@/components/docs/samples/attachment/composer-attachments.radix";
-import { AttachmentMessageContextSample } from "@/components/docs/samples/attachment/message-attachments";
-import * as AttachmentMessageRadixSample from "@/components/docs/samples/attachment/message-attachments.radix";
-
-<FlavorSwitcher />
-
-<Flavored radix={<AttachmentRadixSamples.AttachmentSample />} base={<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
-
-Add `ComposerAttachments` and `ComposerAddAttachment` to your composer:
-
-```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>
-  );
-};
-```
-
-Add `UserMessageAttachments` to your user message:
-
-```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>
-
-## Examples
-
-### Composer
-
-In the composer, each attachment tile shows a remove button that deletes the attachment from the composer. Use the plus button to add your own files.
-
-<PreviewCode file="components/docs/samples/attachment/composer-attachments" name="ComposerWithAttachments" base={<AttachmentComposerSample />}>
-  <AttachmentComposerRadixSample.AttachmentComposerSample />
-</PreviewCode>
-
-### User Message
-
-Message attachments are read-only. The same tile in a sent user message does not show a remove button.
-
-<PreviewCode file="components/docs/samples/attachment/message-attachments" name="UserMessageWithAttachments" base={<AttachmentMessageContextSample />}>
-  <AttachmentMessageRadixSample.AttachmentMessageContextSample />
-</PreviewCode>
-
-## 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" | (string & {});
-  name: string;
-  contentType?: string;
-  file?: File;
-  status:
-    | { type: "running" | "requires-action" | "incomplete"; progress?: number }
-    | { type: "complete" };
-};
-```
-
-The `type` field accepts custom strings (e.g. `"data-workflow"`) beyond the built-in types. When an unknown type is encountered, the generic `Attachment` component is used as a fallback. The `contentType` field is optional — it can be omitted for non-file attachments where a MIME type is not meaningful.
-
-## 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

@@ -1,150 +0,0 @@
----
-title: Badge
-description: A small label component for displaying status, categories, or metadata.
-links:
-  - label: Radix UI Slot (Radix styles)
-    url: https://www.radix-ui.com/primitives/docs/utilities/slot
-  - label: Base UI useRender (base styles)
-    url: https://base-ui.com/react/utils/use-render
-platforms: ["react"]
----
-
-import { PreviewCode } from "@/components/docs/preview-code.server";
-import {
-  BadgeSample,
-  BadgeSizesSample,
-  BadgeWithIconSample,
-  BadgeAsLinkSample,
-  BadgeAnimatedSample,
-} from "@/components/docs/samples/badge";
-import * as BadgeRadixSamples from "@/components/docs/samples/badge.radix";
-import { Flavored, FlavorSwitcher } from "@/components/docs/contexts/flavor.server";
-
-<Callout>
-  This is a **standalone component** that does not depend on the assistant-ui runtime. Use it anywhere in your application.
-</Callout>
-
-<FlavorSwitcher />
-
-<Flavored radix={<BadgeRadixSamples.BadgeSample />} base={<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.
-
-<Flavored radix={<BadgeRadixSamples.BadgeSample />} base={<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.
-
-<Flavored radix={<BadgeRadixSamples.BadgeSizesSample />} base={<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" base={<BadgeWithIconSample />}>
-  <BadgeRadixSamples.BadgeWithIconSample />
-</PreviewCode>
-
-### As Link
-
-Compose with `render` (Base UI) or `asChild` (Radix) to render the badge as a different element, like a link.
-
-<PreviewCode file="components/docs/samples/badge" name="BadgeAsLinkSample" base={<BadgeAsLinkSample />}>
-  <BadgeRadixSamples.BadgeAsLinkSample />
-</PreviewCode>
-
-### Animated
-
-Combine with CSS transitions for scroll and color animations.
-
-<PreviewCode file="components/docs/samples/badge" name="BadgeAnimatedSample" base={<BadgeAnimatedSample />}>
-  <BadgeRadixSamples.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: "render",
-      type: "ReactElement | function",
-      description: "Base UI: compose as a different element instead of rendering a span.",
-    },
-    {
-      name: "asChild",
-      type: "boolean",
-      default: "false",
-      description: "Radix: merge props with a 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>
-```