@laststance/electron-mcp-server 1.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +799 -0
- package/dist/handlers.d.ts +6 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +5839 -0
- package/dist/index.js.map +1 -0
- package/dist/schemas.d.ts +103 -0
- package/dist/screenshot.d.ts +6 -0
- package/dist/security/audit.d.ts +48 -0
- package/dist/security/config.d.ts +35 -0
- package/dist/security/manager.d.ts +57 -0
- package/dist/security/sandbox.d.ts +22 -0
- package/dist/security/validation.d.ts +38 -0
- package/dist/tools.d.ts +12 -0
- package/dist/utils/electron-commands.d.ts +65 -0
- package/dist/utils/electron-connection.d.ts +26 -0
- package/dist/utils/electron-discovery.d.ts +38 -0
- package/dist/utils/electron-enhanced-commands.d.ts +47 -0
- package/dist/utils/electron-input-commands.d.ts +16 -0
- package/dist/utils/electron-logs.d.ts +11 -0
- package/dist/utils/electron-process.d.ts +27 -0
- package/dist/utils/logger.d.ts +19 -0
- package/dist/utils/logs.d.ts +1 -0
- package/dist/utils/project.d.ts +1 -0
- package/package.json +98 -0
package/README.md
ADDED
|
@@ -0,0 +1,799 @@
|
|
|
1
|
+
# Electron MCP Server
|
|
2
|
+
|
|
3
|
+
[](https://github.com/laststance/electron-mcp-server/blob/master/LICENSE)
|
|
4
|
+
[](https://www.npmjs.com/package/@laststance/electron-mcp-server)
|
|
5
|
+
[](https://modelcontextprotocol.io)
|
|
6
|
+
|
|
7
|
+
A powerful Model Context Protocol (MCP) server that provides comprehensive Electron application automation, debugging, and observability capabilities. Supercharge your Electron development workflow with AI-powered automation through Chrome DevTools Protocol integration.
|
|
8
|
+
|
|
9
|
+
## Demo
|
|
10
|
+
|
|
11
|
+
See the Electron MCP Server in action:
|
|
12
|
+
|
|
13
|
+
[](https://vimeo.com/1104937830)
|
|
14
|
+
|
|
15
|
+
**[🎬 Watch Full Demo on Vimeo](https://vimeo.com/1104937830)**
|
|
16
|
+
|
|
17
|
+
*Watch how easy it is to automate Electron applications with AI-powered MCP commands.*
|
|
18
|
+
|
|
19
|
+
## 🎯 What Makes This Special
|
|
20
|
+
|
|
21
|
+
Transform your Electron development experience with **AI-powered automation**:
|
|
22
|
+
|
|
23
|
+
- **🔄 Real-time UI Automation**: Click buttons, fill forms, and interact with any Electron app programmatically
|
|
24
|
+
- **📸 Visual Debugging**: Take screenshots and capture application state without interrupting development
|
|
25
|
+
- **🔍 Deep Inspection**: Extract DOM elements, application data, and performance metrics in real-time
|
|
26
|
+
- **⚡ DevTools Protocol Integration**: Universal compatibility with any Electron app - no modifications required
|
|
27
|
+
- **🚀 Development Observability**: Monitor logs, system info, and application behavior seamlessly
|
|
28
|
+
|
|
29
|
+
## 🔒 Security & Configuration
|
|
30
|
+
|
|
31
|
+
**Configurable security levels** to balance safety with functionality:
|
|
32
|
+
|
|
33
|
+
### Security Levels
|
|
34
|
+
|
|
35
|
+
- **🔒 STRICT**: Maximum security for production environments
|
|
36
|
+
- **⚖️ BALANCED**: Default security with safe UI interactions (recommended)
|
|
37
|
+
- **🔓 PERMISSIVE**: More functionality for trusted environments
|
|
38
|
+
- **🛠️ DEVELOPMENT**: Minimal restrictions for development/testing
|
|
39
|
+
|
|
40
|
+
### Environment Configuration
|
|
41
|
+
|
|
42
|
+
Configure the security level and other settings through your MCP client configuration:
|
|
43
|
+
|
|
44
|
+
**VS Code MCP Settings:**
|
|
45
|
+
```json
|
|
46
|
+
{
|
|
47
|
+
"mcp": {
|
|
48
|
+
"servers": {
|
|
49
|
+
"electron": {
|
|
50
|
+
"command": "npx",
|
|
51
|
+
"args": ["-y", "@laststance/electron-mcp-server"],
|
|
52
|
+
"env": {
|
|
53
|
+
"SECURITY_LEVEL": "balanced",
|
|
54
|
+
"SCREENSHOT_ENCRYPTION_KEY":"your-32-byte-hex-string"
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
**Claude Desktop Configuration:**
|
|
63
|
+
```json
|
|
64
|
+
{
|
|
65
|
+
"mcpServers": {
|
|
66
|
+
"electron": {
|
|
67
|
+
"command": "npx",
|
|
68
|
+
"args": ["-y", "electron-mcp-server"],
|
|
69
|
+
"env": {
|
|
70
|
+
"SECURITY_LEVEL": "balanced",
|
|
71
|
+
"SCREENSHOT_ENCRYPTION_KEY":"your-32-byte-hex-string"
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
**Alternative: Local .env file (for development):**
|
|
79
|
+
```bash
|
|
80
|
+
# Create .env file in your project directory
|
|
81
|
+
SECURITY_LEVEL=balanced
|
|
82
|
+
SCREENSHOT_ENCRYPTION_KEY=your-32-byte-hex-string
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
**Security Level Behaviors:**
|
|
86
|
+
|
|
87
|
+
| Level | UI Interactions | DOM Queries | Property Access | Assignments | Function Calls | Risk Threshold |
|
|
88
|
+
|-------|-----------------|-------------|-----------------|-------------|----------------|----------------|
|
|
89
|
+
| `strict` | ❌ Blocked | ❌ Blocked | ✅ Allowed | ❌ Blocked | ❌ None allowed | Low |
|
|
90
|
+
| `balanced` | ✅ Allowed | ✅ Allowed | ✅ Allowed | ❌ Blocked | ✅ Safe UI functions | Medium |
|
|
91
|
+
| `permissive` | ✅ Allowed | ✅ Allowed | ✅ Allowed | ✅ Allowed | ✅ Extended UI functions | High |
|
|
92
|
+
| `development` | ✅ Allowed | ✅ Allowed | ✅ Allowed | ✅ Allowed | ✅ All functions | Critical |
|
|
93
|
+
|
|
94
|
+
**Environment Setup:**
|
|
95
|
+
|
|
96
|
+
1. Copy `.env.example` to `.env`
|
|
97
|
+
2. Set `SECURITY_LEVEL` to your desired level
|
|
98
|
+
3. Configure other security settings as needed
|
|
99
|
+
|
|
100
|
+
```bash
|
|
101
|
+
cp .env.example .env
|
|
102
|
+
# Edit .env and set SECURITY_LEVEL=balanced
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
### Secure UI Interaction Commands
|
|
106
|
+
|
|
107
|
+
Instead of raw JavaScript eval, use these secure commands:
|
|
108
|
+
|
|
109
|
+
```javascript
|
|
110
|
+
// ✅ Secure button clicking
|
|
111
|
+
{
|
|
112
|
+
"command": "click_by_text",
|
|
113
|
+
"args": { "text": "Create New Encyclopedia" }
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
// ✅ Secure element selection
|
|
117
|
+
{
|
|
118
|
+
"command": "click_by_selector",
|
|
119
|
+
"args": { "selector": "button[title='Create']" }
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// ✅ Secure keyboard shortcuts
|
|
123
|
+
{
|
|
124
|
+
"command": "send_keyboard_shortcut",
|
|
125
|
+
"args": { "text": "Ctrl+N" }
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
// ✅ Secure navigation
|
|
129
|
+
{
|
|
130
|
+
"command": "navigate_to_hash",
|
|
131
|
+
"args": { "text": "create" }
|
|
132
|
+
}
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
See [SECURITY_CONFIG.md](./SECURITY_CONFIG.md) for detailed security documentation.
|
|
136
|
+
|
|
137
|
+
## 🎯 Proper MCP Usage Guide
|
|
138
|
+
|
|
139
|
+
### ⚠️ Critical: Argument Structure
|
|
140
|
+
|
|
141
|
+
**The most common mistake** when using this MCP server is incorrect argument structure for the `send_command_to_electron` tool.
|
|
142
|
+
|
|
143
|
+
#### ❌ Wrong (causes "selector is empty" errors):
|
|
144
|
+
|
|
145
|
+
```javascript
|
|
146
|
+
{
|
|
147
|
+
"command": "click_by_selector",
|
|
148
|
+
"args": "button.submit-btn" // ❌ Raw string - WRONG!
|
|
149
|
+
}
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
#### ✅ Correct:
|
|
153
|
+
|
|
154
|
+
```javascript
|
|
155
|
+
{
|
|
156
|
+
"command": "click_by_selector",
|
|
157
|
+
"args": {
|
|
158
|
+
"selector": "button.submit-btn" // ✅ Object with selector property
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
### 📋 Command Argument Reference
|
|
164
|
+
|
|
165
|
+
| Command | Required Args | Example |
|
|
166
|
+
| --------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------ |
|
|
167
|
+
| `click_by_selector` | `{"selector": "css-selector"}` | `{"selector": "button.primary"}` |
|
|
168
|
+
| `click_by_text` | `{"text": "button text"}` | `{"text": "Submit"}` |
|
|
169
|
+
| `fill_input` | `{"value": "text", "selector": "..."}` or `{"value": "text", "placeholder": "..."}` | `{"placeholder": "Enter name", "value": "John"}` |
|
|
170
|
+
| `send_keyboard_shortcut` | `{"text": "key combination"}` | `{"text": "Ctrl+N"}` |
|
|
171
|
+
| `eval` | `{"code": "javascript"}` | `{"code": "document.title"}` |
|
|
172
|
+
| `get_title`, `get_url`, `get_body_text` | No args needed | `{}` or omit args |
|
|
173
|
+
|
|
174
|
+
### 🔄 Recommended Workflow
|
|
175
|
+
|
|
176
|
+
1. **Inspect**: Start with `get_page_structure` or `debug_elements`
|
|
177
|
+
2. **Target**: Use specific selectors or text-based targeting
|
|
178
|
+
3. **Interact**: Use the appropriate command with correct argument structure
|
|
179
|
+
4. **Verify**: Take screenshots or check page state
|
|
180
|
+
|
|
181
|
+
```javascript
|
|
182
|
+
// Step 1: Understand the page
|
|
183
|
+
{
|
|
184
|
+
"command": "get_page_structure"
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
// Step 2: Click button using text (most reliable)
|
|
188
|
+
{
|
|
189
|
+
"command": "click_by_text",
|
|
190
|
+
"args": {
|
|
191
|
+
"text": "Create New Encyclopedia"
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
// Step 3: Fill form field
|
|
196
|
+
{
|
|
197
|
+
"command": "fill_input",
|
|
198
|
+
"args": {
|
|
199
|
+
"placeholder": "Enter encyclopedia name",
|
|
200
|
+
"value": "AI and Machine Learning"
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
// Step 4: Submit with selector
|
|
205
|
+
{
|
|
206
|
+
"command": "click_by_selector",
|
|
207
|
+
"args": {
|
|
208
|
+
"selector": "button[type='submit']"
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
### 🐛 Troubleshooting Common Issues
|
|
214
|
+
|
|
215
|
+
| Error | Cause | Solution |
|
|
216
|
+
| -------------------------------- | -------------------------------- | ------------------------------ |
|
|
217
|
+
| "The provided selector is empty" | Passing string instead of object | Use `{"selector": "..."}` |
|
|
218
|
+
| "Element not found" | Wrong selector | Use `get_page_structure` first |
|
|
219
|
+
| "Command blocked" | Security restriction | Check security level settings |
|
|
220
|
+
| "Click prevented - too soon" | Rapid consecutive clicks | Wait before retrying |
|
|
221
|
+
|
|
222
|
+
## 🛠️ Security Features
|
|
223
|
+
|
|
224
|
+
**Enterprise-grade security** built for safe AI-powered automation:
|
|
225
|
+
|
|
226
|
+
- **🔒 Sandboxed Execution**: All code runs in isolated environments with strict resource limits
|
|
227
|
+
- **🔍 Input Validation**: Advanced static analysis detects and blocks dangerous code patterns
|
|
228
|
+
- **📝 Comprehensive Auditing**: Encrypted logs track all operations with full traceability
|
|
229
|
+
- **🖼️ Secure Screenshots**: Encrypted screenshot data with clear user notifications
|
|
230
|
+
- **⚠️ Risk Assessment**: Automatic threat detection with configurable security thresholds
|
|
231
|
+
- **🚫 Zero Trust**: Dangerous functions like `eval`, file system access, and network requests are blocked by default
|
|
232
|
+
|
|
233
|
+
> **Safety First**: Every command is analyzed, validated, and executed in a secure sandbox before reaching your application.
|
|
234
|
+
|
|
235
|
+
## �🚀 Key Features
|
|
236
|
+
|
|
237
|
+
### 🎮 Application Control & Automation
|
|
238
|
+
|
|
239
|
+
- **Launch & Manage**: Start, stop, and monitor Electron applications with full lifecycle control
|
|
240
|
+
- **Interactive Automation**: Execute JavaScript code directly in running applications via WebSocket
|
|
241
|
+
- **UI Testing**: Automate button clicks, form interactions, and user workflows
|
|
242
|
+
- **Process Management**: Track PIDs, monitor resource usage, and handle graceful shutdowns
|
|
243
|
+
|
|
244
|
+
### 📊 Advanced Observability
|
|
245
|
+
|
|
246
|
+
- **Screenshot Capture**: Non-intrusive visual snapshots using Playwright and Chrome DevTools Protocol
|
|
247
|
+
- **Real-time Logs**: Stream application logs (main process, renderer, console) with filtering
|
|
248
|
+
- **Window Information**: Get detailed window metadata, titles, URLs, and target information
|
|
249
|
+
- **System Monitoring**: Track memory usage, uptime, and performance metrics
|
|
250
|
+
|
|
251
|
+
### 🛠️ Development Productivity
|
|
252
|
+
|
|
253
|
+
- **Universal Compatibility**: Works with any Electron app without requiring code modifications
|
|
254
|
+
- **DevTools Integration**: Leverage Chrome DevTools Protocol for powerful debugging capabilities
|
|
255
|
+
- **Build Automation**: Cross-platform building for Windows, macOS, and Linux
|
|
256
|
+
- **Environment Management**: Clean environment handling and debugging port configuration
|
|
257
|
+
|
|
258
|
+
## 📦 Installation
|
|
259
|
+
|
|
260
|
+
### VS Code Integration (Recommended)
|
|
261
|
+
|
|
262
|
+
[](https://insiders.vscode.dev/redirect/mcp/install?name=electron&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22electron-mcp-server%22%5D%7D)
|
|
263
|
+
|
|
264
|
+
Add to your VS Code MCP settings:
|
|
265
|
+
|
|
266
|
+
```json
|
|
267
|
+
{
|
|
268
|
+
"mcp": {
|
|
269
|
+
"servers": {
|
|
270
|
+
"electron": {
|
|
271
|
+
"command": "npx",
|
|
272
|
+
"args": ["-y", "@laststance/electron-mcp-server"],
|
|
273
|
+
"env": {
|
|
274
|
+
"SECURITY_LEVEL": "balanced",
|
|
275
|
+
"SCREENSHOT_ENCRYPTION_KEY": "your-32-byte-hex-string-here"
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
```
|
|
282
|
+
|
|
283
|
+
### Cursor IDE Integration
|
|
284
|
+
|
|
285
|
+
Cursor IDE supports MCP servers through its configuration file. Add to your Cursor MCP settings:
|
|
286
|
+
|
|
287
|
+
**Location**:
|
|
288
|
+
- macOS/Linux: `~/.cursor/mcp_config.json` or `~/.config/cursor/mcp_config.json`
|
|
289
|
+
- Windows: `%APPDATA%\Cursor\mcp_config.json`
|
|
290
|
+
|
|
291
|
+
**Configuration**:
|
|
292
|
+
|
|
293
|
+
```json
|
|
294
|
+
{
|
|
295
|
+
"mcpServers": {
|
|
296
|
+
"electron": {
|
|
297
|
+
"command": "npx",
|
|
298
|
+
"args": ["-y", "electron-mcp-server"],
|
|
299
|
+
"env": {
|
|
300
|
+
"SECURITY_LEVEL": "balanced",
|
|
301
|
+
"SCREENSHOT_ENCRYPTION_KEY": "your-32-byte-hex-string-here"
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
```
|
|
307
|
+
|
|
308
|
+
**Setup Steps**:
|
|
309
|
+
1. Open Cursor IDE
|
|
310
|
+
2. Go to **Settings** → **Features** → **Model Context Protocol**
|
|
311
|
+
3. Enable MCP support
|
|
312
|
+
4. Add the configuration above to your MCP config file
|
|
313
|
+
5. Restart Cursor IDE
|
|
314
|
+
|
|
315
|
+
**Verify Installation**:
|
|
316
|
+
```bash
|
|
317
|
+
# Check if MCP server is accessible
|
|
318
|
+
curl http://localhost:9222/json
|
|
319
|
+
```
|
|
320
|
+
|
|
321
|
+
### Claude Desktop Integration
|
|
322
|
+
|
|
323
|
+
Add to `~/Library/Application Support/Claude/claude_desktop_config.json`:
|
|
324
|
+
|
|
325
|
+
```json
|
|
326
|
+
{
|
|
327
|
+
"mcpServers": {
|
|
328
|
+
"electron": {
|
|
329
|
+
"command": "npx",
|
|
330
|
+
"args": ["-y", "electron-mcp-server"],
|
|
331
|
+
"env": {
|
|
332
|
+
"SECURITY_LEVEL": "balanced",
|
|
333
|
+
"SCREENSHOT_ENCRYPTION_KEY": "your-32-byte-hex-string-here"
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
```
|
|
339
|
+
|
|
340
|
+
### Global Installation
|
|
341
|
+
|
|
342
|
+
```bash
|
|
343
|
+
npm install -g @laststance/electron-mcp-server
|
|
344
|
+
```
|
|
345
|
+
|
|
346
|
+
## 🔧 Available Tools
|
|
347
|
+
|
|
348
|
+
### `launch_electron_app`
|
|
349
|
+
|
|
350
|
+
Launch an Electron application with debugging capabilities.
|
|
351
|
+
|
|
352
|
+
```javascript
|
|
353
|
+
{
|
|
354
|
+
"appPath": "/path/to/electron-app",
|
|
355
|
+
"devMode": true, // Enables Chrome DevTools Protocol on port 9222
|
|
356
|
+
"args": ["--enable-logging", "--dev"]
|
|
357
|
+
}
|
|
358
|
+
```
|
|
359
|
+
|
|
360
|
+
**Returns**: Process ID and launch confirmation
|
|
361
|
+
|
|
362
|
+
### `get_electron_window_info`
|
|
363
|
+
|
|
364
|
+
Get comprehensive window and target information via Chrome DevTools Protocol.
|
|
365
|
+
|
|
366
|
+
```javascript
|
|
367
|
+
{
|
|
368
|
+
"includeChildren": true // Include child windows and DevTools instances
|
|
369
|
+
}
|
|
370
|
+
```
|
|
371
|
+
|
|
372
|
+
**Returns**:
|
|
373
|
+
|
|
374
|
+
- Window IDs, titles, URLs, and types
|
|
375
|
+
- DevTools Protocol target information
|
|
376
|
+
- Platform details and process information
|
|
377
|
+
|
|
378
|
+
### `take_screenshot`
|
|
379
|
+
|
|
380
|
+
Capture high-quality screenshots using Playwright and Chrome DevTools Protocol.
|
|
381
|
+
|
|
382
|
+
```javascript
|
|
383
|
+
{
|
|
384
|
+
"outputPath": "/path/to/screenshot.png", // Optional: defaults to temp directory
|
|
385
|
+
"windowTitle": "My App" // Optional: target specific window
|
|
386
|
+
}
|
|
387
|
+
```
|
|
388
|
+
|
|
389
|
+
**Features**:
|
|
390
|
+
|
|
391
|
+
- Non-intrusive capture (doesn't bring window to front)
|
|
392
|
+
- Works with any Electron app
|
|
393
|
+
- Fallback to platform-specific tools if needed
|
|
394
|
+
|
|
395
|
+
### `send_command_to_electron`
|
|
396
|
+
|
|
397
|
+
Execute JavaScript commands in the running Electron application via WebSocket.
|
|
398
|
+
|
|
399
|
+
```javascript
|
|
400
|
+
{
|
|
401
|
+
"command": "eval", // Built-in commands: eval, get_title, get_url, click_button, console_log
|
|
402
|
+
"args": {
|
|
403
|
+
"code": "document.querySelector('button').click(); 'Button clicked!'"
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
```
|
|
407
|
+
|
|
408
|
+
**Enhanced UI Interaction Commands**:
|
|
409
|
+
|
|
410
|
+
- `find_elements`: Analyze all interactive UI elements with their properties and positions
|
|
411
|
+
- `click_by_text`: Click elements by their visible text, aria-label, or title (more reliable than selectors)
|
|
412
|
+
- `fill_input`: Fill input fields by selector, placeholder text, or associated label text
|
|
413
|
+
- `select_option`: Select dropdown options by value or visible text
|
|
414
|
+
- `get_page_structure`: Get organized overview of all page elements (buttons, inputs, selects, links)
|
|
415
|
+
- `get_title`: Get document title
|
|
416
|
+
- `get_url`: Get current URL
|
|
417
|
+
- `get_body_text`: Extract visible text content
|
|
418
|
+
- `click_button`: Click buttons by CSS selector (basic method)
|
|
419
|
+
- `console_log`: Send console messages
|
|
420
|
+
- `eval`: Execute custom JavaScript code
|
|
421
|
+
|
|
422
|
+
**Recommended workflow**: Use `get_page_structure` first to understand available elements, then use specific interaction commands like `click_by_text` or `fill_input`.
|
|
423
|
+
|
|
424
|
+
### `read_electron_logs`
|
|
425
|
+
|
|
426
|
+
Stream application logs from main process, renderer, and console.
|
|
427
|
+
|
|
428
|
+
```javascript
|
|
429
|
+
{
|
|
430
|
+
"logType": "all", // Options: "all", "main", "renderer", "console"
|
|
431
|
+
"lines": 50, // Number of recent lines
|
|
432
|
+
"follow": false // Stream live logs
|
|
433
|
+
}
|
|
434
|
+
```
|
|
435
|
+
|
|
436
|
+
### `close_electron_app`
|
|
437
|
+
|
|
438
|
+
Gracefully close the Electron application.
|
|
439
|
+
|
|
440
|
+
```javascript
|
|
441
|
+
{
|
|
442
|
+
"force": false // Force kill if unresponsive
|
|
443
|
+
}
|
|
444
|
+
```
|
|
445
|
+
|
|
446
|
+
### `build_electron_app`
|
|
447
|
+
|
|
448
|
+
Build Electron applications for distribution.
|
|
449
|
+
|
|
450
|
+
```javascript
|
|
451
|
+
{
|
|
452
|
+
"projectPath": "/path/to/project",
|
|
453
|
+
"platform": "darwin", // win32, darwin, linux
|
|
454
|
+
"arch": "x64", // x64, arm64, ia32
|
|
455
|
+
"debug": false
|
|
456
|
+
}
|
|
457
|
+
```
|
|
458
|
+
|
|
459
|
+
## 🎮 Demo Application
|
|
460
|
+
|
|
461
|
+
Try the interactive demo app to test all MCP Server features:
|
|
462
|
+
|
|
463
|
+
```bash
|
|
464
|
+
cd examples/demo-app
|
|
465
|
+
npm install
|
|
466
|
+
npm run dev
|
|
467
|
+
```
|
|
468
|
+
|
|
469
|
+
The demo app includes:
|
|
470
|
+
- **Interactive UI Elements**: Buttons, forms, dropdowns, checkboxes
|
|
471
|
+
- **Real-time Event Logging**: Monitor all interactions
|
|
472
|
+
- **MCP Command Examples**: Built-in usage guide
|
|
473
|
+
- **DevTools Integration**: Automatically enabled on port 9222
|
|
474
|
+
|
|
475
|
+
See [examples/demo-app/README.md](examples/demo-app/README.md) for detailed instructions.
|
|
476
|
+
|
|
477
|
+
## 💡 Usage Examples
|
|
478
|
+
|
|
479
|
+
### Smart UI Interaction Workflow
|
|
480
|
+
|
|
481
|
+
```javascript
|
|
482
|
+
// 1. First, understand the page structure
|
|
483
|
+
await send_command_to_electron({
|
|
484
|
+
command: 'get_page_structure',
|
|
485
|
+
});
|
|
486
|
+
|
|
487
|
+
// 2. Click a button by its text (much more reliable than selectors)
|
|
488
|
+
await send_command_to_electron({
|
|
489
|
+
command: 'click_by_text',
|
|
490
|
+
args: {
|
|
491
|
+
text: 'Login', // Finds buttons containing "Login" in text, aria-label, or title
|
|
492
|
+
},
|
|
493
|
+
});
|
|
494
|
+
|
|
495
|
+
// 3. Fill inputs by their label or placeholder text
|
|
496
|
+
await send_command_to_electron({
|
|
497
|
+
command: 'fill_input',
|
|
498
|
+
args: {
|
|
499
|
+
text: 'username', // Finds input with label "Username" or placeholder "Enter username"
|
|
500
|
+
value: 'john.doe@example.com',
|
|
501
|
+
},
|
|
502
|
+
});
|
|
503
|
+
|
|
504
|
+
await send_command_to_electron({
|
|
505
|
+
command: 'fill_input',
|
|
506
|
+
args: {
|
|
507
|
+
text: 'password',
|
|
508
|
+
value: 'secretpassword',
|
|
509
|
+
},
|
|
510
|
+
});
|
|
511
|
+
|
|
512
|
+
// 4. Select dropdown options by visible text
|
|
513
|
+
await send_command_to_electron({
|
|
514
|
+
command: 'select_option',
|
|
515
|
+
args: {
|
|
516
|
+
text: 'country', // Finds select with label containing "country"
|
|
517
|
+
value: 'United States', // Selects option with this text
|
|
518
|
+
},
|
|
519
|
+
});
|
|
520
|
+
|
|
521
|
+
// 5. Take a screenshot to verify the result
|
|
522
|
+
await take_screenshot();
|
|
523
|
+
```
|
|
524
|
+
|
|
525
|
+
### Advanced Element Detection
|
|
526
|
+
|
|
527
|
+
```javascript
|
|
528
|
+
// Find all interactive elements with detailed information
|
|
529
|
+
await send_command_to_electron({
|
|
530
|
+
command: 'find_elements',
|
|
531
|
+
});
|
|
532
|
+
|
|
533
|
+
// This returns detailed info about every clickable element and input:
|
|
534
|
+
// {
|
|
535
|
+
// "type": "clickable",
|
|
536
|
+
// "text": "Submit Form",
|
|
537
|
+
// "id": "submit-btn",
|
|
538
|
+
// "className": "btn btn-primary",
|
|
539
|
+
// "ariaLabel": "Submit the registration form",
|
|
540
|
+
// "position": { "x": 100, "y": 200, "width": 120, "height": 40 },
|
|
541
|
+
// "visible": true
|
|
542
|
+
// }
|
|
543
|
+
```
|
|
544
|
+
|
|
545
|
+
### Automated UI Testing
|
|
546
|
+
|
|
547
|
+
```javascript
|
|
548
|
+
// Launch app in development mode
|
|
549
|
+
await launch_electron_app({
|
|
550
|
+
appPath: '/path/to/app',
|
|
551
|
+
devMode: true,
|
|
552
|
+
});
|
|
553
|
+
|
|
554
|
+
// Take a screenshot
|
|
555
|
+
await take_screenshot();
|
|
556
|
+
|
|
557
|
+
// Click a button programmatically
|
|
558
|
+
await send_command_to_electron({
|
|
559
|
+
command: 'eval',
|
|
560
|
+
args: {
|
|
561
|
+
code: "document.querySelector('#submit-btn').click()",
|
|
562
|
+
},
|
|
563
|
+
});
|
|
564
|
+
|
|
565
|
+
// Verify the result
|
|
566
|
+
await send_command_to_electron({
|
|
567
|
+
command: 'get_title',
|
|
568
|
+
});
|
|
569
|
+
```
|
|
570
|
+
|
|
571
|
+
### Development Debugging
|
|
572
|
+
|
|
573
|
+
```javascript
|
|
574
|
+
// Get window information
|
|
575
|
+
const windowInfo = await get_electron_window_info();
|
|
576
|
+
|
|
577
|
+
// Extract application data
|
|
578
|
+
await send_command_to_electron({
|
|
579
|
+
command: 'eval',
|
|
580
|
+
args: {
|
|
581
|
+
code: 'JSON.stringify(window.appState, null, 2)',
|
|
582
|
+
},
|
|
583
|
+
});
|
|
584
|
+
|
|
585
|
+
// Monitor logs
|
|
586
|
+
await read_electron_logs({
|
|
587
|
+
logType: 'all',
|
|
588
|
+
lines: 100,
|
|
589
|
+
});
|
|
590
|
+
```
|
|
591
|
+
|
|
592
|
+
### Performance Monitoring
|
|
593
|
+
|
|
594
|
+
```javascript
|
|
595
|
+
// Get system information
|
|
596
|
+
await send_command_to_electron({
|
|
597
|
+
command: 'eval',
|
|
598
|
+
args: {
|
|
599
|
+
code: '({memory: performance.memory, timing: performance.timing})',
|
|
600
|
+
},
|
|
601
|
+
});
|
|
602
|
+
|
|
603
|
+
// Take periodic screenshots for visual regression testing
|
|
604
|
+
await take_screenshot({
|
|
605
|
+
outputPath: '/tests/screenshots/current.png',
|
|
606
|
+
});
|
|
607
|
+
```
|
|
608
|
+
|
|
609
|
+
## 🏗️ Architecture
|
|
610
|
+
|
|
611
|
+
### Chrome DevTools Protocol Integration
|
|
612
|
+
|
|
613
|
+
- **Universal Compatibility**: Works with any Electron app that has remote debugging enabled
|
|
614
|
+
- **Real-time Communication**: WebSocket-based command execution with the renderer process
|
|
615
|
+
- **No App Modifications**: Zero changes required to target applications
|
|
616
|
+
|
|
617
|
+
### Process Management
|
|
618
|
+
|
|
619
|
+
- **Clean Environment**: Handles `ELECTRON_RUN_AS_NODE` and other environment variables
|
|
620
|
+
- **Resource Tracking**: Monitors PIDs, memory usage, and application lifecycle
|
|
621
|
+
- **Graceful Shutdown**: Proper cleanup and process termination
|
|
622
|
+
|
|
623
|
+
### Cross-Platform Support
|
|
624
|
+
|
|
625
|
+
- **macOS**: Uses Playwright CDP with screencapture fallback
|
|
626
|
+
- **Windows**: PowerShell-based window detection and capture
|
|
627
|
+
- **Linux**: X11 window management (planned)
|
|
628
|
+
|
|
629
|
+
## 🧪 Development
|
|
630
|
+
|
|
631
|
+
### Prerequisites
|
|
632
|
+
|
|
633
|
+
- Node.js 18+
|
|
634
|
+
- TypeScript 4.5+
|
|
635
|
+
- **Electron** - Required for running and testing Electron applications
|
|
636
|
+
|
|
637
|
+
```bash
|
|
638
|
+
# Install Electron globally (recommended)
|
|
639
|
+
npm install -g electron
|
|
640
|
+
|
|
641
|
+
# Or install locally in your project
|
|
642
|
+
npm install electron --save-dev
|
|
643
|
+
```
|
|
644
|
+
|
|
645
|
+
### Target Application Setup
|
|
646
|
+
|
|
647
|
+
For the MCP server to work with your Electron application, you need to enable remote debugging. Add this code to your Electron app's main process:
|
|
648
|
+
|
|
649
|
+
```javascript
|
|
650
|
+
const { app } = require('electron');
|
|
651
|
+
const isDev = process.env.NODE_ENV === 'development' || process.argv.includes('--dev');
|
|
652
|
+
|
|
653
|
+
// Enable remote debugging in development mode
|
|
654
|
+
if (isDev) {
|
|
655
|
+
app.commandLine.appendSwitch('remote-debugging-port', '9222');
|
|
656
|
+
}
|
|
657
|
+
```
|
|
658
|
+
|
|
659
|
+
**Alternative approaches:**
|
|
660
|
+
|
|
661
|
+
```bash
|
|
662
|
+
# Launch your app with debugging enabled
|
|
663
|
+
electron . --remote-debugging-port=9222
|
|
664
|
+
|
|
665
|
+
# Or via npm script
|
|
666
|
+
npm run dev -- --remote-debugging-port=9222
|
|
667
|
+
```
|
|
668
|
+
|
|
669
|
+
**Note:** The MCP server automatically scans ports 9222-9225 to detect running Electron applications with remote debugging enabled.
|
|
670
|
+
|
|
671
|
+
### Setup
|
|
672
|
+
|
|
673
|
+
```bash
|
|
674
|
+
git clone https://github.com/laststance/electron-mcp-server.git
|
|
675
|
+
cd electron-mcp-server
|
|
676
|
+
|
|
677
|
+
npm install
|
|
678
|
+
npm run build
|
|
679
|
+
|
|
680
|
+
# Run tests
|
|
681
|
+
npm test
|
|
682
|
+
|
|
683
|
+
# Development mode with auto-rebuild
|
|
684
|
+
npm run dev
|
|
685
|
+
```
|
|
686
|
+
|
|
687
|
+
### Testing
|
|
688
|
+
|
|
689
|
+
The project includes comprehensive test files for React compatibility:
|
|
690
|
+
|
|
691
|
+
```bash
|
|
692
|
+
# Run React compatibility tests
|
|
693
|
+
cd tests/integration/react-compatibility
|
|
694
|
+
electron test-react-electron.js
|
|
695
|
+
```
|
|
696
|
+
|
|
697
|
+
See [`tests/integration/react-compatibility/README.md`](tests/integration/react-compatibility/README.md) for detailed testing instructions and scenarios.
|
|
698
|
+
|
|
699
|
+
### React Compatibility
|
|
700
|
+
|
|
701
|
+
This MCP server has been thoroughly tested with React applications and handles common React patterns correctly:
|
|
702
|
+
|
|
703
|
+
- **✅ React Event Handling**: Properly handles `preventDefault()` in click handlers
|
|
704
|
+
- **✅ Form Input Detection**: Advanced scoring algorithm works with React-rendered inputs
|
|
705
|
+
- **✅ Component Interaction**: Compatible with React components, hooks, and state management
|
|
706
|
+
|
|
707
|
+
### Project Structure
|
|
708
|
+
|
|
709
|
+
```
|
|
710
|
+
src/
|
|
711
|
+
├── handlers.ts # MCP tool handlers
|
|
712
|
+
├── index.ts # Server entry point
|
|
713
|
+
├── tools.ts # Tool definitions
|
|
714
|
+
├── screenshot.ts # Screenshot functionality
|
|
715
|
+
├── utils/
|
|
716
|
+
│ ├── process.ts # Process management & DevTools Protocol
|
|
717
|
+
│ ├── logs.ts # Log management
|
|
718
|
+
│ └── project.ts # Project scaffolding
|
|
719
|
+
└── schemas/ # JSON schemas for validation
|
|
720
|
+
```
|
|
721
|
+
|
|
722
|
+
## 🔐 Security & Best Practices
|
|
723
|
+
|
|
724
|
+
- **Sandboxed Execution**: All JavaScript execution is contained within the target Electron app
|
|
725
|
+
- **Path Validation**: Only operates on explicitly provided application paths
|
|
726
|
+
- **Process Isolation**: Each launched app runs in its own process space
|
|
727
|
+
- **No Persistent Access**: No permanent modifications to target applications
|
|
728
|
+
|
|
729
|
+
## 🤝 Contributing
|
|
730
|
+
|
|
731
|
+
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
|
|
732
|
+
|
|
733
|
+
**Before reporting issues**: Please use the standardized [`ISSUE_TEMPLATE.md`](ISSUE_TEMPLATE.md) for proper bug reporting format. For React compatibility problems or similar technical issues, also review [`REACT_COMPATIBILITY_ISSUES.md`](REACT_COMPATIBILITY_ISSUES.md) for detailed debugging examples, including proper command examples, error outputs, and reproduction steps.
|
|
734
|
+
|
|
735
|
+
1. Fork the repository
|
|
736
|
+
2. Create a feature branch (`git checkout -b feature/awesome-feature`)
|
|
737
|
+
3. Commit your changes (`git commit -m 'Add awesome feature'`)
|
|
738
|
+
4. Push to the branch (`git push origin feature/awesome-feature`)
|
|
739
|
+
5. Open a Pull Request
|
|
740
|
+
|
|
741
|
+
## 📄 License
|
|
742
|
+
|
|
743
|
+
MIT License - see [LICENSE](LICENSE) file for details.
|
|
744
|
+
|
|
745
|
+
## 🙌 Credits & Attribution
|
|
746
|
+
|
|
747
|
+
**Original Author**: [Halil Ural](https://github.com/halilural)
|
|
748
|
+
|
|
749
|
+
This project is a fork of [halilural/electron-mcp-server](https://github.com/halilural/electron-mcp-server) with enhancements for **Cursor IDE compatibility** and improved stability.
|
|
750
|
+
|
|
751
|
+
### Forked & Maintained By
|
|
752
|
+
|
|
753
|
+
- [@laststance](https://github.com/laststance) - Cursor IDE integration improvements, bug fixes, and ongoing maintenance
|
|
754
|
+
|
|
755
|
+
### Key Improvements in This Fork
|
|
756
|
+
|
|
757
|
+
- ✅ **Cursor IDE Compatibility**: Full integration with Cursor IDE for seamless AI-powered Electron automation
|
|
758
|
+
- ✅ **Enhanced Stability**: Improved error handling and reliability
|
|
759
|
+
- ✅ **Better Documentation**: Added comprehensive guides for local development and troubleshooting
|
|
760
|
+
- ✅ **Scoped Package**: Published as `@laststance/electron-mcp-server` on npm
|
|
761
|
+
|
|
762
|
+
### Contributing to This Fork
|
|
763
|
+
|
|
764
|
+
We welcome contributions! If you have improvements or bug fixes, please feel free to:
|
|
765
|
+
1. Fork this repository
|
|
766
|
+
2. Create a feature branch
|
|
767
|
+
3. Submit a pull request with your improvements
|
|
768
|
+
|
|
769
|
+
---
|
|
770
|
+
|
|
771
|
+
## ☕ Support
|
|
772
|
+
|
|
773
|
+
If this project helped you, consider buying me a coffee! ☕
|
|
774
|
+
|
|
775
|
+
[](https://ko-fi.com/halilural)
|
|
776
|
+
|
|
777
|
+
Your support helps me maintain and improve this project. Thank you! 🙏
|
|
778
|
+
|
|
779
|
+
## 🙏 Acknowledgments
|
|
780
|
+
|
|
781
|
+
- **[Model Context Protocol](https://modelcontextprotocol.io)** - Standardized AI-application interface
|
|
782
|
+
- **[Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/)** - Universal debugging interface
|
|
783
|
+
- **[Playwright](https://playwright.dev)** - Reliable browser automation
|
|
784
|
+
- **[Electron](https://electronjs.org)** - Cross-platform desktop applications
|
|
785
|
+
|
|
786
|
+
## 🔗 Links
|
|
787
|
+
|
|
788
|
+
- **[GitHub Repository](https://github.com/laststance/electron-mcp-server)**
|
|
789
|
+
- **[NPM Package](https://www.npmjs.com/package/@laststance/electron-mcp-server)**
|
|
790
|
+
- **[Original Repository](https://github.com/halilural/electron-mcp-server)** - Original project by Halil Ural
|
|
791
|
+
- **[Model Context Protocol](https://modelcontextprotocol.io)**
|
|
792
|
+
- **[Chrome DevTools Protocol Docs](https://chromedevtools.github.io/devtools-protocol/)**
|
|
793
|
+
- **[Cursor IDE Setup Guide](./CURSOR_SETUP.md)** - Complete setup guide for Cursor IDE integration
|
|
794
|
+
- **[Issue Template](./ISSUE_TEMPLATE.md)** - Standardized bug reporting format
|
|
795
|
+
- **[React Compatibility Issues Documentation](./REACT_COMPATIBILITY_ISSUES.md)** - Technical debugging guide for React applications
|
|
796
|
+
|
|
797
|
+
---
|
|
798
|
+
|
|
799
|
+
**Ready to supercharge your Electron development with AI-powered automation?** Install the MCP server and start building smarter workflows today! 🚀
|