Gemini MCP Desktop Client

Gemini MCP デスクトップクライアント

Gemini MCP デスクトップクライアントは、Electron、Vite、React、TypeScript で構築されたデスクトップアプリで、様々なModel Context Protocol (MCP) サーバーと相互作用するように設計されています。
また、Google の Gemini API を統合して、強力な LLM チャット体験を提供します。

🖼️ アプリのスクリーンショット

---

機能

• ⚡ 高速でモダンなスタック: Electron、React、Vite、TypeScript で構築されています。
• 🔌 MCP サーバー統合: 多様なデータ操作のために複数の MCP サーバーに接続します。
• 🤖 LLM チャット対応: Gemini API を使用した LLM ベースのチャットです。
• 🖥️ クロスプラットフォーム: Windows (NSIS インストーラー) と macOS (DMG) 用のパッケージに対応しています。
• 🎨 美しい UI: MUI、Emotion、Framer Motion など、モダンなライブラリで構築されています。
• 📚 Markdown レンダリング: シンタックスハイライト付きのリッチな Markdown に対応しています。
• 🛠️ 開発者フレンドリー: 完全な TypeScript サポート、ESLint、Vite HMR を備えています。

---

Google Gemini API キーの設定

Google Gemini API を使い始めるには、API キーを生成する必要があります。以下の手順に従って、キーを作成し、プロジェクトのために安全に保管してください。

1. API キーを取得する

Google Gemini API キーを生成するには、Merge Dev の公式ガイドに従ってください。以下でガイドにアクセスできます: Google Gemini API キー ドキュメント

このドキュメントは、API キーの作成と管理のプロセスを説明します。

API キーを制限する (オプション ただし推奨)

• API キーをコピーした後、Restrict Key をクリックしてその使用を制限できます。
• API キーを特定の IP アドレス、リファラー、または HTTP メソッドに制限して、API キーをさらに安全にできます。

---

インストール

git clone https://github.com/duke7able/gemini-mcp-desktop-client.git
cd gemini-mcp-desktop-client
npm install

---

環境設定

.env を作成するには、Mac と Unix の場合は npm run create-env を、Windows の場合は npm run create-env-win を実行してください。 または、このようにシンプルに作成できます。 プロジェクトのルートディレクトリに .env ファイルを作成し、以下の内容を入力してください:

PORT=5001 # Port for the backend API server
VITE_API_URL=http://localhost:5001
NODE_ENV="DEVELOPMENT"

バックエンドサーバーを異なるポートまたはドメインで実行している場合は、VITE_API_URL を調整してください。

---

開発

開発モードでアプリを起動するには:

npm run dev

これにより、Vite と Electron がライブリロード用のウォッチモードで起動します。

---

ビルド

本番ビルドを作成するには:

npm run build

これにより以下が実行されます:

• TypeScript コードをコンパイル
• Vite フロントエンドをビルド
• electron-builder を使用して Electron アプリをパッケージ化

出力は dist/ および dist-electron/ フォルダ内で利用可能になります。

---

スクリプト

スクリプト	説明
npm run dev	開発モード (Vite + Electron) でアプリを起動
npm run build	本番用にアプリをビルド
npm run preview	本番用 Vite ビルドをプレビュー
npm run lint	コードベースに対して ESLint を実行

---

テックスタック

• Electron - デスクトップアプリケーションフレームワーク
• Vite - フロントエンドツールとデベロップメントサーバー
• React - UI ライブラリ
• TypeScript - 静的型付け
• @modelcontextprotocol/sdk - MCP サーバーインタラクション
• @google/generative-ai - Gemini LLM API インテグレーション
• MUI - Material UI コンポーネント
• Emotion - CSS-in-JS スタイリング
• Framer Motion - アニメーション
• Express - アプリ内ローカル API サーバー
• Zod - ランタイム検証
• React Router - アプリ内ルーティング

---

README.md を更新するには、mcpServerTested.md ファイルへのリンクと簡単な説明を追加できます。以下は、README.md の 「MCP サーバー」 セクションに挿入する方法です:

---

📌 MCP サーバー

このクライアントは、以下にリストされている様々な MCP サーバーと相互作用するように設計されています:
👉 Model Context Protocol - Servers

多くの MCP サーバーが利用可能です。このアプリケーションに統合されたサードパーティ MCP 実装を含みます。
ただし、ユーザーが信頼できるオプションを識別するのに役立つ、テスト済みで検証済みの MCP サーバー の別のリストを作成しました。

👉 テスト済み MCP サーバーのリストはこちら: mcpServerTested.md

アプリ設定から接続先のサーバーを設定できます。

---

ファイルに自動的に挿入するか、別の形式でフォーマットしたい場合はお知らせください。

Gemini API

このアプリは Gemini を使用して、アプリ内で LLM ベースのチャットを提供します。

アプリを設定するために API キーを用意してください

---

パッケージングターゲット

• macOS: DMG インストーラー
• Windows: NSIS インストーラー (x64 アーキテクチャ)

---

フォルダ構造

/
├── dist/               # Vite frontend build output
├── dist-electron/      # Electron main process build output
├── static/             # Static assets
├── src/                # Source code (React + Electron)
├── package.json
├── vite.config.ts
└── electron-builder.yml

🧰 DevTools の有効化/無効化

DevTools が Electron ウィンドウで有効になっているかどうかは、electron/main.ts ファイルから直接制御できます。

createWindow 関数で、webPreferences オブジェクト内の devTools プロパティを修正して、この動作を制御します:

devTools: false // Set to true to enable DevTools, false to disable

さらに、プログラムで DevTools を開くことができます:

win.webContents.openDevTools(); // Opens DevTools automatically when the app launches

例:

function createWindow() {
  const { width, height } = screen.getPrimaryDisplay().workAreaSize;
  win = new BrowserWindow({
    width,
    height,
    icon: path.join(process.env.VITE_PUBLIC, "electron-vite.svg"),
    webPreferences: {
      webSecurity: false,
      preload: path.join(__dirname, "preload.mjs"),
      contextIsolation: true,
      nodeIntegration: true,
      devTools: false, // ✅ Change this to true or false as needed
    },
  });

  if (VITE_DEV_SERVER_URL) {
    win.loadURL(VITE_DEV_SERVER_URL);
  } else {
    win.loadFile(path.join(RENDERER_DIST, "index.html"));
  }

  // ✅ Open DevTools automatically (only works if devTools is true)
  win.webContents.openDevTools();
}

⚠️ openDevTools() が機能するようにするには、webPreferences で devTools を true に設定してください。そうしないと、DevTools は開きません。

🔽 プリビルトインストーラーをダウンロード

お使いのプラットフォーム向けに、Gemini MCP Desktop Client の最新バージョンを直接ダウンロードしてインストールできます:

• 🪟 Windows インストーラー (MSI/EXE): Windows 用をダウンロード

• 🍎 macOS (DMG): macOS 用をダウンロード

Mac で動作させるための手順:

• zip を展開
• electron アプリをデスクトップに移動
• このコマンドを実行: sudo xattr -rd com.apple.quarantine ~/Desktop/electron-mcp.app
• これで Spotlight で検出されるようにアプリケーションフォルダに移動できます

これらは electron-builder を使用してプリビルドされたインストーラーであり、アプリを手動でビルドしたくないユーザーに最適です。

注記

• Node.js と npm がインストールされていることを確認してください。
• このアプリは積極的に開発中です。コントリビューションとフィードバックを歓迎します!