Skip to main content
Glama
aj47

Electron Native MCP Server

by aj47

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 --inspect flag (for DOM inspection)

Required macOS Permissions

This server requires the following system permissions:

  1. Accessibility - For UI automation and keyboard/mouse control

  2. Screen Recording - For taking screenshots

  3. Input Monitoring - For keyboard and mouse input

Installation

# Run the setup script
./scripts/setup.sh

This 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 build

Usage

Running the Server

# Development mode (with auto-reload)
npm run dev

# Production mode
npm start

Configuring 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 parameters

Debugging Electron Apps

To debug an Electron app with this server:

  1. Launch your Electron app with the inspect flag:

    /path/to/your/app.app/Contents/MacOS/YourApp --inspect=9222
  2. List available targets: Use the list_electron_targets tool to see all debuggable windows.

  3. Connect to a target: Use connect_to_electron_target with the target ID.

  4. 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 format

Architecture

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.md

Troubleshooting

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=9222

Screenshots 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:

Available Tools

2 tools
electron_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.

ParametersJSON Schema
NameRequiredDescriptionDefault
codeYesJavaScript code to execute in the Electron renderer process

TDQS

A4.2/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A4.6/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines5/5

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.

  1. 2 tool updatesv1.0.0
    • First observedelectron_execute
    • First observedelectron_reset

TDQS

A4.1/5.0
Disambiguation5/5

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.

Naming Consistency5/5

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.

Tool Count2/5

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.

Completeness2/5

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

ActivityInactive
ResponsivenessNo issues

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

Related MCP Servers

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/aj47/electron-native-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server