README.md
A Model Context Protocol (MCP) server that provides browser automation capabilities using Playwright. This server enables AI models to interact with web pages through structured accessibility snapshots, bypassing the need for screenshots or visually-tuned models.
This implementation is fully compatible with Heroku Inference and can be used as a web browsing tool for your AI models.
Click the "Deploy to Heroku" button at the top of this page to create a new Heroku app with this server pre-configured.
# Clone this repository
git clone https://github.com/dsouza-anush/playwright-mcp-heroku.git
cd playwright-mcp-heroku
# Create a Heroku app
heroku create your-app-name
# Deploy to Heroku
git push heroku main
Once deployed, your Playwright MCP server will be available at:
https://your-app-name.herokuapp.com/mcphttps://your-app-name.herokuapp.com/sseAdd the following to your MCP client configuration:
{
"mcpServers": {
"playwright": {
"url": "https://your-app-name.herokuapp.com/mcp"
}
}
}
For Claude Code CLI:
claude mcp add playwright --url https://your-app-name.herokuapp.com/mcp
For more details, see README-HEROKU.md.
First, install the Playwright MCP server with your client.
Standard config works in most of the tools:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest"
]
}
}
}
Use the Claude Code CLI to add the Playwright MCP server:
claude mcp add playwright npx @playwright/mcp@latest
Follow the MCP install guide, use the standard config above.
Go to Cursor Settings -> MCP -> Add new MCP Server. Name to your liking, use command type with the command npx @playwright/mcp. You can also verify config or add command like arguments via clicking Edit.
Follow the MCP install guide, use the standard config above.
Go to Advanced settings -> Extensions -> Add custom extension. Name to your liking, use type STDIO, and set the command to npx @playwright/mcp. Click "Add Extension".