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

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

@@ -0,0 +1,224 @@
+---
+title: ModelSelector
+description: Model picker with unified overlay positioning and runtime integration.
+---
+
+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.
+
+<ModelSelectorSample />
+
+## Getting Started
+
+<Steps>
+  <Step>
+
+### Add `model-selector`
+
+<InstallCommand shadcn={["model-selector"]} />
+
+  </Step>
+  <Step>
+
+### Use in your application
+
+Place the `ModelSelector` inside your thread component, typically in the composer area:
+
+```tsx title="/components/assistant-ui/thread.tsx" {1,6-14}
+import { ModelSelector } from "@/components/assistant-ui/model-selector";
+
+const ComposerAction: FC = () => {
+  return (
+    <div className="flex items-center gap-1">
+      <ModelSelector
+        models={[
+          { id: "gpt-5-nano", name: "GPT-5 Nano", description: "Fast and efficient" },
+          { id: "gpt-5-mini", name: "GPT-5 Mini", description: "Balanced performance" },
+          { id: "gpt-5", name: "GPT-5", description: "Most capable" },
+        ]}
+        defaultValue="gpt-5-mini"
+        size="sm"
+      />
+    </div>
+  );
+};
+```
+
+  </Step>
+  <Step>
+
+### Read the model in your API route
+
+The selected model name is sent as `config.modelName` in the request body:
+
+```tsx title="app/api/chat/route.ts" {2,5}
+export async function POST(req: Request) {
+  const { messages, config } = await req.json();
+
+  const result = streamText({
+    model: openai(config?.modelName ?? "gpt-4o"),
+    messages: convertToModelMessages(messages),
+  });
+
+  return result.toUIMessageStreamResponse();
+}
+```
+
+  </Step>
+</Steps>
+
+## Variants
+
+Use the `variant` prop to change the trigger's visual style.
+
+```tsx
+<ModelSelector variant="outline" /> // Border (default)
+<ModelSelector variant="ghost" />   // No background
+<ModelSelector variant="muted" />   // Solid background
+```
+
+| Variant   | Description                                    |
+| --------- | ---------------------------------------------- |
+| `outline` | Border with transparent background (default)   |
+| `ghost`   | No background, subtle hover                    |
+| `muted`   | Solid secondary background                     |
+
+## Sizes
+
+Use the `size` prop to control the trigger dimensions.
+
+```tsx
+<ModelSelector size="sm" />      // Compact (h-8, text-xs)
+<ModelSelector size="default" /> // Standard (h-9)
+<ModelSelector size="lg" />      // Large (h-10)
+```
+
+## Model Options
+
+Each model in the `models` array supports:
+
+```tsx
+const models = [
+  {
+    id: "gpt-5",           // Sent to backend as config.modelName
+    name: "GPT-5",         // Display name in trigger and items
+    description: "Most capable", // Optional subtitle in items only
+    icon: <SparklesIcon />,      // Optional icon (any ReactNode)
+  },
+];
+```
+
+## Runtime Integration
+
+The default `ModelSelector` export automatically registers the selected model with assistant-ui's `ModelContext` system. When a user selects a model:
+
+1. The component calls `api.modelContext().register()` with `config.modelName`
+2. The `AssistantChatTransport` includes `config` in the request body
+3. Your API route reads `config.modelName` to determine which model to use
+
+This works out of the box with `@assistant-ui/react-ai-sdk`.
+
+## API Reference
+
+### Composable API
+
+For custom layouts, use the sub-components directly with `ModelSelector.Root`:
+
+```tsx
+import {
+  ModelSelectorRoot,
+  ModelSelectorTrigger,
+  ModelSelectorContent,
+  ModelSelectorItem,
+} from "@/components/assistant-ui/model-selector";
+
+<ModelSelectorRoot models={models} value={modelId} onValueChange={setModelId}>
+  <ModelSelectorTrigger variant="outline" />
+  <ModelSelectorContent />
+</ModelSelectorRoot>
+```
+
+| Component | Description |
+|-----------|-------------|
+| `ModelSelector` | Default export with runtime integration |
+| `ModelSelector.Root` | Presentational root (no runtime, controlled state) |
+| `ModelSelector.Trigger` | CVA-styled trigger showing current model |
+| `ModelSelector.Content` | Select content with model items |
+| `ModelSelector.Item` | Individual model option with icon, name, description |
+
+### ModelSelector
+
+<ParametersTable
+  type="ModelSelectorProps"
+  parameters={[
+    {
+      name: "models",
+      type: "ModelOption[]",
+      required: true,
+      description: "Array of available models to display.",
+    },
+    {
+      name: "defaultValue",
+      type: "string",
+      description: "Initial model ID for uncontrolled usage.",
+    },
+    {
+      name: "value",
+      type: "string",
+      description: "Controlled selected model ID.",
+    },
+    {
+      name: "onValueChange",
+      type: "(value: string) => void",
+      description: "Callback when selected model changes.",
+    },
+    {
+      name: "variant",
+      type: '"outline" | "ghost" | "muted"',
+      default: '"outline"',
+      description: "Visual style of the trigger button.",
+    },
+    {
+      name: "size",
+      type: '"sm" | "default" | "lg"',
+      default: '"default"',
+      description: "Size of the trigger button.",
+    },
+    {
+      name: "contentClassName",
+      type: "string",
+      description: "Additional class name for the dropdown content.",
+    },
+  ]}
+/>
+
+### ModelOption
+
+<ParametersTable
+  type="ModelOption"
+  parameters={[
+    {
+      name: "id",
+      type: "string",
+      required: true,
+      description: "Unique identifier sent to the backend as modelName.",
+    },
+    {
+      name: "name",
+      type: "string",
+      required: true,
+      description: "Display name shown in trigger and dropdown.",
+    },
+    {
+      name: "description",
+      type: "string",
+      description: "Optional subtitle shown below the model name.",
+    },
+    {
+      name: "icon",
+      type: "React.ReactNode",
+      description: "Optional icon displayed before the model name.",
+    },
+  ]}
+/>

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
@@ -513,12 +512,12 @@ Adjust group appearance based on content:
 
 ```tsx
 import { FC, PropsWithChildren } from "react";
-import { useAssistantState } from "@assistant-ui/react";
+import { useAuiState } from "@assistant-ui/react";
 
 const DynamicGroup: FC<
   PropsWithChildren<{ groupKey: string | undefined; indices: number[] }>
 > = ({ groupKey, indices, children }) => {
-  const parts = useAssistantState(({ message }) => message.content);
+  const parts = useAuiState(({ message }) => message.content);
   const groupParts = indices.map((i) => parts[i]);
 
   // Analyze group content
@@ -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.
 
@@ -91,7 +90,7 @@ const ReasoningGroupImpl: ReasoningGroupComponent = ({
   startIndex,
   endIndex,
 }) => {
-  const isReasoningStreaming = useAssistantState(({ message }) => {
+  const isReasoningStreaming = useAuiState(({ message }) => {
     if (message.status?.type !== "running") return false;
     const lastIndex = message.parts.length - 1;
     if (lastIndex < 0) return false;
@@ -111,7 +110,9 @@ const ReasoningGroupImpl: ReasoningGroupComponent = ({
 };
 ```
 
-## Composable API
+## API Reference
+
+### Composable API
 
 All sub-components are exported for custom layouts:
 

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

@@ -0,0 +1,245 @@
+---
+title: Select
+description: A dropdown select component with composable sub-components.
+links:
+  - label: Radix UI Select
+    url: https://www.radix-ui.com/primitives/docs/components/select
+---
+
+import { PreviewCode } from "@/components/docs/preview-code.server";
+import {
+  SelectSample,
+  SelectDisabledItemsSample,
+  SelectPlaceholderSample,
+  SelectDisabledSample,
+  SelectGroupsSample,
+  SelectVariantsSample,
+  SelectSizesSample,
+  SelectScrollableSample,
+} from "@/components/docs/samples/select";
+
+<Callout>
+  This is a **standalone component** that does not depend on the assistant-ui runtime. Use it anywhere in your application.
+</Callout>
+
+<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.
+
+<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.
+
+<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">
+  <SelectScrollableSample />
+</PreviewCode>
+
+### Groups
+
+Use the composable API for grouped options:
+
+<PreviewCode file="components/docs/samples/select" name="SelectGroupsSample">
+  <SelectGroupsSample />
+</PreviewCode>
+
+### Disabled Items
+
+<PreviewCode file="components/docs/samples/select" name="SelectDisabledItemsSample">
+  <SelectDisabledItemsSample />
+</PreviewCode>
+
+### With Placeholder
+
+<PreviewCode file="components/docs/samples/select" name="SelectPlaceholderSample">
+  <SelectPlaceholderSample />
+</PreviewCode>
+
+### Disabled Select
+
+<PreviewCode file="components/docs/samples/select" name="SelectDisabledSample">
+  <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. |
+
+### 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

@@ -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 />
@@ -48,9 +47,9 @@ const AssistantMessage: FC = () => {
 Use the `variant` prop to change the visual style.
 
 ```tsx
-<Source variant="default" /> // Default
-<Source variant="outline" /> // Border only
+<Source variant="outline" /> // Border (default)
 <Source variant="ghost" />   // No background
+<Source variant="muted" />   // Solid background
 ```
 
 ## Sizes
@@ -63,7 +62,9 @@ Use the `size` prop to change the size.
 <Source size="lg" />      // Large
 ```
 
-## Composable API
+## API Reference
+
+### Composable API
 
 The component exports composable sub-components:
 
@@ -82,6 +83,6 @@ import { Source, SourceIcon, SourceTitle } from "@/components/assistant-ui/sourc
 | `SourceIcon` | Favicon with domain initial fallback |
 | `SourceTitle` | Truncated title text |
 
-## Related
+## Related Components
 
 - [PartGrouping](/docs/ui/part-grouping) - Group sources by parentId