MCP示例客户端
一个现代终端风格的UI客户端，用于与MCP（模型控制协议）服务器交互，使用React、TypeScript和Vite构建。
特性
- 具有命令历史记录的交互式终端界面
- 实时流媒体响应
- 用于并行测试的多标签界面
- 用于保存常用命令的收藏夹系统
- 带有定时指示器的协议可视化
- 复杂参数的命令生成器UI
- 用于保存和共享会话的导入/导出功能
- 常用操作的键盘快捷键
- Monaco编辑器集成，用于命令输入
入门指南
先决条件
- Node.js 18+和npm
安装
# Clone the repository
git clone https://github.com/yourusername/mcp-example-client.git
cd mcp-example-client
# Install dependencies
npm install发展
# Start the development server
npm run dev这将在以下位置启动开发服务器http://localhost:5173
生产大楼
# Build the application
npm run build
# Preview the production build
npm run preview测试
# Run tests
npm test
# Run tests in watch mode
npm run test:watch
# Run tests with coverage
npm run test:coverage配置
默认情况下，客户端连接到MCP服务器 http://localhost:8000 使用测试API密钥。您可以在客户端UI中更改这些设置。
项目结构
src/
├── api/ # API client and WebSocket implementations
├── assets/ # Static assets
├── components/ # React components
│ ├── CommandBuilder/ # Command builder UI components
│ ├── Layout/ # Main layout components
│ ├── Protocol/ # Protocol visualization components
│ ├── Sidebar/ # Sidebar components
│ ├── Tabs/ # Tab management components
│ └── Terminal/ # Terminal interface components
├── context/ # React context providers
├── hooks/ # Custom React hooks
├── types/ # TypeScript type definitions
└── utils/ # Utility functions实施状态
看 llm/progress.md 了解详细的实施进度。