Gemini MCP Desktop Client

Gemini MCP 桌面客户端

Gemini MCP 桌面客户端 是一个使用 Electron、Vite、React 和 TypeScript 构建的桌面应用，旨在与各种 Model Context Protocol (MCP) 服务 交互。
它还集成了 Google 的 Gemini API，提供强大的大模型聊天体验。

🖼️ 应用截图

---

功能

• ⚡ 快速现代栈：使用 Electron、React、Vite 和 TypeScript 构建。
• 🔌 MCP 服务集成：连接多个 MCP 服务以进行多样化的数据操作。
• 🤖 大模型聊天支持：使用 Gemini API 提供基于大模型的聊天功能。
• 🖥️ 跨平台：支持 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 密钥后，您可以点击 限制密钥 来限制其使用。
• 您可以将 API 密钥限制为特定的 IP 地址、referrer 或 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 大模型 API 集成
• MUI - Material UI 组件
• Emotion - CSS-in-JS 样式
• Framer Motion - 动画
• Express - 应用内本地 API 服务器
• Zod - 运行时验证
• React Router - 应用内路由

---

可以通过添加指向 mcpServerTested.md 文件的链接和简短说明来更新 README.md。以下是如何在 README.md 的 "MCP 服务" 部分插入的方法：

---

📌 MCP 服务

此客户端设计用于与各种 MCP 服务交互，列表位于：
👉 Model Context Protocol - Servers

有许多 MCP 服务可用，包括集成到此应用中的第三方 MCP 实现。
但是，我创建了一个单独的 已测试和验证的 MCP 服务列表，以帮助用户识别可靠的选项。

👉 查看已测试的 MCP 服务列表： mcpServerTested.md

可以从应用设置中配置要连接的服务器。

---

如果想自动插入文件或格式不同，请告诉我。

Gemini API

此应用使用 Gemini 在应用内提供基于大模型的聊天。

确保有 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

🧰 启用/禁用开发者工具

可以直接从 electron/main.ts 文件控制是否在 Electron 窗口中启用 DevTools。

在 createWindow 函数中，修改 webPreferences 对象内的 devTools 属性以控制此行为：

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

此外，可以通过编程方式打开开发者工具：

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。否则，开发者工具将不会打开。

🔽 下载预编译安装程序

可以直接下载并安装适用于您平台的最新版本的 Gemini MCP 桌面客户端：

• 🪟 Windows 安装程序（MSI/EXE）： 下载 Windows 版本

• 🍎 macOS（DMG）： 下载 macOS 版本

macOS 使用步骤：

• 解压 zip
• 将 Electron 应用移动到桌面
• 运行此命令：sudo xattr -rd com.apple.quarantine ~/Desktop/electron-mcp.app
• 然后可以将其移动到应用程序文件夹以便通过 Spotlight 查找

这些是使用 electron-builder 的预编译安装程序，适合不想手动构建应用的用户。

注意事项

• 确保已安装 Node.js 和 npm。
• 该应用处于积极开发中——欢迎贡献和反馈！