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.