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

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/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

@@ -1,186 +0,0 @@
----
-title: Reasoning
-description: Collapsible UI for displaying AI reasoning and thinking messages.
-platforms: ["react"]
----
-
-import { ReasoningSample, ReasoningGroupSample } from "@/components/docs/samples/reasoning";
-
-<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                             |
-
-## 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.
-
-<ReasoningGroupSample />
-
-```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/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