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

package/.docs/raw/docs/runtimes/data-stream.mdx

@@ -0,0 +1,287 @@
+---
+title: Data Stream Protocol
+---
+
+import { Step, Steps } from "fumadocs-ui/components/steps";
+import { Callout } from "fumadocs-ui/components/callout";
+
+The `@assistant-ui/react-data-stream` package provides integration with data stream protocol endpoints, enabling streaming AI responses with tool support and state management.
+
+## Overview
+
+The data stream protocol is a standardized format for streaming AI responses that supports:
+
+- **Streaming text responses** with real-time updates
+- **Tool calling** with structured parameters and results
+- **State management** for conversation context
+- **Error handling** and cancellation support
+- **Attachment support** for multimodal interactions
+
+## Installation
+
+```bash npm2yarn
+npm install @assistant-ui/react-data-stream
+```
+
+## Basic Usage
+
+<Steps>
+
+<Step>
+
+### Set up the Runtime
+
+Use `useDataStreamRuntime` to connect to your data stream endpoint:
+
+```tsx title="app/page.tsx"
+"use client";
+import { useDataStreamRuntime } from "@assistant-ui/react-data-stream";
+import { AssistantRuntimeProvider } from "@assistant-ui/react";
+import { Thread } from "@/components/assistant-ui/thread";
+
+export default function ChatPage() {
+  const runtime = useDataStreamRuntime({
+    api: "/api/chat",
+  });
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <Thread />
+    </AssistantRuntimeProvider>
+  );
+}
+```
+
+</Step>
+
+<Step>
+
+### Create Backend Endpoint
+
+Your backend endpoint should accept POST requests and return data stream responses:
+
+```typescript title="app/api/chat/route.ts"
+import { DataStreamResponse } from "assistant-stream";
+
+export async function POST(request: Request) {
+  const { messages, tools, system } = await request.json();
+
+  // Process the request with your AI provider
+  const stream = await processWithAI({
+    messages,
+    tools,
+    system,
+  });
+
+  return new DataStreamResponse(stream);
+}
+```
+
+</Step>
+
+</Steps>
+
+## Advanced Configuration
+
+### Custom Headers and Authentication
+
+```tsx
+const runtime = useDataStreamRuntime({
+  api: "/api/chat",
+  headers: {
+    "Authorization": "Bearer " + token,
+    "X-Custom-Header": "value",
+  },
+  credentials: "include",
+});
+```
+
+### Dynamic Headers
+
+```tsx
+const runtime = useDataStreamRuntime({
+  api: "/api/chat",
+  headers: async () => {
+    const token = await getAuthToken();
+    return {
+      "Authorization": "Bearer " + token,
+    };
+  },
+});
+```
+
+### Event Callbacks
+
+```tsx
+const runtime = useDataStreamRuntime({
+  api: "/api/chat",
+  onResponse: (response) => {
+    console.log("Response received:", response.status);
+  },
+  onFinish: (message) => {
+    console.log("Message completed:", message);
+  },
+  onError: (error) => {
+    console.error("Error occurred:", error);
+  },
+  onCancel: () => {
+    console.log("Request cancelled");
+  },
+});
+```
+
+## Tool Integration
+
+### Frontend Tools
+
+Use the `frontendTools` helper to serialize client-side tools:
+
+```tsx
+import { frontendTools } from "@assistant-ui/react-data-stream";
+import { makeAssistantTool } from "@assistant-ui/react";
+
+const weatherTool = makeAssistantTool({
+  toolName: "get_weather",
+  description: "Get current weather",
+  parameters: z.object({
+    location: z.string(),
+  }),
+  execute: async ({ location }) => {
+    const weather = await fetchWeather(location);
+    return `Weather in ${location}: ${weather}`;
+  },
+});
+
+const runtime = useDataStreamRuntime({
+  api: "/api/chat",
+  body: {
+    tools: frontendTools({
+      get_weather: weatherTool,
+    }),
+  },
+});
+```
+
+### Backend Tool Processing
+
+Your backend should handle tool calls and return results:
+
+```typescript title="Backend tool handling"
+// Tools are automatically forwarded to your endpoint
+const { tools } = await request.json();
+
+// Process tools with your AI provider
+const response = await ai.generateText({
+  messages,
+  tools,
+  // Tool results are streamed back automatically
+});
+```
+
+## Assistant Cloud Integration
+
+For Assistant Cloud deployments, use `useCloudRuntime`:
+
+```tsx
+import { useCloudRuntime } from "@assistant-ui/react-data-stream";
+
+const runtime = useCloudRuntime({
+  cloud: assistantCloud,
+  assistantId: "my-assistant-id",
+});
+```
+
+<Callout type="info">
+The `useCloudRuntime` hook is currently under active development and not yet ready for production use.
+</Callout>
+
+## Message Conversion
+
+The package includes utilities for converting between message formats:
+
+```tsx
+import { toLanguageModelMessages } from "@assistant-ui/react-data-stream";
+
+// Convert assistant-ui messages to language model format
+const languageModelMessages = toLanguageModelMessages(messages, {
+  unstable_includeId: true, // Include message IDs
+});
+```
+
+## Error Handling
+
+The runtime automatically handles common error scenarios:
+
+- **Network errors**: Automatically retried with exponential backoff
+- **Stream interruptions**: Gracefully handled with partial content preservation
+- **Tool execution errors**: Displayed in the UI with error states
+- **Cancellation**: Clean abort signal handling
+
+## Best Practices
+
+### Performance Optimization
+
+```tsx
+// Use React.memo for expensive components
+const OptimizedThread = React.memo(Thread);
+
+// Memoize runtime configuration
+const runtimeConfig = useMemo(() => ({
+  api: "/api/chat",
+  headers: { "Authorization": `Bearer ${token}` },
+}), [token]);
+
+const runtime = useDataStreamRuntime(runtimeConfig);
+```
+
+### Error Boundaries
+
+```tsx
+import { ErrorBoundary } from "react-error-boundary";
+
+function ChatErrorFallback({ error, resetErrorBoundary }) {
+  return (
+    <div role="alert">
+      <h2>Something went wrong:</h2>
+      <pre>{error.message}</pre>
+      <button onClick={resetErrorBoundary}>Try again</button>
+    </div>
+  );
+}
+
+export default function App() {
+  return (
+    <ErrorBoundary FallbackComponent={ChatErrorFallback}>
+      <AssistantRuntimeProvider runtime={runtime}>
+        <Thread />
+      </AssistantRuntimeProvider>
+    </ErrorBoundary>
+  );
+}
+```
+
+### State Persistence
+
+```tsx
+const runtime = useDataStreamRuntime({
+  api: "/api/chat",
+  body: {
+    // Include conversation state
+    state: conversationState,
+  },
+  onFinish: (message) => {
+    // Save state after each message
+    saveConversationState(message.metadata.unstable_state);
+  },
+});
+```
+
+## Examples
+
+- **[Basic Data Stream Example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-data-stream)** - Simple streaming chat
+- **[Tool Integration Example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-data-stream-tools)** - Frontend and backend tools
+- **[Authentication Example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-data-stream-auth)** - Secure endpoints
+
+## API Reference
+
+For detailed API documentation, see the [`@assistant-ui/react-data-stream` API Reference](/docs/api-reference/integrations/react-data-stream).

package/.docs/raw/docs/runtimes/langgraph/index.mdx

@@ -61,7 +61,6 @@ npm install @assistant-ui/react @assistant-ui/react-ui @assistant-ui/react-langg
 ```tsx twoslash title="@/api/api/[...path]/route.ts"
 import { NextRequest, NextResponse } from "next/server";
 
-export const runtime = "edge";
 
 function getCorsHeaders() {
   return {

package/.docs/raw/docs/runtimes/langserve.mdx

@@ -2,6 +2,10 @@
 title: LangChain LangServe
 ---
 
+<Callout type="warning">
+  This integration has not been tested with AI SDK v5.
+</Callout>
+
 ## Overview
 
 Integration with a LangServe server via Vercel AI SDK.
@@ -33,23 +37,17 @@ npm install @assistant-ui/react @assistant-ui/react-ai-sdk ai @ai-sdk/react @lan
 
 ### Setup a backend route under `/api/chat`
 
-```tsx twoslash title="@/app/api/chat/route.ts"
-// @errors: 2558 2345
+```tsx title="@/app/api/chat/route.ts"
 import { RemoteRunnable } from "@langchain/core/runnables/remote";
-import type { RunnableConfig } from "@langchain/core/runnables";
-import { streamText, LangChainAdapter, type Message } from "ai";
+import { toDataStreamResponse } from "@ai-sdk/langchain";
 
 export const maxDuration = 30;
 
 export async function POST(req: Request) {
-  const { messages } = (await req.json()) as { messages: Message[] };
+  const { messages } = await req.json();
 
   // TODO replace with your own langserve URL
-  const remoteChain = new RemoteRunnable<
-    { messages: Message[] },
-    string,
-    RunnableConfig
-  >({
+  const remoteChain = new RemoteRunnable({
     url: "<YOUR_LANGSERVE_URL>",
   });
 
@@ -57,7 +55,7 @@ export async function POST(req: Request) {
     messages,
   });
 
-  return LangChainAdapter.toDataStreamResponse(stream);
+  return toDataStreamResponse(stream);
 }
 ```
 

package/.docs/raw/docs/runtimes/pick-a-runtime.mdx

@@ -48,6 +48,11 @@ For popular frameworks, we provide ready-to-use integrations built on top of our
     description="For useChat and useAssistant hooks - streaming with all major providers"
     href="/docs/runtimes/ai-sdk/use-chat"
   />
+  <Card
+    title="Data Stream Protocol"
+    description="For custom backends using the data stream protocol standard"
+    href="/docs/runtimes/data-stream"
+  />
   <Card
     title="LangGraph"
     description="For complex agent workflows with LangChain's graph framework"

package/.docs/raw/docs/ui/ThreadList.mdx

@@ -3,6 +3,8 @@ title: ThreadList
 ---
 
 import { Steps, Step } from "fumadocs-ui/components/steps";
+import { Callout } from "fumadocs-ui/components/callout";
+import { Tabs, Tab } from "fumadocs-ui/components/tabs";
 import { ThreadListSample } from "../../../components/samples/threadlist-sample";
 
 ## Overview
@@ -11,37 +13,73 @@ The ThreadList component lets the user switch between threads.
 
 <ThreadListSample />
 
+<Callout>
+This demo uses **ThreadListSidebar**, which includes `thread-list` as a dependency and provides a complete sidebar layout. For custom implementations, you can use `thread-list` directly.
+</Callout>
+
 ## Getting Started
 
 <Steps>
   <Step>
 
-### Add `thread-list`
+### Add the component
 
 ```sh
+# Complete thread-list sidebar layout
+npx shadcn@latest add "https://r.assistant-ui.com/threadlist-sidebar"
+
+# Just the thread-list for custom layouts
 npx shadcn@latest add "https://r.assistant-ui.com/thread-list"
 ```
 
-This adds a `/components/assistant-ui/thread-list.tsx` file to your project, which you can adjust as needed.
-
   </Step>
   <Step>
 
 ### Use in your application
 
-```tsx title="/app/page.tsx" {1,5-6}
-import { Thread } from "@/components/assistant-ui/thread";
-import { ThreadList } from "@/components/assistant-ui/thread-list";
-
-export default function Home() {
-  return (
-    <div className="grid h-full grid-cols-[200px_1fr]">
-      <ThreadList />
-      <Thread />
-    </div>
-  );
-}
-```
+<Tabs items={["With Sidebar", "Without Sidebar"]}>
+  <Tab value="With Sidebar">
+    ```tsx title="/app/assistant.tsx"
+    import { Thread } from "@/components/assistant-ui/thread";
+    import { ThreadListSidebar } from "@/components/assistant-ui/threadlist-sidebar";
+    import { 
+      SidebarProvider, 
+      SidebarInset,
+      SidebarTrigger 
+    } from "@/components/ui/sidebar";
+
+    export default function Assistant() {
+      return (
+        <SidebarProvider>
+          <div className="flex h-dvh w-full">
+            <ThreadListSidebar />
+            <SidebarInset>
+              {/* Add sidebar trigger, location can be customized */}
+              <SidebarTrigger className="absolute top-4 left-4" />
+              <Thread />
+            </SidebarInset>
+          </div>
+        </SidebarProvider>
+      );
+    }
+    ```
+  </Tab>
+  <Tab value="Without Sidebar">
+    ```tsx title="/app/assistant.tsx"
+    import { Thread } from "@/components/assistant-ui/thread";
+    import { ThreadList } from "@/components/assistant-ui/thread-list";
+
+    export default function Assistant() {
+      return (
+        <div className="grid h-full grid-cols-[200px_1fr]">
+          <ThreadList />
+          <Thread />
+        </div>
+      );
+    }
+    ```
+  </Tab>
+</Tabs>
 
   </Step>
 </Steps>

package/dist/{chunk-L4K23SWI.js → chunk-NVNFQ5ZO.js}

@@ -109,6 +109,9 @@ function sanitizePath(userPath) {
   if (!userPath || typeof userPath !== "string") {
     throw new Error("Invalid path: Path must be a non-empty string");
   }
+  if (userPath.includes("../") || userPath.includes("..\\")) {
+    throw new Error("Invalid path: Directory traversal attempt detected");
+  }
   const normalized = normalize(userPath);
   if (path.isAbsolute(normalized)) {
     throw new Error("Invalid path: Absolute paths are not allowed");
@@ -138,7 +141,7 @@ function sanitizePath(userPath) {
       throw new Error("Invalid path: Hidden files are not allowed");
     }
   }
-  return relativePath;
+  return relativePath.replace(/\\/g, "/");
 }
 
 // src/tools/docs.ts

package/dist/index.js

@@ -1 +1 @@
-export { runServer, server } from './chunk-L4K23SWI.js';
+export { runServer, server } from './chunk-NVNFQ5ZO.js';

package/dist/prepare-docs/prepare.js

@@ -153,7 +153,7 @@ _Note: Additional files truncated due to size limits_
 `;
             break;
           }
-          markdown += `## ${file.path}
+          markdown += `## ${file.path.replace(/\\/g, "/")}
 
 `;
           markdown += `\`\`\`${getFileType(file.path)}

package/dist/stdio.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { runServer } from './chunk-L4K23SWI.js';
+import { runServer } from './chunk-NVNFQ5ZO.js';
 
 // src/stdio.ts
 void runServer().catch((error) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/mcp-docs-server",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "MCP server for assistant-ui documentation and examples",
   "type": "module",
   "main": "dist/index.js",
@@ -8,18 +8,18 @@
     "assistant-ui-mcp": "./dist/stdio.js"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.17.1",
-    "zod": "^4.0.14",
+    "@modelcontextprotocol/sdk": "^1.17.3",
+    "zod": "^4.0.17",
     "gray-matter": "^4.0.3",
     "cross-env": "^10.0.0"
   },
   "devDependencies": {
-    "@types/node": "^24.1.0",
+    "@types/node": "^24.3.0",
     "tsup": "^8.5.0",
-    "tsx": "^4.20.3",
+    "tsx": "^4.20.4",
     "typescript": "^5.9.2",
     "vitest": "^3.2.4",
-    "eslint": "^9.32.0"
+    "eslint": "^9.33.0"
   },
   "files": [
     "dist",
@@ -30,7 +30,7 @@
     "access": "public"
   },
   "scripts": {
-    "clean": "rm -rf dist .docs",
+    "clean": "tsx scripts/clean.mts",
     "prepare-docs": "cross-env PREPARE=true node ./dist/prepare-docs/prepare.js",
     "build:cli": "tsup src/stdio.ts src/prepare-docs/prepare.ts src/index.ts --format esm --treeshake=smallest --splitting",
     "build": "pnpm clean && pnpm build:cli && pnpm prepare-docs",