Visual Companion
- Updated April 23, 2026
- ARETI-GmbH/visual-companion
Visual Companion is a Claude Code plugin that opens a split Chrome-App window so developers can Alt+Click UI elements and send DOM, styles, screenshots, and source maps to Claude via MCP.
About
visual-companion is a Claude Code marketplace plugin that launches a unified Chrome-App split window with your web app and a Claude session for live-pointer debugging. Developers reach for it when fixing UI bugs and need instant DOM context, styles, screenshots, and source maps without manual copy-paste. Run /visual-companion to auto-start the dev server and begin element-targeted debugging.
- Split-pane Chrome App: web app left, Claude Code session right
- Alt+Click or drag regions to buffer DOM, styles, screenshot, and source map
- Auto-detects dev URL and starts pnpm, npm, yarn, or bun dev server
- Live console, network, and error ring buffer queryable by Claude via MCP
Visual Companion by the numbers
- Data as of Jul 10, 2026 (Skillselion catalog sync)
/plugin marketplace add ARETI-GmbH/visual-companionAdd your badge
Show developers this marketplace is listed on Skillselion. Paste this into your README.
| Last updated | April 23, 2026 |
|---|---|
| Repository | ARETI-GmbH/visual-companion ↗ |
How do you give Claude precise live UI context—DOM, styles, screenshots, and source maps—while debugging a running web app?
Open a split Chrome-App window with your web app and Claude Code; Alt+Click elements to send DOM, styles, screenshots, and source maps via MCP.
Who is it for?
Frontend developers using Claude Code who want split-pane browser debugging with automatic dev-server startup and element capture.
Skip if: Backend-only services, mobile native apps, or teams that do not run a local web dev server.
What you get
A running split-pane debug window, captured element buffers, and MCP-accessible console, network, and error context for the active session.
Plugins in this marketplace
1 plugin - install individually after you add the marketplace.
Recommended Marketplaces
FAQ
How does Visual Companion detect the app URL?
README order is CLI arg, then .Visual Companion.json, then package.json scripts.dev before auto-starting the dev server.
What does Alt+Click capture?
Documentation sends DOM, computed styles, screenshot, source map, and ancestors to Claude through MCP while buffering console and network data.
How do you stop all companion processes?
Run /Visual Companion-stop to end daemons and Chrome windows started by the plugin.