ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

vivo 广告小游戏:从“写代码”到“说需求”,用 TaoToken 打通 AI Agent 工作流

vivo 广告小游戏:从“写代码”到“说需求”,用 TaoToken 打通 AI Agent 工作流 1. vivo 广告小游戏开发为什么需要 AI Agent 工作流vivo 广告小游戏这类场景核心矛盾在于交付周期和玩法复杂度之间的拉扯。一个营销活动从策划到上线通常只有 3 到 7 天但玩法要能吸引用户点击、停留、完成转化视觉素材还得跟品牌调性对齐。传统做法是策划写文档、设计出图、前端搭工程、联调测试每个环节都在消耗时间最后往往压缩的是测试和优化空间。我接触过几个做广告小游戏的朋友他们最头疼的不是玩法本身而是“重复造轮子”。每个活动都要重新搭一遍场景、写一遍生命周期、接一遍上报逻辑真正花在创意上的时间不到三成。AI Agent 的价值就在这里把工程侧的重复劳动交给模型人只需要用自然语言描述需求Agent 负责把需求翻译成可运行的工程代码。但要让 AI Agent 真正跑起来绕不开一个前置问题——模型通道。OpenCode 这类 Agent 后端需要稳定的 API 接入Galacean 引擎侧的脚本生成需要模型理解游戏架构素材生成需要多模态能力。如果每个环节都单独配 Key、单独调通道维护成本会迅速吃掉效率收益。TaoToken 在这里扮演的角色就是把这些分散的模型调用统一到一个 Key、一个 API 通道上让 Agent 工作流从“能跑”变成“好维护”。这一篇我会以 OpenCode Galacean 为技术底座演示怎么用 TaoToken 统一接入 AI Agent把“说需求”直接变成可运行的小游戏工程。你会看到完整的配置片段、端到端验证步骤以及实际跑起来之后容易踩的坑。适合正在做广告小游戏、想用 AI 提效但不想被模型接入拖住的前端和全栈开发者。2. TaoToken 前置准备统一 Key 与 API 通道接入 OpenCode在把 OpenCode 接进 vivo 广告小游戏工程之前先要把模型通道这件事理清楚。OpenCode 本身是一个可扩展的 Agent 后端它需要调用大模型来完成代码生成、文件读写、命令执行这些动作。默认情况下你需要自己填 Base URL、API Key、Model ID 三件套。如果直接用各家模型的原生接口切换模型、管理额度、排查限流都会变成额外负担。TaoToken 的做法是提供一个统一的 API 入口你只需要一个 Key就能在 OpenCode 里调用不同模型。对广告小游戏这种需要快速迭代的场景来说这意味着你可以先用一个模型跑通流程再根据效果切换到更适合代码生成的模型而不用改工程配置。2.1 获取 API Key 与确认 Base URL第一步是拿到 Key。访问 TaoToken 的 API Keys 页面创建一个新的 Key。建议按项目维度创建比如vivo-adgame-dev方便后续做额度隔离和问题追踪。创建完成后你会拿到一串以sk-开头的 Key。这个 Key 只显示一次复制后先存到安全的地方。接下来确认 Base URLTaoToken 的 API 入口是https://taotoken.net/api注意这里不要加任何 UTM 参数API 调用需要的是干净的地址。如果你在浏览器里访问官网可以走这个入口https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content官网主要用于查看文档、管理 Key、了解模型列表实际代码里配置的是 API 地址。2.2 在 OpenCode 中配置 TaoToken 通道OpenCode 的配置通常放在项目根目录的.opencode目录或者环境变量里。我建议用环境变量加配置文件的方式既方便本地调试也方便 CI 环境注入。先看环境变量配置。在项目根目录创建.env.local# TaoToken 统一通道 TAOTOKEN_API_KEYsk-你的实际Key TAOTOKEN_BASE_URLhttps://taotoken.net/api # OpenCode 读取的模型配置 OPENCODE_PROVIDERtaotoken OPENCODE_MODELclaude-sonnet-4-20250514然后在 OpenCode 的配置文件里引用这些变量。如果你用的是opencode.json或类似的配置文件结构大致如下{ provider: { taotoken: { baseURL: https://taotoken.net/api, apiKey: ${TAOTOKEN_API_KEY}, models: { claude-sonnet-4-20250514: { name: Claude Sonnet 4, contextWindow: 200000, maxTokens: 8192 }, gpt-4.1: { name: GPT-4.1, contextWindow: 128000, maxTokens: 8192 } } } }, defaultModel: taotoken/claude-sonnet-4-20250514 }这里的关键点是baseURL指向 TaoToken 的 API 地址apiKey从环境变量读取。这样你在 OpenCode 里切换模型时只需要改defaultModel不需要动通道配置。2.3 验证通道连通性配置完成后先做一次最小化验证确认 Key 和通道都能正常工作。可以用 curl 直接测curl -X POST https://taotoken.net/api/v1/chat/completions \ -H Authorization: Bearer $TAOTOKEN_API_KEY \ -H Content-Type: application/json \ -d { model: claude-sonnet-4-20250514, messages: [ {role: user, content: 回复 OK 两个字母即可} ], max_tokens: 16 }如果返回的 JSON 里有choices字段并且内容里包含OK说明通道是通的。如果返回 401检查 Key 是否复制完整如果返回 404检查 Base URL 是否多了斜杠或者路径写错。这一步看起来简单但实际项目里很多“Agent 不工作”的问题根源都在通道没通。先把这一步跑通后面 OpenCode 的配置才有意义。3. 可复制配置OpenCode Galacean 工程接入片段通道验证通过后接下来把配置落到实际的 vivo 广告小游戏工程里。这一节我会给出可以直接复制的 JSON、TOML 和 settings 片段覆盖 OpenCode 的 Agent 配置、Galacean 的工程结构以及素材生成管线的接入点。3.1 OpenCode Agent 配置文件在广告小游戏工程根目录创建.opencode/agent.json这个文件定义 Agent 的行为边界和工具权限{ name: vivo-adgame-agent, version: 1.0.0, provider: taotoken, model: claude-sonnet-4-20250514, systemPrompt: 你是一个广告小游戏开发 Agent基于 Galacean 引擎和 game-template 基座工作。你的任务是1. 先阅读 docs/requirements.md 理解需求2. 检查 docs/assets-plan.json 确认素材规划3. 在 src/scripts/ 下生成或修改脚本4. 修改 src/editor/scene.json 时保持 schema 一致5. 每次修改后运行 npm run build 验证。严禁启动 dev/watch/preview 常驻服务。, tools: { read: true, write: true, bash: { enabled: true, allowlist: [npm run build, npm run lint, git status, git diff] }, assetGenerate: { enabled: true, endpoint: /api/project/{projectId}/assets/generate } }, skills: [ start, project-stage-detect, dev-story, schema-sync-check, runtime-fix, galacean-2d-game, galacean-entity, galacean-interaction, galacean-animation ], hooks: { onSessionStart: [check-schema-sync, load-runtime-errors], onFileChange: [validate-scene-json, remind-asset-plan] } }这个配置里几个关键点provider指向 TaoTokenmodel指定默认模型tools.bash.allowlist限制 Agent 只能执行构建和检查命令避免它误启动常驻服务。skills列表对应.agent/skills/下的 Markdown 文件Agent 会根据任务类型自动加载。3.2 Galacean 工程结构与 scene.json 配置广告小游戏的工程基座建议直接复用 game-template 的结构。核心目录如下game-template/ ├── src/ │ ├── config/ │ │ ├── assets.ts │ │ └── runtime.ts │ ├── editor/ │ │ ├── scene.json │ │ └── generated/scene-outline.ts │ ├── libs/loaders/ │ ├── scene/ │ │ ├── index.ts │ │ ├── schema.ts │ │ ├── script-registry.ts │ │ └── script-runtime.ts │ ├── scripts/ │ │ └── player.ts │ ├── store/game.ts │ ├── utils/ │ ├── App.vue │ └── game.ts ├── docs/ │ ├── requirements.md │ └── assets-plan.json └── .agent/ ├── agents/ ├── rules/ ├── skills/ └── hooks/scene.json是编辑器和运行时共享的场景真源AI 修改的核心对象就是它。一个典型的广告小游戏场景配置{ designWidth: 750, designHeight: 1334, nodes: [ { id: root, kind: group, children: [ { id: bg, kind: sprite, assetRef: background, transform: { x: 0, y: 0, z: 0 }, components: { render: { sortingOrder: 0, opacity: 1 } } }, { id: player, kind: sprite, assetRef: player, scriptIds: [PlayerController], components: { interaction: { shape: circle, radius: 40 } } } ] } ] }AI 生成脚本时只需要在src/scripts/下创建对应的类script-registry.ts会按scriptIds自动匹配。脚本的标准范式参考基座里的player.tsimport { ConfigurableScript } from /scene/script-runtime type PlayerScriptConfig { swingSpeed?: number pulseSpeed?: number rotationAmplitude?: number scaleAmplitude?: number } export class Player extends ConfigurableScriptPlayerScriptConfig { private elapsed 0 private baseScaleX 1 private baseScaleY 1 onAwake(): void { this.baseScaleX this.entity.transform.scale.x this.baseScaleY this.entity.transform.scale.y } onUpdate(deltaTime: number): void { this.elapsed deltaTime const swingSpeed this.scriptConfig.swingSpeed ?? 2.2 const scaleMultiplier this.externalValue?.scaleMultiplier ?? 1 const swing Math.sin(this.elapsed * swingSpeed) const scale 1 Math.sin(this.elapsed * (this.scriptConfig.pulseSpeed ?? 3)) * (this.scriptConfig.scaleAmplitude ?? 0.1) this.entity.transform.rotation.set(0, 0, swing * (this.scriptConfig.rotationAmplitude ?? 0.2)) this.entity.transform.scale.set(this.baseScaleX * scale * scaleMultiplier, this.baseScaleY * scale * scaleMultiplier, 1) } }这个脚本演示了三层参数注入scriptConfig来自 scene.json 的静态配置externalValue来自父页面 postMessage 注入的运行时数据this.entity是当前挂载的引擎实体。AI 照这个范式生成脚本基本不会跑偏。3.3 素材生成管线接入广告小游戏的素材产出是耗时大头。在.agent/settings.json里配置素材生成规则{ assetPipeline: { provider: taotoken, imageModel: gpt-4.1, videoModel: claude-sonnet-4-20250514, outputDir: public/assets, planFile: docs/assets-plan.json, rules: { requireRealAssets: true, allowProcedural: false, maxImageSizeKB: 500, autoCompress: true } } }requireRealAssets: true强制 Agent 生成真实图片文件不允许用占位图或程序化纹理绕过。autoCompress会在图片生成后自动压缩超标文件。这些规则通过 hooks 在文件变更时触发检查确保 AI 产出的游戏是“可以直接上线”的状态。4. 验证请求从自然语言需求到可运行小游戏配置就绪后这一节走一遍完整的端到端流程。我会用一个具体的广告小游戏需求演示怎么从“说需求”到“跑起来”。4.1 需求描述与 Agent 触发假设需求是做一个“接住掉落品牌元素”的广告小游戏用户控制底部角色左右移动接住掉落的品牌图标得分30 秒倒计时结束后展示得分和“再来一局”按钮。在 OpenCode 的 ChatPanel 里输入这段需求Agent 会按 systemPrompt 里的流程执行先读docs/requirements.md再检查docs/assets-plan.json然后生成素材、写脚本、改 scene.json最后跑npm run build验证。实际对话中你会看到 Agent 的步骤卡片依次展开读文件、写文件、执行命令、生成素材。每一轮对话结束后ChatPanel 会汇总本轮修改的文件列表支持“保留/撤销本轮”。4.2 验证构建与运行时Agent 完成编码后先确认构建通过npm run build如果构建成功你会看到类似输出vite v5.x.x building for production... ✓ 42 modules transformed. dist/index.html 0.46 kB dist/assets/index-xxxx.js 128.34 kB ✓ built in 3.21s构建通过后在本地预览环境里打开游戏。注意这里不要用 Agent 启动 dev server而是用构建产物做验证避免常驻服务干扰 Agent 的后续操作。运行时如果出现 JS 异常基座的utils/里已经封装了错误上报会通过 postMessage 把错误信息回传给父页面服务端记录到.runtime-errors.json。下次 AI 对话时这些错误会自动注入上下文Agent 会分析 stack trace 并生成修复方案。4.3 验证模型通道与 Agent 响应如果你想单独验证 TaoToken 通道在 OpenCode 里的表现可以在 ChatPanel 里发一条简单指令比如“列出当前项目的目录结构”。Agent 会调用 read 工具返回目录树。如果这一步正常说明通道、模型、工具权限都配置正确。也可以直接调 API 做模型对话验证访问模型对话页面https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite在页面里选择模型输入测试 prompt确认返回正常。这一步和 OpenCode 里的调用走的是同一个通道可以用来排查是通道问题还是 Agent 配置问题。4.4 长期编码与 Agent 工作流如果你打算把这种工作流长期用在多个广告小游戏项目上建议关注 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewriteCoding Plan 适合需要持续调用模型、跑 Agent 工作流的场景额度和通道稳定性会比按次调用更可控。对于 vivo 广告小游戏这种短周期、多项目并行的团队统一通道加统一 Key 能省掉大量环境切换和额度管理的时间。5. 本篇常见错误排查实际跑这套工作流时有几个报错出现频率很高。这一节按真实报错信息对照排查覆盖 401、local proxy failed、reading choices、OAuth 这几类。5.1 401 Unauthorized报错信息Error: 401 Unauthorized {error:{message:Invalid API key,type:invalid_request_error}}原因通常是 Key 没配好。检查顺序第一确认.env.local里的TAOTOKEN_API_KEY是完整的sk-开头字符串没有多余空格或换行第二确认 OpenCode 配置文件里引用的是${TAOTOKEN_API_KEY}而不是硬编码的旧 Key第三确认 Key 没有过期或被删除。如果 Key 确认没问题检查 Base URL 是否写成了https://taotoken.net/api/带了尾部斜杠某些 HTTP 客户端会把斜杠拼成双斜杠导致鉴权失败。统一用https://taotoken.net/api。5.2 local proxy failed报错信息Error: local proxy failed: connect ECONNREFUSED 127.0.0.1:7890这个报错说明你的环境里配置了本地代理但代理服务没启动。OpenCode 或底层 HTTP 客户端读取了HTTP_PROXY/HTTPS_PROXY环境变量尝试走本地端口。解决办法是检查环境变量把代理配置清掉或者确认代理服务正常运行。在项目.env.local里显式声明NO_PROXYtaotoken.net,localhost,127.0.0.1这样对 TaoToken 的请求会绕过本地代理直接走网络。5.3 reading choices 报错报错信息TypeError: Cannot read properties of undefined (reading choices)这个报错通常出现在解析模型响应时。原因可能是第一API 返回了错误结构但代码直接读了choices第二模型名称写错通道返回了 404 或 400响应体里没有choices字段第三流式响应和非流式响应混用解析逻辑不匹配。排查方法先用 curl 单独调一次确认返回体结构。如果 curl 正常但 OpenCode 报错检查 OpenCode 的响应解析配置确认stream参数和解析逻辑一致。模型名称建议从 TaoToken 的模型列表里复制不要手写。5.4 OAuth 相关报错报错信息Error: OAuth token exchange failed: invalid_grant如果你在 OpenCode 里配置了 OAuth 方式的鉴权但同时又配了 TaoToken 的 API Key可能会出现鉴权方式冲突。TaoToken 走的是 API Key 鉴权不需要 OAuth 流程。检查 OpenCode 配置里是否残留了 OAuth 相关的 provider 设置把鉴权方式统一成 API Key。如果确实需要 OAuth比如某些企业环境确认 OAuth 回调地址和 TaoToken 的配置匹配并且grant_type参数正确。5.5 CC Switch / Cline MCP / Codex auth.json 三件套如果你在 OpenCode 之外还用了 CC Switch、Cline MCP 或 Codex这些工具的配置里也需要写全三件套Base URL、Key、Model ID。以 Codex 的auth.json为例{ baseURL: https://taotoken.net/api, apiKey: sk-你的实际Key, model: claude-sonnet-4-20250514 }Cline MCP 的配置类似在 MCP server 的环境变量里注入{ mcpServers: { taotoken: { command: npx, args: [-y, taotoken/mcp-server], env: { TAOTOKEN_BASE_URL: https://taotoken.net/api, TAOTOKEN_API_KEY: sk-你的实际Key, TAOTOKEN_MODEL: claude-sonnet-4-20250514 } } } }CC Switch 的配置在它的 settings 里同样确保 Base URL、Key、Model ID 三项完整。三件套缺任何一项都会导致鉴权失败或模型找不到。6. 接入文档与后续工作流建议这套工作流跑通之后你会发现广告小游戏的开发节奏变了需求描述清楚Agent 就能产出可构建的工程人只需要在关键节点做确认和调整。但要让它在团队里稳定运转还有几件事值得做。第一把.agent/skills/下的 Skill 文件当成团队资产来维护。每遇到一个新的玩法类型或引擎用法就沉淀成一个 SkillAgent 的“经验”会越来越丰富。第二运行时错误上报的闭环要持续用起来每次修复后把错误上下文归档后续类似问题可以直接匹配。第三素材生成规则要根据实际投放效果迭代比如哪些提示词模板产出的素材点击率高就固化到assets-plan.json的模板里。接入文档和 API 细节可以在这里查https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewriteAPI Keys 管理入口https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite如果你用 Claude Code 做润色或代码审查接入方式参考https://taotoken.net/claude-code-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_codeutm_campaignrewrite最后说一个实际踩过的坑Agent 生成脚本时如果scene.json里的scriptIds和src/scripts/下的文件名不匹配运行时会静默失败不报错但脚本不执行。排查方法是检查script-registry.ts的匹配逻辑确认scriptIds里的字符串和脚本类名一致。这个坑不显眼但会浪费不少调试时间建议在 hooks 里加一条校验规则文件变更时自动检查一致性。
返回列表