Playwright

You can harness the MCP server to analyze, render, and automatically correct HTML by exposing a set of tools you can invoke from any MCP client. This server communicates via standard input/output (stdio) or HTTP, enabling you to connect from your editor, IDE, or automation pipeline to capture renders, analyze results with AI vision, apply fixes, and verify changes.

How to use

Connect to the MCP server from your client to capture renders, analyze results, and apply fixes. You can run the server in two primary ways: using npx to use a remote build on demand, or running the server locally after cloning the project. The server communicates over stdio, so your client should launch it and connect its input/output streams.

How to install

Prerequisites: Node.js 18+ and npm. You also need a Mistral API key for analysis and correction features. Create a file named .env in your working directory and set MISTRAL_API_KEY to your key.

Option 1 — Use with npx (no installation required) to run the server directly from the remote package.

npm install

# Ensure the API key is available
MISTRAL_API_KEY=your-api-key

"Note" The runtime can be launched without cloning by using npx to pull and run the server.

Option 2 — Local installation (clone and run the server locally).

npm install npm run mcp

This starts the MCP server locally and connects via stdio to your MCP clients.

Configuration for MCP clients and integration

Cursor integration and Claude Desktop integration are configured via MCP server entries. Each entry runs the server as a stdio process and provides the required environment variable for authentication.

// Using npx (Recommended) for Cursor or Claude Desktop
{
  "mcpServers": {
    "playwright_npx": {
      "command": "npx",
      "args": ["-y", "github:gplanchat/server-playwright"],
      "env": {
        "MISTRAL_API_KEY": "your-api-key"
      }
    }
  }
}

// Using local installation for Cursor or Claude Desktop
{
  "mcpServers": {
    "playwright_local": {
      "command": "node",
      "args": ["src/mcp-server.js"],
      "env": {
        "MISTRAL_API_KEY": "your-api-key"
      }
    }
  }
}

Note: For npx usage, the -y flag automatically accepts the package installation prompt. For local installation, replace the path with the absolute path to your project.

## Available tools and how to use them

The server exposes a set of tools that you can invoke through your MCP client to process HTML renders. You will typically provide file paths or URLs and optional parameters to tailor each operation.

1) capture\_html\_render — captures a render of an HTML page including a screenshot, DOM, and metadata.

2) analyze\_html\_render — analyzes a captured render using AI to detect issues.

3) fix\_html\_render — applies corrections based on the analysis results.

4) test\_and\_fix\_html — runs a complete cycle: capture, analyze, and fix in one step.

5) verify\_html\_render — checks that a render matches a detailed description or CSS specifications.

## Testing with MCP Inspector

You can validate the MCP server with the official inspector to ensure the available tools respond correctly.

npx @modelcontextprotocol/inspector node src/mcp-server.js

This opens a web interface to test the server interactions.

Notes

The MCP server uses stdio for communication, so you start it from a client. Generated render and analysis outputs are saved in the output/ directory. Ensure Playwright is installed by running the appropriate installation step if you plan to capture HTML renders.

Install and configure the Mistral API key to enable AI analysis and correction features.

Security and prerequisites

Keep your MISTRAL_API_KEY secure and avoid sharing it in logs or screenshots. Use environment variables to manage keys securely in your deployment environment.

Troubleshooting

If the server fails to start, verify that Node.js 18+ is installed, dependencies are installed with npm install, and the Mistral API key is configured.

Capture errors often relate to missing Playwright dependencies. Ensure Playwright is installed: npx playwright install chromium.

For analysis errors, confirm your Mistral API key is valid and that you have sufficient credits.

Available tools

capture_html_render

Captures the render of an HTML page including a screenshot, DOM, and metadata.

analyze_html_render

Analyzes a render using AI vision to detect issues.

fix_html_render

Fixes an HTML file based on an analysis.

test_and_fix_html

Captures, analyzes, and fixes a complete HTML render in one workflow.

verify_html_render

Verifies an HTML render against a detailed description or CSS specifications.