@assistant-ui/mcp-docs-server 0.1.3 → 0.1.5

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

@@ -2,37 +2,74 @@
 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';
+
 ## Overview
 
-With the help of assistant-cloud, you can add thread management and thread history capabilities to assistant-ui.  
-This guide will walk you through the process of integrating assistant-cloud with LangGraph Cloud.
+assistant-cloud provides thread management and persistent chat history for applications built with [LangGraph Cloud](https://langchain-ai.github.io/langgraph/cloud/). This guide shows you how to integrate cloud persistence into your LangGraph application.
+
+## Prerequisites
+
+<Callout type="info">
+  You need an assistant-cloud account to follow this guide. [Sign up here](https://cloud.assistant-ui.com/) to get started.
+</Callout>
+
+## Setup Guide
+
+<Steps>
+
+<Step>
+
+### Create a Cloud Project
+
+Create a new project in the [assistant-cloud dashboard](https://cloud.assistant-ui.com/) and from the settings page, copy:
+
+- **Frontend API URL**: `https://proj-[ID].assistant-api.com`
+- **API Key**: For server-side operations
+
+</Step>
+
+<Step>
+
+### Configure Environment Variables
 
-### Prerequisites
+Add the following environment variables to your project:
 
-You need an assistant-cloud account to follow this guide.  
-You can sign up here: https://cloud.assistant-ui.com/
+```bash title=".env.local"
+# Frontend API URL from your cloud project settings
+NEXT_PUBLIC_ASSISTANT_BASE_URL=https://proj-[YOUR-ID].assistant-api.com
 
-### Setting up an assistant-cloud project
+# API key for server-side operations
+ASSISTANT_API_KEY=your-api-key-here
+```
+
+</Step>
 
-To get started, follow the steps below:
+<Step>
 
-- Create a new project on the assistant-cloud dashboard.
-- Navigate to the "Settings" tab and copy the Frontend API URL.
-- Add this URL to your .env file
+### Install Dependencies
+
+Install the required packages:
 
 ```bash
-NEXT_PUBLIC_ASSISTANT_BASE_URL=https://<your-frontend-api-url>
+npm install @assistant-ui/react @assistant-ui/react-langgraph
 ```
 
-### Connecting the runtime provider
+</Step>
+
+<Step>
 
-Now that we have everything set up, let's write the code for the runtime provider.
+### Create the Runtime Provider
 
-The code below is a simple LangGraph runtime provider that uses the assistant-cloud API to create and manage threads.
+Create a runtime provider that integrates LangGraph with assistant-cloud. Choose between anonymous mode for demos/prototypes or authenticated mode for production:
 
-```tsx twoslash {1-2,5-6,19,27,29-36,38-45}
-// @errors: 2307
+<Tabs items={["Anonymous", "Authenticated (Clerk)"]}>
 
+<Tab value="Anonymous">
+
+```tsx title="app/chat/runtime-provider.tsx"
 "use client";
 
 import {
@@ -44,19 +81,22 @@ import {
 import { useLangGraphRuntime } from "@assistant-ui/react-langgraph";
 import { createThread, getThreadState, sendMessage } from "@/lib/chatApi";
 import { LangChainMessage } from "@assistant-ui/react-langgraph";
-import { useAuth } from "@clerk/nextjs";
 import { useMemo } from "react";
 
-// ---cut---
 const useMyLangGraphRuntime = () => {
   const threadListItemRuntime = useThreadListItemRuntime();
+  
   const runtime = useLangGraphRuntime({
     stream: async function* (messages) {
       const { externalId } = await threadListItemRuntime.initialize();
       if (!externalId) throw new Error("Thread not found");
 
-      return sendMessage({ threadId: externalId, messages });
+      return sendMessage({
+        threadId: externalId,
+        messages,
+      });
     },
+
     onSwitchToThread: async (externalId) => {
       const state = await getThreadState(externalId);
       return {
@@ -69,6 +109,82 @@ const useMyLangGraphRuntime = () => {
   return runtime;
 };
 
+export function MyRuntimeProvider({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const cloud = useMemo(
+    () =>
+      new AssistantCloud({
+        baseUrl: process.env.NEXT_PUBLIC_ASSISTANT_BASE_URL!,
+        anonymous: true, // Creates browser session-based user ID
+      }),
+    [],
+  );
+
+  const runtime = useCloudThreadListRuntime({
+    cloud,
+    runtimeHook: useMyLangGraphRuntime,
+    create: async () => {
+      const { thread_id } = await createThread();
+      return { externalId: thread_id };
+    },
+  });
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      {children}
+    </AssistantRuntimeProvider>
+  );
+}
+```
+
+</Tab>
+
+<Tab value="Authenticated (Clerk)">
+
+```tsx title="app/chat/runtime-provider.tsx"
+"use client";
+
+import {
+  AssistantCloud,
+  AssistantRuntimeProvider,
+  useCloudThreadListRuntime,
+  useThreadListItemRuntime,
+} from "@assistant-ui/react";
+import { useLangGraphRuntime } from "@assistant-ui/react-langgraph";
+import { createThread, getThreadState, sendMessage } from "@/lib/chatApi";
+import { LangChainMessage } from "@assistant-ui/react-langgraph";
+import { useAuth } from "@clerk/nextjs";
+import { useMemo } from "react";
+
+const useMyLangGraphRuntime = () => {
+  const threadListItemRuntime = useThreadListItemRuntime();
+  
+  const runtime = useLangGraphRuntime({
+    stream: async function* (messages) {
+      const { externalId } = await threadListItemRuntime.initialize();
+      if (!externalId) throw new Error("Thread not found");
+
+      return sendMessage({
+        threadId: externalId,
+        messages,
+      });
+    },
+
+    onSwitchToThread: async (externalId) => {
+      const state = await getThreadState(externalId);
+      return {
+        messages:
+          (state.values as { messages?: LangChainMessage[] }).messages ?? []
+      };
+    },
+  });
+
+  return runtime;
+};
+
 export function MyRuntimeProvider({
   children,
 }: Readonly<{
@@ -79,7 +195,7 @@ export function MyRuntimeProvider({
   const cloud = useMemo(
     () =>
       new AssistantCloud({
-        baseUrl: process.env["NEXT_PUBLIC_ASSISTANT_BASE_URL"]!,
+        baseUrl: process.env.NEXT_PUBLIC_ASSISTANT_BASE_URL!,
         authToken: async () => getToken({ template: "assistant-ui" }),
       }),
     [getToken],
@@ -102,22 +218,61 @@ export function MyRuntimeProvider({
 }
 ```
 
-<Callout emoji="💡">
-  Observe that the `useMyLangGraphRuntime` hook is extracted into a separate
-  function. This hook will be mounted multiple times, once per active thread.
+<Callout type="info">
+  For Clerk authentication, configure the `"assistant-ui"` token template in your Clerk dashboard.
 </Callout>
 
-### Displaying a ThreadList component
+</Tab>
 
-Now, you can add a ThreadList component to your application. This component will display a list of threads and allow users to switch between them.
+</Tabs>
 
-```sh
-npx shadcn@latest add "https://r.assistant-ui.com/thread-list"
+<Callout type="info">
+  The `useMyLangGraphRuntime` hook is extracted into a separate function because it will be mounted multiple times, once per active thread.
+</Callout>
+
+</Step>
+
+<Step>
+
+### Add Thread UI Components
+
+Install the thread list component:
+
+```bash
+npx assistant-ui add thread-list
 ```
 
-```tsx
-<div className="grid grid-cols-[250px_1fr]">
-  <ThreadList />
-  <Thread />
-</div>
+Then add it to your application layout:
+
+```tsx title="app/chat/page.tsx"
+import { Thread } from "@/components/assistant-ui/thread";
+import { ThreadList } from "@/components/assistant-ui/thread-list";
+
+export default function ChatPage() {
+  return (
+    <div className="grid h-dvh grid-cols-[250px_1fr] gap-x-2">
+      <ThreadList />
+      <Thread />
+    </div>
+  );
+}
 ```
+
+</Step>
+
+</Steps>
+
+## Authentication
+
+The examples above show two authentication modes:
+
+- **Anonymous**: Suitable for demos and prototypes. Creates a browser session-based user ID.
+- **Authenticated**: For production use with user accounts. The authenticated example uses [Clerk](https://clerk.com/), but you can integrate any auth provider.
+
+For other authentication providers or custom implementations, see the [Cloud Authorization](/docs/cloud/authorization) guide.
+
+## Next Steps
+
+- Learn about [LangGraph runtime setup](/docs/runtimes/langgraph) for your application
+- Explore [ThreadListRuntime](/docs/api-reference/runtimes/ThreadListRuntime) for advanced thread management
+- Check out the [LangGraph example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-langgraph) on GitHub

package/.docs/raw/docs/concepts/runtime-layer.mdx

@@ -66,7 +66,7 @@ import { File, Folder, Files } from "fumadocs-ui/components/files";
       <Folder name="ThreadRuntime" defaultOpen>
         <Folder name="MessageRuntime" defaultOpen>
           <Folder
-            name="ContentPartRuntime (Text / Reasoning / Image / Audio / Tool-Call / UI)"
+            name="MessagePartRuntime (Text / Reasoning / Image / Audio / Tool-Call / UI)"
             defaultOpen
           ></Folder>
           <Folder name="MessageAttachmentRuntime" defaultOpen></Folder>
@@ -95,8 +95,8 @@ The following components provide the runtime APIs:
 // renders every message, provides MessageRuntime, ComposerRuntime (EditComposer)
 <ThreadPrimitive.Messages components={{ Message, ... }} />
 
-// renders every content part, provides ContentPartRuntime
-<MessagePrimitive.Content components={{ Text, Reasoning, Image, Audio, UI, tools }} />
+// renders every message part, provides MessagePartRuntime
+<MessagePrimitive.Parts components={{ Text, Reasoning, Image, Audio, UI, tools }} />
 
 // renders every attachment, provides AttachmentRuntime (Thread or EditComposer)
 <ComposerPrimitive.Attachments components={{ Attachment, ... }} />
@@ -104,8 +104,8 @@ The following components provide the runtime APIs:
 // renders every attachment, provides AtatchmentRuntime (Message)
 <MessagePrimitive.Attachments components={{ Attachment, ... }} />
 
-// provides a custom TextContentPartRuntime
-<TextContentPartProvider text="Hello!" />
+// provides a custom TextMessagePartRuntime
+<TextMessagePartProvider text="Hello!" />
 ```
 
 ### Accessing runtime APIs
@@ -116,7 +116,7 @@ You can access the runtime APIs with react hooks:
 const runtime = useAssistantRuntime();
 const threadRuntime = useThreadRuntime();
 const messageRuntime = useMessageRuntime();
-const contentPartRuntime = useContentPartRuntime();
+const MessagePartRuntime = useMessagePartRuntime();
 
 // thread manager has no separate hook (1:1 relationship with assistant runtime)
 const ThreadListRuntime = useAssistantRuntime().threads;
@@ -145,7 +145,7 @@ Most runtimes also expose a state through two methods `getState` and `subscribe`
 useThreadList(); // get thread manager state
 useThread(); // get thread state
 useMessage(); // get message state
-useContentPart(); // get content part state
+useMessagePart(); // get message part state
 useComposer(); // get composer state
 useThreadComposer(); // get thread composer state
 useEditComposer(); // get edit composer state

package/.docs/raw/docs/copilots/make-assistant-tool-ui.mdx

@@ -29,21 +29,23 @@ const MyToolUI = makeAssistantToolUI({
     {
       name: "toolName",
       type: "string",
-      description: "The name of the tool. This must match the name of the tool defined in the assistant.",
+      description:
+        "The name of the tool. This must match the name of the tool defined in the assistant.",
     },
     {
       name: "render",
-      type: "ComponentType<ToolCallContentPartProps<TArgs, TResult>>",
-      description: "A React component that renders the tool UI. Receives the following props:",
+      type: "ComponentType<ToolCallMessagePartProps<TArgs, TResult>>",
+      description:
+        "A React component that renders the tool UI. Receives the following props:",
       required: true,
       children: [
         {
-          type: "ToolCallContentPartProps<TArgs, TResult>",
+          type: "ToolCallMessagePartProps<TArgs, TResult>",
           parameters: [
             {
               name: "type",
-              type: "\"tool-call\"",
-              description: "The content part type",
+              type: '"tool-call"',
+              description: "The message part type",
             },
             {
               name: "toolCallId",
@@ -77,18 +79,21 @@ const MyToolUI = makeAssistantToolUI({
             },
             {
               name: "status",
-              type: "ToolCallContentPartStatus",
-              description: "The execution status object with a type property: \"running\", \"complete\", \"incomplete\", or \"requires_action\"",
+              type: "ToolCallMessagePartStatus",
+              description:
+                'The execution status object with a type property: "running", "complete", "incomplete", or "requires_action"',
             },
             {
               name: "addResult",
               type: "(result: TResult | ToolResponse<TResult>) => void",
-              description: "Function to add a result (useful for human-in-the-loop tools)",
+              description:
+                "Function to add a result (useful for human-in-the-loop tools)",
             },
             {
               name: "artifact",
               type: "unknown",
-              description: "Optional artifact data associated with the tool call",
+              description:
+                "Optional artifact data associated with the tool call",
             },
           ],
         },
@@ -110,10 +115,13 @@ import { AssistantRuntimeProvider } from "@assistant-ui/react";
 const GetWeatherUI = makeAssistantToolUI({
   toolName: "get_weather",
   render: ({ args, result, status }) => {
-    if (status.type === "requires_action") return <p>Getting weather for {args.location}...</p>;
+    if (status.type === "requires_action")
+      return <p>Getting weather for {args.location}...</p>;
     if (status.type === "running") return <p>Loading...</p>;
-    if (status.type === "incomplete" && status.reason === "error") return <p>Error getting weather.</p>;
-    if (status.type === "complete") return <p>The weather is {result.weather}.</p>;
+    if (status.type === "incomplete" && status.reason === "error")
+      return <p>Error getting weather.</p>;
+    if (status.type === "complete")
+      return <p>The weather is {result.weather}.</p>;
     return null;
   },
 });
@@ -127,4 +135,5 @@ function App() {
   );
 }
 ```
+
 This example shows how to create a simple UI for a `get_weather` tool. The UI will display different messages depending on the status of the tool execution.

package/.docs/raw/docs/copilots/make-assistant-tool.mdx

@@ -27,7 +27,7 @@ const submitForm = tool({
 // Create a tool component
 const SubmitFormTool = makeAssistantTool({
   ...submitForm,
-  toolName: "submitForm"
+  toolName: "submitForm",
 });
 
 // Use in your component
@@ -57,13 +57,15 @@ function Form() {
     {
       name: "parameters",
       type: "StandardSchemaV1<TArgs> | JSONSchema7",
-      description: "Schema defining the tool's parameters (typically a Zod schema)",
+      description:
+        "Schema defining the tool's parameters (typically a Zod schema)",
       required: true,
     },
     {
       name: "execute",
       type: "(args: TArgs, context: ToolExecutionContext) => TResult | Promise<TResult>",
-      description: "Function that implements the tool's behavior (required for frontend tools)",
+      description:
+        "Function that implements the tool's behavior (required for frontend tools)",
       required: true,
     },
     {
@@ -73,16 +75,17 @@ function Form() {
     },
     {
       name: "render",
-      type: "ComponentType<ToolCallContentPartProps<TArgs, TResult>>",
-      description: "Optional custom UI component for rendering the tool execution. Receives the following props:",
+      type: "ComponentType<ToolCallMessagePartProps<TArgs, TResult>>",
+      description:
+        "Optional custom UI component for rendering the tool execution. Receives the following props:",
       children: [
         {
-          type: "ToolCallContentPartProps<TArgs, TResult>",
+          type: "ToolCallMessagePartProps<TArgs, TResult>",
           parameters: [
             {
               name: "type",
-              type: "\"tool-call\"",
-              description: "The content part type",
+              type: '"tool-call"',
+              description: "The message part type",
             },
             {
               name: "toolCallId",
@@ -116,18 +119,21 @@ function Form() {
             },
             {
               name: "status",
-              type: "ToolCallContentPartStatus",
-              description: "The execution status object with a type property: \"running\", \"complete\", \"incomplete\", or \"requires_action\"",
+              type: "ToolCallMessagePartStatus",
+              description:
+                'The execution status object with a type property: "running", "complete", "incomplete", or "requires_action"',
             },
             {
               name: "addResult",
               type: "(result: TResult | ToolResponse<TResult>) => void",
-              description: "Function to add a result (useful for human-in-the-loop tools)",
+              description:
+                "Function to add a result (useful for human-in-the-loop tools)",
             },
             {
               name: "artifact",
               type: "unknown",
-              description: "Optional artifact data associated with the tool call",
+              description:
+                "Optional artifact data associated with the tool call",
             },
           ],
         },
@@ -176,11 +182,11 @@ const sendEmail = tool({
 // Create tool components
 const EmailValidator = makeAssistantTool({
   ...validateEmail,
-  toolName: "validateEmail"
+  toolName: "validateEmail",
 });
 const EmailSender = makeAssistantTool({
   ...sendEmail,
-  toolName: "sendEmail"
+  toolName: "sendEmail",
 });
 
 // Use together

package/.docs/raw/docs/getting-started.mdx

@@ -15,6 +15,7 @@ import { Card, Cards } from "fumadocs-ui/components/card";
   <Step>
 
 ### Initialize assistant-ui
+
 **Create a new project:**
 
 ```sh
@@ -349,7 +350,7 @@ const UserMessage: FC = () => {
       <UserActionBar />
 
       <div className="aui-user-message-content">
-        <MessagePrimitive.Content />
+        <MessagePrimitive.Parts />
       </div>
 
       <BranchPicker className="aui-user-branch-picker" />
@@ -394,7 +395,7 @@ const AssistantMessage: FC = () => {
   return (
     <MessagePrimitive.Root className="aui-assistant-message-root">
       <div className="aui-assistant-message-content">
-        <MessagePrimitive.Content components={{ Text: MarkdownText }} />
+        <MessagePrimitive.Parts components={{ Text: MarkdownText }} />
       </div>
 
       <AssistantActionBar />
@@ -1110,23 +1111,23 @@ const MyApp = () => {
 ## What's Next?
 
 <Cards>
-  <Card 
-    title="Pick a Runtime" 
+  <Card
+    title="Pick a Runtime"
     description="Choose the right runtime for your needs"
     href="/docs/runtimes/pick-a-runtime"
   />
-  <Card 
-    title="Generative UI" 
+  <Card
+    title="Generative UI"
     description="Create rich UI components for tool executions"
     href="/docs/guides/ToolUI"
   />
-  <Card 
-    title="Add Persistence" 
+  <Card
+    title="Add Persistence"
     description="Save and restore chat conversations"
     href="/docs/cloud/overview"
   />
-  <Card 
-    title="Examples" 
+  <Card
+    title="Examples"
     description="Explore full implementations and demos"
     href="https://github.com/assistant-ui/assistant-ui/tree/main/examples"
   />