Magnitude MCP – vision-first browser interaction for Claude Code

Hacker News

Share card

Magnitude MCP – vision-first browser interaction for Claude Code

Hey HN - Anders and Tom here. We made a browser MCP using the same vision-first scaffolding as our SOTA (94% WebVoyager) browser agent Magnitude. This approach is more flexible and robust than DOM-based interactions and avoids all the associated edge cases. It works particularly well with Claude Code, since Claude is already trained for computer-use tasks and can interact with browser elements precisely using vision alone. It's 100% open source. The setup is very simple if you want to try it: ``` npm i -g magnitude-mcp@latest claude mcp add magnitude -- npx magnitude-mcp ``` Then spin up Claude Code and ask it to do something in the browser. The MCP allows Claude Code (or any coding agent) to: - Open a browser with a persistent profile - Click, type, drag, etc. using pixel-based coordinates - Automatically stay aware of current state with a screenshot after each interaction - Coordinate multiple actions at once for efficiency We made this MCP because we realized it would be really helpful in our own engineering workloads. We are building a massive number of first-party integrations for Sagekit (our workflow automation platform), and to do so we need to give Claude Code as many tools as possible to act with a high degree of autonomy, including a browser it can use reliably. The only downside is that only certain models can use the MCP effectively, because not all models can pinpoint exact pixel coordinates based on a screenshot. These models roughly include Claude (Sonnet 3.7, Sonnet 4, Opus 4), Qwen 2.5 VL-based models (Qwen 2.5 VL 72B, UI TARS, etc.), and a few others specifically trained for it. Given that we personally use Claude for all our coding anyway, this seemed acceptable. After using Claude Code to build 15+ integrations in a week, it became obvious that certain tools are necessary to take us out of the dev loop more often and produce high quality code autonomously. A browser was an obvious place to start, and we already had a browser agent we could repurpose. So far, this is what we've personally found it useful for: - Seeing and interacting with web apps as it builds features or fixes issues - Configuring dummy data that can't be accessed programmatically - Browsing documentation on sites where fetch doesn't work - Improvised frontend testing Anyway, we thought we would share in case other engineers find it useful in their workloads. It can also be used in non-engineering work (like booking a flight!!) if you so desire.