MCP Web客户端
用于管理MCP（多模式会话协议）服务器和工具的web客户端。此应用程序允许您从单个界面配置、监视和管理多个MCP服务器及其相关工具。
特性
- 🌐 在一个地方管理多个MCP服务器
- 🛠️ 配置和组织MCP工具（GitHub、Playwright等）
- 🔄 根据需要启用/禁用工具
- 💾 配置的持久存储
- 📱 适用于桌面和移动设备的响应式设计
入门指南
先决条件
- Node.js（版本14或更高版本）
- npm或纱线
安装
- 克隆存储库：
git clone https://github.com/AVGenAI/mcp-web-client.git
cd mcp-web-client- 安装依赖项：
npm install
# or
yarn- 运行开发服务器：
npm run dev
# or
yarn dev- 打开 http://localhost:3000 在浏览器中查看应用程序。
用法
添加服务器
- 导航到“服务器”页面
- 点击“添加新服务器”
- 填写服务器详细信息：
- 名称：服务器的友好名称 - URL:服务器的端点URL - 说明：（可选）有关服务器的其他信息
- 点击“添加服务器”
向服务器添加工具
- 导航到服务器的详细信息页面
- 点击“添加工具”
- 填写工具详细信息：
- 名称：工具的名称 - 类型：工具类型（GitHub、Playwright等） - 配置：特定于工具的配置设置
- 点击“添加工具”
管理工具
- 使用启用/禁用按钮打开/关闭工具
- 删除不再需要的工具
- 查看工具配置详细信息
项目结构
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中的默认设置）
- 客户端组件：用于交互元素和状态管理（标有“使用客户端”指令）
使用钩子、事件处理程序或浏览器API的组件必须是客户端组件。我们用以下方式构建了应用程序：
- 包含元数据的服务器组件根布局
- 客户端组件包装器(
ClientLayout)包括互动元素 - 需要访问状态的所有页面的客户端组件
使用的技术
- Next.js -带有App Router的React框架
- 反应 -UI库
- TypeScript -类型检查
- 状态 -国家管理
- CSS模块-组件范围样式
贡献
欢迎投稿！请随时提交拉取请求。
许可证
此项目根据MIT许可证获得许可-有关详细信息，请参阅许可证文件。
