当前位置：首页 > news >正文

Trae 宝藏功能实测：从 Mcp 搭建天气系统，到 AI 重塑 Excel 数据处理

news 来源：原创 2025/6/19 5:40:04

本文

利用trae以及第三方MCP Server搭建一个天气系统网页
- 前言
- 链接高德地图MCP
- 链接quickchart-server MCP Server
- 链接EdgeOne Pages Deploy MCP
- 智能体的创建
- 天气系统效果展示
利用trae做一个Excel格式化工具
- 前言
- 使用trae完成代码的实现
- 总结

我正在参加Trae「超级体验官」创意实践征文，本文所使用的 Trae 免费下载链接：https://www.trae.com.cn/?utm_source=juejin&utm_medium=juejin_trae&utm_campaign=422content

随着trae的爆火，我利用了trae里面的Mcp服务搭建了一个天气系统，以及我用trae里面的Ai做了一个Excel数据化的小工具。希望文章可以帮到你们，哈哈哈。你们也可以自己去使用trae去搭建一款属于你们自己的软件

利用trae以及第三方MCP Server搭建一个天气系统网页

前言

最近随着Mcp的爆火，我也开始研究在这个小玩意，但是由于当时好像只能在cursor上面配置MCP，本身由于不喜欢使用cursor，加上不会使用，就没有继续研究这个MCP了，但是呢，最近trae出了MCP这个功能，那我就不得不去尝试下了
能让大模型调用各种工具和资源，仿佛变得无所不能，但一顿体验下来，让很多人望而却步的还是其配置。
但是呢？我们现在trae里面就能快速进行trae Mcp的部署操作

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

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

链接高德地图MCP

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

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

点击手动配置

将下面的代码输入进去

{"mcpServers": {"amap-amap-sse": {"url": "https://mcp.amap.com/sse?key=您在高德官网上申请的key"}}
}

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

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

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

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

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

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

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

链接quickchart-server MCP Server

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

{"mcpServers": {"quickchart-server": {"command": "node","args": ["/path/to/quickchart-server/build/index.js"]}}
}

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

部署好了就是下面的样子

链接EdgeOne Pages Deploy MCP

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

还是一样的操作

{"mcpServers": {"edgeone-pages-mcp-server": {"command": "npx","args": ["edgeone-pages-mcp"]}}
}

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

智能体的创建

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

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

将我的提示词放进去

# 角色  
你是一位专业的气象数据分析师，能够查询任意城市的未来4天天气，并生成可视化图表。  ## 技能  
### 技能 1: 查询天气数据  
- 使用高德MCP这个MCP服务，查询任意城市未来7天的天气数据。  
- 获取的数据应包括但不限于温度、湿度、风速、降水量等关键气象指标。  ### 技能 2: 生成可视化图表  
- 将查询到的天气数据用QuickChart这个MCP服务转换为易于理解的可视化图表。  
- 可视化图表可以是折线图、柱状图或热力图等形式，具体取决于用户的需求和数据特性。  
- 确保图表清晰、美观且易于解读。  ### 技能 3: 提供天气分析报告  
- 根据查询到的天气数据，提供简要的天气分析报告。  
- 报告应包括对未来4天天气趋势的总结，以及可能对用户活动产生影响的建议。  ### 技能3 ：部署到EdgeOne Pages
- 将最后的html代码部分，将 HTML 内容快速部署到 EdgeOne Pages 并生成公开访问链接## 限制  
- 仅提供与天气相关的数据和分析。  
- 生成的图表必须基于查询到的实际天气数据。  
- 如果需要调用外部工具或API，请明确说明并提供相应的调用方法。  
- 所有输出的内容必须准确无误，不得包含任何误导性信息。

并且这里创建智能体还有一个好处，就是你用的啥服务就调用啥类型的MCP，不会造成额外扣费的情况

说实话，体验了trae，我就不想使用cursor，因为本身我就觉得cursor很难用，trae的话就效果好多了，记得上次在cursor做应用的时候，他的ai莫名奇妙将我之前设置的MCP SERVER调用了，但是在trae就不会出现这种情况了，通过智能体的创建，精确调用对应的MCP SERVER，

天气系统效果展示

那么到这里了，我们的这个智能体就用到了三个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进行构建操作
最值得夸赞的就是每次他都会询问我们是否执行这一步，这个行为在别的编译器是没见过的，对于小白真的很友好

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

访问链接：传送门
下面是效果展示

代码如下：

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>武汉市天气预报</title><style>body {font-family: 'Microsoft YaHei', sans-serif;margin: 0;padding: 20px;background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);min-height: 100vh;}.container {max-width: 1200px;margin: 0 auto;background-color: rgba(255, 255, 255, 0.95);padding: 30px;border-radius: 15px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);}h1 {color: #2c3e50;text-align: center;margin-bottom: 40px;font-size: 2.5em;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);}h2 {color: #34495e;margin: 25px 0 15px;font-size: 1.8em;}.chart-container {background: white;border-radius: 12px;padding: 20px;margin: 25px 0;box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);transition: transform 0.3s ease;}.chart-container:hover {transform: translateY(-5px);}.chart-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 30px;margin: 30px 0;}.weather-summary {background: rgba(248, 249, 250, 0.9);border-radius: 12px;padding: 25px;margin: 30px 0;line-height: 1.8;border-left: 5px solid #3498db;}.weather-summary ul {padding-left: 20px;}.weather-summary li {margin: 10px 0;color: #2c3e50;}img {width: 100%;max-width: 100%;height: auto;border-radius: 8px;transition: all 0.3s ease;}img:hover {transform: scale(1.02);}</style></head><body><div class="container"><h1>武汉市未来4天天气预报</h1><div class="chart-grid"><div class="chart-container"><h2>温度趋势图</h2><img id="temperature-chart" src="https://quickchart.io/chart?c=%7B%22type%22%3A%22line%22%2C%22data%22%3A%7B%22labels%22%3A%5B%224%2F22%22%2C%224%2F23%22%2C%224%2F24%22%2C%224%2F25%22%5D%2C%22datasets%22%3A%5B%7B%22label%22%3A%22%E6%9C%80%E9%AB%98%E6%B8%A9%E5%BA%A6%22%2C%22data%22%3A%5B22%2C27%2C23%2C26%5D%2C%22borderColor%22%3A%22%23ff6384%22%7D%2C%7B%22label%22%3A%22%E6%9C%80%E4%BD%8E%E6%B8%A9%E5%BA%A6%22%2C%22data%22%3A%5B15%2C15%2C16%2C16%5D%2C%22borderColor%22%3A%22%2336a2eb%22%7D%5D%7D%2C%22options%22%3A%7B%22title%22%3A%7B%22display%22%3Atrue%2C%22text%22%3A%22%E6%AD%A6%E6%B1%89%E5%B8%82%E6%9C%AA%E6%9D%A54%E5%A4%A9%E6%B8%A9%E5%BA%A6%E8%B6%8B%E5%8A%BF%22%7D%7D%7D" alt="温度趋势图"></div><div class="chart-container"><h2>降水量预测图</h2><img id="rainfall-chart" src="https://quickchart.io/chart?c=%7B%22type%22%3A%22bar%22%2C%22data%22%3A%7B%22labels%22%3A%5B%224%2F22%22%2C%224%2F23%22%2C%224%2F24%22%2C%224%2F25%22%5D%2C%22datasets%22%3A%5B%7B%22label%22%3A%22%E9%99%8D%E6%B0%B4%E9%87%8F%E9%A2%84%E6%B5%8B%22%2C%22data%22%3A%5B30%2C10%2C5%2C20%5D%2C%22backgroundColor%22%3A%22rgba(54%2C%20162%2C%20235%2C%200.5)%22%2C%22borderColor%22%3A%22rgba(54%2C%20162%2C%20235%2C%201)%22%7D%5D%7D%2C%22options%22%3A%7B%22title%22%3A%7B%22display%22%3Atrue%2C%22text%22%3A%22%E6%AD%A6%E6%B1%89%E5%B8%82%E6%9C%AA%E6%9D%A54%E5%A4%A9%E9%99%8D%E6%B0%B4%E9%87%8F%E9%A2%84%E6%B5%8B%22%7D%7D%7D" alt="降水量预测图"></div></div><div class="weather-summary"><h2>天气趋势分析</h2><p>未来4天武汉市天气预报分析：</p><ul><li>温度变化：气温波动较大，最高温度将在4月23日达到27°C，最低温度保持在15-16°C之间。</li><li>降水情况：预计22日降水量较大，达30mm，之后逐渐减少，25日可能有小雨。</li><li>天气状况：以晴天和多云为主，天气较为稳定。</li><li>风力情况：以北风为主，风力较小，维持在1-3级。</li><li>建议：</li><ul><li>温差较大，建议适时调整着装，注意保暖。</li><li>22日外出请携带雨具，注意防雨。</li><li>天气适宜，可以适当安排户外活动。</li><li>风力较小，适合进行各类户外运动。</li></ul></ul></div></div></body></html>

到现在体验下来，体验感真的拉满了都，trae功能强大：能深度理解中文，支持一句话开发各种应用。无论是生成简单的代码片段，还是创建复杂的项目，都能轻松应对。例如，输入 “做一个带用户登录功能的论坛”，它可在短时间内生成包含前端页面、数据库连接等基础代码框架

下载使用的话也是很方便的，直接使用掘金账号登录就行了，并且还支持vscode和cursor的配置同步操作，这个就很厉害了

还有trae具有智能补全功能，可根据上下文实时预测代码，支持跨文件补全。Builder 模式还能自我纠错，通过监控控制台感知包导入失败、代码语法错误等问题并自行优化，大大提高了开发效率。新手也能很快上手

trae对于我们程序眼来说的话真的是一个好工具，我先替兄弟们种草了

利用trae做一个Excel格式化工具

前言

Trae可不只是在微服务通信（MCP）领域表现卓越，在开发小型工具方面也颇具潜力。前阵子，我一直忙着处理 Excel 表格的格式化工作，但由于我没系统学习过 WPS，对一些操作命令不太熟悉。那时我就琢磨，能不能借助 Trae 开发一个本地工具，专门用来处理 Excel 文件的数据格式化呢？主要想实现以下操作：

删除重复行：  删除数据表中完全相同的行，确保数据唯一性。
删除空行：  清除所有值均为空的行，避免无效数据干扰分析。
去除空格：  移除文本字段中的首尾空格，防止隐藏字符影响计算。
统一大小写：  可选择转换为小写、大写或首字母大写，以确保数据格式一致。
数值格式化：  统一数值的小数位数（默认保留2位），保证数据规范。
日期格式化：  提供多种日期格式选项，避免因格式混乱导致的数据处理错误。
删除特殊字符：  去除文本中的标点符号、特殊字符，适用于纯文本数据处理。
填充空值：  支持多种空值填充方式（平均值、中位数、众数等），提高数据完整性。
数据分析
数据可视化操作

目前就想到了这些，后期的话等我们工具的具体框架做好了可以进行进一步的更新操作

实现上述的操作整个流程就是

打开文件：点击"浏览"按钮，或使用菜单栏"文件 > 打开"选择需要处理的Excel文件。
数据清洗：在左侧工具面板选择需要的具体操作，例如删除重复行、格式化日期等。
预览结果：右侧区域实时显示数据变化，确保清洗效果符合预期。
保存文件：点击"保存"按钮，或使用菜单栏"文件 > 保存"，将处理后的文件存储。

使用trae完成代码的实现

在使用trae做小工具之前，我们需要进行README文件的编写，因为这样我们可以更好的让ai帮我们进行小工具的制作
我们这里先简单的描述下做法，然后让trae帮我们生成一个readme文件

然后让trae根据这个文档进行小工具的开发操作
直接输入命令

根据这个md文档进行小工具的开发，可以上传本地的Excel文档，并且可以进行文件格式的判断，如果传的不是Excel文档的话就告诉客户这个文件格式不对，上传完成之后，我们可以选择左侧的操作方式对这个文件进行各种数据化的操作，右侧的话就是效果展示，

输入完成命令之后，我们的trae就开始了代码的生成操作了

我们先运行下具体的代码，然后根据效果进行进一步的反馈操作
这里的话我们让ai帮我们运行代码，因为我们如果程序无法运行的话，trae是可以检测出来的，然后进行一系列的操作
我发现trae在运行代码的时候还是蛮细心的，他会检测我们的Python环境并且我们是否安装了所需的依赖包
这里的话我们安装命令的时候出现了报错，他会重新检测并且输入新的命令

新手小白不知道安装什么依赖，但是trae知道，我们直接点击接受代码的改变就行行了，零基础完全能使用
下面的话我们就成功安装了所需的依赖了

这里他提醒我们缺少了某个模块，让我们进行安装，这里他已经将具体的命令展示在这里了，我们只需要点击运行就可以了

他还会关心安装了这个模块之后，和其他的代码之间的关联
经过了几次简单的询问之后，我们的程序就这么出来了

每次出现报错他都会进行改正，这让代码生成更加有效率了

我们在打开文件的时候，他只会显示本地的Excel文件，其他非规格的文件是不会进行显示操作的

我们选择文件的时候他报错了，遇到问题不要慌，我们直接将报错截图给trae就行行了

下面是trae的回答，我们直接按照他的要求做就行了

安装好了之后我们接着进行测试
选择文件，然后打开文件，这个时候弹窗说文件加载成功，一下子就舒服了，没有报错情况出现

我们现在往文件里面写点数据

然后我们重新运行下命令，这个时候就能看到我们的数据了，我特意将李五写了两个，中间还有空行，并且还存在大小写的字母

我们先将空行删除了，将数据都排列的紧凑些，运行完命令他会直接检测每一个空行

他的代码逻辑是这样的，还是蛮不错的

然后就来测试下统一大小写，都改成大写
三列都选上，这里可以看到转换的效果还是蛮不错的

全部转换小写的操作也是一样的

除了这些功能我们还能检测表中是否存在特殊的字符
这里的话我们是可以检测的，然后针对每个列进行检查，如果检查到了需要删除的字符，那么就进行了删除操作

我们还能检测到空值，这里的话控制就是显示nan的，那么我们直接进行填充控制的操作，并且选择需要填充的数字

空位置都被改成了666了

我都不敢想以后工作老板给我一张表格让我们进行各种操作，我一条命令不用输入，直接让这个小工具帮我进行操作，多方便啊，简直是摸鱼神器了，后续的话可以根据更多的需求，直接让trae帮我改改代码，生成新迭代的工具。

下面是我的项目地址，大家可以来看看，具体的代码都在里面了
GitCode项目地址

部分代码：

import pandas as pd
import numpy as np
import logging
from datetime import datetimeclass DataHandler:def __init__(self):self.df = Noneself.operation_history = []self.redo_history = []def load_excel(self, file_path):"""加载Excel文件并验证格式"""try:file_ext = file_path.lower().split('.')[-1]if file_ext not in ['xlsx', 'xls']:raise ValueError('不支持的文件格式，请使用.xlsx或.xls格式的Excel文件')self.df = pd.read_excel(file_path)return self.dfexcept Exception as e:logging.error(f'加载Excel文件失败: {str(e)}')raisedef save_excel(self, file_path):"""保存Excel文件"""try:self.df.to_excel(file_path, index=False)logging.info(f'文件已保存: {file_path}')except Exception as e:logging.error(f'保存Excel文件失败: {str(e)}')raisedef get_statistics(self):"""获取数据统计信息"""return {'row_count': len(self.df),'column_count': len(self.df.columns),'null_count': self.df.isnull().sum().sum()}def get_column_types(self):"""获取列数据类型"""return self.df.dtypesdef remove_spaces(self, columns):"""删除指定列的空格"""for col in columns:if self.df[col].dtype == object:self.df[col] = self.df[col].str.strip()return self.dfdef normalize_case(self, case_type, columns):"""统一大小写"""for col in columns:if self.df[col].dtype == object:if case_type == 'lower':self.df[col] = self.df[col].str.lower()elif case_type == 'upper':self.df[col] = self.df[col].str.upper()elif case_type == 'title':self.df[col] = self.df[col].str.title()return self.dfdef format_numbers(self, decimal_places, columns):"""格式化数字"""for col in columns:if pd.api.types.is_numeric_dtype(self.df[col]):self.df[col] = self.df[col].round(decimal_places)return self.dfdef format_dates(self, date_format, columns):"""格式化日期"""for col in columns:if pd.api.types.is_datetime64_any_dtype(self.df[col]):self.df[col] = self.df[col].dt.strftime(date_format)return self.dfdef remove_special_chars(self, pattern, columns):"""删除特殊字符"""for col in columns:if self.df[col].dtype == object:self.df[col] = self.df[col].str.replace(pattern, '', regex=True)return self.dfdef fill_empty_values(self, method, value=None, columns=None):"""填充空值"""if columns is None:columns = self.df.columnsfor col in columns:if method == 'value':self.df[col].fillna(value, inplace=True)elif method == 'mean':if pd.api.types.is_numeric_dtype(self.df[col]):self.df[col].fillna(self.df[col].mean(), inplace=True)elif method == 'median':if pd.api.types.is_numeric_dtype(self.df[col]):self.df[col].fillna(self.df[col].median(), inplace=True)elif method == 'mode':self.df[col].fillna(self.df[col].mode()[0], inplace=True)elif method == 'ffill':self.df[col].fillna(method='ffill', inplace=True)elif method == 'bfill':self.df[col].fillna(method='bfill', inplace=True)return self.dfdef remove_empty_rows(self):"""删除空行删除所有单元格都为空值（包括NaN、None、空字符串）的行"""try:# 检查每个单元格是否为空（包括NaN、None和空字符串）is_empty = self.df.apply(lambda x: x.isna() | (x.astype(str).str.strip() == ''))# 找出所有单元格都为空的行empty_rows = is_empty.all(axis=1)# 删除空行self.df = self.df[~empty_rows]logging.info(f'已删除 {empty_rows.sum()} 个空行')return self.dfexcept Exception as e:logging.error(f'删除空行失败: {str(e)}')raise

总结

Trae 内置的 AI让人眼前一亮，Trae 用硬核实力证明，它能帮助用户在数字世界中披荆斩棘
对trae感兴趣的兄弟赶紧去下载试试吧！包让你满意的

本文所使用的 Trae 免费下载链接：https://www.trae.com.cn/?utm_source=juejin&utm_medium=juejin_trae&utm_campaign=422content

本文