使用Trae AI助手开发Web页面测试MSYS2 ucrt64 Qt MCP服务非消费类软件开发企业以及院校一般保有很多基于C的代码。这些代码一般用于计算、模拟、仿真等场景并没有直接提供Web页面的接口。使用Trae AI助手我们可以快速实现基于C的代码的Web页面测试。Trae AI助手是一个基于OpenAI的AI助手它可以帮助我们快速实现基于C的代码的Web页面测试。前期使用AI很快实现了MCP协议为后续的Web页面开发提供了基础也发现了Qt竟然非常善于写后端代码的大宝库我们的后端底层是C/Qt实现的MCP服务器。这个服务器有意思的地方在于它既能给AI Agent当后端又能给普通传统Web页面当后端一举两得以前写个测试页面要花不少时间既要写HTML、JS又要调试地图显示还要搞API对接。这次试了试Trae这个AI助手半天时间就OK了。本文的所有代码都可以在https://gitcode.com/colorEagleStdio项目中找到。Qt MCP服务器的编译建议使用MSYS2环境参考项目中的README文档。Web页面可以直接在浏览器中打开使用前提是MCP服务器要先运行起来。文章目录使用Trae AI助手开发Web页面测试MSYS2 ucrt64 Qt MCP服务1. 背景介绍1.1 Qt程序到MCP的优雅转换1.2 一箭双雕同时服务AI Agent和传统Web2. 基于AI的测试页面制作2.1 问题的提出2.2 先让AI理解需求并生成1个例子代码2.3 审核代码并批量复制其他函数的测试页面2.4 实际运行效果3. AI辅助开发的感受4. MSYS2 Qt环境AI时代开发的神兵利器4.1 开箱即用的完整环境4.2 和AI开发无缝衔接4.3 快速迭代AI友好5. 总结1. 背景介绍我们的项目是GeoCalc MCP一个基于模型上下文协议(Model Context Protocol)的地理计算服务, 底层用C/Qt实现提供了一系列地理计算功能。比如计算两点间的方位俯仰天线方向图覆盖地面等高线这些。代码都在mcp/server/mcp_server目录下每个工具函数都有对应的cpp和h文件。$ tree geocalc geocalc ├── doc ├── geocalc.h ├── main.cpp ├── mcp │ ├── server │ │ ├── hgt_query.cpp │ │ ├── hgt_query.h │ │ ├── mcp_server │ │ │ ├── mcp_server.cpp │ │ │ ├── mcp_server.h │ │ │ ├── toolfunc_HPR_Polar_Alpha2LLAs.cpp │ │ │ ├── toolfunc_HPR_Polar_Alpha2LLAs.h │ │ │ ├── toolfunc_HPR_Polar_AlphaBeta2LLA.cpp │ │ │ ├── toolfunc_HPR_Polar_AlphaBeta2LLA.h │ │ │ ├── toolfunc_HPR_Polar_ECEF2AlphaBeta.cpp │ │ │ ├── toolfunc_HPR_Polar_ECEF2AlphaBeta.h │ │ │ ├── toolfunc_HPR_Polar_LLA2AlphaBeta.cpp │ │ │ ├── toolfunc_HPR_Polar_LLA2AlphaBeta.h │ │ │ ├── toolfunc_contour_elevation.cpp │ │ │ ├──... │ │ │ ├── toolfunc_contour_elevation.h │ │ │ ├── toolfunc_ellips_geodesic.cpp │ │ │ ├── toolfunc_ellips_geodesic.h │ │ │ ├── toolfunc_ellips_range.cpp │ │ │ ├── toolfunc_ellips_range.h │ │ │ ├── toolfunc_observe_az_el_range.cpp │ │ │ ├── toolfunc_observe_az_el_range.h │ │ │ ├── toolfunc_observe_dem_judge.cpp │ │ │ └── toolfunc_observe_dem_judge.h │ │ ├── server.cpp │ │ └──... └── web ├── HPR_Polar_Alpha2LLAs.html ├── contour_elevation.html ├── ellips_geodesic.html ├── ellips_range.html ├── observe_az_el_range.html └── observe_vis_judge.html1.1 Qt程序到MCP的优雅转换有意思的是这个项目里的很多地理计算函数其实来自我们以前的桌面Qt程序。以前这些函数是用在GUI界面里的用户在Qt Widgets里输入参数点按钮计算结果显示在界面上。现在把它们变成MCP服务几乎是水到渠成的事情。文章《基于Qt的MCP LLM代理服务开发实战从0到1扩展大语言模型》介绍了初步实现。为什么Qt到MCP转换这么容易主要有几个原因Qt的模块化设计Qt程序一般都分得比较清楚UI是UI业务逻辑是业务逻辑。我们的地理计算核心函数本来就是独立的和界面无关抽出来很方便。Qt的JSON支持MCP协议是基于JSON的而Qt的QJsonDocument、QJsonObject这些类用起来特别顺手。参数解析和结果打包几行代码就搞定了。Qt的HttpServerQt6自带的QHttpServer太好用了几行代码就能搭个HTTP服务器。我们的MCP服务就是用它搞的不用额外依赖什么库。在《改造传统Qt6Widgets程序为多会话MCPServer生产力工具-技巧与实现》中我们介绍了MCP服务器的架构核心是McpServer类它负责初始化服务注册工具函数处理HTTP请求分发到具体的函数每个工具函数比如HPR_Polar_Alpha2LLAs都有两个函数toolfunc_xxx_desc()返回函数描述告诉AI这个函数是干什么的参数是什么toolfunc_xxx_obj()具体实现解析参数调用原来的地理计算函数打包结果这种设计保证加新函数的时候只要写这两个函数然后注册一下就行。原来的核心计算代码一点都不用改1.2 一箭双雕同时服务AI Agent和传统Web有意思的是事实上MCP服务器不只是给AI Agent用的普通的Web页面也能用本文要介绍的测试页面就是直接用JavaScript fetch调用HTTP端点。为什么能做到这点因为MCP协议的架构设计得好协议兼容标准的JSON-RPC over HTTPAI Agent能懂Web前端也能懂端点统一都是/geocalc这个端点POST方法JSON格式无状态设计每次调用都是独立的AI用和人用没区别看一下Web页面代码调用很简单constresponseawaitfetch(MCP_SERVER_URL,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify(requestBody)});这个架构带来的好处太大了写一次到处用核心代码只有一套AI能用Web前端能用以后说不定还能做桌面客户端测试方便用Web页面测试好了AI Agent用起来自然也没问题渐进式迁移以前的Qt桌面程序可以先抽成MCP服务然后慢慢做Web界面不用一下全改。尤其是涉及C并行计算的代码不需要损失性能。2. 基于AI的测试页面制作2.1 问题的提出以前每当实现一个新的工具函数比如HPR_Polar_Alpha2LLAs要测试它可麻烦了得写个小的python测试程序调用这个函数。尤其是因为涉及到绘图所以要写个python脚本用matplotlib绘制结果。得写点输出打印结果。显示的界面要能直观看到效果尤其是涉及到地图的。如果要改参数还得重新编译。最好的方法应该是用JavaScript fetch调用HTTP端点直接在浏览器里测试。用OpenLayers显示地图既方便又直观。这次制作html测试程序准备让Trae直接从头干。Trae是个编程辅助AI能看代码能写代码。2.2 先让AI理解需求并生成1个例子代码首先把已有的示例代码、文档给Trae看告诉它这个程序是干什么的。然后把toolfunc_HPR_Polar_Alpha2LLAs.cpp也给它让它理解这个新的工具函数的功能和输入输出参数。同时还得看看相关的函数比如contour_elevation因为新的页面里也要用到它来画全向覆盖区域。而后告诉 trae 生成一个测试toolfunc_HPR_Polar_Alpha2LLAs的html页面。页面左侧可以配置参数右侧显示地图和JSON的接口。// 看一下HPR Polar Alpha2LLAs的描述QJsonObjecttoolfunc_HPR_Polar_Alpha2LLAs_desc(){returnQJsonObject({{name,HPR_Polar_Alpha2LLAs},{type,function},{endpoint,/geocalc},{method,POST},{description,计算具有一定聚束角度的光源以一定姿态照射地面时的照亮区域...}// ...});}Trae看完参考文件很快就写出了HPR_Polar_Alpha2LLAs.html。代码结构很清晰HTML部分和原来的例子差不多参数输入面板地图显示JSON显示JavaScript部分初始化地图添加标记autoAlign函数自动计算B看A的方位俯仰calculate函数主计算逻辑调用多个MCP工具drawContour和drawHPRPolygon画两种覆盖区域样式部分沿用原来的风格asyncfunctionautoAlign(){constllaA_latparseFloat(document.getElementById(llaA_lat).value);constllaA_lonparseFloat(document.getElementById(llaA_lon).value);// ... 读取其他参数try{showLoading(true);// 调用observe_az_el_range但是参数反着传B看AconstresultawaitcallTool(observe_az_el_range,{llaA_lat:llaB_lat,llaA_lon:llaB_lon,llaA_h:llaB_h,llaB_lat:llaA_lat,llaB_lon:llaA_lon,llaB_h:llaA_h});// 把结果设置到hpr输入框document.getElementById(hpr_h).valueresult.azimuth.toFixed(4);document.getElementById(hpr_p).valueresult.elevation.toFixed(4);document.getElementById(hpr_r).value0;// 自动计算一下calculate();}catch(error){console.error(对准失败:,error);}finally{showLoading(false);}}AI写的代码有几个值得注意的地方样式区分contour_elevation的区域用黄色虚线HPR的用青色实线区分得很清楚JSON显示只显示主函数HPR_Polar_Alpha2LLAs的请求和响应其他调用后台默默做首次加载页面加载时会自动调用autoAlign不用用户手动点2.3 审核代码并批量复制其他函数的测试页面对上述代码进行仔细审核后发现一点问题也没有。此时就要求AI仿照这个例子为每个函数都写一个测试页面。AI对于复制代码没有问题。能够自动认识已有代码的结构和逻辑。2.4 实际运行效果页面写好后打开浏览器一看还真不错这时候你会发现我们写的这个Web页面就是在直接调用那个同时也服务AI Agent的MCP服务器。同一个端点同一套代码人在用AI也在用很有意思用户可以自己调整参数, 改完点计算按钮地图就会更新。3. AI辅助开发的感受这次用Trae开发页面感觉效率提高了不少。说说几点体会AI能很快看懂已有代码的结构和逻辑。不用我再一行行去解释observe_az_el_range.html是怎么回事直接把文件丢给它它就懂了。应该从1个简单的例子开始先让AI理解需求再根据例子生成代码。人工审核后复制逻辑是AI的强项。减少重复劳动写Web页面有很多重复的工作比如HTML结构、OpenLayers的初始化、参数读取这些。AI可以照着1个完善的例子把这些重复的部分写好我只需要关注不一样的地方。探索更多可能和AI对话的过程中有时候它会提出一些我没想到的点。比如这次我没说要画两种覆盖区域的对比但AI自动把两个都画上去了效果还挺好。专注于业务逻辑不用再花时间去想OpenLayers的多边形怎么画这种问题这些AI都能搞定。我只需要想清楚业务流程先干什么后干什么参数怎么传。用AI开发也不是撒手不管还是要注意一些事情给AI足够的上下文: 要把相关的文件都给AI看比如这次除了目标函数还要给它看contour_elevation的代码这样它才能完整理解需求。明确需求: 馁求要说得尽量具体比如JSON只显示主函数的调用其他辅助调用不显示这种细节要讲清楚。检查和调试: AI写的代码也不是完美的还是要自己测试一下。比如这次页面写好后我试了试发现有些边界情况还要再调整但整体框架是对的。迭代改进: 可以让AI多次修改。先出一个版本用一用发现问题再让AI改。这样几次迭代下来效果会越来越好。4. MSYS2 Qt环境AI时代开发的神兵利器说到Qt开发不得不提MSYS2环境。在AI时代MSYS2 Qt这套组合简直太香了为什么这么说呢4.1 开箱即用的完整环境MSYS2里装各种类似Linux的工具太方便了pacman命令可以搜索安装。pacman-Ssqt6看到要装的包就直接pacman -S 包名 就可以装了。而后一股脑全装了什么QtCore、QtGui、QtNetwork、QHttpServer全都有了不用自己编译不用解决依赖问题。装上就能用马上就能开始写代码。4.2 和AI开发无缝衔接AI写代码特别是写跨平台的C/Qt代码MSYS2环境是它最喜欢的之一。为什么环境标准MSYS2是标准的类Unix环境AI学习的很多开源项目都是这种环境工具链统一gcc、cmake、make都是标准配置AI生成的构建命令直接能用路径友好虽然Windows路径有点不一样但MSYS2的路径处理得很好这次写MCP服务器我给Trae看了一下项目结构它很快就理解了生成的代码直接就能在MSYS2里编译。这要是在一些奇怪的环境里说不定还要跟AI纠结半天编译器选项。4.3 快速迭代AI友好开发MCP服务这种东西经常要改代码、编译、测试。MSYS2 Qt的优势就体现出来了编译快gcc配合cmake增量编译很快改一点代码几秒钟就能编译好部署简单编好的exe带上几个dll就能跑不用安装调试方便gdb、Qt Creator都能用有问题能很快定位AI写代码有时候会有点小问题比如边界情况没处理好。这时候如果编译测试很慢那调试周期就太长了。MSYS2让这个循环变得很快改代码→编译→测试→反馈给AI→再改整个流程很流畅。我们手头有很多以前的Qt代码从Qt4到Qt5再到现在的Qt6MSYS2都能很好地支持。把这些老代码拿出来稍微改改就能用在新的MCP服务里。AI看老代码也没问题Qt的API虽然有变化但整体风格是一致的。MSYS2环境里你可以同时装Qt5和Qt6想编译哪个版本就编译哪个版本给AI提供了很大的灵活性。5. 总结这次用Trae AI助手开发Web测试页面体验很不错。原来可能要花大半天的活儿现在30分钟就搞定了。更重要的是能把精力集中在地理计算的业务逻辑上而不是Web前端的细节上。这套架构最大的亮点是什么一套后端两种用法同一个MCP服务器既可以给AI Agent当工具后端又可以给传统Web页面当API后端。这带来的好处太多了资源复用不用写两套后端维护成本减半互相验证Web页面测试通过了AI用起来也放心灵活部署想给人用就给人用想给AI用就给AI用随心所欲Qt MCP服务这种架构底层是C/Qt上层用Web测试结合AI辅助开发确实能大大提高效率。再加MSYS2这套神器简直如虎添翼。以后可以把这种模式推广到更多项目中。本文的所有代码都可以在https://gitcode.com/colorEagleStdio项目中找到。Qt MCP服务器的编译建议使用MSYS2环境参考项目中的README文档。Web页面可以直接在浏览器中打开使用前提是MCP服务器要先运行起来。
