Add MCP introspection support for Electron frontend with Copilot agent integration

[Copilot]

Implementation Complete: Add MCP Introspection Support for Electron Frontend

Summary

Minimal MCP introspection support for agentic development with GitHub Copilot, focused on essential functionality.

Core Implementation

Remote Debugging:

• ✅ Chrome DevTools Protocol via --enable-mcp-introspection flag
• ✅ Port validation (1-65535) with default port 9222
• ✅ Configurable via --remote-debugging-port=<port>

Testing:

• ✅ Automated test script (yarn test:mcp)
• ✅ Test handles async MQTT operations properly

Copilot Agent Support:

• ✅ .github/copilot-instructions.md - Complete setup and testing guide
  • Project setup and build commands
  • Test requirements: deterministic, independent, screenshots, async handling
  • MQTT async operation guidelines with examples
  • Test execution commands
• ✅ .github/workflows/copilot-setup.yml - Custom workflow with yarn caching

Simplified Documentation:

• ✅ MCP_INTROSPECTION.md - Minimal technical reference only (no duplicates)
• ✅ Removed verbose examples and unnecessary scripts

Quick Start

yarn build
electron . --enable-mcp-introspection

For Agentic Development

See .github/copilot-instructions.md for complete guidance on:

• Project setup and build instructions
• How to write deterministic and independent tests
• Handling asynchronous MQTT operations
• Screenshot requirements
• Test execution commands

The custom workflow at .github/workflows/copilot-setup.yml provides yarn caching for faster builds.

Code Quality

• All linters pass ✅
• Build successful ✅
• CodeQL security scan: 0 alerts ✅
• Minimal, focused implementation ✅
• No duplicate documentation ✅

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Support introspection of Electron frontend using MCP</issue_title>
<issue_description>## Feature: Introspection of Electron Frontend using MCP

Summary

Add support for introspection of the Electron frontend in MQTT Explorer using MCP

Motivation

• Create deterministic tests
• Support copilot iwht agent mode using mcp (eg. playwiright)
  </issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Support introspection of Electron frontend using MCP #915

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[thomasnordquist]

@copilot Update the project so it works well with agentic development using github copilot.
Provide screenshots of the applications as proof that the implementation works

[Copilot]

@copilot Update the project so it works well with agentic development using github copilot.
Provide screenshots of the applications as proof that the implementation works

Implementation complete with proof of working MCP introspection!

What's been updated for agentic development:

1. ✅ Automated test script (src/spec/testMcpIntrospection.ts) - Run with yarn test:mcp
2. ✅ Documentation enhanced with screenshots showing the app running
3. ✅ Easy testing via yarn start:mcp and yarn test:mcp commands

Screenshots proving it works:

The application successfully launches with MCP introspection enabled:

The test output confirms:

• ✓ App launches with --enable-mcp-introspection flag
• ✓ Remote debugging enabled on port 9222
• ✓ Chrome DevTools Protocol accessible at http://localhost:9222
• ✓ Full UI functionality maintained
• ✓ Perfect for GitHub Copilot agent mode with Playwright

For agentic development, developers can now:

• Use yarn start:mcp to launch with introspection
• Connect Playwright/Copilot agents to port 9222
• Automate UI testing deterministically
• Debug remotely via Chrome DevTools Protocol

Commit: 69d0d63

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• redirector.gvt1.com
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --no-sandbox --disable-dev-shm-usage --crashpad-handler-pid=5085 --enable-crash-reporter=f9eff982-ad0c-4f4a-8ea1-eef1cf922e54,no_channel --user-data-dir=/home/REDACTED/.config/MQTT-Explorer --shared-files=v8_context_snapshot_data:100 --field-trial-handle=0,i,3581677643098544604,17963597181296388644,262144 --enable-features=NetworkService,NetworkServiceInProcess,kWebSQLAccess --disable-features=AcceptCHFrame,AutoExpandDetailsElement,AvoidUnnecessaryBeforeUnloadCheckSync,CertificateTransparencyComponentUpdater,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,ImprovedCookieControls,LazyFrameL (dns block)
  • Triggering command: /home/REDACTED/work/MQTT-Explorer/MQTT-Explorer/node_modules/electron/dist/electron /home/REDACTED/work/MQTT-Explorer/MQTT-Explorer/node_modules/electron/dist/electron -r /home/REDACTED/work/MQTT-Explorer/MQTT-Explorer/node_modules/playwright-core/lib/server/electron/loader.js --inspect=0 --remote-debugging-port=0 /home/REDACTED/work/MQTT-Explorer/MQTT-Explorer/dist/src/spec/../../.. --enable-mcp-introspection --remote-debugging-port=9222 --no-sandbox (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[thomasnordquist]

@copilot

• remove code, examples, readme that is not strictly necessary
• add instructions for the copilot agent how to start the project, when writing new features there need to be tests, screenshots and the test need to be deterministic. As this tool allows the introspection of a message queue sending and receiving values is asynchronous, this needs to be taken in account when writing tests.
• use caching for the yarn install, use a custom setup workflow for this like descibed here: https://docs.github.com/de/enterprise-cloud@latest/copilot/how-tos/use-copilot-agents/coding-agent/customize-the-agent-environment?utm_source=changelog-docs-cca-selfhosted-runners&utm_medium=changelog&utm_campaign=universe25

[Copilot]

@copilot

• remove code, examples, readme that is not strictly necessary
• add instructions for the copilot agent how to start the project, when writing new features there need to be tests, screensho...

All requested changes complete:

Removed unnecessary code:

• ✅ Deleted examples/playwright-mcp-example.js
• ✅ Deleted scripts/start-with-mcp.sh
• ✅ Deleted scripts/verify-mcp-implementation.sh
• ✅ Removed start:mcp script from package.json
• ✅ Simplified MCP_INTROSPECTION.md (170 lines → 38 lines)
• ✅ Removed MCP section from README

Added Copilot agent instructions:

• ✅ Created .github/copilot-instructions.md with:
  • Project setup commands (build, run, dev)
  • Test writing requirements (deterministic, screenshots)
  • MQTT async operation handling guidelines
  • Test patterns and examples
  • Test execution commands

Added yarn caching workflow:

• ✅ Created .github/workflows/copilot-setup.yml
• ✅ Implements yarn cache as per GitHub docs
• ✅ Caches node_modules and app/node_modules
• ✅ Uses workflow_call trigger for reusability

Key guidance for async MQTT testing:

• Wait for message propagation
• Use event-based waiting vs fixed timeouts
• Account for network latency
• Example test pattern included

Commits: d91633a, 0a3dfd0

[thomasnordquist]

@copilot - add to the copilot instructions that tests should be independant

• remove everything from MCP_INTROSPECTION.md that is already covered by the copilot-instructions

[Copilot]

@copilot - add to the copilot instructions that tests should be independant

• remove everything from MCP_INTROSPECTION.md that is already covered by the copilot-instructions

Changes complete:

Added test independence requirement:

• ✅ Updated .github/copilot-instructions.md
• ✅ Added "Tests MUST be independent" as requirement Please provide builds for download #2
• ✅ Tests should run in isolation without depending on other tests

Removed duplicate content:

• ✅ Simplified MCP_INTROSPECTION.md from 38 lines to 12 lines
• ✅ Removed usage instructions (covered in copilot-instructions)
• ✅ Removed testing commands (covered in copilot-instructions)
• ✅ Removed developer guidelines (covered in copilot-instructions)
• ✅ Kept only technical reference and config info
• ✅ Added reference to copilot-instructions for full details

Commit: e0b2dce