@assistant-ui/mcp-docs-server 0.1.24 → 0.1.25

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

@@ -0,0 +1,210 @@
+---
+title: Quote
+description: Let users select and quote text from messages with a floating toolbar, composer preview, and inline quote display.
+---
+
+import { QuoteSample } from "@/components/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/react-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/react-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

@@ -27,18 +27,18 @@ Pass the `Reasoning` and `ReasoningGroup` components to the `MessagePrimitive.Pa
 
 ```tsx title="/app/components/assistant-ui/thread.tsx" {2,10-11}
 import { MessagePrimitive } from "@assistant-ui/react";
-import { Reasoning, ReasoningGroup } from "@/components/assistant-ui/reasoning";
+import { Reasoning } from "@/components/assistant-ui/reasoning";
 
 const AssistantMessage: FC = () => {
   return (
     <MessagePrimitive.Root className="...">
       <div className="...">
-        <MessagePrimitive.Parts
-          components={{
-            Reasoning: Reasoning,
-            ReasoningGroup: ReasoningGroup
+        <MessagePrimitive.Parts>
+          {({ part }) => {
+            if (part.type === "reasoning") return <Reasoning {...part} />;
+            return null;
           }}
-        />
+        </MessagePrimitive.Parts>
       </div>
       <AssistantActionBar />
       <BranchPicker className="..." />
@@ -67,14 +67,15 @@ Use the `variant` prop on `Reasoning.Root` to change the visual style:
 
 ```tsx
 <Reasoning.Root variant="outline">...</Reasoning.Root>
+<Reasoning.Root variant="ghost">...</Reasoning.Root>
 <Reasoning.Root variant="muted">...</Reasoning.Root>
 ```
 
-| Variant   | Description                        |
-| --------- | ---------------------------------- |
-| `default` | No additional styling              |
-| `muted`   | Muted background                   |
-| `outline` | Rounded border                     |
+| Variant   | Description                                  |
+| --------- | -------------------------------------------- |
+| `outline` | Rounded border (default)                     |
+| `ghost`   | No additional styling                        |
+| `muted`   | Muted background                             |
 
 ## ReasoningGroup
 

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

@@ -29,11 +29,12 @@ import { Sources } from "@/components/assistant-ui/sources";
 const AssistantMessage: FC = () => {
   return (
     <MessagePrimitive.Root className="...">
-      <MessagePrimitive.Parts
-        components={{
-          Source: Sources,
+      <MessagePrimitive.Parts>
+        {({ part }) => {
+          if (part.type === "source") return <Sources {...part} />;
+          return null;
         }}
-      />
+      </MessagePrimitive.Parts>
     </MessagePrimitive.Root>
   );
 };
@@ -44,12 +45,17 @@ const AssistantMessage: FC = () => {
 
 ## Variants
 
-Use the `variant` prop to change the visual style.
+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 background
+<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
@@ -64,25 +70,90 @@ Use the `size` prop to change the size.
 
 ## API Reference
 
-### Composable API
+### `Sources`
 
-The component exports composable sub-components:
+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` | Render as a child element using Radix Slot |
+| `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 |
+| `className` | `string` | — | Additional CSS classes applied to the `<img>` or fallback `<span>` |
+
+### `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" className="gap-2">
+<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>
 ```
 
-| Component | Description |
-|-----------|-------------|
-| `Source` | Root container, renders as `<a>` |
-| `SourceIcon` | Favicon with domain initial fallback |
-| `SourceTitle` | Truncated title text |
-
 ## Related Components
 
 - [PartGrouping](/docs/ui/part-grouping) - Group sources by parentId

package/.docs/raw/docs/ui/streamdown.mdx

@@ -31,7 +31,9 @@ For additional features, install the optional plugins:
 import { StreamdownTextPrimitive } from "@assistant-ui/react-streamdown";
 
 // Inside a MessagePrimitive.Parts component
-<MessagePrimitive.Parts components={{ Text: StreamdownText }} />
+<MessagePrimitive.Parts>
+  {({ part }) => part.type === "text" ? <StreamdownText {...part} /> : null}
+</MessagePrimitive.Parts>
 
 // Where StreamdownText is:
 const StreamdownText = () => <StreamdownTextPrimitive />;
@@ -190,12 +192,17 @@ Configure how incomplete markdown syntax is handled during streaming:
 ```tsx
 <StreamdownTextPrimitive
   remend={{
-    links: true,      // Complete incomplete links
-    images: true,     // Handle incomplete images
-    bold: true,       // Complete **text → **text**
-    italic: true,     // Complete *text → *text*
-    inlineCode: true, // Complete `code → `code`
-    katex: true,      // Complete $$equation → $$equation$$
+    links: true,           // Complete incomplete links
+    images: true,          // Handle incomplete images
+    linkMode: "protocol",  // How to handle incomplete links: 'protocol' or 'text-only'
+    bold: true,            // Complete **text → **text**
+    italic: true,          // Complete *text → *text*
+    boldItalic: true,      // Complete ***text → ***text***
+    inlineCode: true,      // Complete `code → `code`
+    strikethrough: true,   // Complete ~~text → ~~text~~
+    katex: true,           // Complete $$equation → $$equation$$
+    setextHeadings: true,  // Handle incomplete setext headings
+    handlers: [],          // Custom handlers for incomplete markdown completion
   }}
 />
 ```
@@ -229,6 +236,8 @@ Restrict allowed URLs for links and images. This overrides streamdown's default
     allowedProtocols: ["https", "mailto"],
     // Disable base64 data images
     allowDataImages: false,
+    // Default origin for relative URLs
+    defaultOrigin: "https://example.com",
     // CSS class for blocked elements
     blockedLinkClass: "blocked-link",
     blockedImageClass: "blocked-image",

package/.docs/raw/docs/ui/thread-list.mdx

@@ -89,19 +89,17 @@ import { ThreadListPrimitive, ThreadListItemPrimitive } from "@assistant-ui/reac
 
 <ThreadListPrimitive.Root>
   <ThreadListPrimitive.New />
-  <ThreadListPrimitive.Items
-    components={{
-      ThreadListItem: () => (
-        <ThreadListItemPrimitive.Root>
-          <ThreadListItemPrimitive.Trigger>
-            <ThreadListItemPrimitive.Title />
-          </ThreadListItemPrimitive.Trigger>
-          <ThreadListItemPrimitive.Archive />
-          <ThreadListItemPrimitive.Delete />
-        </ThreadListItemPrimitive.Root>
-      ),
-    }}
-  />
+  <ThreadListPrimitive.Items>
+    {() => (
+      <ThreadListItemPrimitive.Root>
+        <ThreadListItemPrimitive.Trigger>
+          <ThreadListItemPrimitive.Title />
+        </ThreadListItemPrimitive.Trigger>
+        <ThreadListItemPrimitive.Archive />
+        <ThreadListItemPrimitive.Delete />
+      </ThreadListItemPrimitive.Root>
+    )}
+  </ThreadListPrimitive.Items>
 </ThreadListPrimitive.Root>
 ```
 

package/.docs/raw/docs/ui/thread.mdx

@@ -16,27 +16,27 @@ attachments, and conditional UI states. Fully customizable and composable.
 The `Thread` component is built with the following primitives:
 
 ```tsx
-import { ThreadPrimitive, SelectionToolbarPrimitive, AuiIf } from "@assistant-ui/react";
+import { ThreadPrimitive, AuiIf } from "@assistant-ui/react";
 
 <ThreadPrimitive.Root>
   <ThreadPrimitive.Viewport>
-    <AuiIf condition={(s) => s.thread.isEmpty} />
-    <ThreadPrimitive.Messages
-      components={{
-        EditComposer,
-        UserMessage,
-        AssistantMessage,
+    <AuiIf condition={(s) => s.thread.isEmpty}>
+      <ThreadWelcome />
+      {/* ThreadWelcome includes ThreadPrimitive.Suggestions */}
+    </AuiIf>
+
+    <ThreadPrimitive.Messages>
+      {({ message }) => {
+        if (message.role === "user") return <UserMessage />;
+        return <AssistantMessage />;
       }}
-    />
-    <ThreadPrimitive.ScrollToBottom />
-  </ThreadPrimitive.Viewport>
-  <ThreadPrimitive.Suggestions />
-  <AuiIf condition={...} />
+    </ThreadPrimitive.Messages>
 
-  {/* Floating toolbar — appears when text is selected in a message */}
-  <SelectionToolbarPrimitive.Root>
-    <SelectionToolbarPrimitive.Quote>Quote</SelectionToolbarPrimitive.Quote>
-  </SelectionToolbarPrimitive.Root>
+    <ThreadPrimitive.ViewportFooter>
+      <ThreadPrimitive.ScrollToBottom />
+      <Composer />
+    </ThreadPrimitive.ViewportFooter>
+  </ThreadPrimitive.Viewport>
 </ThreadPrimitive.Root>
 ```
 
@@ -118,11 +118,9 @@ const aui = useAui({
 });
 
 // Display suggestions in your thread component
-<ThreadPrimitive.Suggestions
-  components={{
-    Suggestion: SuggestionItem,
-  }}
-/>
+<ThreadPrimitive.Suggestions>
+  {() => <SuggestionItem />}
+</ThreadPrimitive.Suggestions>
 
 // Custom suggestion item
 const SuggestionItem = () => (
@@ -196,13 +194,12 @@ This primitive renders a `<div>` element unless `asChild` is set.
 Renders all messages in the thread. This primitive renders a separate component for each message.
 
 ```tsx
-<ThreadPrimitive.Messages
-  components={{
-    UserMessage: UserMessage,
-    EditComposer: EditComposer,
-    AssistantMessage: AssistantMessage,
+<ThreadPrimitive.Messages>
+  {({ message }) => {
+    if (message.role === "user") return <UserMessage />;
+    return <AssistantMessage />;
   }}
-/>
+</ThreadPrimitive.Messages>
 ```
 
 <ParametersTable
@@ -325,11 +322,9 @@ This primitive renders a `<button>` element unless `asChild` is set.
 Renders all configured suggestions. Configure suggestions using the `Suggestions()` API in your runtime provider.
 
 ```tsx
-<ThreadPrimitive.Suggestions
-  components={{
-    Suggestion: CustomSuggestionComponent,
-  }}
-/>
+<ThreadPrimitive.Suggestions>
+  {() => <CustomSuggestionComponent />}
+</ThreadPrimitive.Suggestions>
 ```
 
 <ParametersTable
@@ -388,4 +383,4 @@ The condition function receives an `AssistantState` object with access to `threa
 
 - [ThreadList](/docs/ui/thread-list) - List of threads, with or without sidebar
 - [Quoting guide](/docs/guides/quoting) - Quote selected text from messages
-- [SelectionToolbarPrimitive](/docs/reference/primitives/selection-toolbar) - Floating toolbar API reference
+- [SelectionToolbarPrimitive](/docs/api-reference/primitives/selection-toolbar) - Floating toolbar API reference

package/.docs/raw/docs/ui/tool-fallback.mdx

@@ -36,13 +36,12 @@ import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
 const AssistantMessage = () => {
   return (
     <MessagePrimitive.Root>
-      <MessagePrimitive.Parts
-        components={{
-          tools: { 
-            Fallback: ToolFallback 
-          },
+      <MessagePrimitive.Parts>
+        {({ part }) => {
+          if (part.type === "tool-call") return <ToolFallback {...part} />;
+          return null;
         }}
-      />
+      </MessagePrimitive.Parts>
     </MessagePrimitive.Root>
   );
 };

package/.docs/raw/docs/ui/tool-group.mdx

@@ -36,11 +36,12 @@ import { ToolGroup } from "@/components/assistant-ui/tool-group";
 const AssistantMessage = () => {
   return (
     <MessagePrimitive.Root>
-      <MessagePrimitive.Parts
-        components={{
-          ToolGroup,
+      <MessagePrimitive.Parts>
+        {({ part }) => {
+          if (part.type === "tool-call") return <ToolGroup {...part} />;
+          return null;
         }}
-      />
+      </MessagePrimitive.Parts>
     </MessagePrimitive.Root>
   );
 };
@@ -60,8 +61,8 @@ Use the `variant` prop on `ToolGroup.Root` to change the visual style:
 
 | Variant   | Description                        |
 | --------- | ---------------------------------- |
-| `default` | No additional styling              |
-| `outline` | Rounded border                     |
+| `outline` | Rounded border (default)           |
+| `ghost`   | No additional styling              |
 | `muted`   | Muted background with border       |
 
 ## Examples
@@ -137,8 +138,8 @@ import {
   parameters={[
     {
       name: "variant",
-      type: '"default" | "outline" | "muted"',
-      default: '"default"',
+      type: '"outline" | "ghost" | "muted"',
+      default: '"outline"',
       description: "Visual variant of the tool group container.",
     },
     {