AI导哈

MCP终端客户端

一个基于React、TypeScript和Vite构建的现代化终端风格UI客户端，用于与MCP（模型控制协议）服务器交互，提供交互式终端界面、实时流响应和多标签并行测试等功能。

  • by iddv
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 iddv/mcp-example-client

使用说明

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 了解详细的实施进度。

许可证

麻省理工学院

相关 MCP