feat: Add MCP (Model Context Protocol) integration to VibeKit Claude agent

[joedanz]

Summary

🎉 SUCCESS! Successfully integrated MCP (Model Context Protocol) tools with VibeKit's Claude agent!

This PR resolves the MCP integration gap that was previously identified and documented. MCP tools are now fully accessible to the Claude agent.

Key Achievements

• ✅ MCP Server Connection: Successfully connects to time-mcp server with 6 tools
• ✅ Tool Discovery: Agent now detects all MCP tools in available tools list
• ✅ Configuration: Proper .mcp.json file creation in sandbox working directory
• ✅ CLI Integration: Claude CLI loads MCP configuration with --mcp-config flag
• ✅ Verification: Agent shows "mcp_servers":[{"name":"time-mcp","status":"connected"}]

Solution Implemented

The key was implementing proper MCP configuration for the Claude CLI:

1. Base Agent Hook

Added onSandboxReady() hook to base agent for agent-specific setup after sandbox creation.

2. Claude Agent MCP Setup

Override the hook in Claude agent to:

• Create .mcp.json file in sandbox working directory (/vibe0/.mcp.json)
• Use proper MCP server configuration format
• Ensure file is created before claude CLI runs

3. CLI Integration

Added --mcp-config /vibe0/.mcp.json flag to claude CLI command to explicitly load MCP configuration.

4. Working Directory

Ensured claude runs from directory containing MCP config with cd ${this.WORKING_DIR} &&.

Available MCP Tools

The agent now has access to 6 time-mcp tools:

• mcp__time-mcp__current_time - Get current time in specified format
• mcp__time-mcp__relative_time - Get relative time descriptions
• mcp__time-mcp__days_in_month - Get number of days in a month
• mcp__time-mcp__get_timestamp - Get Unix timestamp
• mcp__time-mcp__convert_time - Convert between time formats
• mcp__time-mcp__get_week_year - Get week and year information

Verification

Before: "mcp_servers":[] and no MCP tools in agent tools list

After:

{
  "mcp_servers": [{"name": "time-mcp", "status": "connected"}],
  "tools": [
    "Task", "Bash", "Glob", "Grep", "LS", "exit_plan_mode", 
    "Read", "Edit", "MultiEdit", "Write", "NotebookRead", 
    "NotebookEdit", "WebFetch", "TodoWrite", "WebSearch",
    "mcp__time-mcp__current_time",
    "mcp__time-mcp__relative_time", 
    "mcp__time-mcp__days_in_month",
    "mcp__time-mcp__get_timestamp",
    "mcp__time-mcp__convert_time",
    "mcp__time-mcp__get_week_year"
  ]
}

Files Changed

Core Implementation

• packages/vibekit/src/agents/base.ts: Added onSandboxReady() hook
• packages/vibekit/src/agents/claude.ts: MCP configuration implementation

Documentation

• MCP_INTEGRATION_SUCCESS.md: Comprehensive integration documentation
• example-mcp-config.json: Example MCP server configuration

Usage Example

const vibeKit = new VibeKit()
  .withAgent({
    type: "claude",
    provider: "anthropic", 
    apiKey: process.env.ANTHROPIC_API_KEY,
    model: "claude-3-5-sonnet-20241022",
  })
  .withSandbox(localProvider)
  .withMCP({
    servers: [
      {
        name: "time-mcp",
        type: "local",
        command: "npx",
        args: ["-y", "time-mcp"],
        description: "Time and date MCP server"
      }
    ]
  })
  .withWorkingDirectory("/vibe0");

// MCP tools are now available to the agent\!

Test plan

• MCP server connects successfully with 6 tools
• Agent detects MCP tools in available tools list
• .mcp.json file created correctly in sandbox
• Claude CLI loads MCP configuration with --mcp-config flag
• Permission system works (agent can attempt tool usage)
• Integration fully documented with examples

🤖 Generated with Claude Code

[vercel]

@joedanz is attempting to deploy a commit to the Superagent Team on Vercel.

A member of the Team first needs to authorize it.