Integration Examples

Generator SDK supports multiple integration paths. Choose the one that best matches your stack.

For new generators, the recommended default path is: generate a runtime starter first, then mount generator-workbench as the official shell. The lower-level CDN / Vue / React examples remain useful when you need to understand or customize the raw SDK wiring.

Integration Decision Flow

Use this diagram to decide which entry path matches your project and what the high-level delivery flow looks like.

Recommended Way To Read This Section

• If you already have an app and want full control, start with CDN Integration, Vue Example, or React Example.
• If you are starting a new standard generator, prefer HTML Runtime Starter or Vue Runtime Starter, then mount generator-workbench.
• If you want AI to scaffold the first version for you, start with AI Integration, then use the manual pages as verification references.

Recommended Options

Scenario	Recommended Option	Notes
New standard generator / vibe coding	HTML Runtime Starter	Preferred path: keep business logic in runtime and mount generator-workbench
New standard Vue generator	Vue Runtime Starter	Preferred path for Vue projects with runtime + workbench layering
Rapid prototyping / low-level SDK wiring	CDN Integration	Runs from a single HTML file
Vue 3 project	Vue Example	Composition API + TypeScript
React project	React Example	Hooks + TypeScript
Cursor + MCP + skill	AI Integration	Generate a minimal pendant generator with natural language
Template-host integration validation	Template Host Demo	Left canvas + partial right-side panel + template import flow

Core Integration Steps

No matter which path you use, the overall flow is:

1. Initialize the SDK - pass the generator ID as appKey and the env
2. Prepare the runtime - expose window.__GENERATOR_RUNTIME__ and support full / embed
3. Mount generator-workbench - let the official shell host login, template actions, and export entry
4. Register the export provider - provide a function that returns the canvas
5. Listen for auth state changes - react to login/logout via onChange
6. Listen for billing updates - update export button text in real time
7. Compose billing with export - wrap export operations with withBilling
8. Template capability - when template-author mode is needed, use sdk.template.build()/parse()/applyToRuntime() and let the host consume panelFilter

If your goal is to run the generator in both a full page and a template host, prefer a runtime starter plus generator-workbench instead of generating only a full page.

One-Line Vibe Coding Prompt

If you use an AI coding tool such as Cursor or Claude, you can use the following prompt to quickly generate integration code:

Please help me create a starter-html-runtime style HTML + JavaScript image editor using Atomm Generator SDK, and mount generator-workbench as the official shell.

Load both CDN scripts: <script src="https://static-res.atomm.com/scripts/js/generator-sdk/index.umd.js"></script> and <script src="https://static-res.atomm.com/scripts/js/generator-sdk/generator-workbench/index.umd.js"></script>.

Initialize the SDK with GeneratorSDK.init({ appKey: 'my_generator_id', env: 'test' }), expose window.__GENERATOR_RUNTIME__, call GeneratorWorkbench.defineGeneratorWorkbench(), and mount the workbench.

It needs the following features:

1. Login: use sdk.auth.login() for popup login and sdk.auth.onChange(callback) to observe auth state
2. Cloud save: use sdk.cloud.save({ snapshot, cover: canvas }) to persist state
3. Cloud restore: when the URL contains ?id=xxx, call sdk.cloud.restore(id) to restore
4. History: use sdk.history.getList() to load the history list and restore an item on click
5. Billing-aware export: register the export provider with sdk.export.register({ getExportCanvas: () => canvas }) (or use getExportData for non-canvas scenarios), then use GeneratorSDK.withBilling(sdk.billing, () => sdk.export.download()) for export
6. Billing display: use sdk.billing.getUsage() for free quota and credit info, and sdk.billing.onChange(callback) for real-time updates

For error handling, use err.code === 40301 for insufficient credits and err.code === 20101 for expired login.

Recommended New Workflow

For new AI vibe coding generators, the recommended flow is:

1. Let MCP generate starter-html-runtime or starter-vue-runtime
2. Keep generator business logic inside runtime
3. Mount generator-workbench as the official host shell
4. Integrate the generator into the template host through Generator Runtime Contract
5. If template-author capability is needed, enable the template feature and let the host consume panelFilter