@assistant-ui/mcp-docs-server 0.1.7 → 0.1.9

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

@@ -0,0 +1,160 @@
+---
+title: ThreadListItemPrimitive
+---
+
+A single thread item within a thread list.
+
+import { ParametersTable } from "@/components/docs";
+
+## Anatomy
+
+```tsx
+import { ThreadListItemPrimitive } from "@assistant-ui/react";
+
+const ThreadListItem = () => (
+  <ThreadListItemPrimitive.Root>
+    <ThreadListItemPrimitive.Trigger>
+      <ThreadListItemPrimitive.Title />
+    </ThreadListItemPrimitive.Trigger>
+    <ThreadListItemPrimitive.Archive />
+    <ThreadListItemPrimitive.Unarchive />
+    <ThreadListItemPrimitive.Delete />
+  </ThreadListItemPrimitive.Root>
+);
+```
+
+## API Reference
+
+### Root
+
+Contains all parts of the thread list item.
+
+This primitive renders a `<div>` element unless `asChild` is set. It automatically adds `data-active="true"` and `aria-current="true"` attributes when the thread is the currently active thread.
+
+<ParametersTable
+  type="ThreadListItemPrimitiveRootProps"
+  parameters={[
+    {
+      name: "asChild",
+    },
+  ]}
+/>
+
+### Trigger
+
+A button that switches to the thread when clicked.
+
+This primitive renders a `<button>` element unless `asChild` is set.
+
+<ParametersTable
+  type="ThreadListItemPrimitiveTriggerProps"
+  parameters={[
+    {
+      name: "asChild",
+    },
+  ]}
+/>
+
+### Title
+
+Displays the title of the thread.
+
+This primitive renders a `<span>` element unless `asChild` is set. The title is automatically derived from the first user message in the thread.
+
+<ParametersTable
+  type="ThreadListItemPrimitiveTitleProps"
+  parameters={[
+    {
+      name: "asChild",
+    },
+  ]}
+/>
+
+### Archive
+
+A button to archive the thread. Only shown for non-archived threads.
+
+This primitive renders a `<button>` element unless `asChild` is set.
+
+<ParametersTable
+  type="ThreadListItemPrimitiveArchiveProps"
+  parameters={[
+    {
+      name: "asChild",
+    },
+  ]}
+/>
+
+### Unarchive
+
+A button to unarchive the thread. Only shown for archived threads.
+
+This primitive renders a `<button>` element unless `asChild` is set.
+
+<ParametersTable
+  type="ThreadListItemPrimitiveUnarchiveProps"
+  parameters={[
+    {
+      name: "asChild",
+    },
+  ]}
+/>
+
+### Delete
+
+A button to permanently delete the thread.
+
+This primitive renders a `<button>` element unless `asChild` is set.
+
+<ParametersTable
+  type="ThreadListItemPrimitiveDeleteProps"
+  parameters={[
+    {
+      name: "asChild",
+    },
+  ]}
+/>
+
+## Examples
+
+### Basic Thread List Item
+
+```tsx
+const MyThreadListItem = () => {
+  return (
+    <ThreadListItemPrimitive.Root className="thread-item">
+      <ThreadListItemPrimitive.Trigger className="thread-trigger">
+        <ThreadListItemPrimitive.Title />
+      </ThreadListItemPrimitive.Trigger>
+      <div className="thread-actions">
+        <ThreadListItemPrimitive.Archive>
+          Archive
+        </ThreadListItemPrimitive.Archive>
+        <ThreadListItemPrimitive.Delete>
+          Delete
+        </ThreadListItemPrimitive.Delete>
+      </div>
+    </ThreadListItemPrimitive.Root>
+  );
+};
+```
+
+### Archived Thread List Item
+
+```tsx
+const ArchivedThreadListItem = () => {
+  return (
+    <ThreadListItemPrimitive.Root className="archived-thread-item">
+      <ThreadListItemPrimitive.Trigger>
+        <ThreadListItemPrimitive.Title />
+      </ThreadListItemPrimitive.Trigger>
+      <ThreadListItemPrimitive.Unarchive>
+        Restore
+      </ThreadListItemPrimitive.Unarchive>
+      <ThreadListItemPrimitive.Delete>
+        Delete Permanently
+      </ThreadListItemPrimitive.Delete>
+    </ThreadListItemPrimitive.Root>
+  );
+};
+```

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

@@ -20,14 +20,3 @@ const runtime = useAssistantRuntime();
 ### 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/ComposerRuntime.mdx

@@ -7,15 +7,15 @@ The composer runtime allows you to view or edit anything related to how new info
 import { ParametersTable } from "@/components/docs";
 import { ComposerRuntime, ThreadComposerRuntime, ThreadComposerState, EditComposerState } from "@/generated/typeDocs";
 
-### `useComposer`
+### `useComposerRuntime`
 
 Grabs the nearest composer (whether it’s the edit composer or the thread’s composer):
 
 ```tsx
 // Example
-import { useComposer } from "@assistant-ui/react";
+import { useComposerRuntime } from "@assistant-ui/react";
 
-const composerRuntime = useComposer();
+const composerRuntime = useComposerRuntime();
 
 // set the text
 composerRuntime.setText("Hello from the composer runtime");

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

@@ -0,0 +1,399 @@
+---
+title: Assistant Frame API
+description: Share model context across iframe boundaries
+---
+
+The Assistant Frame API enables iframes to provide model context (tools and instructions) to a parent window's assistant. This is particularly useful for embedded applications, plugins, or sandboxed components that need to contribute capabilities to the main assistant.
+
+## Overview
+
+The Assistant Frame system consists of two main components:
+
+- **AssistantFrameProvider**: Runs inside the iframe and provides model context
+- **AssistantFrameHost**: Runs in the parent window and consumes context from iframes
+
+## Basic Usage
+
+### In the iframe (Provider)
+
+The iframe acts as a provider of model context using `AssistantFrameProvider`:
+
+```tsx
+// iframe.tsx
+import { AssistantFrameProvider } from "@assistant-ui/react";
+import { ModelContextRegistry } from "@assistant-ui/react";
+import { z } from "zod";
+
+// Create a registry to manage your model context
+const registry = new ModelContextRegistry();
+
+// Expose the registry to the parent window
+AssistantFrameProvider.addModelContextProvider(registry);
+
+// Add tools that will be available to the parent assistant
+registry.addTool({
+  toolName: "searchProducts",
+  description: "Search for products in the catalog",
+  parameters: z.object({
+    query: z.string(),
+    category: z.string().optional(),
+  }),
+  execute: async ({ query, category }) => {
+    // Tool implementation runs in the iframe
+    const results = await searchAPI(query, category);
+    return { products: results };
+  },
+});
+
+// Add system instructions
+const instructionHandle = registry.addInstruction(
+  "You are a helpful assistant.",
+);
+
+// update the instruction
+instructionHandle.update("You have access to a product catalog search tool.");
+```
+
+### In the parent window (Host)
+
+The parent window consumes the iframe's context using `AssistantFrameHost`:
+
+```tsx
+// parent.tsx
+import { useAssistantFrameHost } from "@assistant-ui/react";
+import { useRef } from "react";
+
+function ParentComponent() {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  // Connect to the iframe's model context
+  useAssistantFrameHost({
+    iframeRef,
+    targetOrigin: "https://trusted-iframe-domain.com", // optional for increased security
+  });
+
+  return (
+    <div>
+      <Thread /> {/* Your assistant-ui */}
+      <iframe
+        ref={iframeRef}
+        src="https://trusted-iframe-domain.com/embed"
+        title="Embedded App"
+      />
+    </div>
+  );
+}
+```
+
+## Advanced Usage
+
+### ModelContextRegistry
+
+The `ModelContextRegistry` provides a flexible way to manage model context dynamically:
+
+```tsx
+const registry = new ModelContextRegistry();
+
+// Add a tool with handle for updates
+const toolHandle = registry.addTool({
+  toolName: "convertCurrency",
+  description: "Convert between currencies",
+  parameters: z.object({
+    amount: z.number(),
+    from: z.string(),
+    to: z.string(),
+  }),
+  execute: async ({ amount, from, to }) => {
+    const rate = await fetchExchangeRate(from, to);
+    return { result: amount * rate, currency: to };
+  },
+});
+
+// Update the tool later
+toolHandle.update({
+  toolName: "convertCurrency",
+  description: "Convert between currencies with live rates", // Updated description
+  parameters: z.object({
+    amount: z.number(),
+    from: z.string(),
+    to: z.string(),
+    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),
+      currency: to,
+      fee: includesFees ? amount * rate * fee : 0,
+    };
+  },
+});
+
+// Remove the tool when no longer needed
+toolHandle.remove();
+
+// Add multiple instructions
+const instruction1 = registry.addInstruction("Be helpful and concise.");
+const instruction2 = registry.addInstruction("Use metric units.");
+
+// Remove instructions
+instruction1.remove();
+```
+
+### Multiple Providers
+
+You can register multiple model context providers in the same iframe:
+
+```tsx
+const catalogRegistry = new ModelContextRegistry();
+const analyticsRegistry = new ModelContextRegistry();
+
+// Add different tools to each registry
+catalogRegistry.addTool({
+  /* ... */
+});
+analyticsRegistry.addTool({
+  /* ... */
+});
+
+// Register both providers
+const unsubscribe1 =
+  AssistantFrameProvider.addModelContextProvider(catalogRegistry);
+const unsubscribe2 =
+  AssistantFrameProvider.addModelContextProvider(analyticsRegistry);
+
+// Later, unsubscribe if needed
+unsubscribe1();
+unsubscribe2();
+```
+
+### Security Considerations
+
+#### Origin Validation
+
+Both the provider and host can specify allowed origins for security:
+
+```tsx
+// In iframe - only accept messages from specific parent
+AssistantFrameProvider.addModelContextProvider(
+  registry,
+  "https://parent-app.com",
+);
+
+// In parent - only accept messages from specific iframe
+useAssistantFrameHost({
+  iframeRef,
+  targetOrigin: "https://iframe-app.com",
+});
+```
+
+#### Tool Execution
+
+Tools are executed in the iframe's context, keeping sensitive operations sandboxed:
+
+```tsx
+registry.addTool({
+  toolName: "accessDatabase",
+  description: "Query the database",
+  parameters: z.object({ query: z.string() }),
+  execute: async ({ query }) => {
+    // This runs in the iframe with iframe's permissions
+    // Parent cannot directly access the database
+    const results = await db.query(query);
+    return results;
+  },
+});
+```
+
+## API Reference
+
+### AssistantFrameProvider
+
+Static class that manages model context providers in an iframe.
+
+#### Methods
+
+##### `addModelContextProvider(provider, targetOrigin?)`
+
+Registers a model context provider to share with parent windows.
+
+```tsx
+const unsubscribe = AssistantFrameProvider.addModelContextProvider(
+  registry,
+  "https://parent-domain.com", // Optional origin restriction
+);
+```
+
+##### `dispose()`
+
+Cleans up all resources and removes all providers.
+
+```tsx
+AssistantFrameProvider.dispose();
+```
+
+### AssistantFrameHost
+
+Class that connects to an iframe's model context providers.
+
+#### Constructor
+
+```tsx
+const host = new AssistantFrameHost(
+  iframeWindow,
+  targetOrigin? // Optional origin restriction
+);
+```
+
+#### Methods
+
+##### `getModelContext()`
+
+Returns the current merged model context from the iframe.
+
+```tsx
+const context = host.getModelContext();
+// { system: "...", tools: { ... } }
+```
+
+##### `subscribe(callback)`
+
+Subscribes to model context changes.
+
+```tsx
+const unsubscribe = host.subscribe(() => {
+  console.log("Context updated:", host.getModelContext());
+});
+```
+
+##### `dispose()`
+
+Cleans up the connection to the iframe.
+
+```tsx
+host.dispose();
+```
+
+### useAssistantFrameHost
+
+React hook that manages the lifecycle of an AssistantFrameHost.
+
+```tsx
+useAssistantFrameHost({
+  iframeRef: RefObject<HTMLIFrameElement>,
+  targetOrigin?: string,
+});
+```
+
+### ModelContextRegistry
+
+A flexible registry for managing model context with dynamic updates.
+
+#### Methods
+
+##### `addTool(tool)`
+
+Adds a tool and returns a handle for updates/removal.
+
+```tsx
+const handle = registry.addTool({
+  toolName: string,
+  description?: string,
+  parameters: ZodSchema | JSONSchema,
+  execute: (args, context) => Promise<any>,
+});
+
+handle.update(newTool); // Update the tool
+handle.remove(); // Remove the tool
+```
+
+##### `addInstruction(instruction)`
+
+Adds a system instruction and returns a handle.
+
+```tsx
+const handle = registry.addInstruction("Be concise.");
+handle.update("Be detailed."); // Update instruction
+handle.remove(); // Remove instruction
+```
+
+##### `addProvider(provider)`
+
+Adds another model context provider.
+
+```tsx
+const handle = registry.addProvider(anotherProvider);
+handle.remove(); // Remove provider
+```
+
+## Use Cases
+
+### Embedded Analytics Dashboard
+
+An analytics iframe can provide data query tools to the parent assistant:
+
+```tsx
+// In analytics iframe
+registry.addTool({
+  toolName: "queryMetrics",
+  description: "Query analytics data",
+  parameters: z.object({
+    metric: z.string(),
+    timeRange: z.string(),
+  }),
+  execute: async ({ metric, timeRange }) => {
+    const data = await analyticsAPI.query(metric, timeRange);
+    return { data, visualization: createChart(data) };
+  },
+});
+```
+
+### Plugin System
+
+Third-party plugins can extend the assistant's capabilities:
+
+```tsx
+// In plugin iframe
+registry.addTool({
+  toolName: "translateText",
+  description: "Translate text to another language",
+  parameters: z.object({
+    text: z.string(),
+    targetLanguage: z.string(),
+  }),
+  execute: async ({ text, targetLanguage }) => {
+    return await pluginAPI.translate(text, targetLanguage);
+  },
+});
+```
+
+### Data Visualization
+
+Provide data visualization tools in an iframe:
+
+```tsx
+// In visualization 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(),
+      }),
+    ),
+    chartType: z.enum(["bar", "line", "pie"]),
+    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 {
+      chartUrl,
+      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

@@ -22,7 +22,10 @@ import { Card, Cards } from "fumadocs-ui/components/card";
 # Create a new project with the default template
 npx assistant-ui@latest create
 
-# Or start with a template:
+# Or choose one of the following templates:
+# Assistant Cloud for baked in persistence and thread management
+npx assistant-ui@latest create -t cloud
+
 # LangGraph
 npx assistant-ui@latest create -t langgraph
 
@@ -686,11 +689,11 @@ import { ComponentPropsWithoutRef, forwardRef } from "react";
 import {
   Tooltip,
   TooltipContent,
-  TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { Slottable } from "@radix-ui/react-slot";
 
 export type TooltipIconButtonProps = ComponentPropsWithoutRef<typeof Button> & {
   tooltip: string;
@@ -702,23 +705,21 @@ export const TooltipIconButton = forwardRef<
   TooltipIconButtonProps
 >(({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
   return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant="ghost"
-            size="icon"
-            {...rest}
-            className={cn("", className)}
-            ref={ref}
-          >
-            {children}
-            <span className="aui-sr-only">{tooltip}</span>
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent side={side}>{tooltip}</TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          {...rest}
+          className={cn("aui-button-icon", className)}
+          ref={ref}
+        >
+          <Slottable>{children}</Slottable>
+          <span className="aui-sr-only">{tooltip}</span>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side={side}>{tooltip}</TooltipContent>
+    </Tooltip>
   );
 });