边缘开发者平台
  • Makers
    • 产品简介
    • 快速开始
      • 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
      • 概览
      • 示例
        • 通过 SDK 部署
        • 通过 CLI 部署
        • 项目管理
      • 项目
        • 项目操作
        • 环境变量
      • 部署
    • 消息通知
    • 集成指南
      • 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 通用模板 基于 Claude Agent SDK 与 TypeScript 实现,适用于通过自然语言生成遵循主流框架标准的 Web 应用,在隔离沙箱中完成文件写入、依赖安装和实时预览,Agent 运行时通过 SDK 将生成项目部署到 Makers 平台。

整体架构



快速开始

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

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

核心能力

启动沙箱预览

调用沙箱 getHost(9000) 取得公网 host,再把 envdAccessToken 作为 access_token 拼到链接上,得到沙箱预览地址。
const workspace = createMakersWorkspacePort(context);
const previewHost = await workspace.getHost?.(PREVIEW_PUBLIC_PORT);
const accessToken = workspace.accessToken;
const browserLiveUrl = workspace.browserLiveUrl;

return {
previewUrl: resolvePreviewUrl({
previewHost,
accessToken,
browserLiveUrl,
pathPrefix: PREVIEW_PATH_PREFIX,
}),
};

集成 Makers SDK 部署

Agent 运行时使用 API_TOKEN 调用 Makers SDK,上传部署包并触发构建与部署。
const deployment = await makers.deployments.deploy({
projectId,
artifact: { archive: tmpZip },
wait: true,
onStatusChange: (event) => {
options.onStage('deploying', event.deployment.status);
},
});
部署的详细接入流程可参考 通过 SDK 部署。

本地调试和部署

启动本地开发调试

1. 进入项目根目录,安装 EdgeOne CLI:
npm install -g edgeone
2. 登录 EdgeOne,并关联需要调试的 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。