@assistant-ui/mcp-docs-server 0.2.3 → 0.3.1

package/.docs/raw/docs/ui/quote.mdx

@@ -1,211 +0,0 @@
----
-title: Quote
-description: Let users select and quote text from messages with a floating toolbar, composer preview, and inline quote display.
-platforms: ["react"]
----
-
-import { QuoteSample } from "@/components/pages/docs/samples/quote";
-
-<QuoteSample />
-
-## Getting Started
-
-<Steps>
-  <Step>
-
-### Add `quote`
-
-<InstallCommand shadcn={["quote"]} />
-
-This adds a `/components/assistant-ui/quote.tsx` file with three components: `QuoteBlock`, `SelectionToolbar`, and `ComposerQuotePreview`.
-
-  </Step>
-  <Step>
-
-### Display Quotes in User Messages
-
-Add `MessagePrimitive.Quote` above `MessagePrimitive.Parts` in your user message:
-
-```tsx title="components/assistant-ui/thread.tsx" {1,8-10}
-import { QuoteBlock } from "@/components/assistant-ui/quote";
-
-const UserMessage = () => {
-  return (
-    <MessagePrimitive.Root>
-      <MessagePrimitive.Quote>
-        {(quote) => <QuoteBlock {...quote} />}
-      </MessagePrimitive.Quote>
-      <MessagePrimitive.Parts />
-    </MessagePrimitive.Root>
-  );
-};
-```
-
-  </Step>
-  <Step>
-
-### Add the Floating Selection Toolbar
-
-Render `SelectionToolbar` inside `ThreadPrimitive.Root`. It portals to the document body and appears near the user's text selection.
-
-```tsx title="components/assistant-ui/thread.tsx" {1,11}
-import { SelectionToolbar } from "@/components/assistant-ui/quote";
-
-const Thread = () => {
-  return (
-    <ThreadPrimitive.Root>
-      <ThreadPrimitive.Viewport>
-        <ThreadPrimitive.Messages>
-          {({ message }) => { ... }}
-        </ThreadPrimitive.Messages>
-        ...
-      </ThreadPrimitive.Viewport>
-
-      <SelectionToolbar />
-    </ThreadPrimitive.Root>
-  );
-};
-```
-
-  </Step>
-  <Step>
-
-### Show Quote Preview in Composer
-
-Add `ComposerQuotePreview` inside your composer. It only renders when a quote is set.
-
-```tsx title="components/assistant-ui/thread.tsx" {1,6}
-import { ComposerQuotePreview } from "@/components/assistant-ui/quote";
-
-const Composer = () => {
-  return (
-    <ComposerPrimitive.Root>
-      <ComposerQuotePreview />
-      <ComposerPrimitive.Input placeholder="Send a message..." />
-      <ComposerPrimitive.Send />
-    </ComposerPrimitive.Root>
-  );
-};
-```
-
-  </Step>
-  <Step>
-
-### Forward Quote Context to the LLM
-
-Quote data is stored in message metadata, **not** in message content. Use `injectQuoteContext` in your route handler so the LLM sees the quoted text:
-
-```typescript title="app/api/chat/route.ts" {2,9}
-import { convertToModelMessages, streamText } from "ai";
-import { injectQuoteContext } from "@assistant-ui/ai-sdk";
-
-export async function POST(req: Request) {
-  const { messages } = await req.json();
-
-  const result = streamText({
-    model: myModel,
-    messages: await convertToModelMessages(injectQuoteContext(messages)),
-  });
-
-  return result.toUIMessageStreamResponse();
-}
-```
-
-`injectQuoteContext` prepends the quoted text as a markdown `>` blockquote to the message parts so the LLM receives the context the user is referring to.
-
-<Callout>
-  For alternative backend approaches (Claude SDK citation source, OpenAI message context), see the [Quoting guide](/docs/guides/quoting#backend-handling).
-</Callout>
-
-  </Step>
-</Steps>
-
-## Customization
-
-All three components expose sub-components for full control over styling:
-
-```tsx
-// Custom QuoteBlock
-<QuoteBlock.Root className="my-custom-class">
-  <QuoteBlock.Icon />
-  <QuoteBlock.Text>{text}</QuoteBlock.Text>
-</QuoteBlock.Root>
-
-// Custom SelectionToolbar
-<SelectionToolbar.Root>
-  <SelectionToolbar.Quote>Reply with quote</SelectionToolbar.Quote>
-</SelectionToolbar.Root>
-
-// Custom ComposerQuotePreview
-<ComposerQuotePreview.Root>
-  <ComposerQuotePreview.Icon />
-  <ComposerQuotePreview.Text />
-  <ComposerQuotePreview.Dismiss />
-</ComposerQuotePreview.Root>
-```
-
-## API Reference
-
-### `QuoteBlock`
-
-Renders quoted text in user messages. Pass to `MessagePrimitive.Parts` as `components.Quote`.
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `text` | `string` | The quoted text |
-| `messageId` | `string` | ID of the source message |
-
-**Sub-components:** `QuoteBlock.Root`, `QuoteBlock.Icon`, `QuoteBlock.Text`
-
-### `SelectionToolbar`
-
-Floating toolbar that appears when text is selected within a message. Renders as a portal positioned above the selection.
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `className` | `string` | Additional class names |
-
-**Sub-components:** `SelectionToolbar.Root`, `SelectionToolbar.Quote`
-
-### `ComposerQuotePreview`
-
-Quote preview inside the composer. Only renders when a quote is set.
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `className` | `string` | Additional class names |
-
-**Sub-components:** `ComposerQuotePreview.Root`, `ComposerQuotePreview.Icon`, `ComposerQuotePreview.Text`, `ComposerQuotePreview.Dismiss`
-
-### `injectQuoteContext`
-
-```typescript
-import { injectQuoteContext } from "@assistant-ui/ai-sdk";
-
-injectQuoteContext(messages: UIMessage[]): UIMessage[]
-```
-
-Extracts `metadata.custom.quote` from each message and prepends the quoted text as a `> blockquote` text part. Use before `convertToModelMessages` in your route handler. For alternative backend approaches, see the [Quoting guide](/docs/guides/quoting#backend-handling).
-
-### `useMessageQuote`
-
-```tsx
-import { useMessageQuote } from "@assistant-ui/react";
-
-const quote: QuoteInfo | undefined = useMessageQuote();
-```
-
-Returns the quote attached to the current message, or `undefined`. Useful for building custom quote displays without `QuoteBlock`. For a usage example, see the [Quoting guide](/docs/guides/quoting#reading-quote-data).
-
-### `ComposerRuntime.setQuote`
-
-```tsx
-setQuote(quote: QuoteInfo | undefined): void
-```
-
-Set or clear the quote on the composer programmatically. The quote is automatically cleared when the message is sent. For a usage example, see the [Quoting guide](/docs/guides/quoting#programmatic-api).
-
-## Related
-
-- [Quoting guide](/docs/guides/quoting): Backend handling, programmatic API, data shape, and design notes
-- [Thread](/docs/ui/thread): Main chat container

package/.docs/raw/docs/ui/reasoning.mdx

@@ -1,214 +0,0 @@
----
-title: Reasoning
-description: Collapsible UI for displaying AI reasoning and thinking messages.
-platforms: ["react"]
----
-
-import { ReasoningSample, ReasoningStreamingSample } from "@/components/pages/docs/samples/reasoning";
-import { ReasoningCompletedSample } from "@/components/pages/docs/samples/reasoning/completed-with-duration";
-import { ReasoningLongSample } from "@/components/pages/docs/samples/reasoning/long-reasoning";
-import { ReasoningVariantsSample } from "@/components/pages/docs/samples/reasoning/variant-showcase";
-
-<ReasoningSample />
-
-## Getting Started
-
-<Steps>
-  <Step>
-
-### Add `reasoning`
-
-<InstallCommand shadcn={["reasoning"]} />
-
-This adds a `/components/assistant-ui/reasoning.tsx` file to your project.
-
-  </Step>
-  <Step>
-
-### Use in your application
-
-Previously, reasoning parts were rendered via `components.Reasoning` and grouped via `components.ReasoningGroup` on `MessagePrimitive.Parts`. Both are deprecated; `MessagePrimitive.GroupedParts` is the supported replacement, and the highlighted lines below show the new pieces.
-
-Render reasoning parts through `MessagePrimitive.GroupedParts`. Group consecutive reasoning parts with `"group-reasoning"`, then compose `ReasoningRoot`, `ReasoningTrigger`, `ReasoningContent`, and `ReasoningText` around the grouped children.
-
-While reasoning is streaming, `part.status.type === "running"`. Pass that to `streaming` so the accordion auto-opens during streaming with a bottom-pinned live preview of the newest tokens, and permanently defers to the first manual toggle. `streaming` only holds the disclosure open; when it ends the accordion returns to `defaultOpen`, which is `false` by default and therefore collapses. Pass `defaultOpen` to keep reasoning expanded once the run finishes.
-
-```tsx title="/app/components/assistant-ui/thread.tsx"
-import { MessagePrimitive, groupPartByType } from "@assistant-ui/react";
-import { MarkdownText } from "@/components/assistant-ui/markdown-text";
-import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
-import {
-  Reasoning,
-  ReasoningContent,
-  ReasoningRoot,
-  ReasoningText,
-  ReasoningTrigger,
-} from "@/components/assistant-ui/reasoning"; // [!code ++]
-
-const AssistantMessage: FC = () => {
-  return (
-    <MessagePrimitive.Root className="...">
-      <div className="...">
-        <MessagePrimitive.GroupedParts // [!code ++]
-          groupBy={groupPartByType({ // [!code ++]
-            reasoning: ["group-reasoning"], // [!code ++]
-          })} // [!code ++]
-        > // [!code ++]
-          {({ part, children }) => { // [!code ++]
-            switch (part.type) { // [!code ++]
-              case "group-reasoning": { // [!code ++]
-                const running = part.status.type === "running"; // [!code ++]
-                return ( // [!code ++]
-                  <ReasoningRoot streaming={running}> // [!code ++]
-                    <ReasoningTrigger active={running} /> // [!code ++]
-                    <ReasoningContent aria-busy={running}> // [!code ++]
-                      <ReasoningText>{children}</ReasoningText> // [!code ++]
-                    </ReasoningContent> // [!code ++]
-                  </ReasoningRoot> // [!code ++]
-                ); // [!code ++]
-              } // [!code ++]
-              case "text": // [!code ++]
-                return <MarkdownText />; // [!code ++]
-              case "reasoning": // [!code ++]
-                return <Reasoning {...part} />; // [!code ++]
-              case "tool-call": // [!code ++]
-                return part.toolUI ?? <ToolFallback {...part} />; // [!code ++]
-              default: // [!code ++]
-                return null; // [!code ++]
-            } // [!code ++]
-          }} // [!code ++]
-        </MessagePrimitive.GroupedParts> // [!code ++]
-      </div>
-      <AssistantActionBar />
-      <BranchPicker className="..." />
-    </MessagePrimitive.Root>
-  );
-};
-```
-
-`GroupedParts` calls your render function for both group nodes and leaf parts. The `case "group-reasoning"` branch renders the collapsible shell and must render `{children}`; that is where the individual reasoning parts get placed. The `case "reasoning"` branch renders each individual reasoning part inside that shell and must not render `children`. Removing either case breaks rendering.
-
-  </Step>
-</Steps>
-
-## How It Works
-
-The component consists of two parts:
-
-1. `Reasoning`: Renders individual reasoning message part content (with markdown support)
-2. Composable group pieces (`ReasoningRoot`, `ReasoningTrigger`, `ReasoningContent`, `ReasoningText`): Wrap grouped reasoning children in a collapsible container
-
-Consecutive reasoning parts are grouped by `MessagePrimitive.GroupedParts`. Use the composable API below to control the grouped layout.
-
-> When using the composable API, `ReasoningText` is a plain container. Add `<MarkdownText />` for markdown rendering.
-
-## Variants
-
-Use the `variant` prop on `ReasoningRoot` to change the visual style:
-
-```tsx
-<ReasoningRoot variant="outline">...</ReasoningRoot>
-<ReasoningRoot variant="ghost">...</ReasoningRoot>
-<ReasoningRoot variant="muted">...</ReasoningRoot>
-```
-
-| Variant   | Description                                  |
-| --------- | -------------------------------------------- |
-| `outline` | Rounded border (default)                     |
-| `ghost`   | No additional styling                        |
-| `muted`   | Muted background                             |
-
-## Examples
-
-### Variant Showcase
-
-Each variant renders in its closed and open state side by side. Select a trigger to toggle that disclosure.
-
-<ReasoningVariantsSample />
-
-### Streaming Reasoning
-
-The response shows partial reasoning and stays active. Select Stop to cancel the response and return the composer to its idle state.
-
-<ReasoningStreamingSample />
-
-### Completed with Duration
-
-Set `duration` in seconds on `ReasoningTrigger` to show the completed reasoning time in the trigger label. The disclosure starts closed because `defaultOpen` is `false`. Select the trigger to open or close the reasoning text.
-
-<ReasoningCompletedSample />
-
-### Long Reasoning
-
-The `defaultOpen` prop opens the disclosure when the page loads. `ReasoningText` holds long reasoning in a `max-h-64` scroll area. Scroll the text. Then collapse and expand the disclosure.
-
-<ReasoningLongSample />
-
-## Legacy ReasoningGroup
-
-`ReasoningGroup` is kept for existing code that still uses the deprecated `components.ReasoningGroup` prop on `MessagePrimitive.Parts`. New code should use `MessagePrimitive.GroupedParts` and compose the root/trigger/content pieces directly.
-
-```tsx
-import { ReasoningGroup } from "@/components/assistant-ui/reasoning";
-
-const ReasoningGroupImpl: ReasoningGroupComponent = ({
-  children,
-  startIndex,
-  endIndex,
-}) => {
-  const isReasoningStreaming = useAuiState((s) => {
-    if (s.message.status?.type !== "running") return false;
-    const lastIndex = s.message.parts.length - 1;
-    if (lastIndex < 0) return false;
-    const lastType = s.message.parts[lastIndex]?.type;
-    if (lastType !== "reasoning") return false;
-    return lastIndex >= startIndex && lastIndex <= endIndex;
-  });
-
-  return (
-    <ReasoningRoot streaming={isReasoningStreaming}>
-      <ReasoningTrigger active={isReasoningStreaming} />
-      <ReasoningContent aria-busy={isReasoningStreaming}>
-        <ReasoningText>{children}</ReasoningText>
-      </ReasoningContent>
-    </ReasoningRoot>
-  );
-};
-```
-
-
-## API Reference
-
-### Composable API
-
-All sub-components are exported for custom layouts:
-
-| Component             | Description                                |
-| --------------------- | ------------------------------------------ |
-| `ReasoningRoot`      | Collapsible container with scroll lock     |
-| `ReasoningTrigger`   | Button with icon, label, and shimmer       |
-| `ReasoningContent`   | Animated collapsible content wrapper       |
-| `ReasoningText`      | Text wrapper with slide/fade animation     |
-| `ReasoningFade`      | Gradient fade overlay at bottom            |
-
-```tsx
-import {
-  ReasoningRoot,
-  ReasoningTrigger,
-  ReasoningContent,
-  ReasoningText,
-  ReasoningFade,
-} from "@/components/assistant-ui/reasoning";
-
-<ReasoningRoot variant="muted">
-  <ReasoningTrigger active={isStreaming} />
-  <ReasoningContent>
-    <ReasoningText>{children}</ReasoningText>
-  </ReasoningContent>
-</ReasoningRoot>
-```
-
-## Related Components
-
-- [ToolGroup](/docs/ui/tool-group) - Similar grouping pattern for tool calls
-- [PartGrouping](/docs/ui/part-grouping) - Advanced grouping options for message parts

package/.docs/raw/docs/ui/scrollbar.mdx

@@ -1,77 +0,0 @@
----
-title: Custom Scrollbar
-description: Replace the default scrollbar with a custom Radix UI scroll area.
-platforms: ["react"]
----
-
-import { ScrollbarSample } from "@/components/pages/docs/samples/scrollbar";
-
-<ScrollbarSample />
-
-If you want to show a custom scrollbar UI of the `ThreadPrimitive.Viewport` in place of the system default, you can integrate `radix-ui`'s Scroll Area.
-An example implementation of this is [shadcn/ui's Scroll Area](https://ui.shadcn.com/docs/components/scroll-area).
-
-<Steps>
-
-<Step>
-
-### 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`:
-
-```css title="@/app/globals.css"
-.thread-viewport > [data-radix-scroll-area-content] {
-  @apply flex flex-col items-center self-stretch bg-inherit;
-}
-```
-
-</Step>
-
-<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:
-
-```tsx {1-2,6,8,12-13,15}
-import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
-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>
-  );
-};
-```
-
-</Step>
-
-</Steps>
-
-## Related Components
-
-- [Thread](/docs/ui/thread) - The main chat interface where the scrollbar is used

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

@@ -1,186 +0,0 @@
----
-title: Sources
-description: Display URL sources with favicon, title, and external link.
-platforms: ["react"]
----
-
-import { SourcesSample } from "@/components/pages/docs/samples/sources";
-import { SourcesUrlSample } from "@/components/pages/docs/samples/sources/url-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
-```
-
-## Examples
-
-### URL Sources
-
-One source shows its supplied title. The other source uses its domain because its title is absent.
-
-<SourcesUrlSample />
-
-## 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