AI导哈

MCP客户端工具

一个基于React + TypeScript + Vite的浏览器客户端，用于与本地MCP服务器交互，支持聊天和天气查询功能。

  • by jrgtwo
  • TypeScript
  • 本地部署
  • 6 星标
  • 更新于
在 GitHub 查看 jrgtwo/mcp-client

使用说明

MCP客户端

用于与本地用户交互的React+TypeScript+Vite浏览器客户端 主控程序 服务器。使用MCP流式HTTP传输通过HTTP连接。

先决条件

在使用应用程序之前，MCP服务器必须在端口8000上本地运行：

python -m src.mcp.llm_server --model models/<model-name> --transport http --port 8000

入门

npm install
npm run dev      # Dev server with HMR at http://localhost:5173

命令

命令 描述
npm run dev 启动开发服务器（Vite HMR，本地主机：5173）
npm run build 类型检查+生产制造 dist/
npm run lint 运行ESLint
npm run preview 服务本地生产建设

特性

聊天(/chat)

向MCP服务器发送消息 chat 工具并显示响应。维护每个会话的完整对话历史记录。

天气(/weather)

通过MCP服务器获取任何城市或地区的当前天气 get_weather 工具（由 开放天气 -不需要API密钥）。支持公制（°C/km/h）和英制（°F/mph）单位。

建筑

src/
├── mcpConnect.tsx        # MCP HTTP transport — initialize, callTool, disconnect
├── hooks/
│   ├── useChat.ts        # Chat session state and message handling
│   └── useWeather.ts     # Weather lookup state and MCP call
├── Chat.tsx              # Chat UI
├── Weather.tsx           # Weather UI
├── router.tsx            # TanStack Router setup
└── routes/
    ├── __root.tsx        # Nav layout
    ├── chat.tsx          # /chat route
    ├── weather.tsx       # /weather route
    └── index.tsx         # / redirect

MCP传输 (src/mcpConnect.tsx)处理三步HTTP握手：

  1. POST /mcp 随着 initialize --捕获 Mcp-Session-Id 从响应标头
  2. POST /mcp 随着 notifications/initialized --完成握手
  3. POST /mcp 随着 tools/call 每个请求--流式传输SSE响应
  4. DELETE /mcp 在清理时--结束会话

每一页(/chat, /weather)在挂载时创建自己的MCP会话，并在卸载时将其拆除。

相关 MCP