MCP Web Client

MCP Web 客户端

用于管理 MCP（多模态对话协议）服务和工具的 Web 客户端。此应用可让你在一个界面中配置、监控和管理多个 MCP 服务及其相关工具。

功能

• 🌐 在一处管理多个 MCP 服务
• 🛠️ 配置和整理 MCP 工具（GitHub、Playwright 等）
• 🔄 按需启用或禁用工具
• 💾 持久化存储配置
• 📱 响应式设计，适用于桌面和移动设备

开始使用

前提条件

• Node.js（14 或更高版本）
• npm 或 yarn

安装

1. 克隆仓库：

git clone https://github.com/AVGenAI/mcp-web-client.git
cd mcp-web-client

2. 安装依赖：

npm install
# or
yarn

3. 运行开发服务器：

npm run dev
# or
yarn dev

4. 在浏览器中打开 http://localhost:3000，即可查看应用。

使用方法

添加服务

1. 前往“Servers”页面
2. 点击“Add New Server”
3. 填写服务详情：
   • 名称：服务的易识别名称
   • URL：服务的端点 URL
   • 描述：（可选）有关服务的其他信息
4. 点击“Add Server”

向服务添加工具

1. 前往服务的详情页面
2. 点击“Add Tool”
3. 填写工具详情：
   • 名称：工具名称
   • 类型：工具类型（GitHub、Playwright 等）
   • 配置：工具专属配置设置
4. 点击“Add Tool”

管理工具

• 使用启用/禁用按钮切换工具状态
• 删除不再需要的工具
• 查看工具配置详情

项目结构

src/
├── app/                    # Next.js App Router
│   ├── page.tsx           # Dashboard/home page (client component)
│   ├── layout.tsx         # Root layout (server component)
│   └── servers/           # Server management pages
│       ├── page.tsx       # Server list page (client component)
│       ├── add/           # Add server page (client component)
│       └── [id]/          # Server detail page (client component)
├── components/            # Reusable components
│   ├── Sidebar.tsx        # Navigation sidebar (client component)
│   └── ClientLayout.tsx   # Layout wrapper for client components
├── store/                 # State management
│   └── mcpStore.ts        # Zustand store for MCP data
└── types/                 # TypeScript type definitions
    └── mcp.ts             # MCP type definitions

客户端组件与服务端组件

本项目遵循 Next.js App Router 模式：

• 服务端组件：用于静态部分和元数据（App Router 中的默认组件）
• 客户端组件：用于交互元素和状态管理（通过 "use client" 指令标记）

使用 Hook、事件处理程序或浏览器 API 的组件必须是客户端组件。应用的结构如下：

• 包含元数据的服务端组件根布局
• 包含交互元素的客户端组件包装器（ClientLayout）
• 所有需要访问状态的页面均使用客户端组件

使用的技术

• Next.js - 带有 App Router 的 React 框架
• React - UI 库
• TypeScript - 类型检查
• Zustand - 状态管理
• CSS Modules - 组件级样式

贡献

欢迎贡献！请随时提交 Pull Request。

许可证

本项目采用 MIT License 授权，详情请参阅 LICENSE 文件。