Electron Native MCP Server
Provides comprehensive tools for debugging and automating native Electron applications, including DOM inspection via Chrome DevTools Protocol, JavaScript execution, element querying, and screenshot capture of Electron windows and webviews.
Enables UI automation and control of macOS system features through accessibility APIs, including mouse and keyboard control, native UI screenshots, global hotkey triggering (Spotlight, Mission Control, etc.), and system permission management.
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 Native MCP Serverclick the login button in my electron app"
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 Native MCP Server
A powerful Model Context Protocol (MCP) server for debugging and automating native Electron applications on macOS. This server provides comprehensive tools for DOM inspection, UI automation, and global hotkey triggering.
Features
π DOM Inspection (7 tools)
Connect to Electron apps via Chrome DevTools Protocol (CDP)
List all debuggable targets (windows, webviews)
Query and inspect DOM elements
Execute JavaScript in Electron windows
Take screenshots of Electron content
π±οΈ UI Automation (9 tools)
Control mouse (move, click, double-click, drag)
Keyboard input (type text, press keys)
Take screenshots of native UI
Get screen dimensions and mouse position
Full macOS accessibility API integration
β¨οΈ Global Hotkeys (4 tools)
Trigger custom keyboard shortcuts
Activate common macOS hotkeys (Spotlight, Mission Control, etc.)
Simulate application-specific shortcuts
Send complex key sequences
π Permission Management (4 tools)
Check permission status
Request system permissions
Get setup instructions
Verify all required permissions
Related MCP server: Electron Debug MCP Server
Requirements
macOS 12.0 or later
Node.js 18.0 or later
Electron app running with
--inspectflag (for DOM inspection)
Required macOS Permissions
This server requires the following system permissions:
Accessibility - For UI automation and keyboard/mouse control
Screen Recording - For taking screenshots
Input Monitoring - For keyboard and mouse input
Installation
Quick Setup (Recommended)
# Run the setup script
./scripts/setup.shThis will:
Check system requirements
Install dependencies
Build the project
Provide configuration instructions
Optionally install the example app
Manual Setup
# Install dependencies
npm install
# Build the project
npm run buildUsage
Running the Server
# Development mode (with auto-reload)
npm run dev
# Production mode
npm startConfiguring with Claude Desktop
Add to your Claude Desktop configuration (~/Library/Application Support/Claude/claude_desktop_config.json):
{
"mcpServers": {
"electron-native": {
"command": "node",
"args": ["/path/to/electron-native-mcp/dist/index.js"]
}
}
}Configuring with Other MCP Clients
The server uses stdio transport and can be integrated with any MCP-compatible client.
Tool Reference
DOM Inspection Tools
list_electron_targets
List all available Electron windows and webviews.
// Example usage
{
"host": "localhost", // optional
"port": 9222 // optional
}connect_to_electron_target
Connect to a specific Electron target for debugging.
{
"targetId": "target-id-from-list"
}get_dom_tree
Get the complete DOM tree of a connected target.
{
"targetId": "target-id"
}query_selector
Find a DOM element using CSS selector.
{
"targetId": "target-id",
"selector": "#myButton"
}execute_javascript
Execute JavaScript in an Electron window.
{
"targetId": "target-id",
"code": "document.title"
}UI Automation Tools
click
Click at coordinates or current position.
{
"x": 100, // optional
"y": 200, // optional
"button": "left" // left, right, or middle
}type_text
Type text at the current cursor position.
{
"text": "Hello, World!"
}press_key
Press a key with optional modifiers.
{
"key": "enter",
"modifiers": ["command", "shift"] // optional
}take_screenshot
Capture a screenshot of the screen or region.
{
"x": 0, // optional
"y": 0, // optional
"width": 800, // optional
"height": 600 // optional
}Hotkey Tools
trigger_hotkey
Trigger a custom keyboard shortcut.
{
"key": "space",
"modifiers": ["command"]
}trigger_common_macos_hotkey
Trigger a common macOS system hotkey.
{
"hotkey": "spotlight" // spotlight, mission_control, app_switcher, etc.
}Permission Tools
check_all_permissions
Check the status of all required permissions.
{} // No parametersDebugging Electron Apps
To debug an Electron app with this server:
Launch your Electron app with the inspect flag:
/path/to/your/app.app/Contents/MacOS/YourApp --inspect=9222List available targets: Use the
list_electron_targetstool to see all debuggable windows.Connect to a target: Use
connect_to_electron_targetwith the target ID.Inspect and interact: Use DOM tools to query elements, execute JavaScript, etc.
Examples
Example 1: Click a Button in Electron App
// 1. List targets
list_electron_targets()
// 2. Connect to target
connect_to_electron_target({ targetId: "..." })
// 3. Find button
query_selector({ targetId: "...", selector: "#submitButton" })
// 4. Click it via JavaScript
execute_javascript({
targetId: "...",
code: "document.querySelector('#submitButton').click()"
})Example 2: Automate Native UI
// 1. Check permissions
check_all_permissions()
// 2. Move mouse and click
click({ x: 500, y: 300 })
// 3. Type text
type_text({ text: "Hello!" })
// 4. Press Enter
press_key({ key: "enter" })Example 3: Trigger Spotlight
trigger_common_macos_hotkey({ hotkey: "spotlight" })Development
# Install dependencies
npm install
# Run in development mode
npm run dev
# Build
npm run build
# Lint
npm run lint
# Format code
npm run formatArchitecture
electron-native-mcp/
βββ src/
β βββ index.ts # Entry point
β βββ server.ts # MCP server setup
β βββ types/ # TypeScript types
β βββ lib/ # Core libraries
β β βββ cdp-client.ts # Chrome DevTools Protocol client
β β βββ accessibility.ts # macOS accessibility wrapper
β β βββ permissions.ts # Permission manager
β βββ tools/ # MCP tools
β βββ dom/ # DOM inspection tools
β βββ ui/ # UI automation tools
β βββ hotkey/ # Hotkey tools
β βββ permissions/ # Permission tools
βββ package.json
βββ tsconfig.json
βββ README.mdTroubleshooting
Permission Denied Errors
If you get permission errors, use the permission tools to check status:
check_all_permissions()
get_permission_instructions({ permission: "accessibility" })Then grant the required permissions in System Settings.
Cannot Connect to Electron App
Make sure your Electron app is running with the --inspect flag:
your-app --inspect=9222Screenshots Not Working
Ensure Screen Recording permission is granted for your terminal app (Terminal, iTerm2, VS Code, etc.).
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
MIT
Credits
Built with:
@modelcontextprotocol/sdk - MCP TypeScript SDK
chrome-remote-interface - Chrome DevTools Protocol client
@nut-tree/nut-js - Desktop automation
node-mac-permissions - macOS permissions
Available Tools
2 toolselectron_executeA
Execute JavaScript in an Electron app's renderer process via CDP.
Returns the last expression's value. Use state object to persist data between calls.
Key patterns:
Click: document.querySelector('#btn').click(); 'done'
Fill input: el.value='text'; el.dispatchEvent(new Event('input',{bubbles:true}))
Read DOM: Array.from(document.querySelectorAll('a')).map(a=>({text:a.textContent,href:a.href}))
Best practices:
Use multiple calls: find element β interact β verify result
Always return a value to confirm what happened
Check page state after actions (don't assume)
Error "No Electron targets found" = app needs --inspect flag or CDP_PORT env var mismatch.
| Name | Required | Description | Default |
|---|---|---|---|
| code | Yes | JavaScript code to execute in the Electron renderer process |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries full burden and does an excellent job explaining key behaviors: it returns the last expression's value, allows state persistence between calls, provides error handling guidance for 'No Electron targets found', and includes best practices for reliable execution. The only minor gap is not explicitly stating whether this is a read-only or mutating operation.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is perfectly structured and front-loaded with the core purpose, followed by key patterns and best practices sections. Every sentence earns its place by providing essential information without redundancy. The bullet-point format makes it highly scannable and efficient.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the complexity of executing JavaScript in Electron via CDP with no annotations and no output schema, the description provides excellent context about return values, state persistence, error handling, and best practices. The only minor gap is not explicitly documenting the exact format of return values, though it mentions 'Returns the last expression's value' which provides reasonable guidance.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema description coverage is 100%, so the baseline is 3. The description doesn't add significant parameter semantics beyond what the schema already provides ('JavaScript code to execute in the Electron renderer process'), though it does provide context about the execution environment and examples that indirectly relate to the 'code' parameter.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the specific action ('Execute JavaScript in an Electron app's renderer process via CDP') and distinguishes it from the sibling tool 'electron_reset' by focusing on code execution rather than resetting state. It uses precise technical terminology that defines the exact operation.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear context about when to use this tool (for JavaScript execution in Electron renderer processes) and includes best practices like using multiple calls and returning values. However, it doesn't explicitly state when NOT to use it or directly compare it to the sibling 'electron_reset' tool, which would be needed for a perfect score.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
electron_resetA
Reset CDP connection. Use when execute times out or returns connectivity errors. Clears the state object.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It effectively describes the tool's behavior: it resets a connection and clears a state object, which implies a destructive action that could affect ongoing operations. However, it doesn't detail potential side effects like session loss or reconnection time.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is extremely concise with three short sentences that each add value: stating the action, when to use it, and what it affects. It's front-loaded with the core purpose and wastes no words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (a reset operation with no parameters) and the absence of annotations and output schema, the description is mostly complete. It covers purpose, usage context, and behavioral effect, though it could benefit from mentioning what 'CDP' stands for or the expected outcome after reset.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 0 parameters with 100% coverage, so no parameter documentation is needed. The description appropriately doesn't discuss parameters, maintaining focus on the tool's purpose and usage. A baseline of 4 is applied since no parameters exist.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the specific action ('Reset CDP connection') and the resource affected ('state object'), distinguishing it from the sibling tool 'electron_execute' which likely performs execution rather than resetting connections. It goes beyond just restating the name 'electron_reset' by explaining what gets reset.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explicitly states when to use this tool ('when execute times out or returns connectivity errors'), providing clear context for its application. It implies an alternative by referencing the sibling tool 'electron_execute' for normal operations, though it doesn't explicitly name it as an alternative.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
2 tool updates
v1.0.0- First observed
electron_execute - First observed
electron_reset
TDQS
The two tools have clearly distinct purposes: electron_execute is for executing JavaScript in an Electron app, while electron_reset is for resetting the CDP connection. There is no overlap in functionality, making them easy to differentiate.
Both tools follow a consistent naming pattern with the prefix 'electron_' followed by a verb (execute, reset). This makes the tool set predictable and easy to understand.
With only two tools, the server feels under-scoped for automating Electron apps. Key operations like launching apps, managing windows, or handling events are missing, limiting its utility for comprehensive automation tasks.
The tool set is severely incomplete for Electron automation. It lacks essential operations such as launching or quitting apps, managing multiple windows, handling IPC, or accessing Node.js modules, which are core to Electron's functionality.
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Connectors
Live browser debugging for AI assistants β DOM, console, network via MCP.
Let ChatGPT, Claude & Cursor use your Mac: email, calendar, iMessage, Teams, files. Local, free.
Automate cloud Chromeβnavigate, click, type, screenshot, run code, record screen video
Run App Store Connect from your IDE: pricing, listings, screenshots, releases, AI visibility.
Related MCP Servers
- AlicenseNot gradedqualityBmaintenanceEnables Electron app automation via Chrome DevTools Protocol (CDP), allowing MCP clients like Cursor or Claude Desktop to interact with Electron apps.4MIT
- AlicenseNot gradedqualityAmaintenanceEnables debugging of Electron applications through the Model Context Protocol, with deep integration of Chrome DevTools Protocol for process management and advanced debugging capabilities.83ISC
- AlicenseNot gradedqualityBmaintenanceEnables AI-powered automation, debugging, and observability of Electron applications through Chrome DevTools Protocol integration, providing real-time UI interaction and inspection capabilities.4922MIT
- AlicenseBqualityDmaintenanceElectron debugging MCP server for both renderer (via Chrome DevTools Protocol) and main process (via V8 Inspector Protocol), enabling automation, debugging, and network capture.3114MIT
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
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/aj47/electron-native-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server