MCP Example Client
2025.03.28
0
TypeScript终端工具协议交互测试工具开发效率
MCP Example Client 是一个现代化的终端风格 UI 客户端，用于与 MCP（Model Control Protocol）服务器交互。它基于 React、TypeScript 和 Vite 构建，提供了丰富的交互功能和可视化工具，适用于开发者和测试人员。
View on GitHub
Overview
基本能力
产品定位
MCP Example Client 是一个用于与 MCP 服务器交互的终端风格 UI 客户端，旨在提供高效的开发和测试体验。
核心功能
- 交互式终端界面，支持命令历史记录
- 实时流式响应
- 多标签界面，支持并行测试
- 收藏系统，用于保存常用命令
- 协议可视化，带有时序指示器
- 命令构建器 UI，支持复杂参数
- 导入/导出功能，用于保存和共享会话
- 键盘快捷键，支持常见操作
- Monaco 编辑器集成，用于命令输入
适用场景
- 开发者与 MCP 服务器的交互测试
- 并行测试和调试
- 协议可视化和分析
- 命令构建和参数调试
工具列表
- 命令构建器 UI：帮助构建复杂命令参数。
- 协议可视化工具：显示协议交互的时序和状态。
- 多标签管理：支持并行测试和调试。
- 收藏系统：快速访问常用命令。
常见问题解答
- 如何更改 MCP 服务器地址？：可以在客户端 UI 中修改默认设置。
- 如何保存会话？：使用导入/导出功能保存和共享会话。
使用教程
使用依赖
- Node.js 18+ 和 npm
安装教程
# 克隆仓库
git clone https://github.com/yourusername/mcp-example-client.git
cd mcp-example-client
# 安装依赖
npm install
调试方式
# 启动开发服务器
npm run dev
# 构建应用程序
npm run build
# 预览生产构建
npm run preview
# 运行测试
npm test
# 运行测试（监视模式）
npm run test:watch
# 运行测试（覆盖率）
npm run test:coverage