Trae技术栈实战：基于Mcp构建智能天气监测系统全解析

本文链接：https://blog.csdn.net/weixin_46938490/article/details/148064831

在数字化转型的浪潮中，Trae 作为全栈开发者的瑞士军刀，正在重新定义开发效率的边界。本文将带您亲历两个颠覆性场景：通过 Mcp 模块快速搭建实时天气系统，以及运用 AI 引擎实现 Excel 的自然语言交互。这些实测不仅展示了 Trae 的技术深度，更揭示了未来开发的无限可能。

在最新版本的trae就支持了MCP功能了，内置 MCP 市场，可快速添加第三方 MCP Servers，灵活调用 MCP 工具以拓展执行能力。

接下来，我们就展示下，如何在trae中使用mcp进行天气系统网站的搭建操作。
下面是整个天气系统的布局以及最终效果展示。

链接高德地图MCP

我们第一次在使用的时候是需要进行MCP服务的添加的

我们这里需要使用到高德的MCP Servers
我们这里的市场是没有的，所以我们进行手动添加配置

点击手动配置

将下面的代码输入进去

这里的我们需要去申请一个自己的API KEYS了
点击进入到高德平台
进行注册并且登录操作
在高德平台右上角进行应用的创建

创建好了系统之后我们进行添加Key的操作

这里的话我们就选择了Web服务了

然后点击提交就能看到我们的API Keys了

为了对 Key 的安全有效管理，请妥善保管你的 Key。

然后获取到了API之后，我们将这个API替换到原代码中的部分

配置好了之后并且链接成功了就是这个样子的

链接quickchart-server MCP Server

它是一个基于 TypeScript 的服务器，集成了 quickchart.io 基于 URL 的图表生成服务。通过 MCP Server，用户可以通过提供数据和样式参数，使用 Chart.js 配置创建各种类型的图表，服务器会将这些配置转换为图表 URL 或可下载的图像。
我们的思路就是将天气反馈，让这个做一个图表
我们还是一样的步骤，将下面的代码放到创建MCP 里面

这款MCP Servers支持的图表类型还是比较多的

部署好了就是下面的样子

链接EdgeOne Pages Deploy MCP

EdgeOne Pages Deploy MCP 是一项专用服务，能够将 HTML 内容快速部署到 EdgeOne Pages 并生成公开访问链接。这使您能够立即预览和分享 AI 生成的网页内容。
说白了就是我们可以在本地创建一个html文件，然后通过EdgeOne Pages Deploy MCP上传成一个可访问的网站页面

还是一样的操作

部署好了就是下面的这个样子

智能体的创建

这里我们可以看到有一个提示：MCP Servers需要添加到智能体中才能使用

那么我们就创建一个智能体就行了
点击创建

将我的提示词放进去

天气系统效果展示

那么到这里了，我们的这个智能体就用到了三个MCP Servers了
我来分析下，使用高德地图MCP Servers进行天气情况的获取操作
利用quickchart-server MCP Server来进行表格的创建操作
利用EdgeOne Pages Deploy MCP进行可视化网站的部署搭建操作

那么到这里我们就开始下面的部署操作了
我们直接在trae的builder模式这里进行对话，

“利用高德MCP帮我获取北京最近7天的天气，利用quickchart-server MCP Server帮我进行图标的构建，利用EdgeOne Pages Deploy MCP帮我进行网站的部署操作

代码格式为html”

然后他会逐步进行代码的构建并且利用我们的MCP SERVER进行构建操作
最值得夸赞的就是每次他都会询问我们是否执行这一步，这个行为在别的编译器是没见过的，对于小白真的很友好

并且在他的回答中，就将访问的链接给我们了。