Skip to content

Wire Playwright MCP into Klonode-spawned Claude CLI sessions #62

@smorchj

Description

@smorchj

This replaces and tightens the scope of #53 (which I closed as won't-fix because the original framing duplicated tools Claude already has).

What

Every Claude CLI session that Klonode spawns from the Workstation should have Playwright MCP (or equivalent) wired up automatically, so Claude can drive a real browser, take screenshots, click, fill forms, read console logs, etc. — without the user having to install or configure anything.

Today, the Claude subprocess Klonode spawns has only its built-in tools (Read, Edit, Bash, etc.) plus whatever MCPs the user has globally configured. Most users won't have Playwright MCP set up, which means Klonode-driven sessions can't verify any UI work they do.

Why this matters

This is the prerequisite for self-hosting Klonode development AND for any user who wants to use Klonode to build a web app:

  • Claude edits a Svelte component → has no way to confirm the change rendered correctly
  • Claude adds a form handler → has no way to test form submission
  • Claude fixes a CSS bug → has no way to verify the fix without asking the user to check

Without preview tools wired into the spawned CLI, Klonode is a code editor that can't see the result of its own work.

Proposed approach

When Klonode spawns a Claude CLI session (today via claude --resume <session-id> from the workstation backend):

  1. Append Playwright MCP to the spawned session's MCP config. The Anthropic-supplied @modelcontextprotocol/server-playwright package is the right starting point — it's the same one the official Claude Code MCP catalog ships.
  2. Bundle the MCP server with Klonode so users don't need a separate install. Either:
    • Add it as a runtime dependency of @klonode/cli and spawn it via npx, OR
    • Vendor the binary inside packages/cli/vendor/ if size is acceptable
  3. Auto-launch Chromium the first time a session calls a playwright_* tool, so first-call latency is the only setup cost.
  4. Project-scoped browser context. Each spawned session should get its own browser context (cookies, storage, viewport state) tied to the working directory, so two parallel agents don't clobber each other.
  5. Make it opt-out, not opt-in. Default on; users who explicitly don't want a browser running can set klonode.preview.disabled = true in their config.

Files

  • New: packages/cli/src/mcp/playwright-bootstrap.ts — finds or installs the Playwright MCP server
  • packages/ui/src/routes/api/chat/+server.ts (or wherever the spawn happens) — append MCP config to the spawn args
  • packages/ui/src/routes/api/agents/+server.ts — same for agent worker spawns
  • packages/cli/src/cli.ts — if klonode CLI also spawns sub-sessions, add the same wiring
  • New: packages/core/src/agents/agent-mcp-config.ts — shared logic so all spawn paths use the same MCP config

Acceptance criteria

  • Spawning a fresh Claude session in a clean Klonode project gives that session access to all playwright_* tools without any user setup
  • First call to playwright_navigate launches Chromium on demand (under 5s on warm cache)
  • Two parallel agent sessions on the same project get isolated browser contexts (don't clobber each other's state)
  • An end-to-end test: Klonode is asked to "add a button to the homepage and verify it appears" — the spawned session edits the file, navigates the preview, screenshots, asserts the button is visible, reports success
  • Documented in CONTEXT.md for packages/ui/src/routes/api/chat/

Out of scope (separate issue)

  • A Vite-style preview pane that the user can see inside the workstation — that's the secondary task tracked in #(see linked sibling issue)
  • Building Klonode-native preview_* MCP wrappers — Playwright MCP already exposes these, no need to reinvent

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions