Playwright Timeline MCP App

What it does

Provides a rich visual timeline interface for Playwright browser automation. Instead of blind execution, it renders an interactive carousel of screenshots and action cards, allowing users to visually audit automation steps, debug selector failures, and review multi-step workflows directly within their AI client.

Key features

• Visual Timeline: Each action is displayed as an expandable card for easy auditing.
• Screenshot Carousel: Navigate through the visual history of the browser session.
• Visual Debugging: See exactly what the browser saw when a selector failed.
• Session Recording: Capture full video recordings of automation flows for playback.
• Context Attachment: Send screenshots back to the AI for visual analysis and fix suggestions.

Installation

1. Install dependencies: npm install && npx playwright install chromium
2. Build the project: npm run build

Claude Desktop/VS Code Config:

{
  "mcp": {
    "servers": {
      "playwright-timeline": {
        "command": "node",
        "args": ["/path/to/playwright-mcp-app/dist/main.js"]
      }
    }
  }
}

Supported hosts

• claude
• vscode-copilot