electron-dev-bridge
Integrates with Electron apps by exposing IPC handlers as MCP tools, and provides 33 built-in CDP tools for DOM automation, screenshots, interaction, console/network capture, and multi-window support.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@electron-dev-bridgescreenshot the current window"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
electron-dev-bridge
Turn your Electron app's IPC handlers into MCP tools for Claude Code
Built for Claude Code — Connects Electron apps via CDP and MCP
Overview
electron-dev-bridge maps your Electron app's ipcMain.handle() channels to MCP tools that Claude Code can call directly. It includes 33 built-in CDP tools for DOM automation, screenshots, interaction, JS evaluation, console/network capture, and multi-window support — no IPC handlers required.
Your Electron App Claude Code
↓ ↓
ipcMain.handle('profiles:query') profiles_query ← MCP tool
ipcMain.handle('tags:add') tags_add ← MCP tool
ipcMain.handle('crawl:start') crawl_start ← MCP tool
↓ ↓
contextBridge / preload.js ←→ electron-dev-bridge (MCP server)
↓
Chrome DevTools Protocol (port 9229)Related MCP server: mcp-electron-driver
When to Use
electron-dev-bridge is ideal when you need:
Your app's IPC handlers as Claude Code tools with Zod schema validation
DOM automation for testing, debugging, or building Electron apps
Screenshot-based QA with visual comparison
Console and network observability without custom IPC hooks
Multi-window support for apps with multiple BrowserWindows
Custom tools alongside built-in CDP and IPC tools
Live app state exposed as MCP resources Claude can read on demand
For generic browser automation without Electron-specific features, a standard Chrome DevTools MCP server works fine.
Capabilities
IPC Bridge
Auto-Discovery — Scans ipcMain.handle() calls
Zod Schemas — Typed tool inputs from existing schemas
Preload Mapping — domain:action → window.electronAPI.domain.action
CDP Tools (33)
DOM Queries — Selectors, text search, a11y tree Interaction — Click, type, fill, key press, select Visual — Screenshots, diff, highlight DevTools — Console logs, network requests Multi-Window — List targets, switch windows
CLI + Library API
init — Scaffold config from source code
register — One-command Claude Code setup
startServer — Programmatic embedding
Custom Tools — Plugin API for arbitrary handlers
Skills
3 Sample Skills — Drop into .claude/skills/
App Dev — Tool reference and playbooks
E2E Testing — Test patterns and visual regression
Debugging — Diagnostic flowcharts
Quick Start
# Install in your Electron project
npm install electron-dev-bridge
# Scaffold a config from your source code
npx electron-mcp init
# Review the generated config
cat electron-mcp.config.ts
# Register with Claude Code
npx electron-mcp registerThen in Claude Code:
# Your IPC handlers are now tools
profiles_query query="test user"
tags_add profileId="123" tag="vip"
# 33 built-in CDP tools
electron_evaluate expression="document.title"
electron_screenshot
electron_click selector="[data-testid='submit']"
electron_fill selector="#email" text="new@example.com"
electron_get_console_logs level="error"
electron_get_network_requests errorsOnly=trueHow It Works
┌──────────────────────────────────────────────────────────────────┐
│ electron-dev-bridge │
├──────────────────────────────────────────────────────────────────┤
│ │
│ 1. CONFIG Define IPC channels as MCP tools │
│ ↓ (electron-mcp.config.ts) │
│ │
│ 2. SCAN Auto-detect ipcMain.handle() + Zod schemas │
│ ↓ (npx electron-mcp init) │
│ │
│ 3. REGISTER Add MCP server to Claude Code │
│ ↓ (npx electron-mcp register) │
│ │
│ 4. SERVE Start MCP server, connect via CDP │
│ ↓ (npx electron-mcp serve) │
│ │
│ 5. BRIDGE Claude calls tool → preload function → IPC │
│ Results flow back through MCP │
│ │
└──────────────────────────────────────────────────────────────────┘Your Electron app needs --remote-debugging-port=9229 enabled. The bridge connects via Chrome DevTools Protocol to evaluate preload functions in the renderer process. Auto-reconnects on HMR/page reload.
Config File
The init command generates electron-mcp.config.ts by scanning your source for ipcMain.handle() calls and Zod schema exports.
import { defineConfig } from 'electron-dev-bridge'
import { profileQuerySchema } from './src/main/ipc-schemas'
export default defineConfig({
app: {
name: 'my-app',
path: '/path/to/app',
debugPort: 9229,
},
tools: {
'profiles:query': {
description: 'Search and filter profiles with pagination',
schema: profileQuerySchema,
returns: 'Array of profile objects',
},
'crawl:start': {
description: 'Start a new crawl job',
preloadPath: 'window.electronAPI.crawl.startJob',
},
},
resources: {
'crawl:progress': {
description: 'Live crawl progress',
uri: 'electron://my-app/crawl/progress',
pollExpression: 'window.__crawlProgress || { crawled: 0, total: 0 }',
},
},
cdpTools: true,
screenshots: { dir: './screenshots', format: 'png' },
customTools: [
{
name: 'list_schemas',
description: 'List XDM schemas from API',
inputSchema: { type: 'object', properties: { limit: { type: 'number' } } },
handler: async (args) => ({
content: [{ type: 'text', text: JSON.stringify(await myApi.listSchemas(args.limit)) }],
}),
},
],
})IPC Tool Naming
IPC channel names use colon-separated domain:action format. The bridge auto-derives tool names and preload paths:
IPC Channel | MCP Tool Name | Preload Path |
|
|
|
|
|
|
|
|
|
Override the preload path when the actual method name differs:
'crawl:start': {
description: 'Start a crawl job',
preloadPath: 'window.electronAPI.crawl.startJob',
}CLI Commands
Command | Description |
| Start the MCP server (default) |
| Scan source for IPC handlers and Zod schemas, generate config |
| Register with Claude Code via |
| Validate config and report readiness |
| Show version |
CDP Tools
33 built-in tools for DOM automation, interaction, observability, and multi-window support. These work on any Electron app — no IPC configuration required.
Tool | Description |
| Launch Electron app with remote debugging and connect via CDP |
| Connect to an already-running Electron app |
| List all page targets (BrowserWindows) with IDs, titles, and URLs |
| Switch CDP connection to a different window by target ID or URL pattern |
Tool | Description |
| Find one element by CSS selector |
| Find all matching elements (up to 50) |
| Find elements containing text via XPath |
| Find elements by ARIA role (explicit or implicit) |
| Structured a11y tree with roles, names, and states |
Tool | Description |
| Click element by selector or x/y coordinates |
| Type text into focused or targeted element (appends) |
| Clear field contents and type new text (replaces) |
| Press special key (Enter, Tab, Escape, arrows, etc.) |
| Select option in |
| Hover over element, triggering CSS :hover and JS mouseenter events |
Tool | Description |
| Get innerText of an element |
| Get value of input/textarea/select |
| Get a specific attribute from an element |
| Get position and dimensions (x, y, width, height) |
| Get the current page URL |
| Execute arbitrary JavaScript in the renderer and return result |
Tool | Description |
| Navigate to a URL and wait for page load |
| Poll for element to appear (default timeout: 5s) |
| Override viewport metrics for responsive testing |
| Scroll page or element in a direction |
| Wait until no network requests are pending for N ms |
Tool | Description |
| Capture full page or element screenshot |
| Byte-level diff of two screenshots (returns diff %) |
| Outline element in red for 3 seconds |
Console and network observability using CDP events — no app changes needed.
Tool | Description |
| Read captured console messages (filter by level, search, since) |
| Read captured HTTP requests (filter by URL, method, errors) |
| Clear console and/or network capture buffers |
| Get counts of captured console logs and network requests |
Buffers: 1000 console entries, 500 network entries max. Capture starts automatically on connect.
Config Reference
Field | Type | Default | Description |
|
| required | MCP server name, shown in Claude Code |
|
| — | Electron app directory (for |
|
|
| CDP remote debugging port |
|
|
| Path to Electron binary |
Each key is an IPC channel name in domain:action format.
Field | Type | Default | Description |
|
| required | Tool description shown to Claude |
|
| — | Zod schema; converted to JSON Schema for input validation |
|
| auto-derived | Override the renderer-side function path |
|
| — | Appended to description as |
Expose live app state that Claude can read on demand.
Field | Type | Description |
|
| Resource description |
|
| Unique resource URI (e.g. |
|
| JavaScript evaluated in the renderer to fetch current data |
Value | Behavior |
| Enable all 33 CDP tools |
| CDP tools disabled |
| Enable only the listed tool names |
Register arbitrary tool handlers alongside IPC and CDP tools.
customTools: [{
name: 'my_tool',
description: 'What it does',
inputSchema: { type: 'object', properties: { ... } },
handler: async (args) => ({
content: [{ type: 'text', text: JSON.stringify(result) }],
}),
}]Custom tools are dispatched after IPC and CDP tools — they can't shadow built-in tools.
Field | Type | Default | Description |
|
|
| Output directory |
|
|
| Image format |
Library API
Import and use programmatically — no CLI required:
import { startServer, CdpBridge, getCdpTools, defineConfig } from 'electron-dev-bridge'
// Start the full MCP server programmatically
await startServer(config)
// Or use components individually
const bridge = new CdpBridge(9229)
await bridge.connect()
const tools = getCdpTools(bridge, config.app, config.screenshots)Preload Convention
The bridge assumes your app uses the contextBridge pattern:
// preload.js
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
profiles: {
query: (args) => ipcRenderer.invoke('profiles:query', args),
get: (id) => ipcRenderer.invoke('profiles:get', id),
},
tags: {
add: (args) => ipcRenderer.invoke('tags:add', args),
},
})The channel profiles:query maps to window.electronAPI.profiles.query. Override with preloadPath when the naming differs.
Zod Schema Integration
Import your existing Zod schemas for typed tool inputs:
import { defineConfig } from 'electron-dev-bridge'
import { profileQuerySchema, crawlJobSchema } from './src/main/ipc-schemas'
export default defineConfig({
app: { name: 'my-app' },
tools: {
'profiles:query': {
description: 'Search profiles',
schema: profileQuerySchema,
},
'crawl:start': {
description: 'Start a crawl',
schema: crawlJobSchema,
preloadPath: 'window.electronAPI.crawl.startJob',
},
},
})Zod schemas are converted to JSON Schema via zod-to-json-schema. Supports Zod v3 and v4.
Sample Skills
Three Claude Code skills that teach Claude how to use the bridge effectively.
# Copy all sample skills
cp -r node_modules/electron-dev-bridge/skills/* .claude/skills/
# Or copy individual skills
cp -r node_modules/electron-dev-bridge/skills/electron-app-dev .claude/skills/Skill | Triggers On | Covers |
| Electron app, desktop app, UI automation, DOM, IPC | Tool reference, selector strategy, build & verify playbooks |
| Test, e2e, regression, form testing | Test patterns, form automation, visual regression, multi-page flows |
| Debug, bug, broken, not working, element not found | Diagnostic flowcharts, connection troubleshooting, error patterns |
Claude Code automatically loads the relevant skill when prompts match trigger keywords.
Troubleshooting
Problem | Fix |
Cannot connect to app | Ensure app runs with |
Connects to DevTools instead of app | Bridge auto-skips |
Element not found | Use |
Blank screenshot | Add |
Stale connection | Bridge auto-reconnects on disconnect. If still stale, call |
Config not found | Run |
Tool returns undefined | Check preload path matches |
Wrong window targeted | Use |
Architecture
src/
├── cdp-tools/ # 33 CDP tool implementations
│ ├── lifecycle.ts # launch, connect, list_targets, switch_target
│ ├── dom-query.ts # query_selector, find_by_text, a11y_tree
│ ├── interaction.ts # click, type_text, fill, press_key, select_option
│ ├── state.ts # get_text, get_value, get_attribute, get_url, evaluate
│ ├── navigation.ts # navigate, wait_for_selector, set_viewport, scroll
│ ├── visual.ts # screenshot, compare_screenshots, highlight
│ └── devtools.ts # get_console_logs, get_network_requests, clear, stats
├── server/ # MCP server runtime
│ ├── mcp-server.ts # Server setup, IPC/CDP/custom tool dispatch
│ ├── cdp-bridge.ts # CDP connection, auto-reconnect, multi-target
│ ├── tool-builder.ts # IPC channel → MCP tool conversion
│ └── resource-builder.ts # Config resources → MCP resources
├── cli/ # CLI commands
│ ├── index.ts # Entry point (serve, init, register, validate)
│ ├── serve.ts # Load config, start server
│ ├── init.ts # Scan source, generate config
│ ├── register.ts # claude mcp add
│ └── validate.ts # Config validation
├── scanner/ # Source code scanners
│ ├── ipc-scanner.ts # Find ipcMain.handle() calls
│ └── schema-scanner.ts # Find Zod schema exports
└── index.ts # Public API: defineConfig, CdpBridge, getCdpTools, startServerDevelopment
# Install dependencies
npm install
# Build
npm run build
# Run tests
npm test
# Type check
npm run lintReferences
Claude Code | |
MCP Specification | |
MCP SDK | |
Chrome DevTools Protocol | |
Electron |
MIT License
This server cannot be deployed
Maintenance
Related MCP Connectors
Live browser debugging for AI assistants — DOM, console, network via MCP.
A paid remote MCP for AI agent browser DevTools MCP, built to return verdicts, receipts, usage logs,
One MCP endpoint for Claude, GPT & Gemini: 100+ tools + no-code connectors + agent workers.
Unified MCP Server is a remote MCP connector for AI agents and vertical AI products that provides access to 22,000+ authorized SaaS tools across 400+ integrations and 24 categories directly inside LLMs (Claude, GPT, Gemini, Cohere). Tools operate only on explicitly authorized customer connections, enabling agents to safely read and write against live third-party systems.
Related MCP Servers
- AlicenseNot gradedqualityCmaintenanceAn MCP Server for Chrome DevTools, following the Chrome DevTools Protocol. Integrates with Claude Desktop and Claude Code.308MIT
- AlicenseAqualityDmaintenanceDrive Electron apps from AI agents via MCP - click, type, drag, screenshot, eval JS, and more.399 npm3MIT
- AlicenseNot gradedqualityBmaintenanceEnables Electron app automation via Chrome DevTools Protocol (CDP), allowing MCP clients like Cursor or Claude Desktop to interact with Electron apps.4MIT

@yawlabs/electron-mcpofficial
AlicenseAqualityAmaintenanceProvides 18 tools for Electron development, including secure IPC scaffolding, security audits, migration assistance, and build error diagnosis, enabling AI assistants to generate correct Electron code.1893 npm1MIT