Vercel AI SDK+Webfuse MCP
Next.js聊天应用程序，用户可以在其中与控制浏览器的AI对话。
与 Vercel AI SDK, 主控程序，以及 Webfuse 的.
它的作用
Webfuse扩展侧边栏内的聊天界面。用户键入消息。人工智能为他们浏览页面：阅读内容、点击链接、填写表单、截图并报告。所有的对话。
快速开始
npm install
cp .env.example .env # Add your OpenAI + Webfuse keys
npm run dev部署 extension/ 文件夹作为Webfuse扩展名。设置 API_URL env var到您的服务器URL。
运作原理
API路由连接到Webfuse的会话MCP服务器，该服务器自动查找13个浏览器工具。Vercel AI SDK处理工具调用、链接和流式传输。
// app/api/chat/route.ts, the entire backend
const mcpClient = await createMCPClient({
transport: new StreamableHTTPClientTransport(
new URL("https://session-mcp.webfu.se/mcp"),
{ requestInit: { headers: { Authorization: `Bearer ${restKey}` } } }
),
});
const tools = await mcpClient.tools();
const result = streamText({
model: openai("gpt-4o"),
messages,
tools, // 13 browser tools, auto-discovered via MCP
maxSteps: 10, // chain up to 10 tool calls per message
});
return result.toDataStreamResponse();建筑
Webfuse Extension (sidebar) Next.js API Route Webfuse MCP
Chat UI →POST→ /api/chat
User messages createMCPClient() ─────→ session-mcp.webfu.se
AI responses ←stream← streamText() ←tools← 13 browser tools堆栈
- Next.js 15，API路由+流
- Vercel AI SDK 4,
streamText()+createMCPClient()用于MCP工具集成 - @模型上下文协议/sdk，可流式传输HTTP到Webfuse MCP
- Webfuse扩展，浏览器会话中的边栏聊天UI
- 会话MCP服务器，13个浏览器工具（查看、操作、导航、等待）
在一行中交换模型
openai("gpt-4o") // OpenAI
anthropic("claude-sonnet-4-20250514") // Anthropic
google("gemini-2.0-flash") // Google相同的Webfuse工具适用于所有提供商。
链接
其他Webfuse集成
Webfuse MCP适用于任何AI框架：
- OpenAI代理SDK -带浏览器控制的Python代理
- 克劳德桌面/光标/VS代码 -零代码MCP配置
- 语言链/语言图 -多页研究代理
- Vercel AI SDK -Next.js浏览助手
- LiveKit语音代理 -语音控制浏览器
- ChatGPT GPT -使用浏览器工具自定义GPT
- WebMCP演示 -任何网站上的语义工具
许可证
麻省理工学院