OpenAI代理+Webfuse MCP演示
控制实时浏览器会话的AI代理。点击“开始演示”,观看它浏览维基百科,从信息框中提取数据,然后点击链接,全程 Webfuse会话MCP.
试试看: webfu.se/+openai代理/
先决条件
- Python 3.10+
- Node.js 18+(用于Cloudflare Worker代理,可选)
- 一 开放人工智能 API密钥
- A. Webfuse 的 空间帐户
- 安装在您的共享空间上的自动化应用程序(用于会话MCP)
建筑
Extension (sidepanel) Agent Server (Python)
┌──────────────┐ ┌──────────────────────┐
│ sidepanel.html│──POST────▶│ agent.py │
│ sidepanel.js │ /run │ │
│ │ /chat │ ┌─── OpenAI API ───┐ │
│ Renders SSE │◀──SSE────│ │ gpt-4o │ │
│ step by step │ │ └───────┬───────────┘ │
└──────────────┘ │ │ MCP │
│ ┌───────▼───────────┐ │
No API keys │ │ Webfuse Session │ │
in the extension │ │ MCP Server │ │
│ └───────────────────┘ │
└───────────────────────┘
API keys stay here扩展将会话ID发送到代理服务器。服务器持有两个密钥(OpenAI+Webfuse),运行代理,并将结果作为SSE事件流式传输回来。
API终点
POST /run,引导演示
维基百科阿姆斯特丹之旅分为8个步骤:扫描页面,阅读信息框,滚动到部分,单击链接,选择文本,打开图像。非常适合展示Webfuse MCP的功能。
请求: { "session_id": "..." } 答复: SSE流 step_start, step_done, step_error,以及 done 事件。
POST /chat,免费聊天
发送任何消息。代理决定使用哪些MCP工具。
请求: { "session_id": "...", "message": "Find hotels in Amsterdam under 150 euros" } 答复: SSE流 tools (称为哪些工具), text (代理人的回应),以及 done 事件。
错误处理: 通过指数回退最多可检索2次瞬态故障(超时、HTTP错误)。失败时返回结构化错误事件。
GET /health
退货 { "status": "ok" }.
文件
demo-extension/ Webfuse extension (deployed to Space)
sidepanel.html UI, step list, start button
sidepanel.js SSE client, streams agent results
background.js Positions the sidepanel widget
manifest.json Extension manifest
agent/ Python agent server
agent.py FastAPI, /run (guided demo) + /chat (free-form)
.env.example Environment variables template
agent/worker/ Cloudflare Worker (optional CORS proxy)
worker.js Proxies requests to agent server
wrangler.toml Deploys to openai-agent.webfuse.it在本地运行
cd agent
pip install fastapi uvicorn httpx
OPENAI_API_KEY=sk-... WEBFUSE_REST_KEY=rk_... uvicorn agent:app --port 8080然后设置 AGENT_URL 在扩展env中 http://localhost:8080.
引导式演示如何工作
该代理在维基百科的阿姆斯特丹文章中进行了8步之旅:
- 扫描 当前页面(DOM快照 `
`)
- 阅读 信息框(人口数据)
- 滚动 转到架构部分
- 点击 贝吉恩霍夫链路
- 滚动 前往木屋区
- 选择 关于木屋的课文
- 阅读 所选文本
- 打开 木屋形象
每一步都是使用Webfuse MCP工具对OpenAI的Responses API进行的独立调用。快照使用CSS根选择器(.infobox, h1)保持在上下文范围内。
会话MCP工具
| 工具 | 说明 |
|---|---|
navigate | 转到URL |
see_domSnapshot | 读取页面DOM(使用 root 选择器+ webfuseIDs=true) |
see_accessibilityTree | 阅读辅助功能树 |
see_guiSnapshot | 截图 |
see_textSelection | 读取当前选定的文本 |
act_click | 单击元素 |
act_type | 在字段中键入 |
act_keyPress | 按键盘键 |
act_scroll | 滚动页面 |
act_select | 选择下拉选项 |
act_mouseMove | 将鼠标悬停在元素上 |
act_textSelect | 在页面上选择文本 |
wait | 短暂停顿(谨慎使用) |
所有工具都需要 session_id.通过Webfuse ID、CSS选择器或 [x,y] 协调。
限制
| 限制 | 值 |
|---|---|
| 工具调用超时 | 15秒 |
| MCP连接 | 3分钟(自动重新连接) |
| 代理重试 | 2x,采用指数回退 |
链接
- Webfuse 的,AI浏览器驱动层
- 会话MCP服务器文档
- OpenAI响应API
- 博客文章
其他Webfuse集成
Webfuse MCP适用于任何AI框架:
- OpenAI代理SDK -带浏览器控制的Python代理
- 克劳德桌面/光标/VS代码 -零代码MCP配置
- 语言链/语言图 -多页研究代理
- Vercel AI SDK -Next.js浏览助手
- LiveKit语音代理 -语音控制浏览器
- ChatGPT GPT -使用浏览器工具自定义GPT
- WebMCP演示 -任何网站上的语义工具
许可证
麻省理工学院
