我正在参加Trae「超级体验官」创意实践征文，本文所使用的 Trae 免费下载链接：https://www.trae.com.cn/?utm_source=juejin&utm_medium=juejin_trae&utm_campaign=422content
最近随着Mcp的爆火，我也开始研究在这个小玩意，但是由于当时好像只能在cursor上面配置MCP，本身由于不喜欢使用cursor，加上不会使用，就没有继续研究这个MCP了，但是呢，最近trae出了MCP这个功能，那我就不得不去尝试下了
能让大模型调用各种工具和资源，仿佛变得无所不能，但一顿体验下来，让很多人望而却步的还是其配置。
但是呢？我们现在trae里面就能快速进行trae Mcp的部署操作
在最新版本的trae就支持了MCP功能了，内置 MCP 市场，可快速添加第三方 MCP Servers，灵活调用 MCP 工具以拓展执行能力。
接下来，我们就展示下，如何在trae中使用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替换到原代码中的部分
配置好了之后并且链接成功了就是这个样子的
它是一个基于 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 是一项专用服务，能够将 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可不只是在微服务通信（MCP）领域表现卓越，在开发小型工具方面也颇具潜力。前阵子，我一直忙着处理 Excel 表格的格式化工作，但由于我没系统学习过 WPS，对一些操作命令不太熟悉。那时我就琢磨，能不能借助 Trae 开发一个本地工具，专门用来处理 Excel 文件的数据格式化呢？主要想实现以下操作：
删除重复行： 删除数据表中完全相同的行，确保数据唯一性。
删除空行： 清除所有值均为空的行，避免无效数据干扰分析。
去除空格： 移除文本字段中的首尾空格，防止隐藏字符影响计算。
统一大小写： 可选择转换为小写、大写或首字母大写，以确保数据格式一致。
数值格式化： 统一数值的小数位数（默认保留2位），保证数据规范。
日期格式化： 提供多种日期格式选项，避免因格式混乱导致的数据处理错误。
删除特殊字符： 去除文本中的标点符号、特殊字符，适用于纯文本数据处理。
填充空值： 支持多种空值填充方式（平均值、中位数、众数等），提高数据完整性。
数据分析
数据可视化操作
目前就想到了这些，后期的话等我们工具的具体框架做好了可以进行进一步的更新操作
实现上述的操作整个流程就是
在使用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 datetime
class 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
如果觉得博客文章对您有帮助，异或土豪有钱任性，可以通过以下扫码向我捐助。也可以动动手指，帮我分享和传播。您的肯定，是我不懈努力的动力！感谢各位亲~
