AI导哈

浏览器自动化聊天应用

一个基于Next.js和Vercel AI SDK的聊天应用，AI可以控制浏览器进行页面操作，如点击链接、填写表单、截图等。

  • by hummer-netizen
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 hummer-netizen/extension-vercel-ai-mcp

使用说明

Vercel AI SDK+Webfuse MCP

Next.js聊天应用程序，AI控制您的浏览器。与 Vercel AI SDK 和 Webfuse会话MCP.

现场演示： 网站名称：webfu.se/+vercel-ai-mcp/

它的作用

Webfuse扩展侧边栏中的聊天界面。键入一条消息，AI会读取页面，点击链接，填写表单，截图并报告。所有对话，所有流媒体，都在您的浏览器中。

建筑

flowchart LR
    A[User in Browser] -->|chat message| B[Webfuse Extension<br/>Sidebar Chat UI]
    B -->|POST /api/chat| C[Next.js API Route<br/>Vercel AI SDK]
    C -->|createMCPClient| D[Webfuse Session MCP<br/>13 auto-discovered tools]
    C -->|streamText| E[OpenAI<br/>gpt-4o]
    E -->|tool calls| C
    D -->|click, type,<br/>navigate, read| F[Target Website]
    C -->|SSE stream| B

API路由连接到Webfuse的会话MCP服务器，自动查找所有13个浏览器工具，并使用Vercel AI SDK streamText() 每条消息最多可链接10个工具调用。

先决条件

快速开始

npm install
cp .env.example .env           # Add your keys
npm run dev                    # Starts on port 3000

部署 extension/ 将文件夹作为共享空间上的Webfuse扩展。设置 API_URL env var到您的服务器URL。

配置

变量 描述 从哪里获取
OPENAI_API_KEY LLM API密钥 platform.openai.com
WEBFUSE_REST_KEY 空间REST API密钥(rk_...) Webfuse仪表板>空间>API键
API_URL Next.js服务器URL（扩展名env） 您的服务器URL或Cloudflare隧道

在一行中交换模型：

openai("gpt-4o")              // OpenAI (default)
anthropic("claude-sonnet-4-20250514")  // Anthropic
google("gemini-2.0-flash")    // Google

运作原理

整个后端是一个API路由(app/api/chat/route.ts):

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();  // 13 browser tools, auto-discovered
const result = streamText({ model: openai("gpt-4o"), messages, tools, maxSteps: 10 });

堆栈： Next.js 15、Vercel AI SDK 4、， @modelcontextprotocol/sdk，Webfuse扩展侧边栏。

文件夹：

app/                   Next.js app (API route + layout)
extension/             Webfuse extension (sidebar chat UI)
worker/                Cloudflare Worker (optional proxy)

链接

其他Webfuse集成

许可证

麻省理工学院

相关 MCP