Trae新功能尝鲜：使用Puppeteer MCP插件建立智能体

柠檬豆腐脑
2,925 阅读7分钟

我正在参加Trae「超级体验官」创意实践征文，本文所使用的 Trae 免费下载链接：www.trae.com.cn/?utm_source…

引言

近期Trae迎来了重大更新，支持了Agent和MCP这些重磅功能，还有上下文能力的增强和规则系统的上线。

最开始听到这些功能，对其理解还是稍微模糊的，这些玩意要怎么使用啊，有什么样的效果呢？相信听完我的实践过程，能让你对这些新功能有一个初步清晰的认识。

在这篇文章中，我们就来体验一下 Trae 的这些新功能吧，主要的尝试是利用 Puppeteer MCP 插件建立一个智能体，并且在跟大模型对话时如何更好的利用Puppeteer插件的一些经验分享。

智能体（Agent）

大模型 vs 智能体

先来认识智能体，我理解智能体与大模型的区别就是：大模型只有生成内容的能力，不能跟周围环境互动，相当于一个大脑，但是智能体是在大模型的基础之上，可以和周围环境互动。

内置智能体：Builder和Builder with MCP

Builder：builder的功能，Trae之前就有，可以帮助你从 0 到 1 开发一个完整的项目。Builder 会调用不同的工具，包括分析代码文件的工具、编辑代码文件的工具、运行命令的工具等等。

Builder with MCP：这次更新后新上的智能体。它不但可以使用上面Builder的工具，还能使用MCP，工具，下面我们就为其添加上Puppeteer的MCP插件。

如下图所示，依次点击：智能体-> Builder with MCP -> 添加更多工具 -> 添加Puppeteer。

1.png

为 Builder with MCP 添加好Puppeteer，可以在详情中看到添加的工具，并且还可以看到工具提供了哪些可以调用的方法，如下图。

2.png

这里我将Puppeteer提供的方法列出来。

  • puppeteer_navigate: 在浏览器中打开指定的URL。
  • puppeteer_screenshot: 捕获整个页面或特定元素的截图。
  • puppeteer_click: 点击页面上的指定元素。
  • puppeteer_hover: 在页面上的指定元素上悬停。
  • puppeteer_fill: 在输入字段中填写指定的值。
  • puppeteer_select: 选择下拉菜单中的指定选项。
  • puppeteer_evaluate: 在浏览器控制台中执行指定的JavaScript代码。

使用Builder with MCP

诉求：我希望Trae本地运行起我的项目，并利用Puppeteer帮我访问本地服务的地址。

我们就在聊天框中和智能体对话。

3.png

起初我不得要领，输入的提示词如 “ 打开网址http://localhost:5173/” 。好消息是的确帮我打开了浏览器，但打开的很慢，原因是因为提示词中有网址，智能体会先对网址进行分析，告诉我能不能访问，有一些错误之类的，事实上我只是想要打开网址。

应该明确指令，我调整提示词为：“调用Puppetter 打开首页”。效果果然变好啦。如下是智能体的反馈，可以看到使用了MCP方法Puppeteer/puppeteer_navigate。如下图：

4.png

使用MCP，就是这么简单！到此我们了解了Trae是怎样使用一个MCP插件的了。

自定义智能体

可以想象如果给Builder with MCP添加了很多的插件，它负担有点太重了，要负责很多的功能，我们使用的时候也得想着点要怎么写提示词才能调用到众多插件中的某一个，此时需要一个更加专门的智能体，专门用来调用Puppetter的，那就新建一个智能体，如下图：

5.png

专业智能体的妙用，注意我给的提示词，我将解释我为什么这么写：

// Puppeteer智能体的提示词
你是一个专门用使用Puppeteer的智能体。
1. 当我说打开、跳转、点击等词时，你就认为是我要调用Puppeteer来操作页面。
2. 使用puppeteer时，launchOptions中设置defaultViewport:null，设置executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'。
3. 不要过度思考，只干我让你干的事。

对上述三条提示词约束的解释：

第一条：有了这个专门的智能体，对话时不需要说： “调用Puppetter 打开首页” 。而只需要说 “打开首页” ！因为我们创建自定义智能体设置了背景提示词，其中第一条约束了它要用Puppetter来做事。

第二条：在使用Puppeteer智能体时，如果不加第二条，Puppetter不会打开本地浏览器打而是打开其内置的浏览器，再就是还会让网页没有铺满整个浏览器窗体。如下图：

6.png

当launchOptions中设置defaultViewport:null（网页会铺满浏览器），设置executablePath（会使用本地的浏览器）。

第三条：我发现在使用过程中，除了我要求的事，智能体还会额外做一些截屏等操作，但是加上第三条约束后，它明显更听话了。

到此，我们对智能体Agent和MCP算是有了初步的认知。

Puppetter MCP 中API的使用

到此我们在多说一下如何通过对话使用Puppetter MCP的API，我们可以对智能体说：

“跳转到http://localhost:5173/overview/2” ——> 调用puppeteer_navigate方法跳转的列表页

“打开**http://localhost:5173/** 点击id=#about-link的导航按钮” --> 调用puppeteer_click方法并将css选择器作为参数。以下是智能体调用MCP插件的传参和响应：

7.png

这里我想到，有没有办法，可以让我说“跳转到列表页”，“点击关于我们按钮”这样更加直观的提示词呢？如果我们不对Trae做些额外的配置，智能体做不到，因为智能体并不一定可以根据列表页三个字找到/overview/2这个路由，也不一定通过关于我们四个字找到正确的css选择器，找不到就不能正确传递参数给Puppetter MCP 插件。

利用上下文提升智能体的好用度

好在Trae提供了上下文的功能，我可以写一个文档，然后将文档添加到上下文（这里可以使用新增的#Doc上下文功能，或者直接将文档放到项目中，每次使用#一下这个文件）。请观看我上下文的内容：

# Puppeteer 自动化测试上下文配置

## 路由配置

```json
{
  "routes": {
    "首页": "/",
    "列表页": {
      "path": "/overview/:id",
      "params": {
         "id": "2", // 实际分类ID
        "pageNum": 1,
        "pageSize": 9,，
        "category": "news",
      }
    },
    "详情页": {
      "path": "/detail/:id",
      "params": {
        "id": "123" // 实际测试时替换为动态ID
      }
    }
  }
}

## 元素选择器配置
{
  "selectors": {
    "首页": {
      "搜索框": ".search-bar input",
      "搜索按钮": ".search-bar button[type='submit']", // 或使用具体类名如 ".search-button"
      "轮播图": "#home-carousel",
      "新闻列表": ".news-list",
      "关于我们":"#about-link"
    },
    "列表页": {
      "筛选条件": ".filter-options",
      "分页器": ".pagination"
    },
    "详情页": {
      "标题": "h1.article-title",
      "内容区域": ".article-content"
    }
  }
}
```

可以看到我讲一些关键字的对应关系写好，这样等我再说“跳转到列表页”，“点击关于我们按钮”这样的提示词时，智能体根据上下文就知道了我要跳转的列表页是/overview/2，点击关于我们按钮的css选择器是#about-link。非常棒！

总结

除此之外，我还尝试了将约束Puppetter MCP 使用规则放到了项目规则中，这也是Trae的新功能，也是可行的，我理解这些本质都是为大模型提供了上下文，让大模型召回到正确的信息，组合成最准确的提示词给到大模型。

Trae 通过智能体（Agent）与 MCP 插件，大大增加了自己的能力边界，随着我们的不断探索，想象可以越来越发挥它的强大功能。本篇文章只是初尝Trae更新后的新功能，也只试了一个MCP插件，还有很多的智能体和MCP插件让我们去探索，相信可以发现更多新玩法！

avatar
文章
阅读
粉丝