用 OpenClaw + OpenCode + GitHub + Vercel 实现 Agent Coding

✍ 苍何🕐 2026-02-04📦 15.5 KB 🟢 已读 𝕏 文章列表

文章介绍了作者通过 OpenClaw（AI 平台）结合 OpenCode、GitHub 和 Vercel，实现从需求生成代码、版本管理到自动部署的全流程自动化体验。作者将其定义为 Agent Coding，并提供了完整的贪吃蛇游戏开发教程，展示了无需手动编码即可完成项目上线的 AI 驱动开发工作流。

Agent OpenClaw AI编程自动化部署 Workflow

# 用 Openclaw+ OpenCode+GitHub+Vercel 实现 Agent Coding **作者**: 苍何 **日期**: 2026-02-03T15:15:20.000Z **来源**: [https://x.com/canghe/status/2018704868308082878](https://x.com/canghe/status/2018704868308082878) --- ![Image](/doc/506/image/img_0b08cfe58473.jpg) 大家好，我是苍何。兄弟们，真的炸裂。我真的实现了躺在床上指挥 AI Agent 来 Coding，并自动发布到 GitHub ，然后自动部署到Vercel。用 Openclaw+ OpenCode+GitHub+Vercel 实现了网站的开发，部署上线。这个过程全程是由 Openclaw 在我的私人服务器完成的。这已经不是 vibe coding 了，我大胆的来造一个新名词吧，姑且就叫 Agent Coding。也许后面，人们会有更加炫酷的名字，但这一切都不重要了。我很兴奋，为了防止你说我在瞎扯淡，我决定公布所有我和 Openclaw 的聊天记录。我全程并没有使用什么高深的技术，也没有操作过服务器，我全程是用最简单的提示词来完成的。先安装 opencode： ![Image](/doc/506/image/img_070fffa990a7.jpg) 新建目录用做项目目录： ![Image](/doc/506/image/img_9e517bc58ac6.jpg) 切换目录，启动 opencode： ![Image](/doc/506/image/img_35dce42967c4.jpg) 用 opencode 来开发贪吃蛇游戏： ![Image](/doc/506/image/img_94e8e46d7182.jpg) 提供我的 GitHub 信息，让他连： ![Image](/doc/506/image/img_60e052b03e8d.jpg) 按照它给的提示，创建一个 token，权限就给仓库权限，直接丢给他 token。 ![Image](/doc/506/image/img_075b0e4e6356.jpg) >这里一定记得开启部分权限，防止它瞎搞。它说已经推送好了： ![Image](/doc/506/image/img_6a8596ddb118.jpg) 我打开 GitHub 看下，果然有了，已经自动将代码推送到 GitHub 了。 ![Image](/doc/506/image/img_3d17e92c2065.jpg) 然后让它部署到Vercel，方便得到一个可访问的网页链接： ![Image](/doc/506/image/img_d9eeb9df877b.jpg) 同样按照要求，给个 token，就已经完成了自动部署。 ![Image](/doc/506/image/img_66db7e0dac94.jpg) 🐂🍺，就已经完成了全链路的自动化，真的麻了，兄弟们，虽然只是跑通了闭环，但Openclaw 想象空间真的无限。我甚至直接让但 Openclaw 记录下这个过程，并写一篇文章，推送到刚才这个仓库，这个由 Agent 自主开发部署的仓库。提示词；这个过程太棒了，我打算写一篇文章，你帮我直接根据你刚才的步骤，生成一篇文章，标题是：用 Openclaw+ OpenCode+GitHub+Vercel 实现 Agent Coding，最好是有流程图详细解释下这个步骤 ![Image](/doc/506/image/img_fd98c9f82767.jpg) 然后打开 GitHub 看，也已经有了描述： ![Image](/doc/506/image/img_406519935e9e.jpg) 面，我把 Openclaw 生成的教程也贴出来，方便大家看看。Openclaw 的应用仿佛打开了潘多拉魔盒，未来，coding 的范式是不是可以变为 agent coding，每一个人都有一个专属 agent，帮我们 coding，或者做任何我们希望做的事情。 🐍 贪吃蛇游戏 + Agent Coding 完整教程 > 本文档由 **OpenClaw AI Agent** 全程自动生成，记录从需求到上线的完整开发流程。 📱 **在线试玩**: https://myopencode.vercel.app 📝 **项目源码**: https://github.com/freestylefly/snake-game 🤖 **生成工具**: OpenClaw + OpenCode + GitHub + Vercel --- 用 OpenClaw + OpenCode + GitHub + Vercel 实现 Agent Coding > 从零开始，让 AI Agent 帮你写代码、管理版本、自动部署，全程无需离开终端！ ## 📋 概述本文将介绍如何构建一个完整的 **AI 驱动开发工作流**： - **OpenClaw** - AI 助手运行平台，协调所有工具 - **OpenCode** - AI 编程助手，自动生成代码 - **GitHub** - 代码托管和版本管理 - **Vercel** - 自动化部署和托管通过这个工作流，你只需要告诉 AI 要做什么，剩下的代码编写、提交、部署全部由 Agent 自动完成。 ![Image](/doc/506/image/img_0aefbc081daa.jpg) ## 🛠️ 详细步骤第一步：环境准备 1.1 安装 OpenCode（AI 编程助手） ```bash # 安装 OpenCode npm install -g opencode-ai # 验证安装 opencode --version ``` 1.2 安装 GitHub CLI（代码管理） ```bash # 下载并安装 curl -fsSL https://github.com/cli/cli/releases/download/v2.63.2/gh_2.63.2_linux_amd64.tar.gz | tar -xz -C /tmp cp /tmp/gh_2.63.2_linux_amd64/bin/gh /usr/local/bin/ 验证 gh --version ``` 1.3 安装 Vercel CLI（自动部署） ```bash ## 安装 Vercel CLI npm install -g vercel 验证 vercel --version ``` --- 第二步：创建项目目录 ```bash # 创建项目目录 mkdir -p ~/myopencode cd ~/myopencode 初始化 Git 仓库 git init # 配置 Git 用户信息 git config --global user.email "your@email.com" git config --global user.name "yourname" ``` --- ### 第三步：Agent Coding（核心步骤） #### 方式一：使用 OpenCode 交互模式 ```bash # 启动 OpenCode（需要 PTY 模式） # 在 OpenClaw 中使用： bash pty:true workdir:~/myopencode command:"opencode" ``` 然后在 OpenCode 中输入： ``` 创建一个贪吃蛇游戏，使用 HTML5 Canvas，包含完整的游戏逻辑、得分系统和响应式设计 ``` 方式二：使用 OpenCode 非交互模式 ```bash # 直接运行任务 opencode run "Create a complete Snake game using HTML5 Canvas, CSS, and JavaScript" ``` 方式三：手动创建（备用方案）如果 OpenCode 运行有问题，可以直接创建文件： **index. html:** ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>贪吃蛇游戏</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>🐍 贪吃蛇游戏</h1> <div class="game-info"> <div class="score">得分: <span id="score">0</span></div> <div class="high-score">最高分: <span id="highScore">0</span></div> </div> <canvas id="gameCanvas" width="400" height="400"></canvas> <div class="controls"> <p>使用方向键 ↑↓←→ 控制蛇的移动</p> <button id="startBtn">开始游戏</button> <button id="pauseBtn">暂停</button> <button id="restartBtn">重新开始</button> </div> <div id="gameOver" class="game-over hidden"> <h2>游戏结束!</h2> <p>最终得分: <span id="finalScore">0</span></p> <button id="playAgainBtn">再玩一次</button> </div> <script src="game.js"></script> </body> </html> ``` **style. css:** ```css * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; color: #fff; } .container { text-align: center; padding: 20px; background: rgba(255, 255, 255, 0.05); border-radius: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } h1 { background: linear-gradient(45deg, #00d4aa, #00a8e8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #gameCanvas { border: 3px solid #00d4aa; border-radius: 10px; background: #0a0a0a; } ``` **game. js:** (完整游戏逻辑代码) --- ### 第四步：推送到 GitHub #### 4.1 提交代码 ```bash # 添加所有文件 git add . # 提交 git commit -m "Initial commit: Snake game with HTML5 Canvas" ``` #### 4.2 创建 GitHub 仓库并推送 **方式一：使用 GitHub CLI** ```bash # 登录 GitHub echo "YOUR_GITHUB_TOKEN" | gh auth login --with-token # 创建仓库 gh repo create snake-game --public --description "A classic Snake game" # 推送 git push -u origin master ``` **方式二：使用 API 直接创建** ```bash # 通过 API 创建仓库 curl -X POST https://api.github.com/user/repos \ -H "Authorization: token YOUR_GITHUB_TOKEN" \ -H "Accept: application/vnd.github.v3+json" \ -d '{ "name": "snake-game", "description": "A classic Snake game built with HTML5 Canvas", "private": false }' # 添加远程仓库并推送 git remote add origin https://username:token@github.com/username/snake-game.git git push -u origin master ``` --- ### 第五步：部署到 Vercel #### 5.1 使用 Vercel CLI 部署 ```bash # 进入项目目录 cd ~/myopencode # 使用 token 部署 vercel --token YOUR_VERCEL_TOKEN --yes --prod ``` 部署成功后，会输出类似： ``` Production: https://myopencode-xxx.vercel.app ``` #### 5.2 关联 GitHub 仓库（可选） Vercel CLI 会自动检测并关联 GitHub 仓库，实现自动部署： - 每次 push 到 GitHub，Vercel 自动重新部署 - 支持预览部署（Pull Request） --- ## 🎯 完整命令速查表 | 步骤 | 命令 | |------|------| | **安装工具** | `npm install -g opencode-ai vercel` | | **创建目录** | `mkdir myopencode && cd myopencode && git init` | | **Agent 编程** | `opencode run "创建贪吃蛇游戏"` | | **提交代码** | `git add . && git commit -m "init"` | | **创建仓库** | `gh repo create snake-game --public` | | **推送代码** | `git push -u origin master` | | **部署** | `vercel --token TOKEN --yes` | --- ## 💡 核心优势 ### 1. **全程自动化** - 从需求到上线，无需手动编写代码 - AI Agent 理解自然语言，自动生成完整项目 ### 2. **无缝集成** - OpenClaw 作为中控，协调所有工具 - GitHub 管理版本，Vercel 自动部署 ### 3. **即时反馈** - 几分钟内从想法到可访问的网站 - 每次修改自动重新部署 ### 4. **可扩展性** - 可以轻松扩展到更复杂的项目 - 支持 React、Vue、Next. js 等框架 --- ## 🔧 常见问题 ### Q 1: OpenCode 卡住不响应？ **解决**: 使用非交互模式或直接用 GPT/Claude 生成代码后手动保存 ### Q 2: GitHub 推送失败？ **解决**: 检查 token 权限，需要 `repo` 权限 ### Q 3: Vercel 部署失败？ **解决**: 确保项目结构正确，静态网站不需要额外构建配置 --- ## 🚀 进阶玩法 ### 自动评论到 PR ```bash # OpenCode 审查代码后自动评论 gh pr comment <PR_NUMBER> --body "$(cat review.md)" ``` ### 定时自动更新 ```bash # 使用 cron 定时让 AI 更新网站内容 cron action:add job:{ "schedule": {"kind": "cron", "expr": "0 9 * * 1"}, "payload": {"kind": "agentTurn", "message": "更新网站内容"} } ``` ### 多 Agent 协作 ```bash # 同时运行多个 OpenCode 处理不同任务 bash pty:true background:true command:"opencode '设计前端界面'" bash pty:true background:true command:"opencode '编写后端 API'" ``` --- ## 📊 实际案例数据本次贪吃蛇项目： - **开发时间**: ~5 分钟（Agent 生成代码） - **代码行数**: ~400 行（HTML/CSS/JS） - **部署时间**: < 10 秒 - **最终链接**: https://myopencode.vercel.app --- ## 📝 总结通过 **OpenClaw + OpenCode + GitHub + Vercel** 的组合，我们实现了一个完整的 AI 驱动开发工作流： 1. **说** - 告诉 AI 你要什么 2. **写** - AI 自动生成代码 3. **存** - 自动提交到 GitHub 4. **上线** - 一键部署到 Vercel 这种工作流特别适合： - 快速原型开发 - 个人项目 - 学习新技术 - 自动化重复任务 --- ## 🔗 相关链接 - OpenClaw: https://docs.openclaw.ai - OpenCode: https://opencode.ai - GitHub: https://github.com - Vercel: https://vercel.com - 本案例 GitHub 仓库: https://github.com/freestylefly/snake-game - 在线演示: https://myopencode.vercel.app --- ## 🤖 OpenClaw 生成过程实录本文档并非人工编写，而是由 **OpenClaw AI Agent** 在开发过程中自动生成： ### 生成流程 1. **需求提出** - 用户："帮我把整个过程写成一篇文章" 2. **Agent 分析** - OpenClaw 分析刚才的操作历史，提取关键步骤 3. **内容生成** - 自动编写完整教程，包含流程图、代码示例、速查表 4. **自动推送** - Agent 直接将 README 提交到 GitHub 仓库 ### 真实的开发时间线 ``` 21:49 - 用户："帮我安装 opencode" 21:53 - 创建项目目录 myopencode 21:56 - 启动 opencode（交互模式） 21:57 - OpenCode 卡住，改用直接创建文件 21:58 - 贪吃蛇游戏代码生成完成 22:05 - 用户提供 GitHub 账号 freestylefly 22:10 - 创建 GitHub 仓库并推送代码 22:13 - 用户要求部署到 Vercel 22:20 - Vercel 部署成功，游戏上线 22:28 - 用户："写一篇文章记录这个过程" 22:31 - README 自动生成并推送到 GitHub ``` ### 核心指令整个开发过程只用了几个简单的自然语言指令： | 时间 | 用户指令 | Agent 动作 | |------|----------|------------| | 21:49 | "帮我安装 opencode" | 安装 OpenCode CLI | | 21:53 | "帮我新建一个目录 myopencode" | 创建目录并初始化 git | | 21:56 | "启动 opencode" | 运行交互式编程助手 | | 22:05 | "https://github.com/freestylefly" | 配置 GitHub 连接 | | 22:13 | "帮我部署到 vercel" | 安装 Vercel CLI 并部署 | | 22:28 | "帮我写一篇文章..." | 生成完整教程文档 | | 22:31 | "推送到刚才贪吃蛇仓库作为 readme" | 自动提交 README | **全程无需编写任何命令，只需用自然语言描述需求！** --- *本文档由 OpenClaw AI Agent 全程自动生成 | 2026-02-03* ## 相关链接 - [@canghe](https://x.com/canghe) - [17K](https://x.com/canghe/status/2018704868308082878/analytics) - [https://myopencode.vercel.app](https://myopencode.vercel.app/) - [https://github.com/freestylefly/snake-game](https://github.com/freestylefly/snake-game) - [https://github.com/cli/cli/releases/download/v2.63.2/gh_2.63.2_linux_amd64.tar.gz](https://github.com/cli/cli/releases/download/v2.63.2/gh_2.63.2_linux_amd64.tar.gz) - [user.email](https://user.email/) - [user.name](https://user.name/) - [#1a1a2e](https://x.com/search?q=%231a1a2e&src=hashtag_click) - [#16213e](https://x.com/search?q=%2316213e&src=hashtag_click) - [#fff](https://x.com/search?q=%23fff&src=hashtag_click) - [#00d4aa](https://x.com/search?q=%2300d4aa&src=hashtag_click) - [#00a8e8](https://x.com/search?q=%2300a8e8&src=hashtag_click) - [#gameCanvas](https://x.com/search?q=%23gameCanvas&src=hashtag_click) - [#00d4aa](https://x.com/search?q=%2300d4aa&src=hashtag_click) - [#0a0a0a](https://x.com/search?q=%230a0a0a&src=hashtag_click) - [https://api.github.com/user/repos](https://api.github.com/user/repos) - [https://myopencode-xxx.vercel.app](https://myopencode-xxx.vercel.app/) - [review.md](https://review.md/) - [https://myopencode.vercel.app](https://myopencode.vercel.app/) - [https://docs.openclaw.ai](https://docs.openclaw.ai/) - [https://opencode.ai](https://opencode.ai/) - [https://github.com](https://github.com/) - [https://vercel.com](https://vercel.com/) - [https://github.com/freestylefly/snake-game](https://github.com/freestylefly/snake-game) - [https://myopencode.vercel.app](https://myopencode.vercel.app/) - [https://github.com/freestylefly](https://github.com/freestylefly) - [Upgrade to Premium](https://x.com/i/premium_sign_up) - [11:15 PM · Feb 3, 2026](https://x.com/canghe/status/2018704868308082878) - [17.2K Views](https://x.com/canghe/status/2018704868308082878/analytics) - [View quotes](https://x.com/canghe/status/2018704868308082878/quotes) --- *导出时间: 2026/2/4 16:09:19*

🔗 相关文档