Installation
generator-sdk is the platform capability layer. If you also want the official unified shell with built-in login, template actions, and floating export entry, install generator-workbench together.
If you need a focused introduction to the shell itself, see Generator Workbench.
Method 1: npm Package (Engineered Projects)
pnpm add @atomm-developer/generator-sdk
pnpm add @atomm-developer/generator-workbench
# or
npm install @atomm-developer/generator-sdk
npm install @atomm-developer/generator-workbenchimport { GeneratorSDK, SdkError, withBilling } from '@atomm-developer/generator-sdk'
import { defineGeneratorWorkbench } from '@atomm-developer/generator-workbench'
// TypeScript types are also exported and can be used directly
import type { UserInfo, AuthStatus, CloudRecord, UsageInfo } from '@atomm-developer/generator-sdk'
defineGeneratorWorkbench()⚠️ Important for Vue 3 Projects: Do not store the SDK instance in reactive data. See SDK Initialization for details.
Method 2: CDN Integration (Plain HTML / vibe coding)
<script src="https://static-res.atomm.com/scripts/js/generator-sdk/index.umd.js"></script>
<script src="https://static-res.atomm.com/scripts/js/generator-sdk/generator-workbench/index.umd.js"></script>
<script>
// In UMD format, window.GeneratorSDK is the GeneratorSDK class
const sdk = GeneratorSDK.init({ appKey: 'your_app_key' })
// SdkError and withBilling are mounted on GeneratorSDK
const SdkError = GeneratorSDK.SdkError
const withBilling = GeneratorSDK.withBilling
GeneratorWorkbench.defineGeneratorWorkbench()
</script>generator-workbench auto-loads Vue 3 when window.Vue is absent, auto-injects the default atomm-ui stylesheet into its Shadow DOM, and auto-loads the default atomm-ui CDN script when window.AtommUI is absent, so you no longer need to add separate Vue or atomm-ui.js scripts for the shell itself. The shell now uses a single background CSS fetch and reuses that same CSS text for both the Shadow DOM patch and the global document.head patch, which means CSS loading no longer blocks the initial shell render or triggers the earlier double-channel <link> + fetch path.
That only covers the shell itself. If your runtime business UI also uses atomm-ui components and the actual runtime mount root lives inside a Shadow Root or another isolated context, you still need to inject the business UI styles into the runtime's real style host instead of relying only on page-level <head> CSS.
Recommended Package Combination
| Package | Purpose | Recommended When |
|---|---|---|
@atomm-developer/generator-sdk | Platform capabilities such as auth, template, export, billing, and history | Always required |
@atomm-developer/generator-workbench | Official unified host shell for top bar, template entry, login area, export entry, and runtime mounting | Recommended for new standard generators |
Build Artifacts
@atomm-developer/generator-sdk
| File | Format | Purpose | Usage |
|---|---|---|---|
dist/index.es.js | ESM | npm engineered projects | import { GeneratorSDK } from '@atomm-developer/generator-sdk' |
dist/index.umd.js | UMD | CDN <script> tags | window.GeneratorSDK |
dist/index.d.ts | TypeScript Types | IDE autocomplete | Automatically loaded |
@atomm-developer/generator-workbench
| File | Format | Purpose | Usage |
|---|---|---|---|
dist/index.es.js | ESM | npm engineered projects | import { defineGeneratorWorkbench } from '@atomm-developer/generator-workbench' |
dist/index.umd.js | UMD | CDN <script> tags | window.GeneratorWorkbench |
dist/index.d.ts | TypeScript Types | IDE autocomplete | Automatically loaded |
Dependencies
| Dependency | Version | Purpose | Bundling Behavior |
|---|---|---|---|
@makeblock/passport-client | ^4.0.19 | Login modal | Bundled into SDK |
@makeblock/upload | ^1.0.0 | OSS upload | Bundled into SDK |
axios | ^1.7.9 | HTTP requests | Bundled into SDK |
uuid | ^11.1.0 | Generate unique IDs | Bundled into SDK |
All dependencies are bundled into the SDK; no extra installation is required by the user.