@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/README.md ADDED
@@ -0,0 +1,799 @@
1
+ # Electron MCP Server
2
+
3
+ [![GitHub license](https://img.shields.io/github/license/laststance/electron-mcp-server)](https://github.com/laststance/electron-mcp-server/blob/master/LICENSE)
4
+ [![npm version](https://img.shields.io/npm/v/@laststance/electron-mcp-server)](https://www.npmjs.com/package/@laststance/electron-mcp-server)
5
+ [![MCP](https://img.shields.io/badge/MCP-Model%20Context%20Protocol-blue)](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
+ [![Watch Demo Video](https://vumbnail.com/1104937830.jpg)](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
+ [![Install with NPX in VS Code](https://img.shields.io/badge/VS_Code-Install_MCP-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](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
+ [![Ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](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! 🚀