Playwright browser & Node.js MCP. ARIA refs, screenshots, ref-based interactions.
To add browser-devtools-mcp to Claude, run the install command below or copy the ready-made config for Claude Code, Claude Desktop, Cursor and VS Code further down. Restart your client after adding it and its tools show up in your next conversation. It needs 48 environment variables, listed below.
Install
npx -y browser-devtools-mcp@0.9.1Environment variables
PLATFORMSet in your MCP configPORTSet in your MCP configSESSION_IDLE_SECONDSSet in your MCP configSESSION_IDLE_CHECK_SECONDSSet in your MCP configSESSION_CLOSE_ON_SOCKET_CLOSESet in your MCP configCONSOLE_MESSAGES_BUFFER_SIZESet in your MCP configHTTP_REQUESTS_BUFFER_SIZESet in your MCP configBROWSER_SERVER_INSTRUCTIONS_ENABLESet in your MCP configBROWSER_POLICY_UI_DEBUGGING_ENABLESet in your MCP configBROWSER_HEADLESS_ENABLESet in your MCP configBROWSER_PERSISTENT_ENABLESet in your MCP configBROWSER_CDP_ENDPOINT_URLSet in your MCP configBROWSER_CDP_ENABLESet in your MCP configBROWSER_CDP_OPEN_INSPECTSet in your MCP configBROWSER_PERSISTENT_USER_DATA_DIRSet in your MCP configBROWSER_USE_INSTALLED_ON_SYSTEMSet in your MCP configBROWSER_EXECUTABLE_PATHSet in your MCP configBROWSER_CHROMIUM_SANDBOXSet in your MCP configBROWSER_LAUNCH_ARGSSet in your MCP configBROWSER_ALLOWED_DOMAINSSet in your MCP configBROWSER_LOCALESet in your MCP configOTEL_ENABLESet in your MCP configOTEL_SERVICE_NAMESet in your MCP configOTEL_SERVICE_VERSIONSet in your MCP configOTEL_ASSETS_DIRSet in your MCP configOTEL_INSTRUMENTATION_USER_INTERACTION_EVENTSSet in your MCP configOTEL_EXPORTER_TYPESet in your MCP configOTEL_EXPORTER_HTTP_URLSet in your MCP configOTEL_EXPORTER_HTTP_HEADERSSet in your MCP configAWS_REGIONSet in your MCP configAWS_PROFILESet in your MCP configAMAZON_BEDROCK_ENABLESet in your MCP configAMAZON_BEDROCK_IMAGE_EMBED_MODEL_IDSet in your MCP configAMAZON_BEDROCK_TEXT_EMBED_MODEL_IDSet in your MCP configAMAZON_BEDROCK_VISION_MODEL_IDSet in your MCP configFIGMA_ACCESS_TOKENSet in your MCP configFIGMA_API_BASE_URLSet in your MCP configDAEMON_PORTSet in your MCP configDAEMON_SESSION_IDLE_SECONDSSet in your MCP configDAEMON_SESSION_IDLE_CHECK_SECONDSSet in your MCP configNODE_SERVER_INSTRUCTIONS_ENABLESet in your MCP configNODE_POLICY_DEBUGGING_ENABLESet in your MCP configNODE_INSPECTOR_HOSTSet in your MCP configTOOL_OUTPUT_SCHEMA_DISABLESet in your MCP configAVAILABLE_TOOL_DOMAINSSet in your MCP configWORKING_DIRSet in your MCP configSEARCH_STRATEGYSet in your MCP configSCENARIO_SEARCH_STRATEGYSet in your MCP configInstall with your client
claude mcp add browser-devtools --env PLATFORM=<YOUR_PLATFORM> --env PORT=<YOUR_PORT> --env SESSION_IDLE_SECONDS=<YOUR_SESSION_IDLE_SECONDS> --env SESSION_IDLE_CHECK_SECONDS=<YOUR_SESSION_IDLE_CHECK_SECONDS> --env SESSION_CLOSE_ON_SOCKET_CLOSE=<YOUR_SESSION_CLOSE_ON_SOCKET_CLOSE> --env CONSOLE_MESSAGES_BUFFER_SIZE=<YOUR_CONSOLE_MESSAGES_BUFFER_SIZE> --env HTTP_REQUESTS_BUFFER_SIZE=<YOUR_HTTP_REQUESTS_BUFFER_SIZE> --env BROWSER_SERVER_INSTRUCTIONS_ENABLE=<YOUR_BROWSER_SERVER_INSTRUCTIONS_ENABLE> --env BROWSER_POLICY_UI_DEBUGGING_ENABLE=<YOUR_BROWSER_POLICY_UI_DEBUGGING_ENABLE> --env BROWSER_HEADLESS_ENABLE=<YOUR_BROWSER_HEADLESS_ENABLE> --env BROWSER_PERSISTENT_ENABLE=<YOUR_BROWSER_PERSISTENT_ENABLE> --env BROWSER_CDP_ENDPOINT_URL=<YOUR_BROWSER_CDP_ENDPOINT_URL> --env BROWSER_CDP_ENABLE=<YOUR_BROWSER_CDP_ENABLE> --env BROWSER_CDP_OPEN_INSPECT=<YOUR_BROWSER_CDP_OPEN_INSPECT> --env BROWSER_PERSISTENT_USER_DATA_DIR=<YOUR_BROWSER_PERSISTENT_USER_DATA_DIR> --env BROWSER_USE_INSTALLED_ON_SYSTEM=<YOUR_BROWSER_USE_INSTALLED_ON_SYSTEM> --env BROWSER_EXECUTABLE_PATH=<YOUR_BROWSER_EXECUTABLE_PATH> --env BROWSER_CHROMIUM_SANDBOX=<YOUR_BROWSER_CHROMIUM_SANDBOX> --env BROWSER_LAUNCH_ARGS=<YOUR_BROWSER_LAUNCH_ARGS> --env BROWSER_ALLOWED_DOMAINS=<YOUR_BROWSER_ALLOWED_DOMAINS> --env BROWSER_LOCALE=<YOUR_BROWSER_LOCALE> --env OTEL_ENABLE=<YOUR_OTEL_ENABLE> --env OTEL_SERVICE_NAME=<YOUR_OTEL_SERVICE_NAME> --env OTEL_SERVICE_VERSION=<YOUR_OTEL_SERVICE_VERSION> --env OTEL_ASSETS_DIR=<YOUR_OTEL_ASSETS_DIR> --env OTEL_INSTRUMENTATION_USER_INTERACTION_EVENTS=<YOUR_OTEL_INSTRUMENTATION_USER_INTERACTION_EVENTS> --env OTEL_EXPORTER_TYPE=<YOUR_OTEL_EXPORTER_TYPE> --env OTEL_EXPORTER_HTTP_URL=<YOUR_OTEL_EXPORTER_HTTP_URL> --env OTEL_EXPORTER_HTTP_HEADERS=<YOUR_OTEL_EXPORTER_HTTP_HEADERS> --env AWS_REGION=<YOUR_AWS_REGION> --env AWS_PROFILE=<YOUR_AWS_PROFILE> --env AMAZON_BEDROCK_ENABLE=<YOUR_AMAZON_BEDROCK_ENABLE> --env AMAZON_BEDROCK_IMAGE_EMBED_MODEL_ID=<YOUR_AMAZON_BEDROCK_IMAGE_EMBED_MODEL_ID> --env AMAZON_BEDROCK_TEXT_EMBED_MODEL_ID=<YOUR_AMAZON_BEDROCK_TEXT_EMBED_MODEL_ID> --env AMAZON_BEDROCK_VISION_MODEL_ID=<YOUR_AMAZON_BEDROCK_VISION_MODEL_ID> --env FIGMA_ACCESS_TOKEN=<YOUR_FIGMA_ACCESS_TOKEN> --env FIGMA_API_BASE_URL=<YOUR_FIGMA_API_BASE_URL> --env DAEMON_PORT=<YOUR_DAEMON_PORT> --env DAEMON_SESSION_IDLE_SECONDS=<YOUR_DAEMON_SESSION_IDLE_SECONDS> --env DAEMON_SESSION_IDLE_CHECK_SECONDS=<YOUR_DAEMON_SESSION_IDLE_CHECK_SECONDS> --env NODE_SERVER_INSTRUCTIONS_ENABLE=<YOUR_NODE_SERVER_INSTRUCTIONS_ENABLE> --env NODE_POLICY_DEBUGGING_ENABLE=<YOUR_NODE_POLICY_DEBUGGING_ENABLE> --env NODE_INSPECTOR_HOST=<YOUR_NODE_INSPECTOR_HOST> --env TOOL_OUTPUT_SCHEMA_DISABLE=<YOUR_TOOL_OUTPUT_SCHEMA_DISABLE> --env AVAILABLE_TOOL_DOMAINS=<YOUR_AVAILABLE_TOOL_DOMAINS> --env WORKING_DIR=<YOUR_WORKING_DIR> --env SEARCH_STRATEGY=<YOUR_SEARCH_STRATEGY> --env SCENARIO_SEARCH_STRATEGY=<YOUR_SCENARIO_SEARCH_STRATEGY> -- npx -y browser-devtools-mcp@0.9.1
Run this in a terminal to add the server to Claude Code.
What this does
browser-devtools-mcp exposes a set of tools to Claude over the Model Context Protocol. After you add it to claude_desktop_config.json (snippet above) and restart Claude Desktop, those tools become callable inside any conversation.
Requirements
This server needs the following environment variables to be set before it can run:
PLATFORM PORT SESSION_IDLE_SECONDS SESSION_IDLE_CHECK_SECONDS SESSION_CLOSE_ON_SOCKET_CLOSE CONSOLE_MESSAGES_BUFFER_SIZE HTTP_REQUESTS_BUFFER_SIZE BROWSER_SERVER_INSTRUCTIONS_ENABLE BROWSER_POLICY_UI_DEBUGGING_ENABLE BROWSER_HEADLESS_ENABLE BROWSER_PERSISTENT_ENABLE BROWSER_CDP_ENDPOINT_URL BROWSER_CDP_ENABLE BROWSER_CDP_OPEN_INSPECT BROWSER_PERSISTENT_USER_DATA_DIR BROWSER_USE_INSTALLED_ON_SYSTEM BROWSER_EXECUTABLE_PATH BROWSER_CHROMIUM_SANDBOX BROWSER_LAUNCH_ARGS BROWSER_ALLOWED_DOMAINS BROWSER_LOCALE OTEL_ENABLE OTEL_SERVICE_NAME OTEL_SERVICE_VERSION OTEL_ASSETS_DIR OTEL_INSTRUMENTATION_USER_INTERACTION_EVENTS OTEL_EXPORTER_TYPE OTEL_EXPORTER_HTTP_URL OTEL_EXPORTER_HTTP_HEADERS AWS_REGION AWS_PROFILE AMAZON_BEDROCK_ENABLE AMAZON_BEDROCK_IMAGE_EMBED_MODEL_ID AMAZON_BEDROCK_TEXT_EMBED_MODEL_ID AMAZON_BEDROCK_VISION_MODEL_ID FIGMA_ACCESS_TOKEN FIGMA_API_BASE_URL DAEMON_PORT DAEMON_SESSION_IDLE_SECONDS DAEMON_SESSION_IDLE_CHECK_SECONDS NODE_SERVER_INSTRUCTIONS_ENABLE NODE_POLICY_DEBUGGING_ENABLE NODE_INSPECTOR_HOST TOOL_OUTPUT_SCHEMA_DISABLE AVAILABLE_TOOL_DOMAINS WORKING_DIR SEARCH_STRATEGY SCENARIO_SEARCH_STRATEGY
Set these via the env object in your MCP config (see claude_desktop_config.json snippet above).
Frequently asked questions
How do I install browser-devtools-mcp?
Run the Claude Code command in the install section to add browser-devtools-mcp to Claude Code, or copy the ready-made config for your client from the install section on this page. Restart your client afterwards and the tools appear in your next conversation.
Which clients work with browser-devtools-mcp?
This page carries setup and config for Claude Code, Claude Desktop, Cursor and VS Code. Any other MCP client that accepts a standard server config can connect to browser-devtools-mcp as well.
Does browser-devtools-mcp need an API key?
Yes. Before it can run, set these environment variables: PLATFORM, PORT, SESSION_IDLE_SECONDS, SESSION_IDLE_CHECK_SECONDS, SESSION_CLOSE_ON_SOCKET_CLOSE, CONSOLE_MESSAGES_BUFFER_SIZE, HTTP_REQUESTS_BUFFER_SIZE, BROWSER_SERVER_INSTRUCTIONS_ENABLE, BROWSER_POLICY_UI_DEBUGGING_ENABLE, BROWSER_HEADLESS_ENABLE, BROWSER_PERSISTENT_ENABLE, BROWSER_CDP_ENDPOINT_URL, BROWSER_CDP_ENABLE, BROWSER_CDP_OPEN_INSPECT, BROWSER_PERSISTENT_USER_DATA_DIR, BROWSER_USE_INSTALLED_ON_SYSTEM, BROWSER_EXECUTABLE_PATH, BROWSER_CHROMIUM_SANDBOX, BROWSER_LAUNCH_ARGS, BROWSER_ALLOWED_DOMAINS, BROWSER_LOCALE, OTEL_ENABLE, OTEL_SERVICE_NAME, OTEL_SERVICE_VERSION, OTEL_ASSETS_DIR, OTEL_INSTRUMENTATION_USER_INTERACTION_EVENTS, OTEL_EXPORTER_TYPE, OTEL_EXPORTER_HTTP_URL, OTEL_EXPORTER_HTTP_HEADERS, AWS_REGION, AWS_PROFILE, AMAZON_BEDROCK_ENABLE, AMAZON_BEDROCK_IMAGE_EMBED_MODEL_ID, AMAZON_BEDROCK_TEXT_EMBED_MODEL_ID, AMAZON_BEDROCK_VISION_MODEL_ID, FIGMA_ACCESS_TOKEN, FIGMA_API_BASE_URL, DAEMON_PORT, DAEMON_SESSION_IDLE_SECONDS, DAEMON_SESSION_IDLE_CHECK_SECONDS, NODE_SERVER_INSTRUCTIONS_ENABLE, NODE_POLICY_DEBUGGING_ENABLE, NODE_INSPECTOR_HOST, TOOL_OUTPUT_SCHEMA_DISABLE, AVAILABLE_TOOL_DOMAINS, WORKING_DIR, SEARCH_STRATEGY, SCENARIO_SEARCH_STRATEGY. They go in the env block of your MCP config.
Imported from the Official MCP Registry. The details above come from the registry entry; the maker can claim this listing to correct them, add docs, and see its traffic.
Is this your MCP server?
Claim this listing to see its traffic, fix details yourself, and skip the review queue on future updates.
Add this badge to your README
Show visitors this server is listed in the ClaudeRules directory. The badge links straight to this listing.
[](https://clauderules.net/mcp/io-github-serkan-ozal-browser-devtools-mcp)<a href="https://clauderules.net/mcp/io-github-serkan-ozal-browser-devtools-mcp" target="_blank" rel="noopener noreferrer"><img src="https://clauderules.net/api/badge/io-github-serkan-ozal-browser-devtools-mcp" alt="Listed on clauderules.net" /></a>More Browser MCP servers
microsoft/playwright-mcp
Official Microsoft Playwright MCP server, enabling LLMs to interact with web pages through structured accessibility snapshots
agent-infra/mcp-server-browser
📇 🏠 - Browser automation capabilities using Puppeteer, both support local and remote browser connection.
GitHub
Connect AI assistants to GitHub - manage repos, issues, PRs, and workflows through natural language.
Serena MCP: the IDE for your agent
A powerful toolkit for coding, providing semantic retrieval and editing capabilities.