Playwright MCP Server Config
Let your AI app open web pages, click, type, and test in a real browser. Get the config file, terminal command, or install link for your AI app. Nothing leaves your browser.
Servers
claude_desktop_config.json, .mcp.json, mcp.json, settings.json, mcp_config.json, or Codex config.toml. It replaces the servers below.
-
The full command with its arguments. Put quotes around paths with spaces.
Write ${NAME} in a value to read the environment variable NAME, so secrets stay out of the file.
Options
Config for your app
About the Playwright MCP server
Microsoft's Playwright MCP server drives Chrome, Firefox, WebKit, or Edge through the page's accessibility tree, so the model works with real elements instead of screenshots. Add --headless to hide the window, --browser firefox to switch browsers, or --isolated to keep no profile on disk. Needs Node.js 18 or newer.
- Runs
- On your computer: npx @playwright/mcp@latest
- Sign-in
- None needed
Where each app keeps its MCP config
| App | File | Format |
|---|---|---|
| Claude Code | .mcp.json (project) or ~/.claude.json (user) | JSON, mcpServers |
| Claude Desktop | ~/Library/Application Support/Claude/claude_desktop_config.json (macOS), %APPDATA%\Claude\claude_desktop_config.json (Windows) | JSON, mcpServers, local only |
| Cursor | .cursor/mcp.json or ~/.cursor/mcp.json | JSON, mcpServers |
| VS Code | .vscode/mcp.json, or MCP: Open User Configuration | JSON, servers + inputs |
| Codex | ~/.codex/config.toml or .codex/config.toml | TOML, [mcp_servers.name] |
| Gemini CLI | ~/.gemini/settings.json or .gemini/settings.json | JSON, mcpServers, httpUrl |
| Antigravity | ~/.gemini/config/mcp_config.json or .agents/mcp_config.json | JSON, mcpServers, serverUrl |
| Windsurf (Devin Desktop) | ~/.config/devin/mcp_config.json, %APPDATA%\devin\mcp_config.json | JSON, mcpServers, serverUrl |
| Zed | ~/.config/zed/settings.json, %APPDATA%\Zed\settings.json | JSON, context_servers |
About the MCP Config Generator
MCP (Model Context Protocol) servers give AI apps new tools, such as browsing, GitHub, or your database. Every app stores them a little differently: Claude and Cursor use "mcpServers", VS Code uses "servers" with input prompts for secrets, Zed uses "context_servers", Codex uses TOML, and Gemini, Antigravity, and Windsurf each name the URL field differently. Describe your servers once, or pick a popular one, and get the right file, the file's location, the terminal command, and a one-click install link for each app. Paste a config from one app to convert it to the others.
How to use it
- 1 Pick a popular server, such as GitHub or Playwright, or add your own: a command for a local server or a URL for a remote one.
- 2 Add environment variables or headers. Write ${NAME} to read a secret from an environment variable instead of saving it in the file.
- 3 Choose your app, then copy the config into the file shown, run the command, or click the install link.
Frequently asked questions
What is an MCP server?
An MCP server is a small program or web service that gives an AI app extra tools and data through the Model Context Protocol, an open standard started by Anthropic and now used by OpenAI, Google, Microsoft, and others. A local server runs on your computer and talks over stdio; a remote server is a URL the app connects to over Streamable HTTP.
Where is the MCP config file?
It depends on the app. Claude Code uses .mcp.json in the project; Claude Desktop uses claude_desktop_config.json in its app data folder; Cursor uses .cursor/mcp.json; VS Code uses .vscode/mcp.json; Codex uses ~/.codex/config.toml; Gemini CLI uses ~/.gemini/settings.json; Antigravity uses ~/.gemini/config/mcp_config.json; Windsurf uses ~/.config/devin/mcp_config.json; and Zed uses its settings.json. The generator shows the exact path for each one.
How do I keep API keys out of the config file?
Write ${NAME} where the key goes and set NAME as an environment variable. The generator turns it into each app's own syntax: ${NAME} for Claude Code and Gemini CLI, ${env:NAME} for Cursor and Windsurf, a secure input prompt for VS Code, and env_vars or bearer_token_env_var for Codex. Claude Desktop and Zed don't fill in variables, so keep those files private.
What is the difference between stdio, HTTP, and SSE?
Stdio servers are programs the app starts on your computer, usually with npx or uvx. HTTP (Streamable HTTP) servers are hosted at a URL, often ending in /mcp, and usually sign you in with OAuth. SSE is the older remote transport that MCP has deprecated; use a server's /mcp endpoint when it has one.
Why does npx fail on Windows?
On Windows, npx is a .cmd script, and some apps can't start it directly, so the server fails with "spawn npx ENOENT" or closes at once. Tick "Start npx through cmd /c" to write "command": "cmd" with "/c", "npx" in front of the arguments.
How do I add a remote server to Claude Desktop?
Claude Desktop's config file only starts programs on your computer. Add the URL in Settings → Connectors → Add custom connector, or use the generated config, which runs the remote server through the mcp-remote bridge with Node.js.
Is my config sent to a server?
No. Everything is generated and converted in your browser, so your server list and any tokens you type never leave your device.
Related tools
AI Output Cleaner
Clean ChatGPT and Claude text for Word, email, and WhatsApp
AI Token & Cost Calculator
Count tokens and compare GPT, Claude, and Gemini API costs
JSON Repair & LLM Output Validator
Fix broken JSON from ChatGPT, Claude, or Gemini and check it against a schema
AI Crawler Checker
See which AI crawlers, such as GPTBot and ClaudeBot, your robots.txt allows
llms.txt Generator
Create an llms.txt file that guides AI tools to your best pages
Speech to Text & Subtitle Maker
Transcribe audio and video to text and SRT subtitles in your browser