站点图标 高效码农

手把手教你用MCP+GPT-OSS打造网页浏览AI Agent（零基础入门）

高效码农

手把手教你用 MCP + gpt-oss 打造会浏览网页的 AI Agent

适合刚入门、也适合想深挖的开发者

如果你只想快速跑通 Demo，请直接跳到“动手实验”章节。
如果你想彻底搞懂“MCP 是什么”“为什么需要它”“还能怎么用”，请耐心看完“背景篇”和“原理篇”。

背景篇：为什么需要 MCP？

1. AI Agent 的常见痛点

  • 工具太多：浏览器、数据库、绘图、文件系统……每个都要单独写集成。
  • 协议不统一：今天用 OpenAI 的 Function Calling，明天换别的模型，又要重写。
  • 调试困难：Agent 一跑就黑盒，想定位问题只能看日志猜。

2. MCP 能做什么？

MCP（Model-Context-Protocol）把“工具”抽象成统一接口，让任何兼容 MCP 的 LLM 都能直接调用。
一句话总结：写一次工具，所有模型都能用。

原理篇：MCP 的 3 个核心概念

概念 角色 类比
MCP Server 提供具体能力 浏览器插件、数据库驱动
MCP Client 调度工具、传参、回传结果 浏览器本身
Agent 用自然语言指挥 Client 去调用 Server 用户

对开发者来说，只要把“工具”封装成 MCP Server，剩下的推理、调度、重试都由 Client 完成，省心。

动手实验 1：本地浏览器 Agent

目标：让 AI 帮你打开网页、搜索、截图，就像雇了一个实习生。

步骤 0：准备工作

工具 说明
Node ≥ 18 运行 Playwright MCP Server
Python 3.9+ 或 Node 运行 Tiny Agents
Hugging Face Token 用于身份验证

获取 Hugging Face Token

  1. 登录 https://huggingface.co/settings/tokens
  2. 创建 Write 权限的 Token
  3. 在终端保存： 
    huggingface-cli login

步骤 1：定义 Agent（只需 1 个 JSON）

在项目根目录新建文件夹 browser-agent，放入 agent.json：

{
  "model": "openai/gpt-oss-120b",
  "provider": "fireworks-ai",
  "servers": [
    {
      "type": "stdio",
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  ]
}

字段解释

  • model: 使用 OpenAI 开源的 120B 参数模型（成本友好）。
  • provider: Fireworks AI 提供托管推理。
  • servers: 告诉 Client 要用 Playwright 提供的浏览器能力。

可选：再放一个 PROMPT.md，把系统提示写进去（文件已随仓库给出），让 Agent 更谨慎、不瞎猜。

步骤 2：运行 Agent

Python 路线

pip install -U "huggingface_hub[mcp]>=0.32.0"
tiny-agents run ./browser-agent

Node 路线

npx @huggingface/tiny-agents run ./browser-agent

首次运行会自动下载 Playwright 浏览器内核，耐心等待。

对话示例

你：

请打开 huggingface.co，找出本周下载量最高的 10 个模型，并截图保存。

Agent 会：

  1. 启动浏览器
  2. 打开排行榜
  3. 截图保存到本地
  4. 把列表发回给你
CLI 启动截图

动手实验 2：拥抱 Hugging Face 全站能力

目标：让 Agent 不仅能浏览，还能直接调用 Hugging Face Spaces 里的 AI 模型（如文生图、文生视频）。

步骤 1：在 Hugging Face 添加 Spaces

  1. 打开 https://hf.co/mcp
  2. 点击 “Add” 把想要的 Spaces 加入列表，例如：
    • evalstate/FLUX.1-Krea-dev – 高质量文生图
    • evalstate/ltx-video-distilled – 文生视频
  3. 记下你的 User Access Token（同上）。

步骤 2：再写 1 个 JSON

新建文件夹 hf-mcp-server，放入：

{
  "model": "openai/gpt-oss-120b",
  "provider": "fireworks-ai",
  "inputs": [
    {
      "type": "promptString",
      "id": "hf-token",
      "description": "Your Hugging Face Token",
      "password": true
    }
  ],
  "servers": [
    {
      "type": "http",
      "url": "https://huggingface.co/mcp",
      "headers": {
        "Authorization": "Bearer ${input:hf-token}"
      }
    }
  ]
}

字段说明

  • inputs: 运行时提示你输入 Token，避免明文写进文件。
  • servers: 指向官方 MCP 网关，它会转发到你在步骤 1 添加的 Spaces。

步骤 3：运行

tiny-agents run ./hf-mcp-server

现在你可以说：

用 FLUX.1 画一张“宇航员在月球上吃拉面”的图，分辨率 1024×1024。

Agent 会：

  1. 调用 FLUX.1 Space
  2. 等你确认参数
  3. 把生成图 URL 发回
视频演示

FAQ：你可能想问的问题

Q1. MCP 和 Function Calling 有什么区别？

Function Calling 是 OpenAI 的私有格式；MCP 是开源协议，任何模型、任何语言都能实现。

Q2. 本地部署需要 GPU 吗？

不需要。推理由 Fireworks AI 云端完成，本地只跑轻量 Client。

Q3. 如果我想加自己的工具怎么办？

用任意语言写一个 MCP Server（官方提供模板），在 agent.json 的 servers 里新增一条即可。

Q4. Token 会泄露吗？

不会。Token 只存在内存，且 password: true 会让终端隐藏输入。

进阶路线图

阶段 任务 收获
1 小时 跑通本文 Demo 对 MCP 有体感
1 天 给自家 API 封装 MCP Server 让 LLM 直接调用内部系统
1 周 多 Agent 协作 浏览器 Agent + 绘图 Agent + 数据库 Agent 分工合作

结语

MCP 把“让 AI 用工具”这件事做成了乐高：

  • 官方和社区不断提供新积木（MCP Server）。
  • 你只需要搭好底座（Agent.json），就能拼出各种应用。

读完本文，你已经拥有两块关键积木：浏览器、Hugging Face 全站。下一步，不妨把你最熟悉的那套内部系统也封装成 MCP Server，让 AI 真正成为你的同事。

退出移动版