YoYo：人生的第一个AI应用：Windsurf（deepseek模型）+Coze+微信开发者

YoYo：人生的第一个AI应用：Windsurf（deepseek模型）+Coze+微信开发者 YoYo：人生的第一个AI应用：Windsurf（deepseek模型）+Coze+微信开发者 Modified December 16, 2025 这里添加完，不是实时更新的，你还需要手动在微信开发者工具里刷新一下。在操作台的右上角 详情： 以上步骤都做完，你的API就可以跑通了！最后，你可以根据输出的效果，不断push Windsurf帮你改，直到改到你满意。至此，大功告成！ 记得一定要在真机上测试，亲测，在微信开发者工具里看到的完美效果，在真机上不一定能实现，体验不一定流畅。我在调试过程中遇到了以下这些问题： 没什么捷径，耐心，多练习和AI交互，直到你能完全操控它。 图片保存功能也实现了，yyds 发布流程后续再更新吧～～ 恭喜自己实现人生中的第一个AI应用！ 期待更多的伙伴创意作品，多多交流。 彩蛋应用孵化中！宝藏AI神器挖掘 🥁 💬 关于我 大家好～我是yoyo 🐱 • 🐈 坐标北京，铲屎官一枚 • 🫡 AIGC的小白，持续进阶成长，致力于打造一个自己的智能体 • ☕️ 以上期待能够给到各位一点启发 💡 感谢家属带我在“ 🌈 通往AGI之路”打开新世界，接触有趣的事情，结识有趣的人 个人沉淀小报童栏目（献丑系列） 宝藏AI神器挖掘 🥁 🌈 通往AGI之路 这里添加完，不是实时更新的，你还需要手动在微信开发者工具里刷新一下。在操作台的右上角 详情： 以上步骤都做完，你的API就可以跑通了！最后，你可以根据输出的效果，不断push Windsurf帮你改，直到改到你满意。至此，大功告成！ 记得一定要在真机上测试，亲测，在微信开发者工具里看到的完美效果，在真机上不一定能实现，体验不一定流畅。我在调试过程中遇到了以下这些问题： 没什么捷径，耐心，多练习和AI交互，直到你能完全操控它。 图片保存功能也实现了，yyds 发布流程后续再更新吧～～ 恭喜自己实现人生中的第一个AI应用！ 期待更多的伙伴创意作品，多多交流。 彩蛋应用孵化中！宝藏AI神器挖掘 🥁 宝藏AI神器挖掘 🥁 💬 关于我 大家好～我是yoyo 🐱 • 🐈 坐标北京，铲屎官一枚 • 🫡 AIGC的小白，持续进阶成长，致力于打造一个自己的智能体 • ☕️ 以上期待能够给到各位一点启发 💡 感谢家属带我在“ 🌈 通往AGI之路”打开新世界，接触有趣的事情，结识有趣的人 🌈 通往AGI之路 大家好～我是yoyo 🐱 • 🐈 坐标北京，铲屎官一枚 • 🫡 AIGC的小白，持续进阶成长，致力于打造一个自己的智能体 • ☕️ 以上期待能够给到各位一点启发 💡 感谢家属带我在“ 🌈 通往AGI之路”打开新世界，接触有趣的事情，结识有趣的人 🌈 通往AGI之路 大家好～我是yoyo 🐱 • 🐈 坐标北京，铲屎官一枚 • 🫡 AIGC的小白，持续进阶成长，致力于打造一个自己的智能体 • ☕️ 以上期待能够给到各位一点启发 💡 感谢家属带我在“ 🌈 通往AGI之路”打开新世界，接触有趣的事情，结识有趣的人 🌈 通往AGI之路 感谢家属带我在“ 🌈 通往AGI之路”打开新世界，接触有趣的事情，结识有趣的人 🌈 通往AGI之路 个人沉淀小报童栏目（献丑系列） 前几天Manus爆火，加上deepseek的能力提升，更激发了我玩AI编程的兴趣，我可以拥有一个自己的AI应用么。 全程没有一行代码是我写的用到的工具：Windsurf+Coze工作流+微信开发者工具 🎨 跑题画外音： 在跟AI交流过程中，不断尝试更多产品的过程中，有个感受，人人赤脚程序员时代近在咫尺，而且自己开发家庭自用产品也成为可能了。此处应有商机。 比如搭建一个家庭行事历，家庭菜单，家庭账单，家庭养娃日记等～～ 跑题画外音： 在跟AI交流过程中，不断尝试更多产品的过程中，有个感受，人人赤脚程序员时代近在咫尺，而且自己开发家庭自用产品也成为可能了。此处应有商机。 比如搭建一个家庭行事历，家庭菜单，家庭账单，家庭养娃日记等～～ 老规矩先上个效果图： 以下实现过程，核心是实现可行性，更多丰富有趣的应用，期待大家挖掘～ 微信开发环境搭建 第一步：先注册一个微信小程序账号 第一步：先注册一个微信小程序账号 注册地址：微信公众平台，填写账号信息，邮箱激活，信息登记三步即可。 微信公众平台 第二步：下载微信开发者工具 下载地址：微信开发者工具下载地址与更新日志 | 微信开放文档 微信开发者工具下载地址与更新日志 | 微信开放文档 推荐在稳定版这4个选项里选择和自己电脑匹配的那个就好。 第三步：新建一个小程序项目 打开刚刚下载好的微信开发者工具，扫码登录。 AppID这里填入第一步里注册好的账号，选择不使用云服务/不使用模板，不然你的代码里会有一些无用代码影响后续AI编程体验（AI容易找不准路径，不要在初始环境给太多干扰）。 搭建Coze工作流 第一步：创建智能体工作流 打开Coze的主页，登录后，在【工作空间】创建一个智能体： 接着，在编排页面，给这个智能体编辑好人设，可以自己先写一个简单的，然后点右上角自动优化，系统会自动给你补全更精细的描述。然后点击工作流的+，创建一个工作流： 第二步：耐心编排设计的你的工作流 大模型节点：把input给到DeepSeek，让DeepSeek按照我提前规定的输出框架，生成对应文案 生图节点：这个输出会给到图像生成组件，来画一张图 结束输出：这两个输出都会给到最终的end作为最终的输出 这里要注意看一个细节：如果你需要input可被DeepSeek调用，你在编写系统提示词的时候需要用{{input}}作为参数引入，不然大模型不知道自己需要生成和这个input相关的结果。编排完，点击【试运行】，就可以看结果了，如果输出结果看起来不对可以继续在这里调试，直到最终结果让你满意： 调到满意之后点击发布就行。 Windsurf 搭建项目框架 第一步：下载Windsurf，开发环境搭建 Downloads | Cursor The AI Code Editor Downloads | Cursor The AI Code Editor 第一步：下载Windsurf，开发环境搭建 Downloads | Cursor The AI Code Editor Downloads | Cursor The AI Code Editor 下载好之后页面过于简洁可能会有点迷茫，点击右上角呼出一下侧边栏： 对全英界面有恐惧的朋友们可以在左边栏这里找到中文插件，安装之后重启Windsurf就是中文操作栏了： 第二步：导入项目并创建引导文件 点击【文件 打开文件夹】，打开前面步骤中已经创建好的小程序项目文件夹，在文件夹内新建一个名为【introduction.md】的说明文件（随便你叫什么啦反正是个说明文件）。在md文件中输入你的小程序大概是用来做什么的，给AI一个人设，可以参考这里我写的这段： 第三步：开始AI编程在write里，你直接命令它按照说明文档来编程就行： 此刻AI开始工作，完成工作后你点击一下【Accept all】就代表接受了AI的方案： 此刻你再打开微信开发者工具，可以发现代码已经生效，如果正常的话应该有对应页面展示出来了。 在这个过程中，需要不断调试，展示1个调试的对话参考。如下 直到调试到了满意的UI效果，再进入下一步。以下是我最初的效果 让 Windsurf 调用 Coze API 第一步：让Windsurf知道怎么调API 第一步：让Windsurf知道怎么调API 去Coze的API文档，找到API的请求示例和返回示例： 复制这两个示例，让Windsurf来调用： 在完成操作后，AI给了一些提示，记得看，接下来我们要根据这几个提示来做API的调用适配： 第二步：找到 workflow id 和 API KEY 工作流的ID在你编排工作流的url里，完整的链接大概长这样，取最后workflow id=后接的一串数字： API KEY 需要你去创建一下，还是来到Coze后台： 设置名称、过期时间，并勾选你刚刚创建的工作流：点击确定并复制走这个令牌，只显示一次： 上面我们得到的workflow id 和 API KEY 需要复制到代码里。在Windsurf的左侧边栏里找到index.js，双击打开，可以看到代码里有这两个变量，把你刚取的值替换进打码的位置， 也可以直接让Ai进行替换， 第三步：给 Coze API 域名加白 Windsurf提示，我需要把 Coze API 域名加个白，不然微信不让调用。这里我们打开小程序开发者后台，在【开发管理 服务器域名】中，在request合法域名里加上 https://api.coze.cn