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 "Install 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)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 installed
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Latest Blog Posts
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/delta-and-beta/electron-dev-bridge'
If you have feedback or need assistance with the MCP directory API, please join our Discord server