Luck

See your entire app on one canvas.

Luck puts every page of your running web app on an infinite canvas -- live screenshots, real data, every viewport. Your AI agent manages the screens via MCP. You just look.

Quick Start

npx luck init
npx luck
open http://localhost:3100

Connect Your AI Agent

Add Luck as an MCP server in Claude Code, Cursor, or any MCP-compatible client:

{
  "mcpServers": {
    "luck": {
      "command": "npx",
      "args": ["luck", "mcp"]
    }
  }
}

Then give your agent a prompt:

"Scan my project and add all screens to Luck."

The agent discovers your routes, registers them with Luck via MCP, and your canvas populates automatically.

Commands

| Command | Description | | -------------- | ------------------------------------------------ | | luck init | Create a luck.json manifest in your project | | luck | Start the Luck server and open the canvas | | luck capture | One-shot: capture screenshots for all screens | | luck mcp | Start the MCP server (stdio) for AI agent access |

How It Works

• You start Luck alongside your dev server. Luck runs on port 3100 and connects to your app on whatever port it uses.
• Your AI agent registers screens via MCP. It scans your project, finds routes, and calls luck.add_screen() for each one.
• Luck captures screenshots with Playwright. A persistent Chromium instance takes fast (~150ms) screenshots of every registered screen.
• The canvas renders everything at once. An infinite pan-and-zoom canvas shows every screen as a live tile. Click any tile to interact with the real page in an iframe.
• Hot reload keeps it fresh. When your dev server emits HMR events, Luck automatically re-captures affected screens so the canvas always reflects your latest code.

Requirements

• Node.js >= 20
• Playwright Chromium -- install with:

  npx playwright install chromium