Trae 宝藏功能实测：从 Mcp 搭建天气系统，到 AI 重塑 Excel 数据处理_quickchart-server
本文
- 利用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 pdimport numpy as npimport loggingfrom datetime import datetimeclass DataHandler: def __init__(self): self.df = None self.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.df except Exception as e: logging.error(f\'加载Excel文件失败: {str(e)}\') raise def 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)}\') raise def 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.dtypes def remove_spaces(self, columns): \"\"\"删除指定列的空格\"\"\" for col in columns: if self.df[col].dtype == object: self.df[col] = self.df[col].str.strip() return self.df def 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.df def 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.df def 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.df def 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.df def fill_empty_values(self, method, value=None, columns=None): \"\"\"填充空值\"\"\" if columns is None: columns = self.df.columns for 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.df def 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.df except 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
