home / mcp / electron native mcp server
interact with native electron via mcp server
Configuration
View docs{
"mcpServers": {
"aj47-electron-native-mcp": {
"command": "node",
"args": [
"/path/to/electron-native-mcp/dist/index.js"
]
}
}
}Electron Native MCP Server enables debugging, DOM inspection, and native UI automation for Electron apps on macOS through a local MCP endpoint. It exposes a set of tools to connect to Electron targets, inspect and manipulate the DOM, automate UI actions, trigger macOS hotkeys, and manage necessary permissions from a single, scriptable interface.
You run a local MCP server and connect to it from an MCP client. Start by launching your Electron app with the inspect flag so you can expose debugging targets. Then use the available tools to list targets, connect to a target, inspect and manipulate the DOM, automate UI actions, and trigger system hotkeys. You can also manage required permissions from the same interface to ensure your automation runs smoothly.
Prerequisites you need before installation include macOS 12.0 or later and Node.js 18.0 or later. Ensure your Electron app is prepared for debugging with the inspect flag.
# Quick setup (recommended)
./scripts/setup.sh
```
This script checks system requirements, installs dependencies, builds the project, and provides configuration instructions. It may also offer to install an example app.
```bash
# Manual setup
npm install
npm run buildTo run the server in development, use auto-reload during development. For production, start the server with the production command. If you need to configure the server with a client, you can place the MCP configuration in your client setup and point it to the local stdio server.
{
"mcpServers": {
"electron_native": {
"command": "node",
"args": ["/path/to/electron-native-mcp/dist/index.js"]
}
}
}Run in development mode for automatic reloads, or run in production mode for a stable build. Use the following commands to start the server in each mode.
# Development mode (with auto-reload)
npm run dev
# Production mode
npm startTo debug an Electron app, first launch the app with the inspect flag, then connect to the debuggable targets and begin DOM inspection or UI automation.
/path/to/your/app.app/Contents/MacOS/YourApp --inspect=9222
```
Then list targets, connect to one, and use the DOM and UI automation tools to interact with the app.Example workflows show how to list targets, connect to a target, query the DOM, and perform actions like clicking or typing.
Common development commands when working on the server project.
# Install dependencies
npm install
# Run in development mode
npm run dev
# Build the project
npm run build
# Lint and format (optional)
npm run lint
npm run formatThe server integrates the Chrome DevTools Protocol for DOM inspection, macOS accessibility APIs for UI automation, and a set of tools organized into DOM inspection, UI automation, hotkeys, and permission management.
If you encounter permission or connection issues, ensure the required macOS permissions are granted and that the Electron app is started with the correct debugging flags.
The server provides tools for DOM inspection, UI automation, global hotkeys, and permission management. Use the tools to list targets, connect to a target, inspect the DOM, execute JavaScript, click, type text, press keys, take screenshots, trigger hotkeys, and check or request permissions as needed.
List all available Electron windows and webviews.
Connect to a specific Electron target for debugging.
Get the complete DOM tree of a connected target.
Find a DOM element using a CSS selector.
Execute JavaScript in an Electron window.
Click at coordinates or current position.
Type text at the current cursor position.
Press a key with optional modifiers.
Capture a screenshot of the screen or region.
Trigger a custom keyboard shortcut.
Trigger a common macOS system hotkey.
Check the status of all required permissions.
Get setup instructions for a specific permission.
Request system permissions.
Verify that all required permissions have been granted.