AI在Trae中操作网页需通过MCP协议接入Playwright/Puppeteer等工具服务器，新手推荐一键添加；Chrome MCP需手动配置扩展与桥接脚本；启用后选择“Builder with MCP”智能体或自定义勾选工具并下达自然语言指令即可执行。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
让AI在Trae里真正“看到”并操作网页，不是靠它自己猜，而是通过MCP协议接入一个能控制浏览器的工具服务器。没有这层桥梁，AI再聪明也只能纸上谈兵。
从MCP市场一键添加Playwright或Puppeteer
这是最快、最稳妥的入门方式，适合90%的新手和临时测试需求。
第一步：打开Trae右上角齿轮图标→进入“设置”→选择“MCP”选项卡。
第二步：点击“添加MCP Servers”按钮→在搜索框输入“Playwright”或“Puppeteer”。
第三步：在结果列表中找到对应条目，确认描述无误后，点击右侧的“+”按钮安装。
第四步：等待状态栏显示“playwright-mcp: running”或“puppeteer-mcp: ready”，说明服务已启动成功。这一步不能跳过，【若状态一直显示“pending”或“error”，请先检查Node.js版本是否≥18】。
手动配置Chrome MCP（需本地Chrome扩展配合）
如果你需要AI直接读取当前打开的标签页、截图、甚至修改页面样式，Chrome MCP是唯一选择，但它必须搭配浏览器扩展和桥接器才能工作。
方法一：安装Chrome扩展
下载mcp-chrome扩展源码包并解压；打开Chrome地址栏输入chrome://extensions/；开启右上角“开发者模式”；点击“加载已解压的扩展程序”，选中你解压后的文件夹。
方法二：安装并定位桥接脚本
在终端执行：npm install -g mcp-chrome-bridge；安装完成后，运行npm list -g mcp-chrome-bridge，记下输出中的完整路径，例如C:UsersyournameAppDataRoaming
pm
ode_modulesmcp-chrome-bridgedistmcpmcp-server-stdio.js。
方法三：填入Trae手动配置JSON
在Trae设置→MCP→“Add Manually”中粘贴以下内容，注意把C:\Users\yourname\...替换成你刚才查到的真实路径：
{"mcpServers": {"chrome-mcp-stdio": {"command":"node","args": ["C:\Users\yourname\AppData\Roaming\npm\node_modules\mcp-chrome-bridge\dist\mcp\mcp-server-stdio.js"],"env": {},"disabled":false,"autoApprove": [] } } }
启用AI智能体调用浏览器能力
配置完成不代表AI就能自动干活，你得明确告诉它“现在可以用浏览器了”。
打开AI对话面板，点击智能体选择器，从中挑出“Builder with MCP”——这个内置智能体默认加载所有已启用的MCP工具，包括你刚加的浏览器服务。
或者更精准的做法：新建一个自定义智能体，在配置页面的“可用工具”列表里，只勾选“Playwright MCP”或“Chrome MCP”，并给它写一句角色指令：“你是一个网页自动化专家，可直接操作真实浏览器。”
最后，直接输入自然语言指令，例如：“打开知乎首页，搜索‘Trae MCP 教程’，截取前三个结果标题。”AI会立刻调用对应MCP服务执行，无需你写一行代码。
