写点什么

快速搞定 Dify+Chrome MCP:打造能操作网页的 AI 助手

作者:测试人
  • 2025-09-16
    北京
  • 本文字数:1442 字

    阅读完需:约 5 分钟

你是否想过让 AI 不仅能回答问题,还能直接操作浏览器帮你做事?比如自动填写网页表单、抓取特定数据、或者点击按钮?现在,通过 Dify 和 Chrome MCP 的结合,你可以在 3 分钟内搭建一个能真正"动手"操作网页的 AI 助手。

本文将手把手教你如何在本地部署 Dify 并配置 Chrome MCP 服务器,打造你的私人网页自动化助手。

准备工作:确保你的环境就绪

在开始前,请确保你的系统已安装:

  • Docker 和 Docker Compose(用于快速部署 Dify)

  • Node.js 18+(用于运行 Chrome MCP 服务器)

  • Git(用于克隆项目仓库)

第一步:快速部署 Dify(仅需 1 分钟)

Dify 是一个强大的 LLM 应用开发平台,我们通过 Docker 快速部署:

# 创建项目目录mkdir dify-chrome-mcp && cd dify-chrome-mcp
# 下载Docker部署配置curl -o docker-compose.yml https://raw.githubusercontent.com/langgenius/dify/main/docker/docker-compose.yml
# 启动Dify服务docker-compose up -d
复制代码

等待 1 分钟左右,访问 http://localhost:80 就能看到 Dify 管理界面。首次使用需要创建账号并完成初始化设置。

第二步:安装 Chrome MCP 服务器(1 分钟)

打开新的终端窗口,安装并启动 Chrome MCP 服务器:

# 安装Chrome MCP服务器npm install -g @modelcontextprotocol/server-chrome
# 启动Chrome MCP服务(会自动打开Chrome浏览器)server-chrome
复制代码

服务启动后,你会看到类似下面的输出,表示 MCP 服务器正在 9999 端口监听:

Server running on http://localhost:9999Chrome browser launched and connected successfully
复制代码

第三步:在 Dify 中配置 Chrome MCP(1 分钟)

现在回到 Dify 管理界面,进行关键配置:

  1. 进入设置 > 模型供应商 > MCP 服务器

  2. 点击添加 MCP 服务器

  3. 填写配置信息:

  • 服务器名称: Chrome-Automation

  • 服务器 URL: http://localhost:9999

4. 点击验证并保存,看到绿色成功提示

效果验证:让 AI 帮你操作网页

配置完成后,你就可以在 Dify 的 Playground 中测试你的网页自动化 AI 助手了。

试试这些实用场景:

场景 1:自动网页搜索

请打开百度首页,在搜索框中输入"最新AI技术发展",点击搜索按钮,然后告诉我第一页的搜索结果标题。
复制代码

场景 2:自动填写表单

请打开https://example.com/contact页面,在姓名栏填写"张三",邮箱栏填写"zhangsan@email.com",在留言区填写"咨询产品信息",然后点击提交按钮。
复制代码

场景 3:数据抓取与分析

请打开https://news.example.com/technology页面,抓取所有新闻标题和发布时间,然后分析今天最热门的技术话题是什么。
复制代码

工作原理:为什么这很厉害?

这个组合的厉害之处在于分工明确:

  • Dify:负责与 LLM 对话,理解你的自然语言指令,并将其分解成具体的浏览器操作步骤

  • Chrome MCP 服务器:负责实际控制 Chrome 浏览器,执行具体的网页操作命令

  • LLM 大语言模型:作为大脑,理解你的意图并规划操作流程

常见问题排查

  1. Chrome 无法启动:确保系统已安装 Chrome 浏览器,或者指定 Chrome 路径:CHROME_PATH=/path/to/chrome server-chrome

  2. 连接失败:检查 Dify 和 Chrome MCP 服务器是否在同一个网络环境下,防火墙是否允许 9999 端口通信

  3. 操作超时:复杂网页加载需要时间,可以增加超时设置:server-chrome --timeout=60000

  4. 权限问题:在 MacOS/Linux 上可能需要权限:sudo npm install -g @modelcontextprotocol/server-chrome

进阶使用技巧

掌握了基础用法后,你还可以尝试这些高级功能:

  • 多页面管理:同时控制多个浏览器标签页,完成更复杂的任务

  • 用户身份保存:让 AI 记住登录状态,下次直接操作无需重新登录

  • 定时任务:结合 Dify 的工作流功能,设置定时自动化任务

  • 异常处理:教会 AI 识别操作失败的情况并自动尝试替代方案

用户头像

测试人

关注

专注于软件测试开发 2022-08-29 加入

霍格沃兹测试开发学社,测试人社区:https://ceshiren.com/t/topic/22284

评论

发布
暂无评论
快速搞定Dify+Chrome MCP:打造能操作网页的AI助手_测试人_InfoQ写作社区