参考
本文内容
我承认 Trae比我强，我的工资可以用来买Trae的Pro啊，尽管也有免费的版本啊！！！！！！
1.确定Trae版本
2.完成基于Trae的提示词和配置信息
3.完成junjin-MCP配置
4.基于提示词完成web开发，并调用juejin-MCP发布应用
Trae版本-0.64
本文是基于6月17日更新后的版本，关于详细的Trae安装教程，我放在了后面（安装与配置Trae编辑器-3月24日安装），最为重要的一点就是如何导入插件，这点特别实用。 以下是更新后的截图
使用 trae 命令快速唤起 Trae。
python
Trae使用 trae trae+mcp 命令在 Trae 中打开一个项目。
python
trae trae+mcp 项目介绍-我用Trae 做了个逃离迷宫的游戏助手/算法编程助手"
完成基于Trae的提示词和配置信息
🧠 项目描述
我计划 用Trae 做个 "逃离迷宫的游戏助手/算法编程助手"，主要功能为生成 一个 前端页面，可以模拟迷宫的路径问题。功能1，生成指定行和列的迷宫，功能2，生成障碍点和可通过点，功能3，可以选择广搜和深搜算法和自定义交互路线等三种功能，其中广搜和深搜算法可以指定的路径的方向顺序，自定义交互路线可以允许用户单击迷宫进行探索，但探索也需要一步步探索，并且满足要求，功能4，依据选择的算法和路径方向，在迷宫中走出对应的路线，功能5，生成这个迷宫问题对应的C++/python/js代码，功能6，在迷宫探索过程中，显示执行对应的代码位置，并动态显示代码中变量的值，功能7，。 提供对应的提示词。
生成的提示词如下
迷宫游戏助手/算法编程助手开发提示词 以下是一个详细的提示词，可用于指导Trae IDE生成您所需的迷宫游戏助手应用：
我需要开发一个迷宫游戏助手/算法编程助手，具有以下功能和要求：
python
## 项目概述
创建一个交互式前端应用，能够可视化迷宫生成、路径查找算法，并生成相应代码，同时展示算法执行过程。
## 核心功能
1. **迷宫生成**：允许用户指定行数和列数，生成随机或自定义迷宫
2. **障碍设置**：支持自动生成障碍点和可通过点，也允许用户手动编辑
3. **算法选择**：实现广度优先搜索(BFS)和深度优先搜索(DFS)两种路径查找算法
4. **自定义路径**：实现用户在迷宫上单击方格寻找路径的方法，如果到答案终点，提示成功弹窗。
5. **路径方向控制**：允许用户指定路径搜索的方向优先级(上、下、左、右的顺序)
6. **路径可视化**：动态展示算法探索迷宫并找到出口的过程
7. **代码生成**：根据当前迷宫和算法设置，生成对应的C++/Python/JavaScript代码
8. **代码执行可视化**：在算法执行过程中，同步高亮显示对应代码位置，并动态展示变量值变化
## 技术要求
- 使用HTML/CSS/JavaScript构建前端界面
- 采用现代UI设计，响应式布局
- 使用Canvas或SVG绘制迷宫和路径动画
- 代码生成需提供语法高亮显示
- 实现算法执行步骤与代码位置的映射关系
- 可以完成Algorithm Visualizer
## 界面设计
1. **控制面板**：包含迷宫尺寸设置、算法选择、方向顺序配置
2. **迷宫显示区**：可视化展示迷宫、起点、终点、障碍和路径
3. **代码展示区**：显示生成的代码，并高亮当前执行位置
4. **变量监控区**：实时显示算法执行过程中的关键变量值
5. **操作按钮**：开始/暂停/重置模拟，生成代码，下载代码等
## 交互要求
- 迷宫单元格可点击编辑(设置/移除障碍)
- 算法执行过程支持单步调试
- 代码生成后可复制或下载
- 支持调整动画速度
## 代码生成要求
- 代码需包含详细注释
- 遵循各语言的编码规范
- 代码可直接运行，包含完整的迷宫数据结构和算法实现
- 提供多种语言版本的切换配置MCP-我用Trae 做了个逃离迷宫的游戏助手/算法编程助手"
配置掘金的MCP
在 Trae 或 IDE 的 MCP 配置中，添加以下 JSON 配置：
JSON
{
"mcpServers": {
"juejin-deploy-mcp": {
"command": "npx",
"args": [
"--registry=https://registry.npmjs.org",
"-y",
"@juejin-team/mcp-server@latest"
],
"env": {
"JUEJIN_TOKEN": ""
}
}
}
}
截图如下
配置后如下
获取juijin-MCP的token
获取tokens的地址如下： aicoding.juejin.cn/tokens
单击获取Token如下
把这一步的token，填充在"JUEJIN_TOKEN": ""中
基于提示词完成web开发，并调用juejin-MCP发布应用
选择Build With MCP 并完成项目生成
输入前文的提示词
开始推理
生成了多个文件，可以先都接受，然后再修改
在代码生成的地方出现了很多次的尝试
完成的截图如下
测试项目
在工程中，运行index.html
在浏览器中打开，效果如下：
生成迷宫的时候，无法生成，发现控制台有如下问题
修改代码全自动版
添加一个MCP，用来完成自动测试
用playwright自动测试本项目，并解决问题
这个步骤有问题，还是自己修改下
修改代码半自动AK47
把错误发给给Trae的build
python
运行index.html提示错误"""index.html:299
GET http://127.0.0.1:5500/app.js net::ERR_ABORTED 404 (Not Found)了解此错误AI
codeGenerator.js:150 Uncaught SyntaxError: Unexpected identifier '$' (at codeGenerator.js:150:22)了解此错误AI
index.html:1 Refused to execute script from 'http://127.0.0.1:5500/app.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.""" 并且没有生成迷宫地图，迷宫地图应该一个一个的格子，用不同颜色标记能否通过生成如下
测试后，还是没有生成迷宫，
再次把错误发给trae
javascript
提示错误如下：codeGenerator.js:150 Uncaught SyntaxError: Unexpected identifier '$' (at codeGenerator.js:150:22) 如果这个问题不好修改，可以先删除与代码相关的功能其实做项目还是一步步来比较好，先规划整体的功能，再一个一个完善，下次注意
修改后，还是无法生成迷宫 再次修改，这次删除代码生成 与代码执行可视化功能
python
还是有错误 """codeGenerator.js:150 Uncaught SyntaxError: Unexpected identifier '$' (at codeGenerator.js:150:22)""" 现在不再修改这个问题了，从项目中删除与**代码生成**与**代码执行可视化**功能，目的是使得项目能正常运行起来输出如下
不再报错了，但依然无法生成迷宫
继续修改
生成迷宫 无法生成迷宫 输出如下
从头来
还是没有反应，添加css样式可以显示迷宫的每个格子，现在从头开始检查，功能1 可以实现迷宫随机生成的功能，功能2再完成广度和深度优先搜索的功能，如果探索成功，输出对应的路径， 功能3可以针对探索过程实现可视化展示 功能4，可以实现手动探索功能，并探索成果，输出路径和完成弹窗
输出如下
再次运行，基本可以了效果如下
再次优化
javascript
解决如下问题，
visualization.js:263 Uncaught TypeError: this.updateVariables is not a function
at Visualization.stepAnimation (visualization.js:263:14)
at visualization.js:242:18
同时生成的迷宫要包含一些障碍点，障碍点不允许通过，障碍点的数量占据20%思考过程如下
输出如下：
再次运行，效果如下
在线演示的链接如下
5.61 cNJ:/ [email protected] 11/17 我用trae做的DFS和BFS的迷宫模拟问题 我用trae做的DFS和BFS的迷宫模拟问题# 少儿编程 # 机器人教育 # 我用trae v.douyin.com/PUB_F1b5tMk... 复制此链接，打开Dou音搜索，直接观看视频！
部署项目到juijin-MCP
把该项目通过juijin-MCP部署起来吧！
输出如下
部署后的链接如下 aicoding.juejin.cn/pens/751788...