Introduction
DevBridge is a Chrome extension and MCP server that connects any AI tool to your browser for debugging and automation.
What is MCP?
Model Context Protocol (MCP) is an open standard that lets AI applications interact with external tools and services. With DevBridge, your AI editor sends MCP tool calls — DevBridge executes them in Chrome and returns the results.
What can DevBridge do?
DevBridge provides 25 MCP tools covering two core workflows:
Debugging — Read console logs, capture network requests, inspect the accessibility tree, execute JavaScript, and take screenshots. Everything you can do in Chrome DevTools, available from your AI editor.
Automation — Click, type, scroll, drag, fill forms, upload files, navigate pages, and record sessions as GIFs. Build end-to-end test flows and automate repetitive browser tasks.
How it works
AI Tool ←stdio→ MCP Server ←IPC→ Native Host ←Native Messaging→ Chrome Extension ←CDP→ Browser- Your AI tool (e.g. Claude Code, Cursor) communicates with the DevBridge MCP server over stdio
- The MCP server relays commands to the Chrome extension via a local socket
- The extension executes actions in Chrome using the Chrome DevTools Protocol (CDP)
- Results are returned back to your AI tool
All communication is local — no data leaves your machine.
Key capabilities
- 25 MCP tools across page reading, interaction, navigation, debugging, visual capture, and tab management
- Cross-origin iframe support — operate across frame boundaries including cross-origin frames
- Shadow DOM penetration — read and interact with both open and closed Shadow DOM
- Canvas interaction — 12 sub-actions for Canvas elements (click, draw, scroll, gesture, pixel inspection, screenshot, and more)
- GIF recording — record multi-step interactions as animated GIFs
- Three platforms — Windows, macOS, and Linux
- Permission management — fine-grained per-domain access control with once/always modes