Web Developer MCP Server

A Model Context Protocol (MCP) server that provides web development tools for coding AI assistants like Claude Code, Cursor, and other AI-powered development environments. This server enables AI assistants to inspect web pages, monitor network requests, extract HTML, analyze console output, and examine DOM elements in real-time through a Playwright-powered browser.

Perfect for debugging web applications, testing UI components, analyzing API behavior, and understanding page behavior during development.

Why Use This?

When working with AI coding assistants, you often need to:

• Debug web applications and understand what's happening in the browser
• Analyze network requests and API responses
• Inspect DOM elements and their properties
• Monitor console logs and errors
• Extract HTML for testing or analysis

This MCP server provides your AI assistant with direct browser access to help with these tasks.

Features

• Live Browser Integration: Uses Playwright with a persistent browser session
• Page Interactions: Click elements, fill form inputs, and submit forms
• Network Request Monitoring: Capture and analyze HTTP requests/responses
• Real-time Console Monitoring: Captures console logs, errors, and warnings as they happen
• DOM Inspection: Deep analysis of elements including styles, positioning, and visibility
• HTML Extraction: Raw markup extraction similar to React Testing Library queries

Installation

Add this server to your AI assistant's MCP configuration (see Configuration section below for specific setup instructions).

From Source

git clone https://github.com/Artmann/web-developer-mcp.git
cd web-developer-mcp
bun install

Usage

Start the MCP server:

bun start

The server will start and wait for MCP client connections from your AI assistant.

Configuration

Add this server to your AI assistant's MCP configuration:

Cursor

Or manually add to your MCP configuration file:

{
  "web-developer-mcp": {
    "command": "npx",
    "args": ["web-developer-mcp@latest"]
  }
}

Claude Code

Add this server using the Claude Code CLI:

claude mcp add -s user web-developer-mcp npx web-developer-mcp@latest

Available Tools

Browser Navigation

browser-navigate

Navigate the browser to a specific URL and start monitoring the page.

Parameters:

• url (string): The URL to navigate to

Example use case: Navigate to http://localhost:3000 to debug your development server

browser-reload

Reload the current page and refresh console logs.

No parameters required

Use case: Refresh the page after code changes or to clear current state

Page Interactions

click-element

Click on an element (button, link, etc.) using a CSS selector.

Parameters:

• selector (string): CSS selector for the element to click (e.g. "button.submit", "#login-btn")

Example use cases:

• Click buttons to trigger actions
• Click links to navigate
• Interact with UI elements during testing

fill-input

Fill a form input field with text.

Parameters:

... View full README on GitHub