Chrome DevTools MCP server in Windsurf.
Give Cascade a live Chrome to verify its frontend work in. Windsurf keeps all MCP config in one global file — ~/.codeium/windsurf/mcp_config.json — and here's exactly what goes in it.
Cascade, Windsurf's agent, is built around multi-step autonomous flows — which is exactly where browser feedback pays off. Connect Chrome DevTools MCP (the official server from the Chrome DevTools team, 43.2k GitHub stars) and Cascade can load the page it just modified, pull console errors, inspect network traffic, and profile load performance before declaring a task done.
Windsurf's MCP setup differs from its VS Code cousins in one key way: configuration is global. There's no per-project file — every server you add is available in every workspace.
Two routes to the same config
Through the UI: open Windsurf Settings, find the Cascade section, and under MCP Servers click Add Server. Windsurf writes the entry into its config file for you.
Directly: edit ~/.codeium/windsurf/mcp_config.json yourself. The path is a Codeium legacy — Windsurf grew out of Codeium, and the config still lives under that directory. Both routes end in the same file, so pick whichever you prefer.
The mcp_config.json entry
The file uses the familiar mcpServers shape. Add chrome-devtools alongside any servers you already run:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}Refresh and verify in Cascade
If you edited the file by hand, hit the refresh button in the MCP Servers section of settings (or restart Windsurf) so Cascade re-reads it. A healthy server shows with its tool count; expand it to confirm the page inspection, console, and tracing tools registered.
Then run a check in Cascade: 'open http://localhost:3000, list console errors, and tell me the slowest network request.' First execution takes longer — npx downloads the package and Chrome boots. The server's live tool list is on its Loomal marketplace page at https://loomal.ai/marketplace/chrome-devtools-mcp.
Working with a global-only config
Since Windsurf has no per-project MCP file, the chrome-devtools server rides along into every workspace, including non-web ones. That's mostly harmless — Cascade only calls browser tools when the task warrants it — but if you keep many servers configured, consider that each one's tools occupy space in the agent's tool selection. Disable servers you're not actively using from the same settings panel rather than deleting their config.
Troubleshooting in Windsurf
Server missing after a manual edit? You probably skipped the refresh — Windsurf doesn't watch mcp_config.json for changes. Refresh from the MCP settings panel or restart the app. If it still doesn't list, validate the JSON; one malformed entry can take down the whole file.
If it lists but errors on startup, prove the command works outside Windsurf: run `npx chrome-devtools-mcp@latest` in a terminal. Failures there point at Node not being installed or npx missing from PATH; if npx works in your terminal but not in Windsurf, replace "npx" in the config with its absolute path, since GUI apps on macOS don't always inherit shell PATH. Chrome itself must be installed too — the server drives a real browser rather than bundling one.
FAQ
How do I install Chrome DevTools MCP in Windsurf?
Open Windsurf Settings > Cascade > MCP Servers > Add Server, or add a chrome-devtools entry with command npx and args ["chrome-devtools-mcp@latest"] to ~/.codeium/windsurf/mcp_config.json, then refresh the server list.
Why is the config under ~/.codeium when the app is called Windsurf?
Windsurf is built by Codeium, and its configuration directory kept the original name: ~/.codeium/windsurf/. The MCP config file there, mcp_config.json, is global — it applies to every project you open.
Can I enable this server for only one project?
Not via config — Windsurf's MCP configuration is global rather than per-workspace. The practical approach is toggling servers on and off from the MCP settings panel as your work shifts, instead of editing the file each time.
Cascade lists the server but tool calls fail. What now?
Run the npx command in a terminal to surface the underlying error. Typical causes: Node missing, the first package download failing, or Chrome not installed. If the terminal works but Windsurf doesn't, use the absolute path to npx in the config.
More MCP servers for Windsurf.
Browse the Loomal marketplace, where every listing shows its live tool list.