Chrome DevTools MCP server in Zed.
Zed calls them context servers, and they live in your main settings.json under a context_servers key. Here's the entry that gets Chrome DevTools MCP running in Zed's Agent Panel.
Zed's MCP support uses its own vocabulary — servers are 'context servers' and they're configured in the same settings.json as your themes and keymaps, not a dedicated MCP file. Once you know that, adding Chrome DevTools MCP takes about a minute.
The payoff: Zed's Agent Panel gets eyes on your running app. The Chrome DevTools team's official server (43.2k GitHub stars) exposes live-page inspection, console access, network visibility, and performance profiling as tools the agent can call while it edits your code.
Open Zed's settings
Run the zed: open settings command (Cmd+, on macOS) to open ~/.config/zed/settings.json. MCP servers go in a top-level context_servers object — it sits alongside your editor preferences, so don't be surprised to be adding agent tooling next to your font size.
The context_servers entry
Add a chrome-devtools entry that tells Zed to launch the npm package over stdio. The source field marks it as a custom server rather than one installed from Zed's extension ecosystem:
{
"context_servers": {
"chrome-devtools": {
"source": "custom",
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}Check the Agent Panel
Open the Agent Panel and look at its settings view: chrome-devtools should be listed among the MCP servers with an indicator showing it started. If the dot is green, Zed spawned the process and registered its tools.
Test it with a prompt like 'open http://localhost:8080 and report every console error and warning.' First run is slower while npx fetches the package and Chrome launches. You can cross-check the tools your install exposes against the server's live Loomal listing at https://loomal.ai/marketplace/chrome-devtools-mcp.
Why this pairing suits Zed
Zed's pitch is speed, and the usual frontend debugging loop — edit in the editor, check in the browser, paste errors back — is the slow part that editor performance can't fix. With DevTools access, the agent closes that loop itself: change a component, reload the page, read the console, iterate. For performance work it's even stronger, since the agent can capture a trace and point at the specific long task or oversized request rather than speculating.
Troubleshooting in Zed
If the server doesn't appear in the Agent Panel, the config block is the first suspect: context_servers must be top-level in settings.json, and a JSON error anywhere in the file can prevent your new block from applying — Zed will usually flag the syntax issue inline, so scan the file for red underlines.
If it appears but shows an error state, restart the Agent Panel (or Zed itself) after confirming the command runs standalone: `npx chrome-devtools-mcp@latest` in a terminal. No Node, no npx on the GUI app's PATH, or no Chrome installed are the three usual findings — for PATH issues, swap "npx" for its absolute path from `which npx`. Settings changes apply to new agent threads, so start a fresh thread after fixing anything.
FAQ
How do I install Chrome DevTools MCP in Zed?
Add a chrome-devtools entry under context_servers in ~/.config/zed/settings.json with source custom, command npx, and args ["chrome-devtools-mcp@latest"]. Then restart the Agent Panel and confirm the server shows as running.
Why doesn't Zed have an mcp.json file?
Zed folds MCP configuration into its main settings.json under the context_servers key — its term for MCP servers. There's no separate MCP config file; the same settings file that holds your editor preferences holds your servers.
The server shows as failed in the Agent Panel. What do I check?
Run `npx chrome-devtools-mcp@latest` in a terminal first — if it fails there, fix Node or Chrome. If it works in the terminal but not in Zed, the GUI process likely lacks your shell PATH; use the absolute path to npx in the command field.
Does Zed need a restart after editing context_servers?
Zed picks up settings changes quickly, but agent threads bind their tools when they start. Open a new thread (or restart the Agent Panel) after adding the server so the browser tools are actually available.
More MCP servers for Zed.
Browse the Loomal marketplace — live tool lists on every server listing.