MCP服务器配置应用程序
使用Tauri构建的桌面应用程序，用于管理Claude Code用户的MCP（模型上下文协议）服务器配置。
🤖 用Claude Code开发 -此应用程序是使用 克劳德代码Anthropic的AI驱动开发环境。
🌍 语言: 英语 | 韩语
📋 主要特点
🎯 核心功能
- MCP配置文件生成：自动创建项目范围
.mcp.json选定目录中的文件 - 实时配置验证：MCP服务器设置的实时语法和结构验证
- 服务器库管理：跨不同项目保存和重用MCP服务器配置
- 直观的GUI界面：无需命令行交互即可管理MCP设置
🛠️ 技术特性
- 目录选择：用于选择项目文件夹的本机文件对话框
- 实时编辑：具有添加/编辑/删除操作的基于模式的服务器配置
- 永久存储：自动保存用户设置和服务器库
- 架构验证：基于JSON模式的配置验证
- 双编辑模式：基于表单和直接JSON编辑界面
- 吐司通知：用户操作的实时反馈
- 响应式设计：具有DaisyUI组件的移动友好界面
📥 下载
预构建版本
从下载最新版本 :
- 视窗:
.msi安装程序 - macOS:
.dmg文件（通用二进制-英特尔和苹果硅） - Linux:
.AppImage或.deb包裹
🚀 开发设置
先决条件
- Node.js 18+
- 锈蚀1.60+
- Tauri CLI
安装和设置
# Install dependencies
npm install
# Run in development mode
npm run tauri dev
# Build for production
npm run tauri build💡 如何使用
1.选择项目目录
- 启动应用程序并单击 浏览 按钮
- 选择要应用MCP配置的项目文件夹
- 现有的
.mcp.json文件将自动加载
2.配置MCP服务器
- 点击 添加服务器 添加新的服务器配置
- 选择 表单编辑器 和 JSON编辑器 选项卡：
- 表单编辑器：用户友好的表单界面 - JSON编辑器：面向高级用户的直接JSON编辑
- 输入服务器信息：
- 服务器名称：服务器的唯一标识符 - 命令：执行命令（例如。， npx, uvx) - 参数：命令参数（表单模式下每行一个） - 环境变量：JSON格式的环境变量
3.验证并保存配置
- 使用 验证配置 检查设置的有效性
- 点击 保存.mcp.json 创建配置文件
- 当没有配置服务器时，按钮将更改为 Clear.mcp.json
4.管理服务器库
- 添加的服务器会自动保存到 已保存的服务器 列表
- 使用 添加到当前 在其他项目中重用服务器的按钮
- 使用专用按钮编辑或删除已保存的服务器
📁 MCP配置文件格式
生成 .mcp.json 文件示例：
{
"mcpServers": {
"sequential-thinking": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
},
"memory": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-memory"]
},
"filesystem": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/allowed/files"],
"env": {
"NODE_ENV": "development"
}
}
}
}🏗️ 技术栈
- 前端：TypeScript，香草HTML/CSS，DaisyUI v4，顺风CSS v3
- 后端：铁锈，牛磺酸
- UI框架：DaisyUI，响应式设计
- 通知：自定义吐司通知系统
- 数据存储：JSON文件（本地应用程序数据）
📂 项目结构
mcp-server-config-app/
├── src/ # Frontend source
│ ├── main.ts # Main TypeScript application
│ ├── toast.ts # Toast notification system
│ └── styles.css # Tailwind CSS and custom styles
├── src-tauri/ # Tauri backend
│ ├── src/
│ │ ├── lib.rs # Main Rust logic
│ │ └── main.rs # Entry point
│ ├── Cargo.toml # Rust dependencies
│ └── tauri.conf.json # Tauri configuration
├── index.html # Main HTML file
├── tailwind.config.js # Tailwind CSS configuration
├── postcss.config.js # PostCSS configuration
└── package.json # Node.js dependencies🎨 用户界面
主屏幕
- 项目目录：显示当前选定的项目路径
- MCP服务器：当前项目的服务器列表（可编辑/可移动）
- 已保存的服务器：保存的服务器库（可跨项目重用）
- 动作按钮：配置验证和保存/清除操作
服务器添加/编辑模式
- 选项卡式界面：在表单编辑器和JSON编辑器之间切换
- 表单编辑器：具有验证功能的用户友好输入字段
- JSON编辑器：直接JSON编辑，语法高亮显示和验证
- 双向同步：表单和JSON视图之间的自动同步
高级功能
- 主题切换：多种DaisyUI主题（浅色、深色、纸杯蛋糕、翡翠色）
- 响应式设计：针对台式机和移动设备进行了优化
- 吐司通知：成功、错误、警告和信息消息
- 实时验证：配置错误的即时反馈
🔧 开发指南
添加依赖关系
# Frontend dependencies
npm install
# Tauri plugins
cargo add --manifest-path src-tauri/Cargo.toml生成配置
- 发展:
npm run tauri dev - 生产建设:
npm run tauri build - 类型检查:
npm run build（TypeScript编译）
CI/CD
该项目包括用于自动化构建的GitHub Actions工作流：
- 多平台构建：支持Windows、macOS（通用）和Linux
- 自动发布：在版本标记上创建草稿版本
- 代码质量检查：TypeScript编译和linting
前端开发
- 样式：将DaisyUI组件与Tailwind CSS实用程序一起使用
- 响应性：具有响应断点的移动优先方法
- 吐司系统：应用程序中一致的通知模式
📖 参考文献
🤝 贡献
- 分叉此存储库
- 创建要素分支(
git checkout -b feature/new-feature) - 提交您的更改(
git commit -am 'Add new feature') - 推到分支(
git push origin feature/new-feature) - 创建拉取请求
📄 许可证
该项目根据MIT许可证获得许可。
🐛 错误报告
请在上报告错误或功能请求 .