Your First MCP: Chrome DevTools

Day 31 · Week 7 · MCP — System Integration

Slack Message — copy & paste

🤖 Tip #31 — Chrome DevTools MCP: zero config, zero API keys — the AI can now see your browser, take screenshots, and verify UI visually.

#31 Claude Code

**Zero-config setup** — Add one entry to .mcp.json with command 'npx' and args 'chrome-devtools-mcp@latest'. No API keys, no authentication, no server to manage.
**Full browser capabilities**
- › Take screenshots of any page
- › Navigate to URLs, click elements, fill forms
- › Inspect DOM structure and computed styles
- › Read console logs and monitor network requests
**Visual verification workflow** — AI implements a component, takes a screenshot to verify it renders, compares against a Figma reference, and fixes visual differences. All without leaving the terminal.
**The fundamental unlock** — Turns 'I can't see the browser' into 'Let me check how it looks.' This is the key enabler for UI development with AI — visual verification without tab-switching.

Chrome DevTools Screenshots

#31 MCP — System Integration

1 **Add Chrome DevTools MCP to your .mcp.json**
- › "command": "npx"
- › "args": ["chrome-devtools-mcp@latest"]
2 **Restart Claude Code** — MCP servers are loaded at startup, so restart after adding the config
3 **Test it** — Ask the AI to take a screenshot of any localhost page and describe what it sees
4 **Where it shines**
- › Bug verification — AI follows repro steps and screenshots each one
- › Figma comparison — screenshot prototype, compare against Figma reference
- › Responsive testing — screenshot at different viewport widths

Chrome DevTools Screenshots

Your screenshot here Optional — add a screenshot from your own workflow