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):
- 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.
- 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
- Auto-launch Chromium the first time a session calls a
playwright_* tool, so first-call latency is the only setup cost.
- 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.
- 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
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
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:
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):@modelcontextprotocol/server-playwrightpackage is the right starting point — it's the same one the official Claude Code MCP catalog ships.@klonode/cliand spawn it vianpx, ORpackages/cli/vendor/if size is acceptableplaywright_*tool, so first-call latency is the only setup cost.klonode.preview.disabled = truein their config.Files
packages/cli/src/mcp/playwright-bootstrap.ts— finds or installs the Playwright MCP serverpackages/ui/src/routes/api/chat/+server.ts(or wherever the spawn happens) — append MCP config to the spawn argspackages/ui/src/routes/api/agents/+server.ts— same for agent worker spawnspackages/cli/src/cli.ts— if klonode CLI also spawns sub-sessions, add the same wiringpackages/core/src/agents/agent-mcp-config.ts— shared logic so all spawn paths use the same MCP configAcceptance criteria
playwright_*tools without any user setupplaywright_navigatelaunches Chromium on demand (under 5s on warm cache)CONTEXT.mdforpackages/ui/src/routes/api/chat/Out of scope (separate issue)
preview_*MCP wrappers — Playwright MCP already exposes these, no need to reinvent