1.前言
MCP Server（模型上下文协议服务器）是一种基于模型上下文协议（Model Context Protocol，简称MCP）构建的轻量级服务程序，旨在实现大型语言模型（LLM）与外部资源之间的高效、安全连接。MCP协议由Anthropic公司于2024年11月开源，其核心目标是解决AI应用中数据分散、接口不统一等问题，为开发者提供标准化的接口，使AI模型能够灵活访问本地资源和远程服务，从而提升AI助手的响应质量和工作效率。
目前MCP-Server从2025年3月-2025年6月爆发以来发展势头非常猛。我们可以看下面的图
之前也给大家介绍过关于mcp-server的制作。 《mcp-server案例分享-手搓一个MCP-server，手把手教你从本地开发到云部署全流程实战》和《mcp-server案例分享-用豆包大模型 1.6 手搓文生图视频 MCP-server》感兴趣小伙伴可以看之前的文章。
今天给大家使用字节trae开发工具5分钟搞定一个AI Agent（智能体），感受一下MCP Server以及智能体的强大。下面给大家看一下实际的效果。
那么这样的AI Agent（智能体）是如何制作的呢？话不多说下面手把手教会大家如何制作这个智能体。
2.智能体制作
首先我们需要安装下载一个叫做trae的开发工具，这个开发工具可以在www.trae.com.cn 下载。目前trae支持海外版和国内版本。我这里下载的是海外版。
下载之后点击安装即可。这里就不做详细展开了。（建议大家把trae 升级到最新版本，目前最新版本已经支持自定义gemini模型，后面给大家介绍）
打开这个trae开发工具，我们可以看到我的上市公司财务报表分析的智能体
那么这个智能体有哪些部分组成的呢？
目前这个智能体由textin-ocr 、juejin-deploy-mcp 2个MCP-Server 和一个提示词组成。 主要的功能就是通过上市公司的财务报告文件。比亚迪2025年第一季度财务报告.pdf 通过合合信息 textin-ocr 这个MCP-Server 提取PDF里面的信息，然后在通过大模型根据PDF 内容生成HTML，最后在调用了juejin-deploy-mcp将这个HTML 页面部署到公网提供用户的访问，这样我们就看到文章前面看到的上市公司财务报告HTML 页面了。
接下来我们分别介绍如何制作。
textin-ocr
这个合合信息textin-ocr MCP-Server 从哪获取呢？我们可以从魔搭社区找到。 我们在魔搭社区MCP广场搜索到这个工具
打开这个工具可以看到这个工具的目前自带3个功能 recognition_text、doc_to_markdown、general_information_extration
使用这个工具需要到合合官方网站注册一下。地址www.textin.com（TextIn是一款专注于复杂文档解析的垂直AI工具。它可以识别文档或图片中的文字信息，将文档解析为大模型阅读友好的格式（例如Markdown和Json），并按常见的阅读顺序进行还原，赋能下游各类大语言模型任务，可以赋能如知识库搭建、文档审核，文档翻译等广泛的应用场景。）
点击注册可以获取免费体验额度。
我们需要获取这个MCP-Server 的配置
json
{
"mcpServers": {
"textin-ocr": {
"command": "npx",
"args": [
"-y",
"@intsig/server-textin"
],
"env": {
"APP_ID": "<YOUR_APP_ID>",
"APP_SECRET": "<YOUR_APP_SECRET>",
"MCP_SERVER_REQUEST_TIMEOUT": "600000"
},
"timeout": 600
}
}
}上面有APP_ID 和APP_SECRET 这个是如何获取的呢？登录合合管理平台，点击账号和开发者信息
上面的2个值就对应的APP_ID 和APP_SECRET。
我们把上面的MCP-Server 对应的json值补充APP_ID 和APP_SECRET，添加到trae mcp配置中。
填入后点击确定按钮。
出现绿色打钩 说明我们的trae安装这个MCP-Server成功。
juejin-deploy-mcp
这个掘金的deploy-mcp 主要功能是实现html、CSS等静态页面实现发布。我们可以在aicoding.juejin.cn/post/750646... 地址获取这个发布详细信息
MCP-Server 的配置
perl
{
"mcpServers": {
"juejin-deploy-mcp": {
"command": "npx",
"args": [
"--registry=https://registry.npmjs.org",
"-y",
"@juejin-team/mcp-server@latest"
],
"env": {
"JUEJIN_TOKEN": ""
}
}
}
}这里也需要有一个TOKEN.我们可以点击aicoding.juejin.cn/tokens 地址获取
点击获取token
上面的token保存好，然后补充上面的mcp-server 配置.添加到trae MCP-Server配置
点击缺点按钮完成 MCP-Server配置
这样我们完成上上面智能体需要的2个MCP-Server配置了。
智能体制作
接下来我们创建一个智能体。
我们填写智能体名称"上市公司财务报表分析"
填写下面的提示词
json
# 角色：上市公司财报数据HTML页面生成专家
## 简介：
- 作者：周辉
- 版本：3.0
- 语言：中文
- 描述：专业的财报数据分析师和HTML动态网页设计专家，擅长创建符合现代设计趋势和技术要求的财报展示页面。
## 背景：
你是一位资深的财务分析师和网页设计专家，专门将上市公司财报数据转化为视觉吸引力强的HTML动态网页。你熟悉各种现代web技术和设计趋势，尤其擅长Bemto Grid布局和GSAP动效。
## 目标：
生成一个完整的、可直接使用的HTML页面，用于展示上市公司财报数据，该页面应符合所有技术和设计要求。
## 技术要求：
1. 使用Bemto Grid布局系统
2. 集成GSAP动效和Framer Motion
3. 基于HTML5和TailwindCSS开发
4. 响应式设计和大小字体对比应用
## 设计规范：
1. 根据公司特性选择适当的背景颜色和主题色调
2. 应用超大字体和视觉元素突出重点，创造视觉对比
3. 中英文混排，大字体为主，英文小字点题
4. 使用简洁的矩形元素进行数据可视化
5. 高亮色透明效果用于边框，避免不同高亮色互相覆盖
6. 所有数据图表采用脚注样式，保持主题一致性
7. 避免使用emoji作为主要图标
## 输出格式：
请直接提供完整的HTML代码，包含所有必要的CSS和JavaScript，确保代码可以直接复制使用并正常运行。代码应包含：
1. 完整的HTML结构
2. 内联或外部引用的CSS（包括TailwindCSS）
3. 必要的JavaScript（包括GSAP和Framer Motion）
4. CDN引用和其他必要的资源链接
## 初始化：
作为上市公司财报数据HTML页面生成专家，我已准备好为您创建一个完整的HTML页面。请提供您想要分析的上市公司及其最新财报的关键信息，我将直接为您生成可用的HTML代码。在工具中我们勾选上面安装配置好的mcp-server
点保存按钮就完成了智能体。
3.智能体使用
模型设置
我们在trae 右下角输入框中 选择我们刚才创建的智能体（上市公司财务报表分析）
接下来我们选择需要的模型。默认的海外版本trae 支持 如下几个模型
大家根据自己的需要选择合适的模型。目前trae 海外版已经开始收费了。免费的模型快速通道用完了就需要排队。如果大家不想排队也不想充值，大家也可以使用自定义的模型。 好消息的是最近的trae 升级支持google gemini自定义模型了。大家可以使用自己免费的google gemini模型。 我这里有一份最新整理的 Google gemini模型列表清单，大家根据根据清单上选择免费模型。
google 最新模型列表
| 模型名称 | 模型类型 | 是否免费 | TPM | RPM | |
|---|---|---|---|---|---|
| gemini-2.5-flash-preview-05-20 | 音频、图片、视频和文本 | 是 | 250000 | 500 | |
| gemini-2.5-flash-preview-04-17 | 频、图片、视频和文本 | 是 | 250000 | 500 | |
| gemini-2.5-pro-preview-03-25 | 音频、图片、视频和文本 | 否 | 250000 | 150 | |
| gemini-2.5-pro-preview-05-06 | 音频、图片、视频和文本 | 否 | 250000 | 150 | |
| gemini-2.0-flash | 音频、图片、视频和文本 | 是 | 1,000,000 | 2000 | |
| gemini-2.0-flash-lite | 音频、图片、视频和文本 | 是 | 1,000,000 | 4000 | |
| gemini-1.5-flash | 音频、图片、视频和文本 | 是 | 1,000,000 | 2000 | |
| gemini-1.5-flash-8b | 音频、图片、视频和文本 | 是 | 1,000,000 | 4000 | |
| gemini-1.5-pro | 音频、图片、视频和文本 | 是 | 32000 | 1000 | |
| gemini-embedding-exp | 文本 | 是 | |||
| imagen-3.0-generate-002 | 文本-图片（文生图） | 否 | |||
| veo-2.0-generate-001 | 文字、图片（文生视频） | 否 | |||
| gemini-2.0-flash-live-001 | 音频、视频和文本 | 是 | |||
| gemini-2.0-flash-exp-image-generation | 文字-图片 | 是 | |||
| gemini-2.5-flash-preview-04-17 | 音频、图片、视频和文本 | 是 | 250000 | 1000 | |
| gemini-embedding-exp-03-07 | 嵌入 |
我这里使用gemini-2.5-flash-preview-05-20免费模型。如何添加这模型呢？
点击添加模型
服务商 选择gemini 模型大家根据需要选择模型，api密钥 这里填写我们在aistudio.google.com/ 申请获取的api key
上面我们就可以使用我们自己的模型了。 使用自己的模型我们就不需要排队了。 不过这块我们注意一下目前自定义的模型使用的时候 需要注意自己的网络，需要一些魔法才可以，这里就不做详细展开了。
模型设置完成后我们就可以体验测试这个智能体了。
验证测试
我们在左边代码区域选择一份比亚迪2025年第一季度财务报告.pdf，关于财务文件从哪里获取，大家可以通过gu.qq.com/sz002594/gp... 来获取（我这里以比亚迪公司为案例）
下载的报告是PDF格式的，下载后保存本地电脑即可。
我们的问题
css
比亚迪2025年第一季度财务报告.pdf 请基于财务报告分析结果信息 生成对应的HTML 页面，然后调用juejin-deploy-mcp部署并发布
接下来智能体会调用多个MCP
最后生成我们要的报告，并发布到稀土掘金提供的免费的静态页面服务中
点击链接打开
就生成了一份比较好看的基于上市公司财务报告的HTML页面了。不过目前这个页面比较依赖模型，如果模型能力弱生成的效果可能不太好。
4.总结
今天主要带大家了解并实现了使用字节 trae 开发工具制作上市公司财报数据 HTML 页面生成智能体的全流程。借助 MCP Server（模型上下文协议服务器），我们解决了 AI 应用中数据分散、接口不统一等问题，为 AI 模型与外部资源搭建了高效、安全的连接。
我们详细介绍了如何安装 trae 开发工具，获取并配置 textin - ocr 和 juejin - deploy - mcp 这两个 MCP - Server，以及如何创建包含特定提示词的智能体。同时，还说明了在 trae 中进行模型设置的方法，包括选择默认模型和添加自定义的 Google gemini 模型，以满足不同的使用需求。
通过本文的方案，开发者可以轻松搭建自己的上市公司财报数据 HTML 页面生成智能体，为数据分析和展示添加强大的 AI 能力。感兴趣的小伙伴可以按照本文步骤去尝试制作自己的智能体。今天的分享就到这里结束了，我们下一篇文章见。