接入示例总览

Generator SDK 支持多种接入路径，你可以根据团队当前的技术栈、开发方式和项目阶段来选择。

接入路径决策图

这张图用来回答两个问题：有哪些接入方式，以及每种方式的大致落地流程是什么。

怎么选最合适

• 如果你已经有现成工程，且希望自己控制每一层实现，优先看 CDN 方式、Vue 3 接入、React 接入。
• 如果你是从零开始做一个新的标准生成器，更推荐 HTML Runtime Starter 或 Vue Runtime Starter，然后挂载 generator-workbench。
• 如果你希望 AI 帮你先生成第一版工程，优先走 AI 接入，再把手动接入文档当成代码校验参考。

推荐入口

场景	推荐入口	说明
新标准生成器 / vibe coding	HTML Runtime Starter	推荐路径：业务逻辑放到 runtime，壳层挂到 generator-workbench
新标准 Vue 生成器	Vue Runtime Starter	适合 Vue 工程，保留 runtime + workbench 分层
快速原型 / 底层 SDK 接线	CDN 方式	单 HTML 文件即可跑通
Vue 3 项目	Vue 3 接入	Composition API + SDK 接线
React 项目	React 接入	Hooks + SDK 接线
Cursor + MCP + skill	AI 接入	用自然语言生成最小生成器
模板宿主接入验证	Template Host Demo	验证 canvas + panelFilter + 模板导入链路

接入时的共通主线

无论你走哪条路径，最后落到代码里，核心主线都差不多：

1. 初始化 SDK：传入生成器 ID（appKey）和环境（env）
2. 准备 runtime：暴露 window.__GENERATOR_RUNTIME__，并支持 full / embed
3. 挂载 generator-workbench：让官方壳层承载登录、模板操作和导出入口
4. 注册导出 provider：为 Studio 或下载能力提供 canvas / SVG 数据
5. 监听登录状态：通过 sdk.auth.onChange() 响应登录和登出
6. 接入计费变化：根据免费次数与积分变化更新 UI
7. 组合计费与导出：用 withBilling 包装导出动作
8. 按需接入模板能力：需要模板作者模式时，启用 sdk.template.* 和 panelFilter

如果你的目标是同时支持完整页面和模板宿主，优先选择 runtime starter + generator-workbench，而不是只生成一个完整页面。