手把手带你用Dify+Chrome MCP搭建能操作网页的AI助手

文章介绍了如何通过Dify和Chrome MCP的结合，搭建一个能操作网页的AI助手。文章详细讲解了部署步骤：准备环境、部署Dify、安装Chrome MCP服务器和配置连接。这个AI助手可以完成自动网页搜索、填写表单、数据抓取等任务。工作原理是Dify负责与LLM对话理解指令，Chrome MCP负责控制浏览器执行操作，LLM作为大脑规划流程。整个过程无需编写复杂代码，只需用自然语言告诉AI想要

安卓老猴子

232人浏览 · 2025-09-26 15:22:29

安卓老猴子 · 2025-09-26 15:22:29 发布

文章介绍了如何通过Dify和Chrome MCP的结合，搭建一个能操作网页的AI助手。文章详细讲解了部署步骤：准备环境、部署Dify、安装Chrome MCP服务器和配置连接。这个AI助手可以完成自动网页搜索、填写表单、数据抓取等任务。工作原理是Dify负责与LLM对话理解指令，Chrome MCP负责控制浏览器执行操作，LLM作为大脑规划流程。整个过程无需编写复杂代码，只需用自然语言告诉AI想要做什么，即可实现网页自动化。

你是否想过让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:9999
Chrome browser launched and connected successfully

第三步：在Dify中配置Chrome MCP（1分钟）

现在回到Dify管理界面，进行关键配置：

进入设置 > 模型供应商 > MCP服务器
点击添加MCP服务器
填写配置信息：

服务器名称: Chrome-Automation
服务器URL: http://localhost:9999

点击验证并保存，看到绿色成功提示

效果验证：让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（大语言模型）：作为大脑，理解你的意图并规划操作流程

常见问题排查

Chrome无法启动：确保系统已安装Chrome浏览器，或者指定Chrome路径：CHROME_PATH=/path/to/chrome server-chrome
连接失败：检查Dify和Chrome MCP服务器是否在同一个网络环境下，防火墙是否允许9999端口通信
操作超时：复杂网页加载需要时间，可以增加超时设置：server-chrome --timeout=60000
权限问题：在MacOS/Linux上可能需要权限：sudo npm install -g @modelcontextprotocol/server-chrome