Demo 16: MCP Server Integration

{
  "meta": {
    "title": "MCP Server Integration",
    "description": "Configure MCP servers, discover tools, use them in agent loops, and build a custom MCP server.",
    "duration_seconds": 420,
    "version": "1.0.0"
  },
  "steps": [
    {
      "id": 1,
      "action": "write_file",
      "path": "~/.vibecli/config.toml",
      "content": "[mcp]\nenabled = true\n\n[mcp.servers.filesystem]\ncommand = \"npx\"\nargs = [\"-y\", \"@modelcontextprotocol/server-filesystem\", \"/tmp/demo\"]\ndescription = \"File system access\"\n\n[mcp.servers.github]\ncommand = \"npx\"\nargs = [\"-y\", \"@modelcontextprotocol/server-github\"]\nenv = { GITHUB_TOKEN = \"ghp_demo\" }\ndescription = \"GitHub API access\"\n",
      "description": "Configure two MCP servers in config.toml",
      "delay_ms": 1000
    },
    {
      "id": 2,
      "action": "repl",
      "commands": [
        { "input": "/mcp list", "delay_ms": 3000 }
      ],
      "description": "List all configured MCP servers and their connection status"
    },
    {
      "id": 3,
      "action": "repl",
      "commands": [
        { "input": "/mcp tools", "delay_ms": 3000 }
      ],
      "description": "Browse all available tools across connected servers"
    },
    {
      "id": 4,
      "action": "repl",
      "commands": [
        { "input": "/mcp tools filesystem:read_file", "delay_ms": 2000 }
      ],
      "description": "Inspect the schema and description of a specific tool"
    },
    {
      "id": 5,
      "action": "repl",
      "commands": [
        { "input": "/mcp search \"read a file from disk\"", "delay_ms": 2000 }
      ],
      "description": "Use semantic search to find tools by natural language description"
    },
    {
      "id": 6,
      "action": "Narrate",
      "value": "Now let's see MCP tools used in a real agent loop. The agent will automatically discover and use the right tools."
    },
    {
      "id": 7,
      "action": "shell",
      "command": "vibecli --agent \"List all files in /tmp/demo and summarize their contents\"",
      "description": "Run an agent loop that uses MCP filesystem tools",
      "delay_ms": 10000
    },
    {
      "id": 8,
      "action": "repl",
      "commands": [
        { "input": "/mcp disconnect github", "delay_ms": 1500 },
        { "input": "/mcp connect github", "delay_ms": 3000 }
      ],
      "description": "Disconnect and reconnect a server"
    },
    {
      "id": 9,
      "action": "Narrate",
      "value": "Let's build a custom MCP server and register it with VibeCody."
    },
    {
      "id": 10,
      "action": "write_file",
      "path": "/tmp/demo/weather_server.py",
      "content": "from mcp.server import Server\nfrom mcp.types import Tool, TextContent\nimport json\n\nserver = Server(\"weather\")\n\n@server.list_tools()\nasync def list_tools():\n    return [Tool(name=\"get_weather\", description=\"Get weather for a city\", inputSchema={\"type\":\"object\",\"properties\":{\"city\":{\"type\":\"string\"}},\"required\":[\"city\"]})]\n\n@server.call_tool()\nasync def call_tool(name, arguments):\n    return [TextContent(type=\"text\", text=json.dumps({\"city\":arguments[\"city\"],\"temp\":\"22C\",\"condition\":\"Sunny\"}))]\n",
      "description": "Create a custom weather MCP server",
      "delay_ms": 1000
    },
    {
      "id": 11,
      "action": "repl",
      "commands": [
        { "input": "/mcp connect weather", "delay_ms": 3000 },
        { "input": "/mcp tools weather:get_weather", "delay_ms": 2000 }
      ],
      "description": "Connect the custom server and inspect its tools"
    },
    {
      "id": 12,
      "action": "shell",
      "command": "vibecli --agent \"What's the weather in Paris?\"",
      "description": "Use the custom MCP tool in an agent loop",
      "delay_ms": 5000
    },
    {
      "id": 13,
      "action": "shell",
      "command": "cd vibeui && npm run tauri dev",
      "description": "Launch VibeUI to explore the MCP panel",
      "delay_ms": 8000
    },
    {
      "id": 14,
      "action": "Navigate",
      "target": "panel://mcp",
      "description": "Open the MCP panel in VibeUI"
    },
    {
      "id": 15,
      "action": "Click",
      "target": ".tab-servers",
      "description": "View the Servers tab with connection status"
    },
    {
      "id": 16,
      "action": "Screenshot",
      "label": "mcp-servers-connected",
      "description": "Capture the MCP panel showing connected servers"
    },
    {
      "id": 17,
      "action": "Click",
      "target": ".tab-tools",
      "description": "Switch to the Tools tab"
    },
    {
      "id": 18,
      "action": "Type",
      "target": ".tool-search-input",
      "value": "file",
      "description": "Search for file-related tools"
    },
    {
      "id": 19,
      "action": "Screenshot",
      "label": "mcp-tools-search",
      "description": "Capture filtered tool list"
    },
    {
      "id": 20,
      "action": "Click",
      "target": ".tab-logs",
      "description": "View the real-time MCP message log"
    },
    {
      "id": 21,
      "action": "Screenshot",
      "label": "mcp-logs",
      "description": "Capture the JSON-RPC message log for debugging"
    }
  ]
}