使用说明
MCP多传输客户端
模型上下文协议（MCP）客户端实现，支持三种通信方式：stdio、SSE、Streamable HTTP
特点
- 纱线离线镜：可以在脱机环境中安装软件包
- 多通信方式：stdio、SSE、Streamable HTTP支持
- 基于选项卡的UI：独立于每种通信方式的日志管理
- 实时通知：SSE和Streamable HTTP每5秒接收一次服务器通知
- 尾风CSS 4：时尚的UI风格
安装
1.存储库克隆
git clone <repository-url>
cd mcp-client
2.使用Yarn安装依赖性
yarn install
包是 npm_packages 缓存在目录中，可以离线重新安装。
3.验证安装Python
运行MCP服务器需要Python 3.6+。
执行
1.运行开发服务器
yarn dev
在浏览器中http://localhost:3000连接
2.运行MCP服务器
每种通信方式都需要运行单独的服务器：
Stdio服务器（无端口）
yarn server:stdio
# 또는
python src/server/mcp_server.py stdio
SSE服务器（端口8001）
yarn server:sse
# 또는
python src/server/mcp_server.py sse 8001
Streamable HTTP服务器（端口8002）
yarn server:http
# 또는
python src/server/mcp_server.py http 8002
不同通信方式的特性
1.标准（标准I/O）
特性：
- Node.js进程间通信
- 同步请求-响应模式
- 最简单的结构
限制：
- ❌ 不支持流：由于同步通信特性，无法进行
- ❌ 不支持通知：服务器无法主动向客户端发送消息
- ❌ 不支持浏览器：仅在Node.js环境中工作
不支持的原因： stdio是单向管道通信，只有在客户端发送请求后才能收到响应。服务器在没有客户端请求的情况下无法发送消息，因此在结构上无法进行服务器主导的通信，如流媒体或通知。
2.SSE（服务器发送事件）
特性：
- 单向流（服务器→客户端）
- 自动重新连接
- 实时通知支持
- 支持本机浏览器
支持：
- 初始化请求
- 单一请求-响应
- 接收流数据
- 每5秒通知一次服务器
3.可流式传输HTTP
特性：
- 双向流媒体
- ✅ 分块传输编码
- 高效传输大量数据
- 实时通知支持
支持：
- 初始化请求
- 单一请求-响应
- 流数据收发
- 每5秒通知一次服务器
项目结构
mcp-client/
├── .yarnrc # Yarn offline mirror 설정
├── npm_packages/ # 오프라인 패키지 캐시
├── src/
│ ├── app/
│ │ ├── api/
│ │ │ └── stdio/
│ │ │ └── route.ts # Stdio API Route (Next.js)
│ │ ├── mcpClientStdioBrowser.ts # Stdio 브라우저 클라이언트
│ │ ├── mcpClientSSE.ts # SSE 클라이언트
│ │ └── mcpClientStreamableHttp.ts # Streamable HTTP 클라이언트
│ ├── components/
│ │ ├── McpTest.tsx # 메인 UI 컴포넌트
│ │ └── mcp/
│ │ ├── TransportTabs.tsx # 전송 방식 탭
│ │ ├── ConsoleLog.tsx # 콘솔 로그 표시
│ │ └── transport/
│ │ ├── StdioControls.tsx # Stdio 제어 버튼
│ │ ├── SSEControls.tsx # SSE 제어 버튼
│ │ └── StreamableHttpControls.tsx # HTTP 제어 버튼
│ ├── hooks/
│ │ ├── useTransportLogs.ts # 로그 관리 훅
│ │ └── transport/
│ │ ├── useStdioClient.ts # Stdio 클라이언트 훅
│ │ ├── useSSEClient.ts # SSE 클라이언트 훅
│ │ └── useStreamableHttpClient.ts # HTTP 클라이언트 훅
│ ├── types/
│ │ ├── mcp.ts # MCP 타입 정의
│ │ └── jsonrpc.ts # JSON-RPC 타입 정의
│ └── server/
│ └── mcp_server.py # Python MCP 서버 (3가지 모드)
└── package.json
定义主要类型
JsonRpcRequest（禁止修改）
interface JsonRpcRequest {
jsonrpc: "2.0";
id: string | number;
method: string;
params?: {
[key: string]: unknown;
};
}
Json RpcResponse（禁止修改）
interface JsonRpcResponse {
jsonrpc: "2.0";
id: string | number;
result?: {
[key: string]: unknown;
};
error?: {
code: number;
message: string;
data?: unknown;
};
}
技术堆栈
前端
- Next.js 16.0.3
- 反应19.2.0
- TypeScript 5
- 尾风CSS 4
- UUID v13
后端
- Python 3.6+
- HTTP Server（内置）
- Threading（通知处理）
开发注意事项
-
禁止修改Json Rpc类型:
JsonRpcRequest哇JsonRpcResponse类型是标准规格，请不要修改。 -
独立于日志管理：按每个选项卡（通信方式）独立管理日志。
-
Node.js API필요：要在浏览器中使用stdio通信，必须构建单独的Node.js API服务器。
-
同时运行Python服务器：要测试所有通信方式，必须同时运行3台Python服务器。
开发命令
前端
# 개발 서버 실행
yarn dev
# 프로덕션 빌드
yarn build
# 프로덕션 서버 실행
yarn start
# Python 서버 실행
yarn server:stdio # Stdio 서버
yarn server:sse # SSE 서버
yarn server:http # HTTP 서버
故障射击
CORS错误
Python服务器已经包含CORS头。如果问题仍然存在，请检查浏览器扩展。
服务器连接失败
- 验证python服务器是否正在运行
- 验证是否使用正确的端口（SSE:8001、HTTP:8002）
- 检查防火墙设置
无法测试Stdio
stdio不能在浏览器中直接测试。必须在Node.js环境中单独测试或构建API服务器。
许可证
麻省理工学院
