chrome-devtools-quickstart

Overview

The Chrome DevTools MCP Quickstart project demonstrates how to leverage Chrome DevTools for AI-driven browser automation through the WebMCP framework. This unique approach allows AI agents to interact directly with a website's functionalities via structured tool calls instead of traditional methods like DOM scraping or screenshot capturing.

Key Benefits

Utilizing the Chrome DevTools MCP can lead to up to 89% reduction in token usage compared to screenshot-based workflows, making it not only more efficient but also cost-effective.

How It Works

The architecture is straightforward and consists of:

• An AI Client that communicates with Chrome DevTools MCP.
• The MCP exposes functionalities that connect directly with your WebMCP tools.

flowchart LR
    A[AI Client] --> B[Chrome DevTools MCP]
    B -->|CDP| C[Your Website]
    C -->|mcp-b/global| D[navigator.modelContext]

    B -.->|list_webmcp_tools| E[Discovers tools]
    B -.->|call_webmcp_tool| F[Executes tools]

Getting Started

To begin using the project:

1. Clone and run the project:

   git clone https://github.com/WebMCP-org/chrome-devtools-quickstart.git
   cd chrome-devtools-quickstart
   npm install && npm run dev
   

2. Integrate MCP server with your AI client:
   For example, if using the Claude AI Client, add the following command:

   claude mcp add chrome-devtools npx @mcp-b/chrome-devtools-mcp@latest
   

3. Test the configuration:
   Use a simple command like:

   "Navigate to http://localhost:5173, list available WebMCP tools, and set the counter to 42"
   This demonstrates the AI's ability to execute tasks seamlessly.

Example Tools

The project includes several example tools implemented in counter.js:

• get_page_title: Retrieves the title of the current page.
• get_counter: Fetches the current value of a counter.
• set_counter: Updates the counter to a specified value.

Efficient Development Loop

Maintain rapid development cycles where the AI can write, test, and refine code directly within the editor, enabling:

flowchart TD
    A[AI writes tool] --> B[Vite hot-reloads]
    B --> C[AI navigates to page]
    C --> D[AI tests tool]
    D --> E{Works?}
    E -->|No| A
    E -->|Yes| F[Done!]

Conclusion

The Chrome DevTools MCP enhances browser automation like never before, combining AI capabilities with structured WebMCP tools for a revolutionary approach to website interactions. This repository serves as a powerful quickstart guide for developers looking to integrate advanced automation into their projects.