VibeSurf到MCP的转换
此仓库包含了将VibeSurf（一个浏览器自动化扩展+FastAPI后端）转换为现代MCP（模型上下文协议）服务器架构的过程。
🎯 项目概述
原版VibeSurf浏览器自动化聊天扩展 + FastAPI 后端 新建筑（或：新型建筑）MCP服务器 + 简化的Chrome扩展程序，实现AI与浏览器的直接通信
📁 仓库结构
├── browsermcp/ # MCP server implementation (TypeScript/Node.js)
│ ├── src/
│ │ ├── config/ # Configuration files
│ │ ├── messaging/ # WebSocket communication
│ │ ├── tools/ # MCP tool definitions
│ │ ├── types/ # TypeScript type definitions
│ │ └── utils/ # Utility functions
│ ├── dist/ # Built server (generated)
│ └── package.json
├── vibesurf/ # Original VibeSurf codebase (Python)
│ └── vibe_surf/
│ ├── backend/ # FastAPI backend
│ ├── browser/ # Browser automation
│ ├── chrome_extension/ # Simplified extension
│ └── agents/ # AI agents
├── .config/ # OpenCode configuration
└── docs/ # Documentation🚀 快速入门
1. MCP服务器设置
cd browsermcp
npm install
npm run build2. Chrome 扩展程序
- 负载
vibesurf/vibe_surf/chrome_extension/在Chrome开发者模式下作为未打包扩展 - 该扩展通过WebSocket连接到MCP服务器
3. OpenCode 配置
该 .config/opencode/opencode.json 已经配置为使用MCP服务器。
🛠️ 可用工具
MCP服务器提供以下浏览器自动化工具：
- 导航:
navigate，go_back，go_forward - 交互:
click，type，hover，select_option - 观察:
snapshot，screenshot - 公用事业:
press_key，wait，get_console_logs
🔧 技术细节
MCP 服务器
- 框架TypeScript + Node.js
- 协议；议定书模型上下文协议（MCP）
- 交流WebSocket 到 Chrome 扩展
- 工具用于类型安全的Zod模式
Chrome 扩展程序
- 建筑学简化自原始的VibeSurf
- 权限最小化（仅活动标签页、脚本、标签页）
- 交流WebSocket客户端连接到MCP服务器
整合
- OpenCode（奥普恩代码）配置在
.config/opencode/opencode.json - 克劳德·科德可配置为
mcpServers在claude.json
📚 文档
idea.md- 原始转换概念mcp_design.md- 技术设计决策browsermcp/README.md- MCP服务器文档
🔄 转换状态
✅ 已完成：
- 带有浏览器自动化工具的MCP服务器
- 服务器与扩展程序之间的WebSocket通信
- OpenCode 集成
- 构建系统和TypeScript编译
🔄 旋转或循环（符号本身无特定中文含义，常用于表示循环、旋转等动作或状态） 进行中：
- 标签页特定的会话管理
- 增强的错误处理
🤝 贡献（或“参与贡献”）
这是一个转换项目，展示了如何将浏览器自动化从传统API迁移到MCP标准，以实现现代化。
📄 许可证
请参阅各个目录中的许可信息。