我正在参加 Trae「超级体验官」创意实践征文，本文所使用的 Trae 免费下载链接：www.trae.com.cn/?utm_source…

引言

在数据驱动的时代，有效地获取、处理和展示数据是关键。本文将介绍如何使用 Trae 新出的 MCP 服务连接本地 MySQL 数据库，提取主机信息表数据，并通过 QuickChart 进行图表展示，最后结合大语言模型生成最终的 HTML 页面。

配置mcp服务

首先我们需要先配置mcp服务，点击chat框右上角的设置再点击MCP

市场中有很多现成的mcp服务，但是这次我们需要手动添加第三方的 点击原始配置（JSON） 将以下第三方的mcp服务通过json方式添加进去，并修改成自己的配置（mysql-mcp-server 依赖本地docker）

json
 代码解读
复制代码
{
    "mcpServers": {
        "quickchart-server": {
            "command": "npx",
            "args": [
                "-y",
                "@gongrzhe/quickchart-mcp-server"
            ]
        },
        "mysql-mcp-server": {
            "command": "npx",
            "args": [
                "-y",
                "@smithery/cli@latest",
                "run",
                "mysql-mcp-server",
                "--config",
                "{\"mysqlHost\":\"host.docker.internal\",\"mysqlPort\":\"3306\",\"mysqlUser\":\"root\",\"mysqlDatabase\":\"zt_crawl\",\"mysqlPassword\":\"?\"}"
            ]
        },
    }
}

保存并返回MCP列表页面，如果是可使用说明已经配置成功

数据表

以本地数据库中的host_info表为例，其表结构及数据如下：

实践环节

首先我们在模型需要执行前，先选择Builder with MCP，这样我们可以利用刚配置好的MCP服务

如图所示我问了用图表的方式帮我分析host_info表的内容，最好图表输出的url能展示出来，模型会自动完成一系列操作：它会先深入了解表结构，然后精心选择合适的可视化方案，接着保存生成图表的 URL ，并最终将图表展示出来。

他会自动调用mysql mcp服务查询数据

第一张图

第二张图

第三张图

最终生成一个html文件并给出运行方法

如图所示，这就是结合Trae新功能mcp服务的对话运行产出物

总结

通过本次实践，我们充分展示了 Trae MCP 服务的拓展性。借助 MCP 服务，我们能够轻松连接 MySQL 数据库，获取所需数据；结合 QuickChart，实现数据的直观可视化；再利用大语言模型生成 HTML 页面，完成数据处理成果的整合与展示。这一流程不仅高效，而且操作简便，极大地提升了数据分析的效率和质量。无论是在日常的数据统计，还是复杂的项目数据处理场景中，Trae MCP 服务都具有广阔的应用前景，期待大家在使用过程中不断挖掘其潜力，创造更多价值。