Add MCP Client with VS Code-Compatible Configuration

[blacksheep-git]

Overview

Implement an MCP client that supports multiple MCP servers configured via a JSON file using VS Code-compatible configuration format.

Requirements

• Support multiple MCP server configurations
• Parse VS Code-compatible mcp.json format
• Handle stdio transport (docker, npx, node commands)
• Support environment variables and input prompts
• Dynamic server management (connect/disconnect)
• Display dynamic tool calls in chat UI (similar to existing tool-getWeather, tool-createDocument)

Configuration Format

{
  "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
    }
  ]
}

Implementation

• Use @ai-sdk/mcp package from AI SDK 6
• Create MCP client manager
• Support input variable substitution
• Expose MCP tools to AI agents
• Render dynamic tool invocations in message.tsx (Vercel AI SDK dynamic tools)
  • Display tool input/arguments
  • Show tool execution state
  • Render tool output/results
  • Handle tool approval flow if needed

UI Integration

The chat UI needs to handle dynamic tools from MCP servers:

• MCP tools are exposed as "dynamic tools" in Vercel AI SDK
• Currently message.tsx only handles static tools (tool-getWeather, tool-createDocument, etc.)
• Need generic dynamic tool renderer that works with any MCP tool
• Display tool name, input parameters, and output in collapsible UI
• Follow existing Tool/ToolHeader/ToolContent component pattern

Use Cases

• Connect to GitHub MCP server for repository operations
• Connect to filesystem MCP servers
• Connect to database MCP servers
• Use multiple MCP servers simultaneously in chat