Implements the MCP server as an Electron application, providing a GUI interface for monitoring and controlling the server state across Windows, macOS, and Linux platforms.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Electron MCP Serverping the server to check if it's running"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Electron MCP Server 🚀
ElectronでModel Context Protocol (MCP) サーバを実装したアプリケーション
ElectronアプリケーションとしてMCPサーバを起動し、Claude DesktopなどのAIアプリケーションから簡単に利用できるようにします。npxやNode.jsのインストールが不要で、エンジニアでない方でも簡単に使用できます。
特徴
✅ 簡単起動: Electronアプリとして起動するだけでMCPサーバが開始
✅ Streamable HTTP対応: 最新のMCP仕様に準拠
✅ GUI管理: サーバー状態の監視と制御が可能
✅ クロスプラットフォーム: Windows、macOS、Linuxで動作
✅ npx不要: 実行ファイルとして配布可能
Related MCP server: MCP Fetch
クイックスタート
開発環境での実行
依存関係のインストール
npm installアプリケーションの起動
npm start開発モードで起動(DevToolsが開きます)
npm run dev
アプリケーションが起動すると、自動的にポート3999でMCPサーバが開始されます。
MCPエンドポイント
メインエンドポイント:
http://localhost:3999/mcpヘルスチェック:
http://localhost:3999/health
Claude Desktopでの設定
Claude Desktopの設定ファイル(claude_desktop_config.json)に以下を追加:
{
"mcpServers": {
"electron-mcp-server": {
"command": "curl",
"args": [
"-X", "POST",
"-H", "Content-Type: application/json",
"-d", "{\"method\":\"initialize\",\"params\":{\"protocolVersion\":\"2025-01-01\",\"capabilities\":{},\"clientInfo\":{\"name\":\"claude-desktop\",\"version\":\"1.0.0\"}},\"id\":1}",
"http://localhost:3999/mcp"
]
}
}
}利用可能なツール
1. ping
サーバーの応答確認用ツール
{
"method": "tools/call",
"params": {
"name": "ping",
"arguments": {
"message": "Hello World"
}
}
}2. echo
メッセージをそのまま返すツール
{
"method": "tools/call",
"params": {
"name": "echo",
"arguments": {
"message": "返したいメッセージ"
}
}
}3. get_server_info
サーバー情報を取得するツール
{
"method": "tools/call",
"params": {
"name": "get_server_info",
"arguments": {}
}
}API使用例
ツール一覧の取得
curl -X POST http://localhost:3999/mcp \
-H "Content-Type: application/json" \
-d '{"method": "tools/list", "id": 1}'pingツールの実行
curl -X POST http://localhost:3999/mcp \
-H "Content-Type: application/json" \
-d '{"method": "tools/call", "params": {"name": "ping", "arguments": {"message": "Test"}}, "id": 2}'ビルドと配布
実行ファイルの作成
ローカルでのビルド
環境変数を設定してビルド:
# GitHub Personal Access Tokenを設定
export GH_TOKEN=your_github_token
# Windows向け
npm run build:win
# macOS向け
npm run build:mac
# Linux向け
npm run build:linuxまたは.envファイルを使用:
# .env.exampleをコピーして設定
cp .env.example .env
# .envファイルを編集してGH_TOKENを設定
npm run build:winGitHub Actionsでの自動ビルド
リポジトリのSettings → Secrets and variables → Actions
ELECTRON_GITHUB_TOKENをRepository Secretとして追加タグをpushまたはworkflow_dispatchで自動ビルド
ビルドされたファイルはdist/フォルダに出力されます。
⚠️ セキュリティ注意:
.envファイルは絶対にリポジトリにコミットしないでください。
開発
プロジェクト構造
electron-mcp/
├── src/
│ ├── main.js # Electronメインプロセス
│ ├── mcp-server.js # MCPサーバー実装
│ └── preload.js # プリロードスクリプト
├── public/
│ ├── index.html # UI
│ ├── style.css # スタイル
│ └── renderer.js # レンダラープロセス
├── package.json
└── README.mdカスタムツールの追加
src/mcp-server.jsのsetupMCPHandlers()メソッドで新しいツールを追加できます:
// tools/listハンドラーにツールを追加
{
name: 'my_custom_tool',
description: 'カスタムツールの説明',
inputSchema: {
type: 'object',
properties: {
param1: {
type: 'string',
description: 'パラメータの説明'
}
},
required: ['param1']
}
}
// tools/callハンドラーに処理を追加
case 'my_custom_tool':
return {
content: [{
type: 'text',
text: `結果: ${args.param1}`
}]
};トラブルシューティング
ポート3999が使用中の場合
環境変数MCP_PORTでポートを変更できます:
MCP_PORT=4000 npm startWSL環境でのDBusエラー
WSL環境では以下のエラーが表示される場合がありますが、アプリケーションの動作には影響しません:
ERROR:object_proxy.cc(577)] Failed to call method: org.freedesktop.DBus.StartServiceByNameライセンス
MIT License
技術スタック
Electron: ^28.0.0
Express: ^4.18.2
@modelcontextprotocol/sdk: ^0.5.0
CORS: ^2.8.5
貢献
Issues、Pull Requestを歓迎します。