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

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

@@ -1,254 +0,0 @@
----
-title: Select
-description: A dropdown select component with composable sub-components.
-links:
-  - label: Radix UI Select (Radix styles)
-    url: https://www.radix-ui.com/primitives/docs/components/select
-  - label: Base UI Select (base styles)
-    url: https://base-ui.com/react/components/select
-platforms: ["react"]
----
-
-import { PreviewCode } from "@/components/docs/preview-code.server";
-import {
-  SelectSample,
-  SelectDisabledItemsSample,
-  SelectPlaceholderSample,
-  SelectDisabledSample,
-  SelectGroupsSample,
-  SelectVariantsSample,
-  SelectSizesSample,
-  SelectScrollableSample,
-} from "@/components/docs/samples/select";
-import * as SelectRadixSamples from "@/components/docs/samples/select.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={<SelectRadixSamples.SelectSample />} base={<SelectSample />} />
-
-## Installation
-
-<InstallCommand shadcn={["select"]} />
-
-## Usage
-
-```tsx
-import { Select } from "@/components/assistant-ui/select";
-
-const options = [
-  { value: "apple", label: "Apple" },
-  { value: "banana", label: "Banana" },
-  { value: "orange", label: "Orange" },
-];
-
-export function FruitPicker() {
-  const [value, setValue] = useState("apple");
-
-  return (
-    <Select
-      value={value}
-      onValueChange={setValue}
-      options={options}
-      placeholder="Select a fruit..."
-    />
-  );
-}
-```
-
-## Examples
-
-### Variants
-
-Use the `variant` prop on `SelectTrigger` to change the visual style.
-
-<Flavored radix={<SelectRadixSamples.SelectVariantsSample />} base={<SelectVariantsSample />} />
-
-```tsx
-<SelectTrigger variant="outline" /> // Border (default)
-<SelectTrigger variant="ghost" />   // No border
-<SelectTrigger variant="muted" />   // Solid background
-```
-
-### Sizes
-
-Use the `size` prop on `SelectTrigger` to change the height.
-
-<Flavored radix={<SelectRadixSamples.SelectSizesSample />} base={<SelectSizesSample />} />
-
-```tsx
-<SelectTrigger size="default" /> // 36px (default)
-<SelectTrigger size="sm" />      // 32px
-```
-
-### Scrollable
-
-Long lists automatically become scrollable.
-
-<PreviewCode file="components/docs/samples/select" name="SelectScrollableSample" base={<SelectScrollableSample />}>
-  <SelectRadixSamples.SelectScrollableSample />
-</PreviewCode>
-
-### Groups
-
-Use the composable API for grouped options:
-
-<PreviewCode file="components/docs/samples/select" name="SelectGroupsSample" base={<SelectGroupsSample />}>
-  <SelectRadixSamples.SelectGroupsSample />
-</PreviewCode>
-
-### Disabled Items
-
-<PreviewCode file="components/docs/samples/select" name="SelectDisabledItemsSample" base={<SelectDisabledItemsSample />}>
-  <SelectRadixSamples.SelectDisabledItemsSample />
-</PreviewCode>
-
-### With Placeholder
-
-<PreviewCode file="components/docs/samples/select" name="SelectPlaceholderSample" base={<SelectPlaceholderSample />}>
-  <SelectRadixSamples.SelectPlaceholderSample />
-</PreviewCode>
-
-### Disabled Select
-
-<PreviewCode file="components/docs/samples/select" name="SelectDisabledSample" base={<SelectDisabledSample />}>
-  <SelectRadixSamples.SelectDisabledSample />
-</PreviewCode>
-
-## API Reference
-
-### Composable API
-
-| Component | Description |
-|-----------|-------------|
-| `Select` | A convenience component that renders a complete select with options. |
-| `SelectRoot` | The root component that manages state. |
-| `SelectTrigger` | The button that opens the dropdown. Accepts `variant` and `size` props. |
-| `SelectValue` | Renders the selected value or placeholder. |
-| `SelectContent` | The dropdown content container with animations. |
-| `SelectItem` | An individual selectable item. |
-| `SelectGroup` | Groups related items together. |
-| `SelectLabel` | A label for a group of items. |
-| `SelectSeparator` | A visual separator between items or groups. |
-| `SelectScrollUpButton` | Scroll indicator for long lists. |
-| `SelectScrollDownButton` | Scroll indicator for long lists. |
-
-With the Base UI flavor, `SelectValue` resolves the trigger label from the `items` prop on `SelectRoot`; pass the same array you map into `SelectItem` children. The Radix flavor reads the label from the selected item's text automatically.
-
-### Select
-
-A convenience component that renders a complete select with options.
-
-<ParametersTable
-  type="SelectProps"
-  parameters={[
-    {
-      name: "value",
-      type: "string",
-      required: true,
-      description: "The controlled value of the select.",
-    },
-    {
-      name: "onValueChange",
-      type: "(value: string) => void",
-      required: true,
-      description: "Callback when the selected value changes.",
-    },
-    {
-      name: "options",
-      type: "SelectOption[]",
-      required: true,
-      description: "Array of options to display.",
-    },
-    {
-      name: "placeholder",
-      type: "string",
-      description: "Placeholder text when no value is selected.",
-    },
-    {
-      name: "className",
-      type: "string",
-      description: "Additional CSS classes for the trigger.",
-    },
-    {
-      name: "disabled",
-      type: "boolean",
-      description: "Whether the select is disabled.",
-    },
-  ]}
-/>
-
-### SelectOption
-
-<ParametersTable
-  type="SelectOption"
-  parameters={[
-    {
-      name: "value",
-      type: "string",
-      required: true,
-      description: "The value of the option.",
-    },
-    {
-      name: "label",
-      type: "ReactNode",
-      required: true,
-      description: "The display label for the option.",
-    },
-    {
-      name: "textValue",
-      type: "string",
-      description: "Optional text value for typeahead. Defaults to label if it's a string.",
-    },
-    {
-      name: "disabled",
-      type: "boolean",
-      description: "Whether the option is disabled.",
-    },
-  ]}
-/>
-
-### SelectTrigger
-
-The button that opens the dropdown.
-
-<ParametersTable
-  type="SelectTriggerProps"
-  parameters={[
-    {
-      name: "variant",
-      type: '"outline" | "ghost" | "muted"',
-      default: '"outline"',
-      description: "The visual style of the trigger.",
-    },
-    {
-      name: "size",
-      type: '"sm" | "default" | "lg"',
-      default: '"default"',
-      description: "The size of the trigger.",
-    },
-    {
-      name: "className",
-      type: "string",
-      description: "Additional CSS classes.",
-    },
-  ]}
-/>
-
-### Style Variants (CVA)
-
-| Export | Description |
-|--------|-------------|
-| `selectTriggerVariants` | Styles for the select trigger button. |
-
-```tsx
-import { selectTriggerVariants } from "@/components/assistant-ui/select";
-
-<button className={selectTriggerVariants({ variant: "ghost", size: "sm" })}>
-  Custom Trigger
-</button>
-```

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

@@ -1,177 +0,0 @@
----
-title: Sources
-description: Display URL sources with favicon, title, and external link.
-platforms: ["react"]
----
-
-import { SourcesSample } from "@/components/docs/samples/sources";
-
-<SourcesSample />
-
-## Getting Started
-
-<Steps>
-  <Step>
-
-### Add `sources`
-
-<InstallCommand shadcn={["sources"]} />
-
-  </Step>
-  <Step>
-
-### Use in your application
-
-Pass `Sources` to `MessagePrimitive.Parts`:
-
-```tsx title="/components/assistant-ui/thread.tsx" {1,8}
-import { Sources } from "@/components/assistant-ui/sources";
-
-const AssistantMessage: FC = () => {
-  return (
-    <MessagePrimitive.Root className="...">
-      <MessagePrimitive.Parts>
-        {({ part }) => {
-          if (part.type === "source") return <Sources {...part} />;
-          return null;
-        }}
-      </MessagePrimitive.Parts>
-    </MessagePrimitive.Root>
-  );
-};
-```
-
-  </Step>
-</Steps>
-
-## Variants
-
-Use the `variant` prop to change the visual style. The default is `outline`.
-
-```tsx
-<Source variant="outline" />     // Border (default)
-<Source variant="ghost" />       // No background
-<Source variant="muted" />       // Solid muted background
-<Source variant="secondary" />   // Secondary background
-<Source variant="info" />        // Blue
-<Source variant="warning" />     // Amber
-<Source variant="success" />     // Emerald
-<Source variant="destructive" /> // Red
-```
-
-## Sizes
-
-Use the `size` prop to change the size.
-
-```tsx
-<Source size="sm" />      // Small
-<Source size="default" /> // Default
-<Source size="lg" />      // Large
-```
-
-## API Reference
-
-### `Sources`
-
-The default export used as a `SourceMessagePartComponent`. Renders a single source part when `sourceType === "url"`. Also exposes compound sub-components for custom layouts.
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `url` | `string` | — | The URL of the source (provided by the runtime) |
-| `title` | `string \| undefined` | — | Display title; falls back to the domain if omitted |
-| `sourceType` | `string` | — | Must be `"url"` to render; other types are ignored |
-
-#### Compound sub-components
-
-```tsx
-import { Sources } from "@/components/assistant-ui/sources";
-
-<Sources.Root href="https://example.com">
-  <Sources.Icon url="https://example.com" />
-  <Sources.Title>Example</Sources.Title>
-</Sources.Root>
-```
-
-| Sub-component | Equivalent named export | Description |
-|---------------|------------------------|-------------|
-| `Sources.Root` | `Source` | Root anchor element |
-| `Sources.Icon` | `SourceIcon` | Favicon with domain initial fallback |
-| `Sources.Title` | `SourceTitle` | Truncated title text |
-
-### `Source`
-
-Root container rendered as an `<a>` tag. Accepts all `<a>` props plus `variant` and `size`.
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `href` | `string` | — | URL the link points to |
-| `variant` | `"outline" \| "ghost" \| "muted" \| "secondary" \| "info" \| "warning" \| "success" \| "destructive"` | `"outline"` | Visual style |
-| `size` | `"sm" \| "default" \| "lg"` | `"default"` | Size of the badge |
-| `target` | `string` | `"_blank"` | Link target |
-| `rel` | `string` | `"noopener noreferrer"` | Link rel attribute |
-| `asChild` | `boolean` | `false` | Merge props with a child element instead of rendering an anchor. Effective with the Radix badge; the Base UI badge ignores it |
-| `className` | `string` | — | Additional CSS classes |
-
-### `SourceIcon`
-
-Displays the favicon for the given URL. Falls back to the domain initial inside a muted box when the favicon fails to load.
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `url` | `string` | — | URL used to derive the favicon and fallback initial |
-| `faviconUrl` | `(domain: string) => string` | DuckDuckGo's `ip3` endpoint | Override the favicon source — useful in environments where the default service is unreachable |
-| `className` | `string` | — | Additional CSS classes applied to the `<img>` or fallback `<span>` |
-
-#### Customizing the favicon provider
-
-The default `<Sources>` component renders `<SourceIcon>` without forwarding `faviconUrl`, so the prop only applies when you compose `Sources.Icon` directly:
-
-```tsx
-<Sources.Root href={url}>
-  <Sources.Icon
-    url={url}
-    faviconUrl={(domain) => `https://my-favicon-proxy.example.com/${domain}.ico`}
-  />
-  <Sources.Title>{title}</Sources.Title>
-</Sources.Root>
-```
-
-To change the default for every source in your app, edit the `defaultFaviconUrl` constant at the top of your copied `sources.tsx` — that is the single source of truth used by `<Sources>`.
-
-### `SourceTitle`
-
-Truncated title text rendered as a `<span>`.
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `ReactNode` | — | Title content to display |
-| `className` | `string` | — | Additional CSS classes (default max-width is `37.5rem`) |
-
-### `sourceVariants`
-
-The underlying CVA variant function used to generate badge class names. Use this when building custom source-like components that need to match the built-in styling.
-
-```tsx
-import { sourceVariants } from "@/components/assistant-ui/sources";
-
-<span className={sourceVariants({ variant: "info", size: "sm" })}>
-  Custom badge
-</span>
-```
-
-## Composable API
-
-Use the named exports to build fully custom source layouts:
-
-```tsx
-import { Source, SourceIcon, SourceTitle } from "@/components/assistant-ui/sources";
-
-<Source href="https://example.com" variant="muted" className="gap-2">
-  <SourceIcon url="https://example.com" className="size-4" />
-  <SourceTitle className="max-w-none font-medium">Example</SourceTitle>
-</Source>
-```
-
-## Related Components
-
-- [PartGrouping](/docs/ui/part-grouping) - Group sources by parentId