用 WorkBuddy 制作 MCP

这是一篇从 0 到 1 的 MCP 制作教程。你会先做一个网页抓取 MCP，再了解什么时候需要浏览器控制 MCP，最后把它们接入 WorkBuddy。

教程版 WorkBuddy MCP Prompt 原样保留

一、为什么要做 MCP

WorkBuddy 本身已经能帮你写文案、整理资料、生成代码。但有些事，光靠对话不够：抓网页正文、读取页面元信息、控制已经登录的浏览器、从动态页面里提取数据。这些都需要一个能被 AI 调用的工具。

MCP 可以理解成一套工具接口。你把一个小工具做成 MCP Server，WorkBuddy 连接后，就能在对话里自动判断什么时候调用它。

只靠普通对话时

AI 只能根据你粘贴的内容回答
网页正文、元信息、链接需要手动复制
动态页面和登录页面基本处理不了
每次操作都靠临时指令，难复用

接入 MCP 以后

AI 可以调用你做好的工具
网页抓取、元信息提取、链接提取都能复用
遇到动态页面，可以走浏览器控制工具
以后只要说人话，WorkBuddy 自动选工具

二、整条流程怎么跑

说清需求 → 生成 MCP → 安装依赖 → 写入配置 → 手动启用 → 实测场景

先把这件事想简单

你不是从零学编程，也不是手写协议。你的任务是把业务需求说清楚：要解决什么问题、做几个工具、怎么测试、最后在哪里启用。具体代码、依赖、测试脚本，让 WorkBuddy 去完成。

三、先做第一个 MCP：web-fetch

从静态网页抓取开始，最容易跑通。

第一个 MCP 不要选太复杂的方向。网页抓取比较适合入门：需求清楚、工具边界明确，也能马上用在内容运营、竞品研究、公众号文章存档里。

先让 WorkBuddy 帮你列出几个 MCP 方向，再选“网页抓取”。选定以后，让它直接生成完整项目：主程序、依赖、README、测试脚本和 WorkBuddy 配置。

直接复制 1：先让 WorkBuddy 推荐方向

【角色】我是一名技术运营，使用 WorkBuddy 作为日常 AI 工作搭档
【目标】制作一个日常高频使用的 MCP Server，扩展 WorkBuddy 的能力边界
【要求】
1. 请列举 5-8 个适合个人制作、日常使用频率高的 MCP 方向
2. 每个方向说明：解决什么问题、核心工具设计、技术难度（★-★★★）、适合人群
3. 优先推荐：无需复杂依赖、可本地运行、即做即用的方向
【输出格式】表格呈现，便于我对比选型

直接复制 2：制作 web-fetch MCP

【选定方向】网页抓取 MCP
【技术栈】语言由你决定，选择生态最成熟、维护成本最低的方案
【工具设计要求】
1. fetch_url —— 抓取网页正文，智能提取（去广告/导航/脚本噪音），支持 markdown 和 text 两种输出
2. fetch_metadata —— 只提取元信息（标题/描述/作者/发布日期/站点名/语言），不返回正文
3. extract_links —— 提取页面所有链接，自动补全绝对地址，支持关键词过滤和数量限制
【工程要求】
- 使用官方 mcp SDK，遵循 MCP 协议规范
- 依赖隔离：创建独立 venv，不污染系统环境
- 编写 MCP 协议测试脚本（initialize → tools/list → tools/call 全链路验证）
- 写入 ~/.workbuddy/mcp.json 配置，做完直接接入 WorkBuddy
【输出】完整的 MCP Server 项目（server.py + requirements.txt + README.md + 测试脚本）

这一节要看什么结果

项目目录里有可运行的 MCP Server。
工具至少包含抓正文、取元信息、提取链接。
依赖要放在独立 venv 里，不污染系统环境。
测试脚本能跑通 MCP 协议链路。

四、接入 WorkBuddy 并启用

配置写好不等于已经可用，最后一步要手动信任。

WorkBuddy 可以把 MCP 配置写进 ~/.workbuddy/mcp.json，但你还需要到连接器管理页里手动信任。很多 MCP “做完了但调不到”，问题都卡在这里。

打开 WorkBuddy，进入连接器管理页。
找到右上角的自定义连接器入口。
在列表里找到刚做好的 MCP，比如 web-fetch。
点击信任，返回对话查看连接状态。

直接复制 3：基础抓取测试

【任务】抓取指定 URL 的正文内容
【URL】https://www.tencent.com/zh-cn/about.html
【输出格式】markdown
【要求】自动过滤导航栏、页脚、脚本等噪音，只保留正文

直接复制 4：公众号文章存档

【场景】内容运营日常需要存档优质公众号文章，建立行业知识库
【任务】抓取以下公众号文章并完整存档
【URL】https://mp.weixin.qq.com/s/XXXX（替换为真实文章链接）
【存档要求】
1. 同时抓取正文（fetch_url）和元信息（fetch_metadata）
2. 元信息块放顶部：标题、作者、发布日期、原文链接、存档时间
3. 正文按逻辑补二级/三级标题，规范 Markdown 排版
4. 保存为 .md 文件，文件名格式：存档-文章标题.md
【输出】可直接归档的规范 Markdown 文件

成功标志

你说“抓取这个链接的正文”，WorkBuddy 能自动调用 fetch_url。如果它只是普通回答，没有调用工具，先回去看连接器有没有启用。

五、进阶：动态页面怎么办

web-fetch 适合公开静态页面，比如文章、新闻、博客。遇到淘宝搜索页、后台数据页、需要登录的会员页，它通常拿不到真实内容。原因很简单：这些数据由浏览器里的 JavaScript 渲染，或者必须依赖你已经登录的会话。

这时不要继续拧 web-fetch。换一条路：让 WorkBuddy 控制真实浏览器。

进阶阅读

先安装 browser-use skill，再封装成 browser-control MCP

browser-use 能连接本机已登录的 Chrome，保留 cookies 和登录态，还能打开页面、执行 JavaScript、截图。你先让 WorkBuddy 安装并检查这个 skill，再把它封装成第二个 MCP。

进阶 Prompt 1：安装 browser-use skill

【场景】需要抓取淘宝商品搜索页的数据（商品名/价格/销量），但 web-fetch 静态抓取只能拿到 SEO 文案
【需求】安装一个浏览器自动化能力，能驱动真实 Chrome（保留登录态）
【要求】
1. 从 WorkBuddy 推荐市场搜索并安装 browser-use skill
2. 安装后做安全审计（检查是否有数据外泄、危险命令）
3. 创建独立 Python venv 安装 browser-use CLI 依赖
4. 验证 CLI 可正常连接本机 Chrome

六、第二个 MCP：browser-control

browser-control 负责动态页面，和 web-fetch 互补。

这个 MCP 不替代 web-fetch。静态文章仍然用 web-fetch，速度快、结构干净；动态页面才交给 browser-control。这样工具边界清楚，WorkBuddy 也更容易自动选择。

进阶 Prompt 2：制作 browser-control MCP

【目标】制作「浏览器控制 MCP」，封装 browser-use CLI 为 MCP 工具，接入 WorkBuddy
【与 web-fetch 的关系】互补：web-fetch 处理静态页（快），browser-control 处理动态页（强）
【工具设计要求】
1. browser_fetch —— 用真实浏览器打开 URL，等 JS 渲染完返回页面文本
   - 自动分段获取（绕过 js() 4KB 返回限制）
   - 保留 Chrome 登录态（连接本机已登录的 Chrome）
   - 抓完自动关闭标签页
2. browser_eval —— 在页面执行 JavaScript 返回结果
   - 适合精确提取结构化数据（商品名/价格/销量）
   - 可指定 URL 或在当前页面执行
3. browser_screenshot —— 对页面截图保存为 PNG
   - 可选全页截图或可视区域
【工程要求】
- 通过 subprocess 调用 browser-use CLI
- 使用官方 mcp SDK，遵循 MCP 协议规范
- 独立 venv 隔离依赖
- 写协议层测试 + 功能测试（initialize → tools/list → tools/call 全链路）

工具	用途	适合场景
`browser_fetch`	用真实浏览器打开 URL，等待 JS 渲染后取文本	动态页面、需要登录态的页面
`browser_eval`	在页面里执行 JavaScript，提取结构化数据	商品卡片、报表、列表页
`browser_screenshot`	保存页面截图	页面留证、结果验收、截图报告

安全边界

浏览器控制会使用你本机的登录状态。只在可信网站和明确任务里使用，不要让它执行来源不明的脚本，也不要把账号隐私数据交给不清楚的页面。

七、实战：抓淘宝商品数据

电商选品是 browser-control 的典型场景。淘宝页面是动态渲染，还经常依赖登录态。这个时候，WorkBuddy 应该判断页面类型，先用浏览器打开页面，再执行 JavaScript 提取商品标题、价格、销量，最后整理成表格。

进阶 Prompt 3：电商选品实战

【场景】电商选品调研，需要采集淘宝搜索页的热销商品数据
【URL】https://uland.taobao.com/sem/tbsearch?keyword=女鞋&q=女鞋&tab=all
【采集字段】产品名称、价格、销量（回头客数量）
【处理要求】
1. 判断页面类型：淘宝是 JS 动态渲染 + 登录态，web-fetch 拿不到 → 用 browser-control
2. 用 browser_fetch 打开页面（连接本机 Chrome 保留登录态）
3. 用 browser_eval 执行 JS，提取商品卡片的结构化数据
4. 销量字段解析：将"回头客10万"转为数字，按销量降序排列
5. 生成 HTML 表格：含排名、产品名称、价格、销量徽章、店铺
【输出】热销商品榜 HTML 表格，按销量降序

这一节不要只看“能不能抓到”

更重要的是看 AI 有没有做对工具选择：静态抓取拿不到，就切到 browser-control；页面打开后，再用 browser_eval 提取结构化数据。工具链跑顺了，以后换关键词、换类目都能复用。

八、完整 Prompt 集合

这一组是原教程里的精简版 Prompt，方便带走复用。下面内容保持原样，不做改写。

完整 Prompt 1

【Prompt 1 · 需求探索】
【角色】我是一名技术运营，使用 WorkBuddy 作为日常 AI 工作搭档
【目标】制作一个日常高频使用的 MCP Server
【要求】列举 5-8 个适合个人制作的 MCP 方向，附难度评级和选型建议
【输出】表格呈现

完整 Prompt 2

【Prompt 2 · 制作 web-fetch MCP】
【选定方向】网页抓取 MCP
【工具设计】fetch_url（抓正文）/ fetch_metadata（元信息）/ extract_links（提取链接）
【工程要求】官方 mcp SDK + 独立 venv + 协议测试 + 写入 mcp.json
【输出】完整 MCP Server 项目

完整 Prompt 3

【Prompt 3 · 公众号存档实战】
【场景】内容运营需存档优质公众号文章，建立行业知识库
【URL】https://mp.weixin.qq.com/s/XXXX
【要求】同时抓正文+元信息，元信息块放顶部，正文规范 Markdown 排版
【输出】存档-文章标题.md

完整 Prompt 4

【Prompt 4 · 装 browser-use】
【场景】需抓取淘宝商品数据，web-fetch 拿不到（JS动态渲染+登录态）
【需求】安装浏览器自动化能力，能驱动真实 Chrome 保留登录态
【要求】从推荐市场安装 + 安全审计 + 独立 venv + 验证连接 Chrome

完整 Prompt 5

【Prompt 5 · 制作 browser-control MCP】
【目标】封装 browser-use CLI 为 MCP，与 web-fetch 互补
【工具设计】browser_fetch（动态抓取）/ browser_eval（执行JS）/ browser_screenshot（截图）
【工程要求】subprocess 调用 CLI + 官方 mcp SDK + 独立 venv + 全链路测试

完整 Prompt 6

【Prompt 6 · 电商选品实战】
【场景】电商选品调研，采集淘宝搜索页热销商品
【URL】淘宝搜索链接
【采集字段】产品名称/价格/销量
【处理】browser_fetch 打开 → browser_eval 提取 → 销量转数字排序 → 生成 HTML 表格

九、发布前检查清单

第一个 MCP 是否先从静态网页抓取开始，而不是一上来做复杂动态页面？
生成项目后，是否已经跑过 MCP 协议测试？
~/.workbuddy/mcp.json 写入后，是否手动进入连接器管理页信任？
web-fetch 和 browser-control 的边界是否讲清楚：静态页用前者，动态页用后者？
浏览器控制是否只用于明确、可信的任务？
完整 Prompt 是否仍然可以复制使用？

最后带走一句话

做 MCP 的重点不是炫技，而是把一个常用动作变成 WorkBuddy 能反复调用的工具。先做小，跑通，再扩展。