Browser Debugging

Use this when you want an agent to inspect the local site in a real browser. It is a local debugging workflow for contributors, not part of the production app.

Install Playwright MCP

npm install -g @playwright/mcp@latest
npx playwright install

If you do not want a global install, use npx -y @playwright/mcp@latest directly.

Start the local site

pnpm site:dev

The site usually runs on http://localhost:4321.

Start Playwright MCP

pnpm playwright:mcp

Codex config

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}

Claude Code config

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}

OpenCode config

{
  "mcp": {
    "playwright": {
      "type": "local",
      "command": ["npx", "-y", "@playwright/mcp@latest"]
    }
  }
}

Standard debug flow

1. Start the site locally
2. Connect the agent client to Playwright MCP
3. Open / and /docs
4. Check console errors and broken links
5. Check the homepage hero and docs layout at desktop and mobile widths
6. Check code-block copy buttons and horizontal scrolling

Useful prompts

Open http://localhost:4321 and inspect spacing, broken links, and console errors.

Open http://localhost:4321/docs/cookbook and verify the code-block copy button stays pinned while the code scrolls horizontally.

Open http://localhost:4321/docs/codex and check whether the prompt examples are readable on mobile width.

Gemini image workflow

Use Gemini manually in your browser session. Generate images in gemini.google.com, export the one you want, save it into the repo, then use Playwright MCP to check how it looks on the local site.

Keep that manual for now. Do not automate Gemini browser sessions or store any session details in the repo.

Back to Docs