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

package/.docs/raw/docs/(docs)/guides/quoting.mdx

@@ -0,0 +1,327 @@
+---
+title: Quote Selected Text
+description: Let users select and quote text from messages, similar to Claude's quoting experience.
+---
+
+Allow users to select text in assistant messages and reply with a quote reference — just like Claude, ChatGPT, and other modern AI interfaces.
+
+## How It Works
+
+1. User selects text in a message
+2. A floating toolbar appears near the selection with a **Quote** button
+3. User clicks it — a quote preview appears in the composer
+4. User types their reply and sends
+5. The sent message displays the quoted text above the user's reply
+
+Quote data is stored in `metadata.custom.quote` and is **not** injected into message content. Your backend decides how to present the quoted context to the LLM.
+
+## Quick Start
+
+### 1. Add the Floating Selection Toolbar
+
+Place `SelectionToolbarPrimitive` inside your `ThreadPrimitive.Root`. It renders a floating toolbar near the user's text selection — only when text is selected within a message.
+
+```tsx {1,13-20}
+import { SelectionToolbarPrimitive, ThreadPrimitive } from "@assistant-ui/react";
+import { QuoteIcon } from "lucide-react";
+
+const Thread = () => {
+  return (
+    <ThreadPrimitive.Root>
+      <ThreadPrimitive.Viewport>
+        <ThreadPrimitive.Messages components={{ ... }} />
+        ...
+      </ThreadPrimitive.Viewport>
+
+      {/* Floating toolbar — appears on text selection */}
+      <SelectionToolbarPrimitive.Root className="flex items-center gap-1 rounded-lg border bg-popover px-1 py-1 shadow-md">
+        <SelectionToolbarPrimitive.Quote className="flex items-center gap-1.5 rounded-md px-2.5 py-1 text-sm hover:bg-accent">
+          <QuoteIcon className="size-3.5" />
+          Quote
+        </SelectionToolbarPrimitive.Quote>
+      </SelectionToolbarPrimitive.Root>
+    </ThreadPrimitive.Root>
+  );
+};
+```
+
+The `Root` component:
+- Listens for `mouseup` and `keyup` events to detect text selections
+- Validates the selection is within a single message (cross-message selections are ignored)
+- Renders a portal positioned above the selection
+- Prevents `mousedown` from clearing the selection when clicking the toolbar
+- Hides automatically on scroll or when the selection is cleared
+
+### 2. Show Quote Preview in Composer
+
+Add `ComposerPrimitive.Quote` inside the composer to show what's being quoted:
+
+```tsx {1,8-13}
+import { ComposerPrimitive } from "@assistant-ui/react";
+
+const Composer = () => {
+  return (
+    <ComposerPrimitive.Root>
+      {/* Quote preview — only renders when a quote is set */}
+      <ComposerPrimitive.Quote className="flex items-start gap-2 border-l-4 border-primary/40 bg-muted/50 px-3 py-2 text-sm">
+        <ComposerPrimitive.QuoteText className="line-clamp-2 flex-1 italic text-muted-foreground" />
+        <ComposerPrimitive.QuoteDismiss>
+          ×
+        </ComposerPrimitive.QuoteDismiss>
+      </ComposerPrimitive.Quote>
+
+      <ComposerPrimitive.Input placeholder="Send a message..." />
+      <ComposerPrimitive.Send />
+    </ComposerPrimitive.Root>
+  );
+};
+```
+
+### 3. Display Quotes in Sent Messages
+
+Use `useMessageQuote()` to render quoted text in user messages:
+
+```tsx {1,4-5,11}
+import { MessagePrimitive, useMessageQuote } from "@assistant-ui/react";
+
+const QuoteBlock = () => {
+  const quote = useMessageQuote();
+  if (!quote) return null;
+
+  return (
+    <div className="mb-1 border-l-4 border-primary/40 pl-3 text-xs italic text-muted-foreground">
+      {quote.text}
+    </div>
+  );
+};
+
+const UserMessage = () => {
+  return (
+    <MessagePrimitive.Root>
+      <QuoteBlock />
+      <MessagePrimitive.Parts />
+    </MessagePrimitive.Root>
+  );
+};
+```
+
+## Backend Handling
+
+The quote is stored in message metadata — **not** in message content. This gives your backend full control over how to present quoted context to the LLM.
+
+### Data Shape
+
+```typescript
+type QuoteInfo = {
+  readonly text: string;       // selected plain text
+  readonly messageId: string;  // source message ID
+};
+
+// Stored at: message.metadata.custom.quote
+```
+
+### Example: Prepend as Markdown Blockquote
+
+A simple approach is to prepend the quoted text as a `>` blockquote before converting to model messages:
+
+```typescript title="app/api/chat/route.ts" {1,9}
+import { convertToModelMessages, streamText } from "ai";
+import type { UIMessage } from "ai";
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+
+  const result = streamText({
+    model: myModel,
+    messages: await convertToModelMessages(injectQuoteContext(messages)),
+  });
+
+  return result.toUIMessageStreamResponse();
+}
+
+function injectQuoteContext(messages: UIMessage[]): UIMessage[] {
+  return messages.map((msg) => {
+    const quote = (msg.metadata as Record<string, unknown>)?.custom;
+    if (
+      !quote ||
+      typeof quote !== "object" ||
+      !("quote" in (quote as Record<string, unknown>))
+    )
+      return msg;
+
+    const q = (quote as Record<string, unknown>).quote;
+    if (
+      !q ||
+      typeof q !== "object" ||
+      !("text" in (q as Record<string, unknown>))
+    )
+      return msg;
+
+    const text = (q as { text: unknown }).text;
+    if (typeof text !== "string") return msg;
+
+    return {
+      ...msg,
+      parts: [{ type: "text" as const, text: `> ${text}\n\n` }, ...msg.parts],
+    };
+  });
+}
+```
+
+### Example: Claude-Style Citation Source
+
+For Claude's API, you can pass the quoted text as a citation source. This enables Claude to produce citations that reference the quoted text:
+
+```typescript title="app/api/chat/route.ts"
+import Anthropic from "@anthropic-ai/sdk";
+
+const client = new Anthropic();
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+
+  // Transform messages: extract quotes into Claude source blocks
+  const claudeMessages = messages.map((msg) => {
+    const quote = msg.metadata?.custom?.quote;
+    if (!quote?.text) {
+      return { role: msg.role, content: extractText(msg) };
+    }
+
+    return {
+      role: "user",
+      content: [
+        {
+          type: "text",
+          text: quote.text,
+          cache_control: { type: "ephemeral" },
+          citations: { enabled: true },
+        },
+        {
+          type: "text",
+          text: extractText(msg),
+        },
+      ],
+    };
+  });
+
+  const response = await client.messages.create({
+    model: "claude-sonnet-4-5-20250929",
+    max_tokens: 1024,
+    messages: claudeMessages,
+  });
+
+  // ... stream response back
+}
+```
+
+### Example: OpenAI-Style System Context
+
+For OpenAI's API, inject the quote as additional context in the user message:
+
+```typescript title="app/api/chat/route.ts"
+function injectQuoteForOpenAI(messages) {
+  return messages.map((msg) => {
+    const quote = msg.metadata?.custom?.quote;
+    if (!quote?.text || msg.role !== "user") return msg;
+
+    return {
+      ...msg,
+      content: `[Referring to: "${quote.text}"]\n\n${msg.content}`,
+    };
+  });
+}
+```
+
+## Programmatic API
+
+You can set or clear quotes programmatically via the composer runtime:
+
+```tsx
+import { useAui } from "@assistant-ui/react";
+
+function MyComponent() {
+  const aui = useAui();
+
+  const quoteText = () => {
+    aui.thread().composer.setQuote({
+      text: "The text to quote",
+      messageId: "msg-123",
+    });
+  };
+
+  const clearQuote = () => {
+    aui.thread().composer.setQuote(undefined);
+  };
+
+  return (
+    <>
+      <button onClick={quoteText}>Set Quote</button>
+      <button onClick={clearQuote}>Clear Quote</button>
+    </>
+  );
+}
+```
+
+## API Reference
+
+### SelectionToolbarPrimitive.Root
+
+A floating container that appears when text is selected within a message. Renders as a portal positioned above the selection.
+
+- Listens for `mouseup` / `keyup` to detect selection
+- Validates selection is within a single message
+- Hides on scroll or when selection is cleared
+- Prevents `mousedown` from clearing the selection
+- Provides selection context to child components
+
+### SelectionToolbarPrimitive.Quote
+
+A button inside the floating toolbar that captures the selection as a quote.
+
+- Reads selection info from the toolbar context (not `window.getSelection()`)
+- Stores `{ text, messageId }` in the thread composer
+- Clears the text selection after quoting
+
+### ComposerPrimitive.Quote
+
+A container that only renders when a quote is set.
+
+### ComposerPrimitive.QuoteText
+
+Renders the quoted text. Defaults to `<span>`.
+
+### ComposerPrimitive.QuoteDismiss
+
+A button that clears the quote by calling `setQuote(undefined)`. Supports `asChild`.
+
+### useMessageQuote()
+
+```tsx
+const quote: QuoteInfo | undefined = useMessageQuote();
+```
+
+Returns the quote attached to the current message, or `undefined`.
+
+### ComposerRuntime.setQuote()
+
+```tsx
+setQuote(quote: QuoteInfo | undefined): void
+```
+
+Set or clear the quote on the composer. The quote is automatically cleared when the message is sent.
+
+## Design Notes
+
+- **Single quote** — `setQuote` replaces, not appends. Only one quote at a time.
+- **Snapshot text** — The selected text is captured at quote time, not linked to the source message.
+- **Cross-message selection** — Rejected. The toolbar only appears when the selection is within a single message.
+- **Streaming messages** — The floating toolbar works during streaming since it reads from the captured selection, not message status.
+- **`isEmpty` unchanged** — A quote alone doesn't make the composer non-empty. The user must type a reply.
+- **Scroll hides toolbar** — The floating toolbar hides when any scroll event occurs, since the position would become stale.
+
+## Related
+
+- [Message Editing](/docs/guides/editing) — Edit user messages
+- [Thread Component](/docs/ui/thread) — Main chat container
+- [ComposerPrimitive](/docs/reference/primitives/Composer) — Composer primitive reference
+- [ActionBarPrimitive](/docs/reference/primitives/ActionBar) — Action bar primitive reference

package/.docs/raw/docs/(docs)/guides/speech.mdx

@@ -34,7 +34,6 @@ The following example uses the `WebSpeechSynthesisAdapter`.
 import { WebSpeechSynthesisAdapter } from "@assistant-ui/react";
 
 const runtime = useChatRuntime({
-  api: "/api/chat",
   adapters: {
     speech: new WebSpeechSynthesisAdapter(),
   },

package/.docs/raw/docs/(docs)/index.mdx

@@ -7,6 +7,10 @@ import { Sparkles, PanelsTopLeft, Database, Terminal, Bot } from "lucide-react";
 
 assistant-ui helps you create beautiful, enterprise-grade AI chat interfaces in minutes. Whether you're building a ChatGPT clone, a customer support chatbot, an AI assistant, or a complex multi-agent application, assistant-ui provides the frontend primitive components and state management layers to focus on what makes your application unique.
 
+<Callout type="tip">
+  Already using the AI SDK with your own UI? Add [cloud persistence with just one hook](/docs/cloud/ai-sdk), no UI library required.
+</Callout>
+
 ## Key Features
 
 <Cards>
@@ -38,13 +42,19 @@ npx assistant-ui@latest create
 This creates a new project with everything configured. Or choose a template:
 
 ```sh
+# Minimal starter
+npx assistant-ui@latest create -t minimal
+
 # Assistant Cloud - with persistence and thread management
 npx assistant-ui@latest create -t cloud
 
-# LangGraph
+# Assistant Cloud + Clerk authentication
+npx assistant-ui@latest create -t cloud-clerk
+
+# LangGraph starter template
 npx assistant-ui@latest create -t langgraph
 
-# MCP support
+# MCP starter template
 npx assistant-ui@latest create -t mcp
 ```
 

package/.docs/raw/docs/(docs)/installation.mdx

@@ -24,13 +24,19 @@ npx assistant-ui@latest create
 Or choose a template:
 
 ```sh
+# Minimal starter
+npx assistant-ui@latest create -t minimal
+
 # Assistant Cloud - with persistence and thread management
 npx assistant-ui@latest create -t cloud
 
-# LangGraph
+# Assistant Cloud + Clerk authentication
+npx assistant-ui@latest create -t cloud-clerk
+
+# LangGraph starter template
 npx assistant-ui@latest create -t langgraph
 
-# MCP support
+# MCP starter template
 npx assistant-ui@latest create -t mcp
 ```
 

package/.docs/raw/docs/(docs)/llm.mdx

@@ -78,18 +78,20 @@ Once installed, your AI assistant will understand everything about assistant-ui
 ### Quick Install (CLI)
 
 ```bash
-npx assistant-ui mcp
+npx add-mcp @assistant-ui/mcp-docs-server
 ```
 
 Or specify your IDE directly:
 
 ```bash
-npx assistant-ui mcp --cursor
-npx assistant-ui mcp --windsurf
-npx assistant-ui mcp --vscode
-npx assistant-ui mcp --zed
-npx assistant-ui mcp --claude-code
-npx assistant-ui mcp --claude-desktop
+npx add-mcp @assistant-ui/mcp-docs-server -a claude-code
+npx add-mcp @assistant-ui/mcp-docs-server -a claude-desktop
+npx add-mcp @assistant-ui/mcp-docs-server -a codex
+npx add-mcp @assistant-ui/mcp-docs-server -a cursor
+npx add-mcp @assistant-ui/mcp-docs-server -a gemini-cli
+npx add-mcp @assistant-ui/mcp-docs-server -a opencode
+npx add-mcp @assistant-ui/mcp-docs-server -a vscode
+npx add-mcp @assistant-ui/mcp-docs-server -a zed
 ```
 
 ### Manual Installation

package/.docs/raw/docs/(reference)/api-reference/primitives/action-bar-more.mdx

@@ -261,7 +261,7 @@ import { useCallback } from "react";
 
 const useEditAction = () => {
   const aui = useAui();
-  const disabled = useAuiState(({ composer }) => composer.isEditing);
+  const disabled = useAuiState((s) => s.composer.isEditing);
   const callback = useCallback(() => aui.composer().beginEdit(), [aui]);
   if (disabled) return null;
   return callback;

package/.docs/raw/docs/(reference)/api-reference/primitives/action-bar.mdx

@@ -156,10 +156,10 @@ Show a different icon for a few seconds after the message is copied.
 
 ```tsx
 <ActionBarPrimitive.Copy>
-  <AuiIf condition={({ message }) => !message.isCopied}>
+  <AuiIf condition={(s) => !s.message.isCopied}>
     <CopyIcon />
   </AuiIf>
-  <AuiIf condition={({ message }) => message.isCopied}>
+  <AuiIf condition={(s) => s.message.isCopied}>
     <CopySuccessIcon />
   </AuiIf>
 </ActionBarPrimitive.Copy>

package/.docs/raw/docs/(reference)/api-reference/primitives/assistant-if.mdx

@@ -11,7 +11,7 @@ Conditionally render children based on assistant state.
 ```tsx
 import { AuiIf } from "@assistant-ui/react";
 
-<AuiIf condition={({ thread }) => thread.isEmpty}>
+<AuiIf condition={(s) => s.thread.isEmpty}>
   <WelcomeScreen />
 </AuiIf>
 ```
@@ -80,20 +80,20 @@ The condition function receives an `AssistantState` object with the following pr
 
 ```tsx
 // Show welcome screen when thread is empty
-<AuiIf condition={({ thread }) => thread.isEmpty}>
+<AuiIf condition={(s) => s.thread.isEmpty}>
   <WelcomeScreen />
 </AuiIf>
 
 // Show loading indicator while running
-<AuiIf condition={({ thread }) => thread.isRunning}>
+<AuiIf condition={(s) => s.thread.isRunning}>
   <LoadingSpinner />
 </AuiIf>
 
 // Conditional send/cancel button
-<AuiIf condition={({ thread }) => !thread.isRunning}>
+<AuiIf condition={(s) => !s.thread.isRunning}>
   <ComposerPrimitive.Send>Send</ComposerPrimitive.Send>
 </AuiIf>
-<AuiIf condition={({ thread }) => thread.isRunning}>
+<AuiIf condition={(s) => s.thread.isRunning}>
   <ComposerPrimitive.Cancel>Cancel</ComposerPrimitive.Cancel>
 </AuiIf>
 ```
@@ -102,32 +102,32 @@ The condition function receives an `AssistantState` object with the following pr
 
 ```tsx
 // Show avatar only for assistant messages
-<AuiIf condition={({ message }) => message.role === "assistant"}>
+<AuiIf condition={(s) => s.message.role === "assistant"}>
   <AssistantAvatar />
 </AuiIf>
 
 // Show disclaimer on last message
-<AuiIf condition={({ message }) => message.isLast}>
+<AuiIf condition={(s) => s.message.isLast}>
   <Disclaimer />
 </AuiIf>
 
 // Toggle copy icon based on copied state
 <ActionBarPrimitive.Copy>
-  <AuiIf condition={({ message }) => !message.isCopied}>
+  <AuiIf condition={(s) => !s.message.isCopied}>
     <CopyIcon />
   </AuiIf>
-  <AuiIf condition={({ message }) => message.isCopied}>
+  <AuiIf condition={(s) => s.message.isCopied}>
     <CheckIcon />
   </AuiIf>
 </ActionBarPrimitive.Copy>
 
 // Show speak/stop button based on speech state
-<AuiIf condition={({ message }) => message.speech == null}>
+<AuiIf condition={(s) => s.message.speech == null}>
   <ActionBarPrimitive.Speak>
     <SpeakIcon />
   </ActionBarPrimitive.Speak>
 </AuiIf>
-<AuiIf condition={({ message }) => message.speech != null}>
+<AuiIf condition={(s) => s.message.speech != null}>
   <ActionBarPrimitive.StopSpeaking>
     <StopIcon />
   </ActionBarPrimitive.StopSpeaking>
@@ -138,12 +138,12 @@ The condition function receives an `AssistantState` object with the following pr
 
 ```tsx
 // Show placeholder when composer is empty
-<AuiIf condition={({ composer }) => composer.isEmpty}>
+<AuiIf condition={(s) => s.composer.isEmpty}>
   <PlaceholderText />
 </AuiIf>
 
 // Show attachment preview when editing
-<AuiIf condition={({ composer }) => composer.isEditing}>
+<AuiIf condition={(s) => s.composer.isEditing}>
   <EditingIndicator />
 </AuiIf>
 ```
@@ -152,15 +152,15 @@ The condition function receives an `AssistantState` object with the following pr
 
 ```tsx
 // Combine multiple conditions
-<AuiIf condition={({ thread, message }) =>
-  !thread.isRunning && message.role === "assistant"
+<AuiIf condition={(s) =>
+  !s.thread.isRunning && s.message.role === "assistant"
 }>
   <ActionBar />
 </AuiIf>
 
 // Custom logic
-<AuiIf condition={({ thread }) =>
-  thread.messages.length > 0 && !thread.isRunning
+<AuiIf condition={(s) =>
+  s.thread.messages.length > 0 && !s.thread.isRunning
 }>
   <FollowUpSuggestions />
 </AuiIf>
@@ -173,7 +173,7 @@ You can import the `AuiIf.Condition` type for typing your condition functions:
 ```tsx
 import { AuiIf } from "@assistant-ui/react";
 
-const isThreadEmpty: AuiIf.Condition = ({ thread }) => thread.isEmpty;
+const isThreadEmpty: AuiIf.Condition = (s) => s.thread.isEmpty;
 
 <AuiIf condition={isThreadEmpty}>
   <WelcomeScreen />
@@ -188,12 +188,12 @@ const isThreadEmpty: AuiIf.Condition = ({ thread }) => thread.isEmpty;
 
 | Before | After |
 |--------|-------|
-| `<ThreadPrimitive.If empty>` | `<AuiIf condition={({ thread }) => thread.isEmpty}>` |
-| `<ThreadPrimitive.If running>` | `<AuiIf condition={({ thread }) => thread.isRunning}>` |
-| `<ThreadPrimitive.If running={false}>` | `<AuiIf condition={({ thread }) => !thread.isRunning}>` |
-| `<MessagePrimitive.If user>` | `<AuiIf condition={({ message }) => message.role === "user"}>` |
-| `<MessagePrimitive.If assistant>` | `<AuiIf condition={({ message }) => message.role === "assistant"}>` |
-| `<MessagePrimitive.If copied>` | `<AuiIf condition={({ message }) => message.isCopied}>` |
-| `<MessagePrimitive.If speaking>` | `<AuiIf condition={({ message }) => message.speech != null}>` |
-| `<MessagePrimitive.If last>` | `<AuiIf condition={({ message }) => message.isLast}>` |
-| `<ComposerPrimitive.If editing>` | `<AuiIf condition={({ composer }) => composer.isEditing}>` |
+| `<ThreadPrimitive.If empty>` | `<AuiIf condition={(s) => s.thread.isEmpty}>` |
+| `<ThreadPrimitive.If running>` | `<AuiIf condition={(s) => s.thread.isRunning}>` |
+| `<ThreadPrimitive.If running={false}>` | `<AuiIf condition={(s) => !s.thread.isRunning}>` |
+| `<MessagePrimitive.If user>` | `<AuiIf condition={(s) => s.message.role === "user"}>` |
+| `<MessagePrimitive.If assistant>` | `<AuiIf condition={(s) => s.message.role === "assistant"}>` |
+| `<MessagePrimitive.If copied>` | `<AuiIf condition={(s) => s.message.isCopied}>` |
+| `<MessagePrimitive.If speaking>` | `<AuiIf condition={(s) => s.message.speech != null}>` |
+| `<MessagePrimitive.If last>` | `<AuiIf condition={(s) => s.message.isLast}>` |
+| `<ComposerPrimitive.If editing>` | `<AuiIf condition={(s) => s.composer.isEditing}>` |

package/.docs/raw/docs/(reference)/api-reference/primitives/composer.mdx

@@ -20,6 +20,10 @@ import { ComposerPrimitive } from "@assistant-ui/react";
 // creating a new message
 const Composer = () => (
   <ComposerPrimitive.Root>
+    <ComposerPrimitive.Quote>
+      <ComposerPrimitive.QuoteText />
+      <ComposerPrimitive.QuoteDismiss />
+    </ComposerPrimitive.Quote>
     <ComposerPrimitive.Attachments />
     <ComposerPrimitive.AddAttachment />
     <ComposerPrimitive.Input />
@@ -80,14 +84,32 @@ This primitive renders a `<textarea>` element unless `asChild` is set.
     {
       name: "asChild",
     },
+    {
+      name: "submitMode",
+      type: '"enter" | "ctrlEnter" | "none"',
+      default: '"enter"',
+      description:
+        'Controls how the Enter key submits messages. "enter": plain Enter submits (Shift+Enter for newline). "ctrlEnter": Ctrl/Cmd+Enter submits (plain Enter for newline). "none": keyboard submission disabled.',
+    },
   ]}
 />
 
 #### Keyboard Shortcuts
 
+Default (`submitMode="enter"`):
+
 | Key | Description |
 | --- | --- |
 | <Kbd>Enter</Kbd> | Sends the message. |
+| <Kbd>Shift + Enter</Kbd> | Inserts a newline. |
+| <Kbd>Escape</Kbd> | Sends a cancel action. |
+
+With `submitMode="ctrlEnter"`:
+
+| Key | Description |
+| --- | --- |
+| <Kbd>Ctrl/Cmd + Enter</Kbd> | Sends the message. |
+| <Kbd>Enter</Kbd> | Inserts a newline. |
 | <Kbd>Escape</Kbd> | Sends a cancel action. |
 
 ### Send
@@ -274,6 +296,44 @@ This primitive renders a `<span>` element.
 </ComposerPrimitive.If>
 ```
 
+### Quote
+
+A container for displaying a quote preview in the composer. Only renders when a quote is set via `composer.setQuote()`.
+
+This primitive renders a `<div>` element.
+
+```tsx
+<ComposerPrimitive.Quote className="flex items-start gap-2 bg-muted/60 px-3 py-2">
+  <ComposerPrimitive.QuoteText className="line-clamp-2 flex-1 text-sm" />
+  <ComposerPrimitive.QuoteDismiss>×</ComposerPrimitive.QuoteDismiss>
+</ComposerPrimitive.Quote>
+```
+
+### QuoteText
+
+Renders the quoted text content. Only renders when a quote is set.
+
+This primitive renders a `<span>` element.
+
+### QuoteDismiss
+
+A button that clears the current quote from the composer by calling `setQuote(undefined)`.
+
+This primitive renders a `<button>` element unless `asChild` is set.
+
+<ParametersTable
+  type="ComposerPrimitiveQuoteDismissProps"
+  parameters={[
+    {
+      name: "asChild",
+    },
+  ]}
+/>
+
+<Callout type="info">
+See the [Quoting guide](/docs/guides/quoting) for a complete walkthrough including the floating selection toolbar and backend handling.
+</Callout>
+
 ### If
 
 Renders children if a condition is met.