@assistant-ui/mcp-docs-server 0.1.8 → 0.1.10

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

@@ -2,9 +2,9 @@
 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 { Steps, Step } from "fumadocs-ui/components/steps";
+import { Callout } from "fumadocs-ui/components/callout";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 
 ## Overview
 
@@ -13,7 +13,8 @@ assistant-cloud provides thread management and persistent chat history for appli
 ## 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.
+  You need an assistant-cloud account to follow this guide. [Sign up
+  here](https://cloud.assistant-ui.com/) to get started.
 </Callout>
 
 ## Setup Guide
@@ -75,40 +76,12 @@ Create a runtime provider that integrates LangGraph with assistant-cloud. Choose
 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 { 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<{
@@ -123,13 +96,28 @@ export function MyRuntimeProvider({
     [],
   );
 
-  const runtime = useCloudThreadListRuntime({
+  const runtime = useLangGraphRuntime({
     cloud,
-    runtimeHook: useMyLangGraphRuntime,
+    stream: async function* (messages, { initialize }) {
+      const { externalId } = await initialize();
+      if (!externalId) throw new Error("Thread not found");
+
+      return sendMessage({
+        threadId: externalId,
+        messages,
+      });
+    },
     create: async () => {
       const { thread_id } = await createThread();
       return { externalId: thread_id };
     },
+    load: async (externalId) => {
+      const state = await getThreadState(externalId);
+      return {
+        messages:
+          (state.values as { messages?: LangChainMessage[] }).messages ?? [],
+      };
+    },
   });
 
   return (
@@ -150,8 +138,6 @@ export function MyRuntimeProvider({
 import {
   AssistantCloud,
   AssistantRuntimeProvider,
-  useCloudThreadListRuntime,
-  useThreadListItemRuntime,
 } from "@assistant-ui/react";
 import { useLangGraphRuntime } from "@assistant-ui/react-langgraph";
 import { createThread, getThreadState, sendMessage } from "@/lib/chatApi";
@@ -159,32 +145,6 @@ 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<{
@@ -201,13 +161,28 @@ export function MyRuntimeProvider({
     [getToken],
   );
 
-  const runtime = useCloudThreadListRuntime({
+  const runtime = useLangGraphRuntime({
     cloud,
-    runtimeHook: useMyLangGraphRuntime,
+    stream: async function* (messages, { initialize }) {
+      const { externalId } = await initialize();
+      if (!externalId) throw new Error("Thread not found");
+
+      return sendMessage({
+        threadId: externalId,
+        messages,
+      });
+    },
     create: async () => {
       const { thread_id } = await createThread();
       return { externalId: thread_id };
     },
+    load: async (externalId) => {
+      const state = await getThreadState(externalId);
+      return {
+        messages:
+          (state.values as { messages?: LangChainMessage[] }).messages ?? [],
+      };
+    },
   });
 
   return (
@@ -219,7 +194,8 @@ export function MyRuntimeProvider({
 ```
 
 <Callout type="info">
-  For Clerk authentication, configure the `"assistant-ui"` token template in your Clerk dashboard.
+  For Clerk authentication, configure the `"assistant-ui"` token template in
+  your Clerk dashboard.
 </Callout>
 
 </Tab>
@@ -227,7 +203,7 @@ export function MyRuntimeProvider({
 </Tabs>
 
 <Callout type="info">
-  The `useMyLangGraphRuntime` hook is extracted into a separate function because it will be mounted multiple times, once per active thread.
+  The `useLangGraphRuntime` hook now directly accepts `cloud`, `create`, and `load` parameters for simplified thread management. The runtime handles thread lifecycle internally.
 </Callout>
 
 </Step>

package/.docs/raw/docs/copilots/assistant-frame.mdx

@@ -74,7 +74,7 @@ function ParentComponent() {
 
   return (
     <div>
-      <Thread /> {/* Your assistant UI */}
+      <Thread /> {/* Your assistant-ui */}
       <iframe
         ref={iframeRef}
         src="https://trusted-iframe-domain.com/embed"
@@ -98,10 +98,10 @@ const registry = new ModelContextRegistry();
 const toolHandle = registry.addTool({
   toolName: "convertCurrency",
   description: "Convert between currencies",
-  parameters: z.object({ 
+  parameters: z.object({
     amount: z.number(),
     from: z.string(),
-    to: z.string() 
+    to: z.string(),
   }),
   execute: async ({ amount, from, to }) => {
     const rate = await fetchExchangeRate(from, to);
@@ -113,19 +113,19 @@ const toolHandle = registry.addTool({
 toolHandle.update({
   toolName: "convertCurrency",
   description: "Convert between currencies with live rates", // Updated description
-  parameters: z.object({ 
+  parameters: z.object({
     amount: z.number(),
     from: z.string(),
     to: z.string(),
-    includesFees: z.boolean().optional()
+    includesFees: z.boolean().optional(),
   }),
   execute: async ({ amount, from, to, includesFees }) => {
     const rate = await fetchExchangeRate(from, to);
     const fee = includesFees ? 0.02 : 0; // 2% fee
-    return { 
-      result: amount * rate * (1 - fee), 
+    return {
+      result: amount * rate * (1 - fee),
       currency: to,
-      fee: includesFees ? amount * rate * fee : 0
+      fee: includesFees ? amount * rate * fee : 0,
     };
   },
 });
@@ -377,20 +377,22 @@ Provide data visualization tools in an iframe:
 registry.addTool({
   toolName: "createChart",
   description: "Generate a chart from data",
-  parameters: z.object({ 
-    data: z.array(z.object({
-      label: z.string(),
-      value: z.number()
-    })),
+  parameters: z.object({
+    data: z.array(
+      z.object({
+        label: z.string(),
+        value: z.number(),
+      }),
+    ),
     chartType: z.enum(["bar", "line", "pie"]),
-    title: z.string().optional()
+    title: z.string().optional(),
   }),
   execute: async ({ data, chartType, title }) => {
     // Generate chart using a library like Chart.js or D3
     const chartUrl = await generateChart(data, chartType, title);
-    return { 
+    return {
       chartUrl,
-      summary: `Created ${chartType} chart with ${data.length} data points`
+      summary: `Created ${chartType} chart with ${data.length} data points`,
     };
   },
 });

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

@@ -0,0 +1,51 @@
+---
+title: DevTools
+---
+
+import { Step, Steps } from "fumadocs-ui/components/steps";
+
+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.
+
+![Screenshot of the DevTools UI showing logs and state panels](../../../../.github/assets/devtoolsui.png)
+
+## Setup
+
+<Steps>
+  <Step>
+
+### Install the DevTools package
+
+```bash
+npm install @assistant-ui/react-devtools
+```
+
+  </Step>
+  <Step>
+
+### Mount the DevTools modal
+
+```tsx
+import { AssistantRuntimeProvider } from "@assistant-ui/react";
+import { DevToolsModal } from "@assistant-ui/react-devtools";
+
+export function AssistantApp() {
+  return (
+    <AssistantRuntimeProvider>
+      <DevToolsModal />
+      {/* ...your assistant-ui... */}
+    </AssistantRuntimeProvider>
+  );
+}
+```
+
+  </Step>
+  <Step>
+
+### Verify the DevTools overlay
+
+That's it! In development builds you should now see the DevTools in the lower-right corner of your site.
+
+![DevTools floating modal anchored in the lower-right corner of a page](../../../../.github/assets/devtoolsmodal.png)
+
+  </Step>
+</Steps>

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

@@ -283,8 +283,7 @@ const ThreadWelcomeSuggestions: FC = () => {
       <ThreadPrimitive.Suggestion
         className="aui-thread-welcome-suggestion"
         prompt="What is the weather in Tokyo?"
-        method="replace"
-        autoSend
+        send
       >
         <span className="aui-thread-welcome-suggestion-text">
           What is the weather in Tokyo?
@@ -293,8 +292,7 @@ const ThreadWelcomeSuggestions: FC = () => {
       <ThreadPrimitive.Suggestion
         className="aui-thread-welcome-suggestion"
         prompt="What is assistant-ui?"
-        method="replace"
-        autoSend
+        send
       >
         <span className="aui-thread-welcome-suggestion-text">
           What is assistant-ui?

package/.docs/raw/docs/guides/ToolUI.mdx

@@ -378,17 +378,42 @@ const DatePickerToolUI = makeAssistantToolUI<
 
 ### Multi-Step Interactions
 
-Build complex workflows with multiple user interactions:
+Build complex workflows with human-in-the-loop patterns for multi-step user interactions:
 
 ```tsx
-const ApprovalToolUI = makeAssistantToolUI<
-  { action: string; details: any },
-  { approved: boolean; reason?: string }
->({
+const DeleteProjectTool = makeAssistantTool({
+  toolName: "deleteProject",
+  execute: async ({ projectId }, { human }) => {
+    const response = await human({ action, details });
+    if (!response.approved) throw new Error("Project deletion cancelled");
+
+    await deleteProject(projectId);
+    return { success: true };
+  },
+});
+
+const ApprovalTool = makeAssistantTool({
+  ...tool({
+    description: "Request user approval for an action",
+    parameters: z.object({
+      action: z.string(),
+      details: z.any(),
+    }),
+    execute: async ({ action, details }, { human }) => {
+      // Request approval from user
+      const response = await human({ action, details });
+
+      return {
+        approved: response.approved,
+        reason: response.reason,
+      };
+    },
+  }),
   toolName: "requestApproval",
-  render: ({ args, result, addResult }) => {
+  render: ({ args, result, interrupt, resume }) => {
     const [reason, setReason] = useState("");
 
+    // Show result after approval/rejection
     if (result) {
       return (
         <div className={result.approved ? "text-green-600" : "text-red-600"}>
@@ -397,41 +422,53 @@ const ApprovalToolUI = makeAssistantToolUI<
       );
     }
 
-    return (
-      <div className="rounded border-2 border-yellow-400 p-4">
-        <h4 className="font-bold">Approval Required</h4>
-        <p className="my-2">{args.action}</p>
-        <pre className="rounded bg-gray-100 p-2 text-sm">
-          {JSON.stringify(args.details, null, 2)}
-        </pre>
-
-        <div className="mt-4 flex gap-2">
-          <button
-            onClick={() => addResult({ approved: true })}
-            className="rounded bg-green-500 px-4 py-2 text-white"
-          >
-            Approve
-          </button>
-          <button
-            onClick={() => addResult({ approved: false, reason })}
-            className="rounded bg-red-500 px-4 py-2 text-white"
-          >
-            Reject
-          </button>
-          <input
-            type="text"
-            placeholder="Rejection reason..."
-            value={reason}
-            onChange={(e) => setReason(e.target.value)}
-            className="flex-1 rounded border px-2"
-          />
+    // Show approval UI when waiting for user input
+    if (interrupt) {
+      return (
+        <div className="rounded border-2 border-yellow-400 p-4">
+          <h4 className="font-bold">Approval Required</h4>
+          <p className="my-2">{interrupt.payload.action}</p>
+          <pre className="rounded bg-gray-100 p-2 text-sm">
+            {JSON.stringify(interrupt.payload.details, null, 2)}
+          </pre>
+
+          <div className="mt-4 flex gap-2">
+            <button
+              onClick={() => resume({ approved: true })}
+              className="rounded bg-green-500 px-4 py-2 text-white"
+            >
+              Approve
+            </button>
+            <button
+              onClick={() => resume({ approved: false, reason })}
+              className="rounded bg-red-500 px-4 py-2 text-white"
+            >
+              Reject
+            </button>
+            <input
+              type="text"
+              placeholder="Rejection reason..."
+              value={reason}
+              onChange={(e) => setReason(e.target.value)}
+              className="flex-1 rounded border px-2"
+            />
+          </div>
         </div>
-      </div>
-    );
+      );
+    }
+
+    return <div>Processing...</div>;
   },
 });
 ```
 
+<Callout type="tip">
+  Use tool human input (`human()` / `resume()`) for workflows that need to
+  pause tool execution and wait for user input. Use `addResult()` for "human
+  tools" where the AI requests a tool call but the entire execution happens
+  through user interaction.
+</Callout>
+
 ## Advanced Features
 
 ### Tool Status Handling
@@ -589,14 +626,52 @@ type ToolUIRenderProps<TArgs, TResult> = {
   toolName: string;
   toolCallId: string;
 
-  // Interactive callback
+  // Interactive callbacks
   addResult: (result: TResult) => void;
+  resume: (payload: unknown) => void;
+
+  // Interrupt state
+  interrupt?: { type: "human"; payload: unknown }; // Payload from context.human()
 
   // Optional artifact data
   artifact?: unknown;
 };
 ```
 
+### Human Input Handling
+
+When a tool calls `human()` during execution, the payload becomes available in the render function as `interrupt.payload`:
+
+```tsx
+const ConfirmationToolUI = makeAssistantToolUI<
+  { action: string },
+  { confirmed: boolean }
+>({
+  toolName: "confirmAction",
+  render: ({ args, result, interrupt, resume }) => {
+    // Tool is waiting for user input
+    if (interrupt) {
+      return (
+        <div className="confirmation-dialog">
+          <p>Confirm: {interrupt.payload.message}</p>
+          <button onClick={() => resume(true)}>Yes</button>
+          <button onClick={() => resume(false)}>No</button>
+        </div>
+      );
+    }
+
+    // Tool completed
+    if (result) {
+      return <div>Action {result.confirmed ? "confirmed" : "cancelled"}</div>;
+    }
+
+    return <div>Processing...</div>;
+  },
+});
+```
+
+Learn more about tool human input in the [Tools Guide](/docs/guides/Tools#tool-human-input).
+
 ## Best Practices
 
 ### 1. Handle All Status States