Claude Code MCP Testing Project

This project was created to test and demonstrate the integration between Claude Code and MCP (Model Context Protocol) servers, specifically focusing on Puppeteer functionality for web automation and screenshot capabilities.

What We Built

• test.html: A simple HTML test page with a greeting message
• MCP Integration: Configured and tested Puppeteer MCP server for browser automation

Features Tested

• MCP server status checking
• File navigation and screenshot capabilities using Puppeteer
• Browser automation through MCP protocol

Project Setup

Prerequisites

• Node.js (version 18+ recommended)
• Claude Code CLI installed and configured
• MCP (Model Context Protocol) server support

Installation

1. Clone or create your project directory:

   mkdir claude-projects
   cd claude-projects

2. Install Chrome dependencies for Puppeteer (Linux/WSL):

   sudo apt-get update
   sudo apt-get install -y libnss3-dev libatk-bridge2.0-dev libdrm-dev libxkbcommon-dev libxcomposite-dev libxdamage-dev libxrandr-dev libgbm-dev libxss-dev libasound2-dev

3. Configure MCP servers in Claude Code settings if needed

File Structure

claude-projects/
├── README.md          # Project documentation
├── test.html          # HTML test page for screenshot testing
└── screenshots/       # Generated screenshots (if any)

MCP Server Configuration

This project utilizes the Puppeteer MCP server for browser automation. Ensure your Claude Code configuration includes:

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["@anthropic/mcp-server-puppeteer"]
    }
  }
}

Usage

Open the test.html file in a browser or use MCP Puppeteer tools to take screenshots programmatically.