Playwright MCP server in Cline.
Let Cline verify its own frontend work. Add playwright-mcp to cline_mcp_settings.json and the VS Code agent can open the page it just built and click through it.
Cline already plans, edits, and runs commands inside VS Code; playwright-mcp adds the missing sense — a browser it can drive. Microsoft's server (33.7k GitHub stars) gives Cline tools to navigate, click, type, and snapshot pages via the accessibility tree, which means a task like "build the signup form and make sure it submits" can end with Cline actually submitting the form.
Cline manages MCP servers through its own settings file, cline_mcp_settings.json, with a UI wrapped around it, so you rarely need to hunt for the file on disk.
Open Cline's MCP settings
In the Cline panel, click the MCP Servers icon, switch to the Installed tab, and hit Configure MCP Servers. That opens cline_mcp_settings.json in the editor — the file physically lives deep in VS Code's globalStorage under saoudrizwan.claude-dev/settings/, which is exactly why the button is the sane way in.
Cline's entries support two fields most clients don't have: disabled, for parking a server without deleting it, and autoApprove, a list of tool names Cline may call without asking you each time.
Add the playwright entry
Add this under mcpServers and save — Cline picks up the change and starts the server without a VS Code restart:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"],
"disabled": false,
"autoApprove": []
}
}
}Check the status light, then hand it a task
Back in the MCP Servers tab, the playwright row should show a green status indicator with its tool list expandable below — browser_navigate, browser_click, browser_snapshot, browser_take_screenshot, and the rest. Red means the spawn failed; the row shows the error inline.
Then give Cline something end-to-end: "start the dev server, open localhost:5173, and check the nav links work." Expect approval prompts for each browser tool at first. Once you trust the flow, adding read-only tools like browser_snapshot to autoApprove cuts the clicking; leave destructive ones gated.
Troubleshooting in Cline
Red status on the server row: nine times out of ten it's npx resolving against a different Node than your terminal uses, especially under nvm. Open VS Code from a shell where node works (code .) or set command to an absolute npx path.
Edits not taking effect: make sure you edited the file Cline opened, not a similarly named file elsewhere — the real path is VS Code globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json. Use the Restart link on the server row after fixing anything.
Tools time out mid-task: the first npx run downloads the package and possibly a Chromium build, which can blow past the default timeout. Run npx playwright install chromium in the integrated terminal once, then restart the server from the MCP panel.
The server's home on Loomal
playwright-mcp is listed live on the Loomal marketplace at https://loomal.ai/marketplace/playwright-mcp, with package metadata and its probed tools, next to the rest of the Browser Automation category. Loomal's index is built to be queried by agents as well as people — listings carry structure (and optionally x402 pricing) that a tool-shopping agent can act on.
FAQ
How do I install Playwright MCP in Cline?
Open the Cline panel, click the MCP Servers icon, go to Installed > Configure MCP Servers, and add a playwright entry with command npx and args ["@playwright/mcp@latest"]. Save the file; Cline starts the server immediately and shows it with a green indicator when connected.
What do disabled and autoApprove do?
disabled: true keeps the server configured but stops Cline from launching it — useful when a browser popping open would be a nuisance. autoApprove lists tool names Cline can invoke without per-call confirmation; sensible candidates here are read-only tools like browser_snapshot, not click or type actions.
Where is cline_mcp_settings.json actually stored?
Inside VS Code's globalStorage for the extension: .../globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json. The exact prefix varies by OS, which is why the Configure MCP Servers button in the Cline panel is the recommended way to open it rather than browsing for it.
Cline shows the server as red — what first?
Read the inline error on the server row. ENOENT means npx wasn't found in the environment VS Code launched with; fix PATH or use an absolute command path. Other failures usually surface as the package download or browser launch erroring, both fixable by running npx @playwright/mcp@latest manually in the integrated terminal to see the real output.
Browse more MCP servers for Cline.
Compare Browser Automation servers and beyond on the Loomal index.