@assistant-ui/mcp-docs-server 0.1.1

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

@@ -0,0 +1,197 @@
+---
+title: ThreadPrimitive
+---
+
+A conversation between a user and an assistant.
+
+import { ParametersTable } from "@/components/docs";
+
+## Anatomy
+
+```tsx
+import { ThreadPrimitive } from "@assistant-ui/react";
+
+const Thread = () => (
+  <ThreadPrimitive.Root>
+    <ThreadPrimitive.Viewport>
+      <ThreadPrimitive.Empty>...</ThreadPrimitive.Empty>
+      <ThreadPrimitive.Messages components={...} />
+    </ThreadPrimitive.Viewport>
+    <Composer />
+  </ThreadPrimitive.Root>
+);
+```
+
+## API Reference
+
+### Root
+
+Containts all parts of the thread.
+
+This primitive renders a `<div>` element unless `asChild` is set.
+
+<ParametersTable
+  type="ThreadPrimitiveRootProps"
+  parameters={[
+    {
+      name: "asChild",
+    },
+  ]}
+/>
+
+### Viewport
+
+The scrollable area containing all messages. Anchors scroll to the bottom as new messages are added.
+
+This primitive renders a `<div>` element unless `asChild` is set.
+
+<ParametersTable
+  type="ThreadPrimitiveViewportProps"
+  parameters={[
+    {
+      name: "asChild",
+    },
+    {
+      name: "autoScroll",
+      type: "boolean",
+      default: "true",
+      description:
+        "Whether to automatically scroll to the bottom of the viewport when new messages are added while the viewport is was previously scrolled to the bottom.",
+    },
+  ]}
+/>
+
+### Messages
+
+Renders all messages. This primitive renders a separate component for each message.
+
+<ParametersTable
+  type="ThreadPrimitiveMessagesProps"
+  parameters={[
+    {
+      name: "components",
+      type: "MessageComponents",
+      description: "The component to render for each message.",
+      children: [
+        {
+          type: "MessageComponents",
+          parameters: [
+            {
+              name: "Message",
+              type: "ComponentType",
+              description: "The component to render for each message.",
+            },
+            {
+              name: "UserMessage",
+              type: "ComponentType",
+              description: "The component to render for user messages.",
+            },
+            {
+              name: "EditComposer",
+              type: "ComponentType",
+              description:
+                "The component to render for user messages that are being edited.",
+            },
+            {
+              name: "AssistantMessage",
+              type: "ComponentType",
+              description: "The component to render for assistant messages.",
+            },
+          ],
+        },
+      ],
+    },
+  ]}
+/>
+
+### Empty
+
+Renders children only when there are no messages.
+
+### ScrollToBottom
+
+A button to scroll the viewport to the bottom. Disabled when the viewport is already at bottom.
+
+This primitive renders a `<button>` element unless `asChild` is set.
+
+<ParametersTable
+  type="ThreadPrimitiveScrollToBottomProps"
+  parameters={[
+    {
+      name: "asChild",
+    },
+  ]}
+/>
+
+### `ThreadPrimitive.Suggestion`
+
+Shows a suggestion to the user. When the user clicks on the suggestion, the composer's value is set to the suggestion's prompt.
+
+This primitive renders a `<button>` element unless `asChild` is set.
+
+```tsx
+import { ThreadPrimitive } from "@assistant-ui/react";
+
+const Suggestion = () => {
+  return (
+    <ThreadPrimitive.Suggestion
+      prompt="I need help with product search"
+      method="replace"
+      autoSend
+    />
+  );
+};
+```
+
+<ParametersTable
+  type="ThreadPrimitiveSuggestionProps"
+  parameters={[
+    {
+      name: "prompt",
+      type: "string",
+      description: "The suggestion's prompt.",
+    },
+    {
+      name: "method",
+      type: "'replace'",
+      description:
+        "How does the suggestion interact with the composer's existing value.",
+    },
+    {
+      name: "autoSend",
+      type: "boolean",
+      description:
+        "Whether to automatically send the suggestion when the user clicks on it.",
+      default: "false",
+    },
+  ]}
+/>
+
+### 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.",
+    },
+  ]}
+/>
+
+```tsx
+<Thread.If empty>
+  {/* equivalent to <Thread.Empty> */}
+</Thread.If>
+<Thread.If empty={false}>
+  {/* rendered if thread is not empty */}
+</Thread.If>
+```

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

@@ -0,0 +1,21 @@
+---
+title: Composition
+---
+
+import { Code } from "@radix-ui/themes";
+
+`assistant-ui` primitives are composable. This means that all props are forwarded, classes are merged, and event handlers are chained.
+
+Most primitives come with a default HTML element (usually `div` or `button`). If you already have a custom component, you can use the `asChild` prop to replace it:
+
+```tsx
+// use the primitive's <button> element
+<Composer.Send>Send</Composer.Send>;
+
+// use your own <Button> component
+<Composer.Send asChild>
+  <Button>Send</Button>
+</Composer.Send>;
+```
+
+Learn more on [Radix's composition guide](https://www.radix-ui.com/primitives/docs/guides/composition).

package/.docs/raw/docs/api-reference/runtimes/AssistantRuntime.mdx

@@ -0,0 +1,33 @@
+---
+title: AssistantRuntime
+---
+
+import { ParametersTable } from "@/components/docs";
+import { AssistantRuntime, AssistantToolUIsState } from "@/generated/typeDocs";
+
+The `AssistantRuntime` is the root runtime of the application.
+
+### `useAssistantRuntime`
+
+```tsx
+import { useAssistantRuntime } from "@assistant-ui/react";
+
+const runtime = useAssistantRuntime();
+```
+
+<ParametersTable {...AssistantRuntime} />
+
+### Tool UI Registry
+
+The tool UI registry is part of the assistant runtime. It allows you to display custom UI for tool calls, enabling generative UI.
+
+#### `useToolUIs`
+
+```tsx
+import { useToolUIs } from "@assistant-ui/react";
+
+const toolUIs = useToolUIs();
+const webSearchToolUI = useToolUIs((m) => m.getToolUI("web_search"));
+```
+
+<ParametersTable {...AssistantToolUIsState} />

package/.docs/raw/docs/api-reference/runtimes/AttachmentRuntime.mdx

@@ -0,0 +1,46 @@
+---
+title: AttachmentRuntime
+---
+
+import { ParametersTable } from "@/components/docs";
+import {
+  ComposerAttachmentState,
+  MessageAttachmentState,
+} from "@/components/docs/parameters/context";
+
+### `useAttachment`
+
+Access the current attachment state:
+
+```tsx
+import { useAttachment } from "@assistant-ui/react";
+
+const { attachment } = useAttachment();
+const att = useAttachment((m) => m.attachment);
+```
+
+### `useComposerAttachment` (Composer)
+
+When working with a composer’s attachment:
+
+```tsx
+import { useComposerAttachment } from "@assistant-ui/react";
+
+const { attachment } = useComposerAttachment();
+const composerAttachment = useComposerAttachment((m) => m.attachment);
+```
+
+<ParametersTable {...ComposerAttachmentState} />
+
+### `useMessageAttachment` (Message)
+
+For managing a message’s attachment:
+
+```tsx
+import { useMessageAttachment } from "@assistant-ui/react";
+
+const { attachment } = useMessageAttachment();
+const messageAttachment = useMessageAttachment((m) => m.attachment);
+```
+
+<ParametersTable {...MessageAttachmentState} />

package/.docs/raw/docs/api-reference/runtimes/ComposerRuntime.mdx

@@ -0,0 +1,69 @@
+---
+title: ComposerRuntime
+---
+
+The composer runtime allows you to view or edit anything related to how new information is added and sent. For instance you can use the composer runtime to read the state, add attachments, update text, send a message, etc.
+
+import { ParametersTable } from "@/components/docs";
+import { ComposerRuntime, ThreadComposerRuntime, ThreadComposerState, EditComposerState } from "@/generated/typeDocs";
+
+### `useComposer`
+
+Grabs the nearest composer (whether it’s the edit composer or the thread’s composer):
+
+```tsx
+// Example
+import { useComposer } from "@assistant-ui/react";
+
+const composerRuntime = useComposer();
+
+// set the text
+composerRuntime.setText("Hello from the composer runtime");
+
+// send whatever is in the composer 
+composerRuntime.send();
+
+// get the current text in the composer state
+const composerState = composerRuntime.getState();
+const currentText = composerState.text;
+
+```
+
+<ParametersTable {...ComposerRuntime} />
+
+
+### `useThreadComposer`
+
+Access the thread’s new message composer state:
+
+```tsx
+import { useThreadComposer } from "@assistant-ui/react";
+
+const threadComposerRuntime = useThreadComposer();
+
+// set the text
+threadComposerRuntime.setText("Hello from the thread composer runtime");
+
+// send whatever is in the thread composer 
+threadComposerRuntime.send();
+
+// get the current text in the composer state
+const threadComposerState = threadComposerRuntime.getState();
+const currentText = threadComposerRuntime.text;
+
+```
+
+<ParametersTable {...ThreadComposerRuntime} />
+
+
+### `ThreadComposerState`
+
+The state of the thread composer which is the composer the user can interact with at the bottom.
+
+<ParametersTable {...ThreadComposerState} />
+
+### `EditComposerState`
+
+The state of the edit composer which is the composer the user can edit messages with.
+
+<ParametersTable {...EditComposerState} />

package/.docs/raw/docs/api-reference/runtimes/ContentPartRuntime.mdx

@@ -0,0 +1,22 @@
+---
+title: ContentPartRuntime
+---
+
+import { ParametersTable } from "@/components/docs";
+import { ContentPartState } from "@/components/docs/parameters/context";
+
+### `useContentPart`
+
+Access the content part state:
+
+```tsx
+import { useContentPart } from "@assistant-ui/react";
+
+const part = useContentPart();
+const partState = useContentPart.getState();
+
+const status = useContentPart((m) => m.status);
+const statusAgain = useContentPart.getState().status;
+```
+
+<ParametersTable {...ContentPartState} />

package/.docs/raw/docs/api-reference/runtimes/MessageRuntime.mdx

@@ -0,0 +1,49 @@
+---
+title: MessageRuntime
+---
+
+import { ParametersTable } from "@/components/docs";
+import {
+  MessageState,
+  MessageUtilsState,
+  EditComposerState,
+} from "@/components/docs/parameters/context";
+
+### `useMessage`
+
+Retrieve the message object:
+
+```tsx
+import { useMessage } from "@assistant-ui/react";
+
+const { message } = useMessage();
+const msg = useMessage((m) => m.message);
+```
+
+<ParametersTable {...MessageState} />
+
+### `useMessageUtils`
+
+Provides utility functions for a message (e.g., copy status):
+
+```tsx
+import { useMessageUtils } from "@assistant-ui/react";
+
+const messageUtils = useMessageUtils();
+const isCopied = useMessageUtils((m) => m.isCopied);
+```
+
+<ParametersTable {...MessageUtilsState} />
+
+### `useEditComposer`
+
+Access the edit composer state (used when editing a message):
+
+```tsx
+import { useEditComposer } from "@assistant-ui/react";
+
+const editComposer = useEditComposer();
+const text = useEditComposer((m) => m.text);
+```
+
+<ParametersTable {...EditComposerState} />

package/.docs/raw/docs/api-reference/runtimes/ThreadListItemRuntime.mdx

@@ -0,0 +1,32 @@
+---
+title: ThreadListItemRuntime
+---
+
+import { ParametersTable } from "@/components/docs";
+import {
+  ThreadListItemRuntime,
+  ThreadListItemState,
+} from "@/generated/typeDocs";
+
+### `useThreadListItemRuntime`
+
+```tsx
+import { useThreadListItemRuntime } from "@assistant-ui/react";
+
+const threadListItemRuntime = useThreadListItemRuntime();
+```
+
+<ParametersTable {...ThreadListItemRuntime} />
+
+### `useThreadListItem`
+
+Access the state for a specific thread list item:
+
+```tsx
+import { useThreadListItem } from "@assistant-ui/react";
+
+const threadListItem = useThreadListItem();
+const title = useThreadListItem((m) => m.title);
+```
+
+<ParametersTable {...ThreadListItemState} />

package/.docs/raw/docs/api-reference/runtimes/ThreadListRuntime.mdx

@@ -0,0 +1,31 @@
+---
+title: ThreadListRuntime
+---
+
+import { ParametersTable } from "@/components/docs";
+import { ThreadListRuntime, ThreadListState } from "@/generated/typeDocs";
+
+### Access via `useAssistantRuntime`
+
+You can access the thread list runtime via the assistant runtime:
+
+```tsx
+import { useAssistantRuntime } from "@assistant-ui/react";
+
+const threadListRuntime = useAssistantRuntime().threadList;
+```
+
+<ParametersTable {...ThreadListRuntime} />
+
+### `useThreadList`
+
+This hook provides access to the thread list state:
+
+```tsx
+import { useThreadList } from "@assistant-ui/react";
+
+const threadList = useThreadList();
+const threads = useThreadList((m) => m.threads);
+```
+
+<ParametersTable {...ThreadListState} />

package/.docs/raw/docs/api-reference/runtimes/ThreadRuntime.mdx

@@ -0,0 +1,48 @@
+---
+title: ThreadRuntime
+---
+
+import { ParametersTable } from "@/components/docs";
+import { ThreadRuntime, ThreadState } from "@/generated/typeDocs";
+import {
+  ThreadMessagesState,
+  ThreadViewportState,
+} from "@/components/docs/parameters/context";
+
+### `useThreadRuntime`
+
+Get the thread runtime object:
+
+```tsx
+import { useThreadRuntime } from "@assistant-ui/react";
+
+const thread = useThreadRuntime();
+```
+
+<ParametersTable {...ThreadRuntime} />
+
+### `useThread`
+
+Access the thread state directly:
+
+```tsx
+import { useThread } from "@assistant-ui/react";
+
+const thread = useThread();
+const isRunning = useThread((m) => m.isRunning);
+```
+
+<ParametersTable {...ThreadState} />
+
+### `useThreadViewport`
+
+Manage thread viewport state (e.g., scrolling):
+
+```tsx
+import { useThreadViewport } from "@assistant-ui/react";
+
+const threadViewport = useThreadViewport();
+const isAtBottom = useThreadViewport((m) => m.isAtBottom);
+```
+
+<ParametersTable {...ThreadViewportState} />

package/.docs/raw/docs/architecture.mdx

@@ -0,0 +1,92 @@
+---
+title: "Architecture"
+---
+
+import { Sparkles, PanelsTopLeft, Database, Terminal } from "lucide-react";
+
+## assistant-ui is built on these main pillars:
+
+<div className="grid grid-cols-1 md:grid-cols-3 gap-4 my-8">
+    <Card title='1. Frontend components'>
+        Shadcn UI chat components with built-in state management
+    </Card>
+
+    <Card title='2. Runtime'>
+        State management layer connecting UI to LLMs and backend services
+    </Card>
+
+    <Card title='3. Assistant Cloud'>
+        Hosted service for thread persistence, history, and user management
+    </Card>
+</div>
+
+
+
+### 1. Frontend components
+Stylized and functional chat components built on top of Shadcn components that have context state management provided by the assistantUI runtime provider. These pre-built React components come with intelligent state management. [View our components](/docs/ui/Thread)
+
+### 2. Runtime
+A React state management context for assistant chat. The runtime handles data conversions between the local state and calls to backends and LLMs. We offer different runtime solutions that work with various frameworks like Vercel AI SDK, LangGraph, LangChain, Helicone, local runtime, and an ExternalStore when you need full control of the frontend message state. [You can view the runtimes we support](/docs/runtimes/pick-a-runtime)
+
+### 3. Assistant Cloud
+A hosted service that enhances your assistant experience with comprehensive thread management and message history. Assistant Cloud stores complete message history, automatically persists threads, supports human-in-the-loop workflows, and integrates with common auth providers to seamlessly allow users to resume conversations at any point. [Cloud Docs](/docs/cloud/overview)
+
+
+### There are three common ways to architect your assistant-ui application:
+
+#### **1. Direct Integration with External Providers**
+
+```mermaid
+graph TD
+    A[Frontend Components] --> B[Runtime]
+    B --> D[External Providers or LLM APIs]
+    
+    
+    classDef default color:#f8fafc,text-align:center
+    
+    style A fill:#e879f9,stroke:#2e1065,stroke-width:2px,color:#2e1065,font-weight:bold
+    style B fill:#93c5fd,stroke:#1e3a8a,stroke-width:2px,color:#1e3a8a,font-weight:bold
+    style D fill:#fca5a5,stroke:#7f1d1d,stroke-width:2px,color:#7f1d1d,font-weight:bold
+    
+    class A,B,C,D,E default
+```
+
+#### **2. Using your own API endpoint**
+
+```mermaid
+graph TD
+    A[Frontend Components] --> B[Runtime]
+    B --> E[Your API Backend]
+    E --> D[External Providers or LLM APIs]
+    
+    
+    classDef default color:#f8fafc,text-align:center
+    
+    style A fill:#e879f9,stroke:#2e1065,stroke-width:2px,color:#2e1065,font-weight:bold
+    style B fill:#93c5fd,stroke:#1e3a8a,stroke-width:2px,color:#1e3a8a,font-weight:bold
+    style D fill:#fca5a5,stroke:#7f1d1d,stroke-width:2px,color:#7f1d1d,font-weight:bold
+    style E fill:#fca5a5,stroke:#7f1d1d,stroke-width:2px,color:#7f1d1d,font-weight:bold
+    
+    class A,B,C,D,E default
+```
+
+#### **3. With Assistant Cloud**
+
+```mermaid
+graph TD
+    A[Frontend Components] --> B[Runtime]
+    B --> C[Cloud]
+    E --> C
+    C --> D[External Providers or LLM APIs]
+    B --> E[Your API Backend]
+    
+    classDef default color:#f8fafc,text-align:center
+    
+    style A fill:#e879f9,stroke:#2e1065,stroke-width:2px,color:#2e1065,font-weight:bold
+    style B fill:#93c5fd,stroke:#1e3a8a,stroke-width:2px,color:#1e3a8a,font-weight:bold
+    style C fill:#86efac,stroke:#064e3b,stroke-width:2px,color:#064e3b,font-weight:bold
+    style D fill:#fca5a5,stroke:#7f1d1d,stroke-width:2px,color:#7f1d1d,font-weight:bold
+    style E fill:#fca5a5,stroke:#7f1d1d,stroke-width:2px,color:#7f1d1d,font-weight:bold
+    
+    class A,B,C,D,E default
+```