AI导哈

浏览器MCP服务器

一个基于浏览器的Anthropic模型上下文协议(MCP)实现，支持WebSocket通信和可扩展工具集成。

  • by Mentis123
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 mentis123/mcp-websocket-server

使用说明

浏览器可访问的MCP服务器

Anthropic模型上下文协议（MCP）的浏览器可访问实现，具有WebSocket通信和可扩展的工具集成。

特性

  • 🌐 基于浏览器的MCP服务器交互界面
  • 🔌 具有实时JSON-RPC消息的WebSocket通信
  • 🛠️ 三个演示工具：addNumbers、fetchContent、readFile
  • 📊 实时消息记录和执行监控
  • 🎨 使用React和Tailwind CSS的现代UI
  • 🔄 浏览器与MCP服务器之间的双向通信

建筑

  • 前端：React+TypeScript+顺风CSS
  • 后端：Node.js+Express+WebSockets
  • MCP服务器：遵循MCP协议的Python实现
  • 沟通：基于WebSockets的JSON-RPC 2.0

快速开始

  1. 安装依赖项:

    npm install

  2. 启动开发服务器:

    npm run dev

  3. 打开浏览器 并导航到 http://localhost:5000

  4. 连接到MCP服务器:

    • 确保“使用安全WebSocket（WSS）” 未受抑制的 促进地方发展
    • 点击“连接”建立WebSocket连接
    • 可用工具应显示在侧边栏中

可用工具

添加数字

将两个数字相加。

{"a": 5, "b": 7}

fetch内容

从URL获取内容。

{"url": "https://httpbin.org/json", "method": "GET"}

readFile

读取文件内容（出于安全考虑而模拟）。

{"path": "/tmp/example.txt"}

项目结构

├── client/                 # React frontend
│   ├── src/
│   │   ├── components/     # UI components
│   │   ├── hooks/          # Custom React hooks
│   │   ├── lib/            # Utility libraries
│   │   └── pages/          # Page components
├── server/                 # Node.js backend
│   ├── index.ts           # Main server entry
│   ├── routes.ts          # WebSocket routes
│   ├── mcp-server.py      # Python MCP server
│   └── vite.ts            # Vite dev server setup
├── shared/                 # Shared types and schemas
└── package.json

发展

应用程序在端口5000上运行，具有：

  • 处理HTTP请求的Express服务器
  • WebSocket服务器已打开 /ws MCP通信路径
  • MCP协议实现的Python子流程
  • Vite开发服务器用于热模块更换

MCP协议

此实施遵循 模型上下文协议 规范：

  • JSON-RPC 2.0消息传递
  • 工具清单和执行
  • 资源管理
  • 错误处理

贡献

  1. 分叉存储库
  2. 创建要素分支
  3. 进行更改
  4. 彻底测试
  5. 提交拉取请求

许可证

MIT许可证-有关详细信息，请参阅许可证文件。

相关 MCP