KwaiKAT AI 开发挑战赛——Multi-MCP-Manager 开发：从零构建 AI 编程工具 MCP 配置管理平台

当前项目存在 bug 未修复，暂不可使用，待后续优化

引言

在 AI 编程工具日益普及的今天，开发者们面临着一个共同的挑战：如何高效管理多个 AI 工具的 Model Context Protocol (MCP) 配置。正好快手推出了新的编程模型 KAT-Coder-Pro V1，为了推广模型举办了挑战赛 KwaiKAT AI 开发挑战赛火热开启！赢取 iPhone 17 等豪华大奖！!。借由此我打算挑战一下我的软肋，通过使用 AI 编程工具使用自己完全不熟悉的语言去实现一个前端项目 Multi-MCP-Manager。 Multi-MCP-Manager 是为解决多工具 MCP 管理这一痛点而生的跨平台桌面应用。

KwaiKAT AI 开发流程

开发工具

本次开发所使用的工具为 VsCode 和 Kilo-Code 插件，在插件中接入了 KwaiKAT 的新模型，接入方式见官方文档，这也是我第一次使用 Kilo-Code，之前一直用 Cursor 和 ClaudeCode，从此次的使用效果上来说，Kilo-Code 的存档点功能我特别喜欢。

因为本项目是一个从 0 开始的完整项目，我们需要为 AI 指定详细的信息，让 AI 有的放矢。SpecKit 正是这么一个工具，通过 constitution、specify、plan、tasks 流程将项目实现细节描述的极为完善，再之后通过 implement 命令来实现之前指定的计划。

本次开发确定项目内容的提示词如下：

/speckit.specify.md 我需要一个统一管理不同 ai 编程工具中的 mcp 的程序。每个编程工具都会维护自己的 mcp 数据，如果我要尝试使用多个 ai 编程工具时，把已有的 mcp 转移到新的 ai 工具中就成了一个问题。

当 specify 完任务之后 SpecKit 就会创建任务规范，提示后续执行哪一条命名，通过一步步的提示，最终就可以使用 implement 命令来实现整个项目了。但是呢从本次项目的经验上来看，让 AI 编程工具直接来从无到有去写前端界面还是有点难的，需要我们给出一些界面 Demo。这里我用的是 Figma Make生成了管理工具的界面代码，把这部分 UI 代码借鉴到了我的项目中。

项目概述

Multi-MCP-Manager 是一个基于 Tauri 和 React 的桌面应用程序，旨在为开发者提供统一的 MCP 配置管理解决方案。项目支持 Cursor、Claude Code、Kilo Code 等多种 AI 编程工具，通过智能化的配置管理、批量操作和本地扫描功能，极大地提升了开发者的配置同步管理效率。

核心功能亮点

多工具支持：统一管理多种 AI 编程工具的 MCP 配置
智能扫描：自动发现本地 AI 工具配置文件并转换为统一格式
批量操作：支持配置的导入、导出和跨工具复制
实时同步：配置更改实时保存到本地文件系统
跨平台：支持 Windows、macOS 和 Linux 系统

技术栈选择与架构设计

前端技术栈

{
  "react": "^19.2.0",
  "typescript": "^5.9.3",
  "tailwindcss": "^3.3.0",
  "radix-ui": "^1.1.0",
  "zustand": "^5.0.8",
  "tanstack/react-query": "^5.90.5"
}

React 19 + TypeScript：选择最新的 React 版本确保获得最佳的性能和开发体验，TypeScript 提供完整的类型安全保障。

Tailwind CSS + Radix UI：Tailwind 提供灵活的样式定制能力，Radix UI 确保组件的无障碍性和可访问性。

Zustand 状态管理：相比 Redux 更轻量级，提供高效的状态管理解决方案。

桌面应用框架：Tauri

[dependencies]
tauri = { version = "2.9.2", features = [] }
tauri-plugin-fs = "2"
tauri-plugin-log = "2"

Tauri 作为 Rust 编写的桌面应用框架，相比 Electron 具有以下优势：

更小的包体积：平均比 Electron 应用小 15 倍
更低的内存占用：Rust 的内存管理效率远超 Node.js
更高的安全性：Rust 的所有权系统防止内存安全问题
原生性能：直接编译为原生代码，无需虚拟机

构建与开发工具

{
  "vite": "^7.1.12",
  "biome": "^0.3.3",
  "eslint": "^8.56.0",
  "prettier": "^3.0.0"
}

Vite 提供快速的开发服务器和热更新，Biome 作为新一代的 JavaScript 工具链，集成了格式化、linting 和类型检查功能。

核心架构设计

┌─────────────────┐
│   UI Components │  ← React 组件层
├─────────────────┤
│   Hooks Layer   │  ← 自定义 Hooks
├─────────────────┤
│  Services Layer │  ← 业务服务层
├─────────────────┤
│  Tauri Native   │  ← 原生交互层
└─────────────────┘