Using Playwright MCP in Cursor

Building Phoenix LiveViews and want to see how they actually work in a real browser? Playwright MCP in Cursor lets your AI agent check your features as you build them.

Setup

# Install Playwright globally
npm install -g playwright
playwright install

# Start Playwright MCP Server
npx @playwright/mcp@latest --port 8931

# Start your Phoenix server
mix phx.server

Add to ~/.cursor/mcp.json:

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/mcp"
    }
  }
}

Then enable the Playwright MCP server in Cursor Settings → MCP.

How it works

When you’re building features, Cursor can automatically check your work in a real browser. You don’t need to ask it to - it sees all the tools available, then decides to use them when they could be helpful.

Example workflow:

1. You ask: “Add blog post creation form”
2. Cursor creates the LiveView code
3. Cursor automatically opens your app in a browser to verify it works
4. Cursor reports back what it sees and any issues found