{"id":31395831,"url":"https://github.com/artmann/web-developer-mcp","last_synced_at":"2025-09-30T12:07:20.483Z","repository":{"id":317104496,"uuid":"1063610097","full_name":"Artmann/web-developer-mcp","owner":"Artmann","description":"A Model Context Protocol (MCP) server that provides web development tools for AI assistants. Enables browser automation, DOM inspection, network monitoring, and console analysis through Playwright.","archived":false,"fork":false,"pushed_at":"2025-09-28T20:30:14.000Z","size":115,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-28T22:13:27.779Z","etag":null,"topics":["browser-automation","claude","claude-code","cursor","mcp","mcp-server","model-context-protocol","playwright","web-development"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Artmann.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-24T21:41:48.000Z","updated_at":"2025-09-28T20:34:27.000Z","dependencies_parsed_at":"2025-09-28T22:13:38.063Z","dependency_job_id":"9060b15e-fc6a-491f-aadd-ca1e3928fe70","html_url":"https://github.com/Artmann/web-developer-mcp","commit_stats":null,"previous_names":["artmann/web-developer-mcp"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/Artmann/web-developer-mcp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Artmann%2Fweb-developer-mcp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Artmann%2Fweb-developer-mcp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Artmann%2Fweb-developer-mcp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Artmann%2Fweb-developer-mcp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Artmann","download_url":"https://codeload.github.com/Artmann/web-developer-mcp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Artmann%2Fweb-developer-mcp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277503534,"owners_count":25829214,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-29T02:00:09.175Z","response_time":84,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser-automation","claude","claude-code","cursor","mcp","mcp-server","model-context-protocol","playwright","web-development"],"created_at":"2025-09-29T10:57:44.649Z","updated_at":"2025-09-29T10:57:45.538Z","avatar_url":"https://github.com/Artmann.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Developer MCP Server\n\n![NPM Version](https://img.shields.io/npm/v/web-developer-mcp)\n[![CI](https://github.com/Artmann/web-developer-mcp/actions/workflows/ci.yml/badge.svg)](https://github.com/Artmann/web-developer-mcp/actions/workflows/ci.yml)\n[![Lint \u0026 Format](https://github.com/Artmann/web-developer-mcp/actions/workflows/lint.yml/badge.svg)](https://github.com/Artmann/web-developer-mcp/actions/workflows/lint.yml)\n[![Cross-Platform Tests](https://github.com/Artmann/web-developer-mcp/actions/workflows/cross-platform.yml/badge.svg)](https://github.com/Artmann/web-developer-mcp/actions/workflows/cross-platform.yml)\n\nA Model Context Protocol (MCP) server that provides web development tools for\ncoding AI assistants like **Claude Code**, **Cursor**, and other AI-powered\ndevelopment environments. This server enables AI assistants to inspect web\npages, monitor network requests, extract HTML, analyze console output, and\nexamine DOM elements in real-time through a Playwright-powered browser.\n\nPerfect for debugging web applications, testing UI components, analyzing API\nbehavior, and understanding page behavior during development.\n\n## Why Use This?\n\nWhen working with AI coding assistants, you often need to:\n\n- Debug web applications and understand what's happening in the browser\n- Analyze network requests and API responses\n- Inspect DOM elements and their properties\n- Monitor console logs and errors\n- Extract HTML for testing or analysis\n\nThis MCP server provides your AI assistant with direct browser access to help\nwith these tasks.\n\n## Features\n\n- **Live Browser Integration**: Uses Playwright with a persistent browser\n  session\n- **Network Request Monitoring**: Capture and analyze HTTP requests/responses\n- **Real-time Console Monitoring**: Captures console logs, errors, and warnings\n  as they happen\n- **DOM Inspection**: Deep analysis of elements including styles, positioning,\n  and visibility\n- **HTML Extraction**: Raw markup extraction similar to React Testing Library\n  queries\n\n## Installation\n\n### From npm (Recommended)\n\n```bash\nnpx -y web-developer-mcp\n```\n\n### From Source\n\n```bash\ngit clone https://github.com/Artmann/web-developer-mcp.git\ncd web-developer-mcp\nbun install\n```\n\n## Usage\n\nStart the MCP server:\n\n```bash\nbun start\n```\n\nThe server will start and wait for MCP client connections from your AI\nassistant.\n\n## Configuration\n\nAdd this server to your AI assistant's MCP configuration:\n\n### Claude Code\n\nAdd this server using the Claude Code CLI:\n\n```bash\nclaude mcp add -s user web-developer-mcp npx -y web-developer-mcp\n```\n\n### Cursor\n\n[![Install MCP Server](https://cursor.com/deeplink/mcp-install-dark.svg)](https://cursor.com/install-mcp?name=web-developer-mcp\u0026config=eyJjb21tYW5kIjoibnB4IC15IHdlYi1kZXZlbG9wZXItbWNwIn0%3D)\n\nOr manually add to your MCP configuration file:\n\n```json\n{\n  \"web-developer-mcp\": {\n    \"command\": \"npx\",\n    \"args\": [\n      \"-y\",\n      \"web-developer-mcp\"\n    ]\n  }\n}\n```\n\n## Available Tools\n\n### Browser Navigation\n\n#### `browser-navigate`\n\nNavigate the browser to a specific URL and start monitoring the page.\n\n**Parameters:**\n\n- `url` (string): The URL to navigate to\n\n**Example use case:** Navigate to `http://localhost:3000` to debug your\ndevelopment server\n\n#### `browser-reload`\n\nReload the current page and refresh console logs.\n\n**No parameters required**\n\n**Use case:** Refresh the page after code changes or to clear current state\n\n### Console Monitoring\n\n#### `browser-console`\n\nRetrieve all console messages (logs, errors, warnings) from the current page.\n\n**No parameters required**\n\n**Returns:** All console output captured since navigation, including:\n\n- Console logs (`console.log`, `console.info`)\n- Warnings (`console.warn`)\n- Errors (`console.error`)\n- JavaScript errors and exceptions\n\n### DOM Analysis\n\n#### `inspect-elements`\n\nGet detailed information about DOM elements including styles, position,\nvisibility, and attributes.\n\n**Parameters:**\n\n- `selector` (string): CSS selector to query elements (e.g. `.button`,\n  `#header`, `div[data-test]`)\n\n**Returns:** JSON with element details including:\n\n- Tag name, ID, class names\n- All HTML attributes\n- Position and dimensions (x, y, width, height)\n- Computed styles (colors, fonts, display, visibility, etc.)\n- Visibility status and accessibility properties\n\n**Example use cases:**\n\n- Debug CSS styling issues\n- Verify element positioning\n- Check if elements are visible to users\n- Analyze accessibility attributes\n\n#### `extract-html`\n\nExtract raw HTML markup of elements for testing or analysis (similar to React\nTesting Library queries).\n\n**Parameters:**\n\n- `selector` (string): CSS selector to extract HTML from (e.g. `.alert`,\n  `[role=dialog]`)\n\n**Returns:** Raw HTML markup of matching elements\n\n**Example use cases:**\n\n- Extract component HTML for testing\n- Analyze rendered output\n- Debug template rendering issues\n\n### Network Request Monitoring\n\n#### `network-requests`\n\nList all network requests captured since page load with optional filtering.\n\n**Parameters:**\n\n- `filter` (string, optional): Filter requests by URL substring (e.g. `\"api\"`,\n  `\"/users\"`)\n- `statusRange` (string, optional): Filter by HTTP status code range (e.g.\n  `\"400-499\"`, `\"500-599\"`) or single status (e.g. `\"404\"`)\n\n**Returns:** JSON list of network requests with:\n\n- Request ID, method, URL\n- HTTP status code and status text\n- Response size and duration\n- Timestamp\n\n**Example use cases:**\n\n- Debug API integration issues\n- Monitor failed requests (4xx, 5xx status codes)\n- Analyze page load performance\n- Verify API calls are being made correctly\n\n#### `network-inspect`\n\nGet detailed information about a specific network request including headers,\nbody, and response data.\n\n**Parameters:**\n\n- `id` (string, optional): Request ID from `network-requests` output\n- `urlPattern` (string, optional): URL pattern to find the most recent matching\n  request\n\n**Returns:** Detailed request/response information including:\n\n- Request and response headers\n- Request and response body (parsed JSON when possible)\n- HTTP status and timing information\n- Error details for failed requests\n\n**Example use cases:**\n\n- Debug API request/response data\n- Analyze request headers and authentication\n- Inspect response payloads\n- Troubleshoot failed network requests\n\n#### `network-clear`\n\nClear the network request buffer to start fresh monitoring.\n\n**No parameters required**\n\n**Use case:** Clear request history to focus on new requests after page changes\n\n## Common Use Cases\n\n### Debugging a Web Application\n\n1. Navigate to your app: `browser-navigate` → `http://localhost:3000`\n2. Check console for errors: `browser-console`\n3. Monitor API calls: `network-requests` with filter `\"api\"`\n4. Inspect failed requests: `network-inspect` with specific request ID\n5. Analyze UI elements: `inspect-elements` with CSS selector\n\n### Testing UI Components\n\n1. Navigate to component page\n2. Extract component HTML: `extract-html` with component selector\n3. Inspect element properties: `inspect-elements` for styling verification\n4. Check console for warnings: `browser-console`\n\n### API Integration Analysis\n\n1. Navigate to page that makes API calls\n2. Monitor all requests: `network-requests`\n3. Filter for specific API endpoints: `network-requests` with URL filter\n4. Inspect request/response details: `network-inspect`\n5. Clear history and test again: `network-clear`\n\n## Requirements\n\n- [Bun](https://bun.sh/) runtime\n- Node.js compatible environment\n- AI assistant with MCP support (Claude Code, Cursor, etc.)\n\n## Browser Behavior\n\n- Uses Playwright with Chromium in headless mode\n- Maintains a single persistent browser session\n- Automatically captures console logs and network requests\n- Browser state persists between tool calls until restart\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartmann%2Fweb-developer-mcp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartmann%2Fweb-developer-mcp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartmann%2Fweb-developer-mcp/lists"}