快速掌握Dify+Chrome MCP：打造网页操控AI助手

你是否曾经希望AI不仅能回答你的问题，还能直接操作浏览器，帮你自动填写表单、抓取数据，甚至点击页面按钮？现在，借助 Dify 和 Chrome MCP 的配合，只需短短几分钟，你就能搭建出一个真正可以“动手”操作网页的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管理界面，进行关键配置：

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

2. 点击添加MCP服务器

3. 填写配置信息：

   • 服务器名称: Chrome-Automation