@assistant-ui/mcp-docs-server 0.1.15 → 0.1.16

package/.docs/raw/blog/2024-07-29-hello/index.mdx

@@ -6,8 +6,8 @@ date: 2024-07-29T12:00:00
 ---
 
 import Image from "next/image";
-import { TestimonialContainer } from "@/components/testimonials/TestimonialContainer";
-import { BLOG_TESTIMONIALS } from "@/components/testimonials/testimonials";
+import { TestimonialContainer } from "@/components/home/testimonials/testimonials";
+import { BLOG_TESTIMONIALS } from "@/components/home/testimonials/data";
 import npmDownloads from "./npm-downloads.png";
 import assistantUi from "./assistant-ui-screenshot.png";
 

package/.docs/raw/docs/api-reference/overview.mdx

@@ -239,9 +239,9 @@ A conversation thread.
       tooltip="Displayed when the thread is empty"
     />
     <Component
-      name="ThreadPrimitive.If"
-      docsLink="#thread-primitive-if"
-      tooltip="Conditional rendering within the thread"
+      name="AssistantIf"
+      docsLink="#assistant-if"
+      tooltip="Conditional rendering based on assistant state"
     />
     <Component
       name="ThreadPrimitive.Suggestion"
@@ -383,9 +383,9 @@ Manages the state and actions for individual messages
     tooltip="Displays attachments in the message"
   />
   <Component
-    name="MessagePrimitive.If"
-    docsLink="#message-primitive-if"
-    tooltip="Conditional rendering within the message"
+    name="AssistantIf"
+    docsLink="#assistant-if"
+    tooltip="Conditional rendering based on assistant state"
   />
 </Component>
 

package/.docs/raw/docs/api-reference/primitives/ActionBar.mdx

@@ -167,12 +167,12 @@ Show a different icon for a few seconds after the message is copied.
 
 ```tsx
 <ActionBarPrimitive.Copy>
-  <MessagePrimitive.If copied={false}>
+  <AssistantIf condition={({ message }) => !message.isCopied}>
     <CopyIcon />
-  </MessagePrimitive.If>
-  <MessagePrimitive.If copied>
+  </AssistantIf>
+  <AssistantIf condition={({ message }) => message.isCopied}>
     <CopySuccessIcon />
-  </MessagePrimitive.If>
+  </AssistantIf>
 </ActionBarPrimitive.Copy>
 ```
 
@@ -262,3 +262,84 @@ This primitive renders a `<button>` element unless `asChild` is set.
     },
   ]}
 />
+
+### ExportMarkdown
+
+Exports the message content as a Markdown file download by default, or calls a custom export handler when `onExport` is provided.
+
+This primitive renders a `<button>` element unless `asChild` is set.
+
+<ParametersTable
+  type="ActionBarPrimitiveExportMarkdownProps"
+  parameters={[
+    {
+      name: "asChild",
+    },
+    {
+      name: "filename",
+      type: "string",
+      description:
+        "The filename for the downloaded Markdown file. Defaults to 'message-{timestamp}.md'. Ignored when onExport is provided.",
+    },
+    {
+      name: "onExport",
+      type: "(content: string) => void | Promise<void>",
+      description:
+        "Optional callback function that receives the message content. When provided, overrides the default Markdown download behavior. Use this to implement custom export logic (PDF, JSON, TXT, etc.).",
+    },
+  ]}
+/>
+
+#### Examples
+
+Default Markdown export:
+
+```tsx
+<ActionBarPrimitive.ExportMarkdown>
+  <DownloadIcon />
+  Export as Markdown
+</ActionBarPrimitive.ExportMarkdown>
+```
+
+With custom filename:
+
+```tsx
+<ActionBarPrimitive.ExportMarkdown filename="chat-response.md">
+  <DownloadIcon />
+  Download
+</ActionBarPrimitive.ExportMarkdown>
+```
+
+Export as PDF (with custom logic):
+
+```tsx
+<ActionBarPrimitive.ExportMarkdown
+  onExport={async (content) => {
+    const pdf = await generatePdf(content);
+    downloadFile(pdf, "message.pdf");
+  }}
+>
+  <FileIcon />
+  Export PDF
+</ActionBarPrimitive.ExportMarkdown>
+```
+
+Export as JSON:
+
+```tsx
+<ActionBarPrimitive.ExportMarkdown
+  onExport={(content) => {
+    const json = JSON.stringify({ content, timestamp: Date.now() });
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "message.json";
+    a.click();
+    URL.revokeObjectURL(url);
+  }}
+>
+  <CodeIcon />
+  Export JSON
+</ActionBarPrimitive.ExportMarkdown>
+```

package/.docs/raw/docs/api-reference/primitives/AssistantIf.mdx

@@ -0,0 +1,200 @@
+---
+title: AssistantIf
+---
+
+Conditionally render children based on assistant state.
+
+import { ParametersTable } from "@/components/docs";
+import { Callout } from "fumadocs-ui/components/callout";
+
+## Anatomy
+
+```tsx
+import { AssistantIf } from "@assistant-ui/react";
+
+<AssistantIf condition={({ thread }) => thread.isEmpty}>
+  <WelcomeScreen />
+</AssistantIf>
+```
+
+## Overview
+
+`AssistantIf` is a generic conditional rendering component that provides access to the full assistant state. It replaces the deprecated `ThreadPrimitive.If`, `MessagePrimitive.If`, and `ComposerPrimitive.If` components with a single, flexible API.
+
+## API Reference
+
+<ParametersTable
+  type="AssistantIfProps"
+  parameters={[
+    {
+      name: "condition",
+      type: "(state: AssistantState) => boolean",
+      required: true,
+      description: "A function that receives the assistant state and returns whether to render children.",
+    },
+    {
+      name: "children",
+      type: "ReactNode",
+      description: "Content to render when the condition returns true.",
+    },
+  ]}
+/>
+
+## AssistantState
+
+The condition function receives an `AssistantState` object with the following properties:
+
+<ParametersTable
+  type="AssistantState"
+  parameters={[
+    {
+      name: "thread",
+      type: "ThreadState",
+      description: "The current thread state (always available).",
+    },
+    {
+      name: "message",
+      type: "MessageState",
+      description: "The current message state (available within a message context).",
+    },
+    {
+      name: "composer",
+      type: "ComposerState",
+      description: "The current composer state (always available).",
+    },
+    {
+      name: "part",
+      type: "PartState",
+      description: "The current message part state (available within a part context).",
+    },
+    {
+      name: "attachment",
+      type: "AttachmentState",
+      description: "The current attachment state (available within an attachment context).",
+    },
+  ]}
+/>
+
+## Examples
+
+### Thread State Conditions
+
+```tsx
+// Show welcome screen when thread is empty
+<AssistantIf condition={({ thread }) => thread.isEmpty}>
+  <WelcomeScreen />
+</AssistantIf>
+
+// Show loading indicator while running
+<AssistantIf condition={({ thread }) => thread.isRunning}>
+  <LoadingSpinner />
+</AssistantIf>
+
+// Conditional send/cancel button
+<AssistantIf condition={({ thread }) => !thread.isRunning}>
+  <ComposerPrimitive.Send>Send</ComposerPrimitive.Send>
+</AssistantIf>
+<AssistantIf condition={({ thread }) => thread.isRunning}>
+  <ComposerPrimitive.Cancel>Cancel</ComposerPrimitive.Cancel>
+</AssistantIf>
+```
+
+### Message State Conditions
+
+```tsx
+// Show avatar only for assistant messages
+<AssistantIf condition={({ message }) => message.role === "assistant"}>
+  <AssistantAvatar />
+</AssistantIf>
+
+// Show disclaimer on last message
+<AssistantIf condition={({ message }) => message.isLast}>
+  <Disclaimer />
+</AssistantIf>
+
+// Toggle copy icon based on copied state
+<ActionBarPrimitive.Copy>
+  <AssistantIf condition={({ message }) => !message.isCopied}>
+    <CopyIcon />
+  </AssistantIf>
+  <AssistantIf condition={({ message }) => message.isCopied}>
+    <CheckIcon />
+  </AssistantIf>
+</ActionBarPrimitive.Copy>
+
+// Show speak/stop button based on speech state
+<AssistantIf condition={({ message }) => message.speech == null}>
+  <ActionBarPrimitive.Speak>
+    <SpeakIcon />
+  </ActionBarPrimitive.Speak>
+</AssistantIf>
+<AssistantIf condition={({ message }) => message.speech != null}>
+  <ActionBarPrimitive.StopSpeaking>
+    <StopIcon />
+  </ActionBarPrimitive.StopSpeaking>
+</AssistantIf>
+```
+
+### Composer State Conditions
+
+```tsx
+// Show placeholder when composer is empty
+<AssistantIf condition={({ composer }) => composer.isEmpty}>
+  <PlaceholderText />
+</AssistantIf>
+
+// Show attachment preview when editing
+<AssistantIf condition={({ composer }) => composer.isEditing}>
+  <EditingIndicator />
+</AssistantIf>
+```
+
+### Complex Conditions
+
+```tsx
+// Combine multiple conditions
+<AssistantIf condition={({ thread, message }) =>
+  !thread.isRunning && message.role === "assistant"
+}>
+  <ActionBar />
+</AssistantIf>
+
+// Custom logic
+<AssistantIf condition={({ thread }) =>
+  thread.messages.length > 0 && !thread.isRunning
+}>
+  <FollowUpSuggestions />
+</AssistantIf>
+```
+
+## Type Export
+
+You can import the `AssistantIf.Condition` type for typing your condition functions:
+
+```tsx
+import { AssistantIf } from "@assistant-ui/react";
+
+const isThreadEmpty: AssistantIf.Condition = ({ thread }) => thread.isEmpty;
+
+<AssistantIf condition={isThreadEmpty}>
+  <WelcomeScreen />
+</AssistantIf>
+```
+
+## Migration from Deprecated Components
+
+<Callout type="warn">
+`ThreadPrimitive.If`, `MessagePrimitive.If`, and `ComposerPrimitive.If` are deprecated. Use `AssistantIf` instead.
+</Callout>
+
+| Before | After |
+|--------|-------|
+| `<ThreadPrimitive.If empty>` | `<AssistantIf condition={({ thread }) => thread.isEmpty}>` |
+| `<ThreadPrimitive.If running>` | `<AssistantIf condition={({ thread }) => thread.isRunning}>` |
+| `<ThreadPrimitive.If running={false}>` | `<AssistantIf condition={({ thread }) => !thread.isRunning}>` |
+| `<MessagePrimitive.If user>` | `<AssistantIf condition={({ message }) => message.role === "user"}>` |
+| `<MessagePrimitive.If assistant>` | `<AssistantIf condition={({ message }) => message.role === "assistant"}>` |
+| `<MessagePrimitive.If copied>` | `<AssistantIf condition={({ message }) => message.isCopied}>` |
+| `<MessagePrimitive.If speaking>` | `<AssistantIf condition={({ message }) => message.speech != null}>` |
+| `<MessagePrimitive.If last>` | `<AssistantIf condition={({ message }) => message.isLast}>` |
+| `<ComposerPrimitive.If editing>` | `<AssistantIf condition={({ composer }) => composer.isEditing}>` |

package/.docs/raw/docs/api-reference/primitives/Composer.mdx

@@ -213,23 +213,3 @@ This primitive renders a `<button>` element unless `asChild` is set.
     },
   ]}
 />
-
-### If
-
-Renders children if a condition is met.
-
-<ParametersTable
-  type="UseComposerIfProps"
-  parameters={[
-    {
-      name: "editing",
-      required: false,
-      type: "boolean | undefined",
-      description: "Render children if the message is being edited.",
-    },
-  ]}
-/>
-
-```tsx
-<Composer.If editing>{/* rendered if message is being edited */}</Composer.If>
-```

package/.docs/raw/docs/api-reference/primitives/Message.mdx

@@ -259,51 +259,6 @@ Renders a single attachment at the specified index within the message.
   ]}
 />
 
-### If
-
-Renders children if a condition is met.
-
-<ParametersTable
-  type="UseMessageIfProps"
-  parameters={[
-    {
-      name: "user",
-      type: "boolean | undefined",
-      description: "Render children if the message is from the user.",
-    },
-    {
-      name: "assistant",
-      type: "boolean | undefined",
-      description: "Render children if the message is from the assistant.",
-    },
-    {
-      name: "hasBranches",
-      type: "boolean | undefined",
-      description: "Render children if the message has branches.",
-    },
-    {
-      name: "copied",
-      type: "boolean | undefined",
-      description: "Render children if the message is copied.",
-    },
-    {
-      name: "lastOrHover",
-      type: "boolean | undefined",
-      description:
-        "Render children if the message is the last or hovered over.",
-    },
-  ]}
-/>
-
-```tsx
-<Message.If user>
-  {/* rendered if message is from the user */}
-</Message.If>
-<Message.If assistant>
-  {/* rendered if message is from the assistant */}
-</Message.If>
-```
-
 ### Error
 
 Renders children only if the message has an error status.

package/.docs/raw/docs/api-reference/primitives/Thread.mdx

@@ -236,53 +236,3 @@ const Suggestion = () => {
     },
   ]}
 />
-
-### If
-
-Renders children if a condition is met.
-
-<ParametersTable
-  type="ThreadPrimitiveIfProps"
-  parameters={[
-    {
-      name: "empty",
-      type: "boolean | undefined",
-      description: "Render children if the thread is empty.",
-    },
-    {
-      name: "running",
-      type: "boolean | undefined",
-      description: "Render children if the thread is running.",
-    },
-    {
-      name: "disabled",
-      type: "boolean | undefined",
-      description: "Render children if the thread is disabled.",
-    },
-    {
-      name: "loading",
-      type: "boolean | undefined",
-      description: "Render children if the thread is loading.",
-    },
-    {
-      name: "new",
-      type: "boolean | undefined",
-      description: "Render children if the thread is new.",
-    },
-  ]}
-/>
-
-```tsx
-<Thread.If empty>
-  {/* equivalent to <Thread.Empty> */}
-</Thread.If>
-<Thread.If empty={false}>
-  {/* rendered if thread is not empty */}
-</Thread.If>
-<Thread.If loading>
-  {/* rendered if thread is loading */}
-</Thread.If>
-<Thread.If new>
-  {/* rendered if thread is new */}
-</Thread.If>
-```

package/.docs/raw/docs/cloud/persistence/ai-sdk.mdx

@@ -4,6 +4,7 @@ title: Chat History for AI SDK
 
 import { Steps, Step } from 'fumadocs-ui/components/steps';
 import { Callout } from 'fumadocs-ui/components/callout';
+import { InstallCommand } from "@/components/docs/install-command";
 
 ## Overview
 
@@ -52,9 +53,7 @@ ASSISTANT_API_KEY=your-api-key-here
 
 Install the required packages:
 
-```bash
-npm install @assistant-ui/react @assistant-ui/react-ai-sdk
-```
+<InstallCommand npm={["@assistant-ui/react", "@assistant-ui/react-ai-sdk"]} />
 
 </Step>
 

package/.docs/raw/docs/cloud/persistence/langgraph.mdx

@@ -5,6 +5,7 @@ title: Chat History for LangGraph Cloud
 import { Steps, Step } from "fumadocs-ui/components/steps";
 import { Callout } from "fumadocs-ui/components/callout";
 import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+import { InstallCommand } from "@/components/docs/install-command";
 
 ## Overview
 
@@ -54,9 +55,7 @@ ASSISTANT_API_KEY=your-api-key-here
 
 Install the required packages:
 
-```bash
-npm install @assistant-ui/react @assistant-ui/react-langgraph
-```
+<InstallCommand npm={["@assistant-ui/react", "@assistant-ui/react-langgraph"]} />
 
 </Step>
 

package/.docs/raw/docs/devtools.mdx

@@ -3,6 +3,7 @@ title: DevTools
 ---
 
 import { Step, Steps } from "fumadocs-ui/components/steps";
+import { InstallCommand } from "@/components/docs/install-command";
 
 Hey, the assistant-ui DevTools allows you to debug the assistant-ui state and context, and events without resorting to `console.log`. It's an easy way to see how data flows to the assistant-ui's runtime layer.
 
@@ -15,9 +16,7 @@ Hey, the assistant-ui DevTools allows you to debug the assistant-ui state and co
 
 ### Install the DevTools package
 
-```bash
-npm install @assistant-ui/react-devtools
-```
+<InstallCommand npm={["@assistant-ui/react-devtools"]} />
 
   </Step>
   <Step>