Add MCP client with VS Code-compatible configuration

- Added @ai-sdk/mcp package for Model Context Protocol support
- Created MCPClientManager for managing multiple MCP server connections
- Implemented config loader with VS Code-compatible mcp.json format
- Added environment variable substitution syntax
- Created DynamicToolRenderer component for rendering MCP tools in chat UI
- Integrated dynamic tool rendering in message.tsx
- Added comprehensive documentation in docs/MCP.md
- Included mcp.json.example with HTTP transport example
- Added mcp.json to .gitignore for security

Addresses #1368

Author: blacksheep-git

.gitignore

@@ -30,6 +30,9 @@ yarn-error.log*
 .env.test.local
 .env.production.local
 
+# MCP configuration (may contain sensitive tokens)
+mcp.json
+
 # turbo
 .turbo
 

components/dynamic-tool-renderer.tsx

@@ -0,0 +1,141 @@
+"use client";
+import type { UseChatHelpers } from "@ai-sdk/react";
+import type { ChatMessage } from "@/lib/types";
+import {
+  Tool,
+  ToolContent,
+  ToolHeader,
+  ToolInput,
+  ToolOutput,
+} from "./elements/tool";
+
+type DynamicToolPartType = "dynamic-tool-call" | "dynamic-tool-result";
+
+type DynamicToolPart = {
+  type: DynamicToolPartType;
+  toolCallId: string;
+  toolName: string;
+  state:
+    | "input-available"
+    | "output-available"
+    | "approval-requested"
+    | "approval-responded"
+    | "output-denied";
+  input?: any;
+  output?: any;
+  approval?: {
+    id: string;
+    approved?: boolean;
+  };
+};
+
+type DynamicToolRendererProps = {
+  part: DynamicToolPart;
+  addToolApprovalResponse: UseChatHelpers<ChatMessage>["addToolApprovalResponse"];
+};
+
+export function DynamicToolRenderer({
+  part,
+  addToolApprovalResponse,
+}: DynamicToolRendererProps) {
+  const { toolCallId, toolName, state } = part;
+  const approvalId = part.approval?.id;
+  const isDenied =
+    state === "output-denied" ||
+    (state === "approval-responded" && part.approval?.approved === false);
+
+  // Format tool name for display
+  const displayName = toolName.replace(/:/g, " › ");
+
+  if (isDenied) {
+    return (
+      <Tool className="w-full" defaultOpen={true}>
+        <ToolHeader state="output-denied" type={toolName as any} />
+        <ToolContent>
+          <div className="px-4 py-3 text-muted-foreground text-sm">
+            Tool execution was denied.
+          </div>
+        </ToolContent>
+      </Tool>
+    );
+  }
+
+  if (state === "output-available") {
+    return (
+      <Tool className="w-full" defaultOpen={true}>
+        <ToolHeader state={state} type={toolName as any} />
+        <ToolContent>
+          {part.input && <ToolInput input={part.input} />}
+          {part.output && (
+            <ToolOutput
+              errorText={
+                typeof part.output === "object" && "error" in part.output
+                  ? String(part.output.error)
+                  : undefined
+              }
+              output={
+                <div className="overflow-auto">
+                  <pre className="whitespace-pre-wrap break-words rounded bg-muted p-3 font-mono text-xs">
+                    {JSON.stringify(part.output, null, 2)}
+                  </pre>
+                </div>
+              }
+            />
+          )}
+        </ToolContent>
+      </Tool>
+    );
+  }
+
+  if (state === "approval-responded") {
+    return (
+      <Tool className="w-full" defaultOpen={true}>
+        <ToolHeader state={state} type={toolName as any} />
+        <ToolContent>
+          <ToolInput input={part.input} />
+        </ToolContent>
+      </Tool>
+    );
+  }
+
+  // input-available or approval-requested
+  return (
+    <Tool className="w-full" defaultOpen={true}>
+      <ToolHeader state={state} type={toolName as any} />
+      <ToolContent>
+        {(state === "input-available" || state === "approval-requested") && (
+          <ToolInput input={part.input} />
+        )}
+        {state === "approval-requested" && approvalId && (
+          <div className="flex items-center justify-end gap-2 border-t px-4 py-3">
+            <button
+              className="rounded-md px-3 py-1.5 text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground"
+              onClick={() => {
+                addToolApprovalResponse({
+                  id: approvalId,
+                  approved: false,
+                  reason: `User denied ${displayName}`,
+                });
+              }}
+              type="button"
+            >
+              Deny
+            </button>
+            <button
+              className="rounded-md bg-primary px-3 py-1.5 text-primary-foreground text-sm transition-colors hover:bg-primary/90"
+              onClick={() => {
+                addToolApprovalResponse({
+                  id: approvalId,
+                  approved: true,
+                });
+              }}
+              type="button"
+            >
+              Allow
+            </button>
+          </div>
+        )}
+      </ToolContent>
+    </Tool>
+  );
+}

components/message.tsx

@@ -8,6 +8,7 @@ import { cn, sanitizeText } from "@/lib/utils";
 import { useDataStream } from "./data-stream-provider";
 import { DocumentToolResult } from "./document";
 import { DocumentPreview } from "./document-preview";
+import { DynamicToolRenderer } from "./dynamic-tool-renderer";
 import { MessageContent } from "./elements/message";
 import { Response } from "./elements/response";
 import {
@@ -339,6 +340,22 @@ const PurePreviewMessage = ({
               );
             }
 
+            // Handle dynamic tools from MCP servers
+            if (
+              type.startsWith("tool-") &&
+              !["tool-getWeather", "tool-createDocument", "tool-updateDocument", "tool-requestSuggestions"].includes(type)
+            ) {
+              // This is a dynamic tool
+              const dynamicPart = part as any;
+              return (
+                <DynamicToolRenderer
+                  addToolApprovalResponse={addToolApprovalResponse}
+                  key={dynamicPart.toolCallId}
+                  part={dynamicPart}
+                />
+              );
+            }
+
             return null;
           })}
 

docs/MCP.md

@@ -0,0 +1,185 @@
+# MCP (Model Context Protocol) Integration
+
+This project supports connecting to MCP servers using VS Code-compatible configuration.
+
+## Setup
+
+1. Copy the example configuration:
+```bash
+cp mcp.json.example mcp.json
+```
+
+2. Edit `mcp.json` to configure your MCP servers:
+```json
+{
+  "servers": {
+    "github": {
+      "command": "docker",
+      "args": ["run", "-i", "--rm", "-e", "GITHUB_PERSONAL_ACCESS_TOKEN", "ghcr.io/github/github-mcp-server"],
+      "env": {
+        "GITHUB_PERSONAL_ACCESS_TOKEN": "${input:github_token}"
+      },
+      "type": "stdio"
+    }
+  },
+  "inputs": [
+    {
+      "id": "github_token",
+      "type": "promptString",
+      "description": "GitHub Personal Access Token",
+      "password": true
+    }
+  ]
+}
+```
+
+3. Set input values in your application code before connecting to servers.
+
+## Usage
+
+### Server-side
+
+```typescript
+import { MCPClientManager, loadMCPConfig } from "@/lib/mcp";
+
+// Load configuration
+const config = await loadMCPConfig("mcp.json");
+
+// Create manager
+const mcpManager = new MCPClientManager(config);
+
+// Set input values (e.g., from user prompts or environment)
+mcpManager.setInputValue("github_token", process.env.GITHUB_TOKEN);
+
+// Connect to a server
+await mcpManager.connect("github");
+
+// Get all tools from connected servers
+const tools = await mcpManager.getAllTools();
+
+// Use tools with AI SDK
+import { generateText } from "ai";
+
+const result = await generateText({
+  model: yourModel,
+  prompt: "List my GitHub repositories",
+  tools,
+});
+```
+
+### Client-side
+
+Dynamic tools from MCP servers are automatically rendered in the chat UI using the `DynamicToolRenderer` component.
+
+## Supported Transports
+
+**Currently supported (beta):**
+- `http`: HTTP transport for remote MCP servers
+- `sse`: Server-Sent Events transport
+
+**Coming in AI SDK 6 stable:**
+- `stdio`: Local process communication (Docker, npx, Node.js)
+
+### HTTP Transport Example
+```json
+{
+  "servers": {
+    "my-server": {
+      "url": "https://your-mcp-server.com/mcp",
+      "env": {
+        "Authorization": "Bearer ${input:api_token}"
+      },
+      "type": "http"
+    }
+  }
+}
+```
+
+### stdio Transport (Future)
+Once AI SDK 6 stable is released with full stdio support:
+```json
+{
+  "servers": {
+    "github": {
+      "command": "docker",
+      "args": ["run", "-i", "--rm", "ghcr.io/github/github-mcp-server"],
+      "type": "stdio"
+    }
+  }
+}
+```
+
+## Configuration Format
+
+The configuration format is compatible with VS Code's MCP settings:
+
+- `servers`: Object mapping server names to configurations
+  - `command`: Command to execute (e.g., "docker", "npx", "node")
+  - `args`: Array of command arguments
+  - `env`: Optional environment variables (supports `${input:id}` substitution)
+  - `type`: Transport type ("stdio")
+
+- `inputs`: Optional array of input prompts
+  - `id`: Unique identifier referenced in env vars
+  - `type`: Input type ("promptString")
+  - `description`: Human-readable description
+  - `password`: Whether to hide input (boolean)
+
+## Examples
+
+### Filesystem MCP Server
+```json
+{
+  "servers": {
+    "filesystem": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/directory"],
+      "type": "stdio"
+    }
+  }
+}
+```
+
+### Multiple Servers
+```json
+{
+  "servers": {
+    "github": {
+      "command": "docker",
+      "args": ["run", "-i", "--rm", "-e", "GITHUB_PERSONAL_ACCESS_TOKEN", "ghcr.io/github/github-mcp-server"],
+      "env": {
+        "GITHUB_PERSONAL_ACCESS_TOKEN": "${input:github_token}"
+      },
+      "type": "stdio"
+    },
+    "database": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-postgres"],
+      "env": {
+        "DATABASE_URL": "${input:db_url}"
+      },
+      "type": "stdio"
+    }
+  },
+  "inputs": [
+    {
+      "id": "github_token",
+      "type": "promptString",
+      "description": "GitHub Personal Access Token",
+      "password": true
+    },
+    {
+      "id": "db_url",
+      "type": "promptString",
+      "description": "Database Connection URL",
+      "password": true
+    }
+  ]
+}
+```
+
+## Security Notes
+
+- Never commit `mcp.json` with actual tokens/credentials
+- Use environment variables or secure input prompts for sensitive data
+- The `mcp.json` file is automatically ignored by git