Loomal

Playwright MCP server in Zed.

Zed's Agent Panel can drive a browser too — add playwright-mcp under context_servers in settings.json and restart the panel.

Zed configures MCP through its main settings.json under a key it calls context_servers — a naming quirk, but the machinery underneath is standard MCP, so Microsoft's playwright-mcp (33.7k stars, npm package @playwright/mcp) works unmodified. Once connected, Zed's agent can open pages, click elements, fill forms, and read content via accessibility snapshots.

For an editor as keyboard-driven as Zed, the payoff is staying in flow: the agent verifies the rendered result of a change while you stay in the buffer.

Open settings and add the block

Run "zed: open settings" from the command palette to edit ~/.config/zed/settings.json, and add playwright under context_servers. The source: custom field tells Zed you're supplying the command yourself rather than installing an extension-packaged server:

~/.config/zed/settings.json
{
  "context_servers": {
    "playwright": {
      "source": "custom",
      "command": "npx",
      "args": ["@playwright/mcp@latest"],
      "env": {}
    }
  }
}

Restart the Agent Panel

Context servers spawn when the agent starts, so close and reopen the Agent Panel — or restart Zed — after saving. In the panel's settings view the playwright server should report as running, with browser_navigate, browser_snapshot, browser_click, and the rest of its tools enumerated.

Smoke-test it with a prompt that round-trips the whole stack: "open example.com and read me the heading." If a Chromium window appears and the agent answers with the page content, everything works. Prefer no window? Add "--headless" to the args array.

What to use it for in Zed

The strongest fit is verification: after the agent edits a component, have it open the dev server and snapshot the result, catching the rendering breaks a diff can't show. It also covers research tasks behind JavaScript-rendered sites that plain fetching can't read.

playwright-mcp exposes 20+ tools; the agent rarely needs reminding which to use, but flows succeed more reliably when prompted to take a snapshot before clicking — element references from the snapshot are how interactions are targeted.

Troubleshooting in Zed

Server absent from the Agent Panel: check that the block sits under context_servers — Zed ignores the mcpServers key other clients use — and that settings.json still parses after your edit.

Error state on the server: "zed: open log" shows the spawn error and the server's stderr. The recurring offender is npx missing from the PATH Zed sees when launched from the Dock on macOS; substitute the absolute npx path in command.

First tool call times out: the npx download plus a Chromium fetch can take a while on first run. Pre-warm with npx playwright install chromium in a terminal, then restart the Agent Panel.

Browser opens but interactions misfire: ask for a fresh browser_snapshot before the failing step — stale element refs after a navigation are the usual cause.

The Loomal listing

playwright-mcp's live entry on the Loomal index — https://loomal.ai/marketplace/playwright-mcp — carries its package details and probed tool list, alongside the rest of the Browser Automation category. Worth a look if you're deciding between it and DevTools-based alternatives before settling your Zed setup.

FAQ

How do I install Playwright MCP in Zed?

Add a playwright block under context_servers in ~/.config/zed/settings.json with source "custom", command npx, and args ["@playwright/mcp@latest"], then restart the Agent Panel. The server's browser tools show in the panel once the handshake completes.

Why context_servers instead of mcpServers?

It's just Zed's name for MCP servers in its settings schema. The protocol is standard MCP — only the configuration key differs from clients like Cursor or Windsurf, so the command and args carry over directly.

Where does Zed log MCP failures?

In the main Zed log, opened with "zed: open log" from the command palette. Both spawn errors (bad command path, npx not found) and the running server's stderr stream end up there.

Can I keep the browser hidden?

Yes — add "--headless" to the args. Headed mode is useful while you're calibrating trust in what the agent does with a browser; headless keeps your screen clear once verification runs are routine.

Browse more MCP servers for Zed.

Search Loomal's index by category, package, and pricing.

Explore the marketplace