This MCP uses playwright to let AI use the browser and take screenshots and screen recordings to help it verify the interface developed.
Setup
Choose your client, copy the config, then fill in any required environment variables.
claude mcp add playwright-ui -- npx playwright-ui-mcp~/.codex/config.toml
[mcp_servers.playwright-ui]
command = "npx"
args = ["playwright-ui-mcp"]
# codex mcp add playwright-ui -- npx playwright-ui-mcp~/.cursor/mcp.json
{
"mcpServers": {
"playwright-ui": {
"command": "npx",
"args": [
"playwright-ui-mcp"
]
}
}
}.vscode/mcp.json
{
"servers": {
"playwright-ui": {
"type": "stdio",
"command": "npx",
"args": [
"playwright-ui-mcp"
]
}
}
}~/.gemini/settings.json
{
"mcpServers": {
"playwright-ui": {
"command": "npx",
"args": [
"playwright-ui-mcp"
]
}
}
}claude_desktop_config.json
{
"mcpServers": {
"playwright-ui": {
"command": "npx",
"args": [
"playwright-ui-mcp"
]
}
}
}.trae/mcp.json
{
"mcpServers": {
"playwright-ui": {
"command": "npx",
"args": [
"playwright-ui-mcp"
]
}
}
}