• 产品简介
  • 快速开始
    • Agent 开发
    • 导入 Git 仓库
    • 从模板开始
    • 直接上传
    • 从 AI 开始
  • 框架指南
    • Agent
    • 前端
      • Vite
      • React
      • Vue
      • Hugo
      • 其他框架
    • 后端
    • 全栈
      • Next.js
      • Nuxt
      • Astro
      • React Router
      • SvelteKit
      • TanStack Start
      • Vike
    • 自定义 404 页面
  • 项目指南
    • 项目管理
    • edgeone.json
    • 缓存配置
    • 构建输出配置
    • 域名管理
      • 概览
      • 自定义域名
      • 配置 HTTPS 证书
        • 概览
        • 申请免费证书
        • 使用 SSL 托管证书
      • 配置 DNS 的 CNAME 记录
    • 错误码
  • 构建指南
  • 部署指南
    • 概览
    • 触发部署
    • 管理部署
    • 部署按钮
    • 使用 Github Action
    • 使用 Gitlab CI/CD
    • 使用 CNB 插件
    • 使用 IDE 插件
    • 使用 CodeBuddy IDE
  • Makers for Platforms
    • 平台与多租户
    • Vibe Coding 解决方案
    • 模板示例
      • Vibe Coding 通用模板
      • Vibe Coding 平台模板
  • 可观测性
    • 概览
    • 指标分析
    • 日志分析
  • Functions
    • 概览
    • Edge Functions
    • Cloud Functions
      • 概览
      • Node.js
      • Python
      • Go
  • Agents
    • 概览
    • 快速开始
    • 会话管理
    • 可观测
    • 沙箱工具
      • 概览
      • Agent 框架使用
      • 沙箱原子 API
      • 网络搜索工具
    • Agent 应用鉴权
  • Models
    • 概览
    • 模型与厂商
      • 概览
      • 使用朱雀模型
      • 使用 Jev 模型
      • 使用厂商密钥
        • OpenAI
        • Anthropic
        • Google AI Studio
        • DeepSeek
        • MiniMax
        • 混元
        • 智谱
        • 月之暗面
    • 常见问题
  • 存储
    • 概览
    • KV
    • Blob
  • 中间件
  • AI 原生开发
    • Skills
    • MCP
    • Plugin
  • Copilot
    • 概览
    • 快速开始
  • API Token
  • EdgeOne CLI
  • Makers SDK
    • 概览
    • 示例
      • 创建部署
      • 项目管理
    • 项目
      • 项目操作
      • 环境变量
    • 部署
  • 消息通知
  • 集成指南
    • AI
      • Makers Models 集成
      • 图片大模型集成
    • 数据库
      • Supabase 集成
      • Pages KV 集成
    • 电商
      • Shopify 集成
      • WooCommerce 集成
    • 支付
      • Stripe 集成
      • Paddle 集成
    • CMS
      • WordPress 集成
      • Contentful 集成
      • Sanity 集成
      • Payload 集成
    • 身份验证
      • Supabase 集成
      • Clerk 集成
    • IM
      • 概览
      • 企业微信
      • 飞书
      • 钉钉
      • Telegram
      • Slack
      • Discord
  • 最佳实践
    • 为网站添加 AI 对话助手
    • AI 对话式部署:使用 Skill 一句话部署项目
    • 使用 Makers Agents 快速搭建 Agent 应用
    • 使用 Shopify 搭建电商平台
    • 使用 Supabase 和 Stripe 搭建 SaaS 站点
    • 如何快速搭建公司品牌站点
    • 如何快速搭建博客站点
    • 在 WorkBuddy 中通过免登录部署快速上线
  • 迁移指南
    • 从 Vercel 迁移至 EdgeOne Makers
    • 从 Cloudflare Pages 迁移至 EdgeOne Makers
    • 从 Netlify 迁移至 EdgeOne Makers
  • 排障指南
  • 常见问题
  • 限制与配额
  • 价格与套餐
  • 联系我们
  • 产品动态

Vibe Coding 平台模板

Vibe Coding 平台模板 深度集成平台 SKills 能力,适用于快速生成基于 Next.js、Nuxt 等主流框架的全栈 Web 应用及 AI Agent,支持 SSR、ISR 等多种渲染模式。开发者可基于该模板快速构建支持多租户隔离、多框架适配和边缘一键部署的 Vibe Coding 平台。

整体架构



快速开始

1. 创建并获取 API Token。
2. 使用下方示例模板,即可快速体验并一键部署。

3. 在部署配置页面,填写API_TOKEN环境变量。
4. 点击部署,等待 Makers 完成构建并生成访问地址。

模板核心能力

Makers Skills 集成

模板在 .claude/skills/ 内置 Makers Skills,为 Agent 提供框架约定、平台 API、目录规范和部署要求。
Agent 根据任务使用对应 Skill,生成项目先通过 Makers 兼容性检查,框架适配器是否就位、平台声明文件是否完整、目录结构是否合规;失败时自动尝试一轮修复。
可通过执行 npm run sync:skills 更新平台最新 Skills,会替换 .claude/skills/目录。

启动预览

Agent 运行时拼出启动预览的命令字符串,再通过沙箱的 commands 工具调用 EdgeOne CLI 启动项目预览。

export function buildMakersDevLaunchCommand(port: number, projectName: string) {
return `edgeone makers dev --port ${port} --skip-env-sync --name ${shellQuote(projectName)}`;
}

执行部署

Agent 运行时拼出部署的命令字符串,再通过沙箱的 commands 工具调用 EdgeOne CLI 执行部署。

function makersDeployLaunch(projectName: string, requestedCommand: string, area = 'global') {
const previewEnvironment = /(?:^|\s)(?:-e|--environment)(?:\s+|=)preview(?:\s|$)/i
.test(requestedCommand);
return [
'edgeone makers deploy',
`-n ${shellQuote(projectName)}`,
'--json',
`--area ${area}`,
previewEnvironment ? '-e preview' : '',
].filter(Boolean).join(' ');
}

代码持久化

保存工作区代码
在每轮代码修改完成后调用 persist():
try {
const persist = await context.sandbox.persist({path: projectPath});//path 为项目目录
} catch (error) {
// 保存失败不影响当前沙箱继续工作,可记录日志并稍后重试
console.warn('Failed to save workspace:', error);
}
恢复工作区代码
新沙箱创建后,Agent 开始读写项目文件前调用 restore():
const result = await context.sandbox.restore({path: projectPath});
注意:如果 restore() 返回 failed,本轮不要再调用 persist(),否则可能用不完整的工作区覆盖上一次可用快照。

本地调试和部署

启动本地开发调试

1. 进入项目根目录,安装 EdgeOne CLI:
npm install -g edgeone
2. 执行登录,并关联前面使用模板部署的 Makers 项目:
edgeone login
edgeone makers link
关联项目后会把控制台配置的 API_TOKEN 和调用 Models 所需的 API Key 自动同步到本地。
3. 启动 Makers 本地开发环境:
edgeone makers dev
启动成功后,访问 http://localhost:8088/ 即可打开应用;访问 http://localhost:8088/agent-metrics 可查看 Agent 调用的详细链路信息。

部署项目

如果项目已关联 Git 仓库,推送代码即可触发 Makers 的 CI 构建与部署。也可以通过 CLI 直接部署:
# 部署至生产环境
edgeone makers deploy -n <项目名>
部署成功后点击 Console 的链接可以访问具体构建信息和部署后的 URL。