从今年上半年开始，随着AI大模型能力的不断提升，打量的AI应用开始如雨后春笋般出现，不管是Cursor， Manus等等，它们基于AI agent，MCP servers的能力快速迭代，也大大提升了我们的开发效率。但是费用太高却让大多数人望而却步。对于小白，或是对于初学者，究竟要怎么尝到AI开发的甜头。今天我们聊聊如何使用平替版本的AI IDE，免费使用大模型。最终实现一句话生成一个完整的游戏（提示词已给出在文末）。
1、环境准备
- IDE： vscode
- IDE 插件： vscode插件市场搜索cline，直接下载即可。（cline暂不支持jetbrain，jetbrain的话可以使用continue，但是体验下来个人觉得不如vscode+cline）
- Deepseek：DeepSeek 开放平台申请 api key。新用户注册会送10元的api额度，足够我们目前的这个教程使用了。
- 如果你已经知道什么是AI agent与MCP了，就直接跳到第4小节的内容。
2、什么是AI Agent
在此之前还是解答一下许多人最常见的一个困惑，什么是AI agent？
回答这个问题之前我们还是要回到我们传统的大语言模型说起，也就是我们所熟知的chatgpt， deepseek，混元，豆包，千文等等各个公司推出的大模型对话应用。早期大模型的核心能力也就是我们问什么，它回答什么，能快速地从训练的模型中找到我们想要的正确答案，比如文案，建议，代码片段等等。
但是，这样还不够，这样的大模型并不会有着实际的执行动作，随着大模型日渐成熟，我们更期望地是大模型能够真正的替我们干活，而不是一个光说不做的假把式。比如，我问deepseek:“给我写一段代码”，然后期望它能够把代码真正地写出来，这就不仅仅包括一个代码片段，而是像我们自己编写代码的过程一样，先在我的D盘的code文件夹下新建一个代码文件，比如hello.py, 然后再编辑文件，编写代码，编写完成后执行代码，查看是否符合预期等等… 于是，AI agent就这样诞生了。所以通俗地解释AI agent， 就是，我们让一个只会对话输出文字的大模型，拥有了调用工具，执行某项具体任务的能力。换成更简单的公式化理解就是
AI agent = 大模型 + 工具
理解了上面这个例子后，也就大致明白了AI agent的。AI Agent就是能在数字世界里"独立思考"和"自主行动"的智能程序。
| 传统对话模型 | AI Agent |
|---|---|
| 被动响应问题 | 主动采取行动 |
| 单一对话场景 | 多任务协同 |
| 固定知识库 | 动态学习更新 |
| 纯文本交互 | 可操作现实系统 |
3、MCP servers
有了AI agent，随之而来也出现了新的问题。不同的用户，不同的开发者，不同的公司对于AI agent要具体执行的事情，都会存在相似大背景下的不同小需求。这就导致了大量的重复劳动。比如我们让AI agent去查询我们的公司资料库，然后写一篇推文这样的事情，可能每个公司的资料库的地址，发布推文的方式存在细微的差异。如果每个使用者都去自定义agent，这无疑是不高效，或者说不优雅的解决方案，并且agent也很难复用和共享给他人使用。因此Anthropic 公司敏锐地发现了这个问题。他们认为，工具应该有一套通用的语言和接口规范，于是 MCP（Model Context Protocol，模型上下文协议）应用而生，让AI应用开始了新一轮的爆发出现。 那么MCP换成是个中国人都能懂的话，就相当于AI界的秦始皇，颁布了书同文，车同轨的规范。
在这套协议中，MCP定义了大模型如何发现、理解以及调用外部工具的标准协议。通过MCP client与 MCP server的交互来实现。
MCP Client（客户端）： 通常是使用工具的一方。也就是我们实际会用到的 AI 应用，比如 元宝客户端、Cursor 编程工具等。
MCP Server（服务端）： 也就是提供工具的一方。任何拥有 API 或软件服务的公司，都可以按照 MCP 规范把自己包装成一个 MCP Server，把原来给人用的工具，改造成能让 AI 理解和调用的工具。
我们假设一个场景，我们给手机的智能助手说“明天10点组织项目例会”，agent收到后，就开始理解，提取出时间，参会人，注意，于是请求mcp server分别查询我的日历系统查看日程是否冲突，查看会议室系统是否能预定到会议，都确认无误后再操作邮件系统发送
目前github上已经有了非常多的mcp server，包括各个互联网公司也都相继推出了自家的mcp server，开发者只需要按需配置mcp client调用即可。Cline插件中也提供了配置接口，可以一键配置并使用。后面再单独出文章讲如何自定义mcp以及如何使用mcp开发应用。
4、使用Cline生成代码
cline是什么不过多赘述，简单点说就是可以通过各个大模型的api接口，作为你的编程的AI agent来使用。包括大模型对话，提示代码上下文，调用mcp server等等。
安装好cline会出现一个小机器人图标，我们依次点开后，配置deepseek的apikey就能直接使用了。
配置完成后我们就能够开启对话编码了。需要注意的是插件的右下角还有一个Plan/Act的选择按钮。这里需要注意下
- Act模式：专注于任务执行 。可以使用所有工具(除plan_mode_respond外) 可以读写文件、执行命令等， 可以实际修改代码和系统 ，但是不能进行开放式讨论。
- PLAN模式：专注于信息收集和方案设计 。 使用plan_mode_respond工具与用户交流 ，可以提问澄清需求 ， 可以设计架构方案 ，可以绘制Mermaid图表辅助说明 但是 不能执行实际修改操作
所以结合我们讲到的agent，Act模式就是我们要使用的agent的行为模式
5、编写Prompt提示词生成一个游戏
为了方便一个直观的演示，也就是所见即所得，我这里选择使用一个做H5游戏的提示词来让cline帮我们制作一个H5的小游戏。
如果配置好了可以把下面的这段提示词，直接发送给cline
# Role: H5游戏开发专家
## Profile
- language: 中文/英文
- description: 专注于HTML5游戏开发的专家，擅长使用现代Web技术创建互动游戏体验
- background: 5年HTML5游戏开发经验，熟悉Canvas和WebGL技术
- personality: 注重细节，追求代码优化，乐于分享技术知识
- expertise: JavaScript游戏开发，HTML5 Canvas动画，响应式设计
- target_audience: 前端开发者，游戏开发爱好者，编程学习者
## Skills
1. 核心开发技能
- HTML5 Canvas: 精通Canvas绘图API实现游戏图形
- JavaScript ES6+: 使用现代JavaScript语法开发游戏逻辑
- 游戏物理引擎: 实现碰撞检测和运动控制
- 响应式设计: 确保游戏适配不同设备屏幕
2. 辅助开发技能
- 性能优化: 优化动画帧率和内存使用
- 音效处理: 添加游戏音效和背景音乐
- 游戏对象：游戏中的对象优先使用合适的emojy表情
- 本地存储: 使用localStorage保存游戏进度
- 触摸控制: 实现移动设备触摸控制支持
## Rules
1. 开发原则：
- 代码规范: 遵循ESLint标准编写清晰可读的代码
- 模块化: 使用模块化设计分离游戏逻辑和视图
- 可扩展性: 设计易于扩展的游戏架构
- 兼容性: 确保主流浏览器兼容
2. 行为准则：
- 用户体验优先: 确保游戏操作直观流畅。界面美观
- 渐进增强: 基础功能稳定后再添加高级特性
- 错误处理: 完善错误捕获和用户提示
- 性能监控: 实时监测游戏性能指标
3. 限制条件：
- 不使用第三方游戏引擎
- 纯前端实现，不依赖后端服务
- 代码体积控制在合理范围
- 避免使用实验性API
## Workflows
- 目标: 开发一个功能完整的飞机大战H5网页游戏
- 步骤 1: 设计游戏基本架构和核心类(飞机、外星人、游戏控制器)
- 步骤 2: 实现Canvas渲染系统和游戏循环
- 步骤 3: 添加键盘/触摸控制、计分系统和游戏状态管理
- 预期结果: 一个可在现代浏览器中流畅运行的贪吃蛇游戏
## Initialization
作为H5游戏开发专家，你必须遵守上述Rules，按照Workflows执行任务。
cline接受到指令后开始分析我们的意图，并在当前的工作空间中逐步生成代码
最终我们运行我们的代码得到下面这个效果。可能每个人生成的代码会有细微的差异，但是功能上整体是一致的。剩下的就是我们优化提示词，让agent更好地执行我们的代码。我们观察agent的输出可以看到它的实际动作，比如编写代码，调试代码，修改调试报错等等，可以说是涵盖了我们开发任务的完整生命周期。
点击了Run Command后cline就会帮我们打开浏览器，我们就能看到一个完整的游戏界面了
如果效果不满意的，其实我们只需要修改提示词即可。比如美化界面，加入得分排行榜等等等等。如何让AI更好地服务于我们，如何更好地编写Prompt如今也成了一个新的分支，如果感兴趣可以进一步了解提示词工程
6、结语
所以我们看到，随着AI技术的进一步发展，一些简单基础的应用已经能够实现AI自动生成了。无论你是程序员，或是不懂编程的小白都能编写自己想要的程序。那么如何拥有产品化的思维，如何拥有对软件架构设计的能力成了对未来程序员更大的能力要求。也许不用过度悲观AI会取代人类，抢掉人咧饭碗。不妨向前看，新的纪元下总会有新的方向出现，需要我们去做更独特的探索，而我们只需要保持清晰的头脑，去让AI为我们所用就好了。
更多的内容可以关注wx公众号 “一颗程序树”
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
