@imgly/codesign-mcp 0.1.5 → 0.1.7

package/assets/docs/guide/create-templates/import.md

@@ -1,4 +1,4 @@
-> This is one page of the CE.SDK Vanilla JS/TS documentation. For a complete overview, see the [Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
+> This is one page of the CE.SDK Node.js documentation. For a complete overview, see the [Node.js Documentation Index](https://img.ly/docs/cesdk/node.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
 
 **Navigation:** [Guides](./guides.md) > [Create and Use Templates](./create-templates.md) > [Import Templates](./create-templates/import.md)
 
@@ -6,170 +6,152 @@
 
 Load design templates into CE.SDK from archive URLs, scene URLs, and serialized strings.
 
-![Import Templates](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
-
 > **Reading time:** 5 minutes
 >
 > **Resources:**
 >
 > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip)
-> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-import-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-templates-import-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-import-browser/)
-
-Templates are pre-designed scenes that provide starting points for user projects. CE.SDK supports loading templates from archive URLs with bundled assets, remote scene URLs, or serialized strings stored in databases.
-
-```typescript file=@cesdk_web_examples/guides-create-templates-import-browser/browser.ts reference-only
-import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
-import {
-  BlurAssetSource,
-  ColorPaletteAssetSource,
-  CropPresetsAssetSource,
-  DemoAssetSources,
-  EffectsAssetSource,
-  FiltersAssetSource,
-  PagePresetsAssetSource,
-  StickerAssetSource,
-  TextAssetSource,
-  TextComponentAssetSource,
-  TypefaceAssetSource,
-  UploadAssetSources,
-  VectorShapeAssetSource
-} from '@cesdk/cesdk-js/plugins';
-import { DesignEditorConfig } from './design-editor/plugin';
-import packageJson from './package.json';
-
-// Import scene file as string for loadFromString demonstration
-import businessCardSceneString from './assets/business-card.scene?raw';
-
-// Template sources
-const fashionAdArchiveUrl =
-  'https://cdn.img.ly/assets/templates/starterkits/16-9-fashion-ad.zip';
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-templates-import-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-templates-import-server-js)
 
-const postcardSceneUrl =
-  'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene';
+Templates are pre-designed scenes that provide starting points for user projects. CE.SDK supports loading templates from archive URLs with bundled assets, remote scene URLs, or serialized strings stored in files.
 
+```typescript file=@cesdk_web_examples/guides-create-templates-import-server-js/server-js.ts reference-only
 /**
- * CE.SDK Plugin: Import Templates
+ * CE.SDK Node.js Example: Import Templates
  *
  * Demonstrates loading templates from different sources:
  * - Archive URLs (.zip files with bundled assets)
  * - Scene URLs (.scene files)
- * - Serialized strings (imported scene content)
+ * - Serialized strings (file content)
  */
-class Example implements EditorPlugin {
-  name = packageJson.name;
-  version = packageJson.version;
 
-  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
-    if (cesdk == null) {
-      throw new Error('CE.SDK instance is required for this plugin');
+import CreativeEngine from '@cesdk/node';
+import { readFileSync, writeFileSync } from 'fs';
+import { config } from 'dotenv';
+import * as readline from 'readline';
+
+// Load environment variables from .env file
+config();
+
+// Template sources
+const fashionAdArchiveUrl =
+  'https://cdn.img.ly/assets/templates/starterkits/16-9-fashion-ad.zip';
+
+const postcardSceneUrl =
+  'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene';
+
+// For loadFromString: read the scene file content
+const businessCardSceneString = readFileSync(
+  './assets/business-card.scene',
+  'utf-8'
+);
+
+// Prompt user to select import method
+async function selectImportMethod(): Promise<string> {
+  const methods = [
+    { key: '1', label: 'Import Archive (fashion-ad.zip)', value: 'archive' },
+    { key: '2', label: 'Import URL (postcard.scene)', value: 'url' },
+    { key: '3', label: 'Import String (business-card.scene)', value: 'string' }
+  ];
+
+  console.log('\nSelect import method:');
+  methods.forEach((m) => console.log(`  ${m.key}) ${m.label}`));
+
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+
+  return new Promise((resolve) => {
+    rl.question('\nEnter choice (1-3): ', (answer) => {
+      rl.close();
+      const selected = methods.find((m) => m.key === answer.trim());
+      if (!selected) {
+        console.error(
+          `\n✗ Invalid choice: "${answer.trim()}". Please enter 1-3.`
+        );
+        process.exit(1);
+      }
+      resolve(selected.value);
+    });
+  });
+}
+
+const configuration = {
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL,
+  userId: 'guides-user'
+};
+
+async function main() {
+  // Get user's import method selection
+  const method = await selectImportMethod();
+  console.log('');
+
+  const engine = await CreativeEngine.init(configuration);
+
+  try {
+    let templateName = '';
+
+    if (method === 'archive') {
+      // Load template from archive URL (bundled assets)
+      await engine.scene.loadFromArchiveURL(fashionAdArchiveUrl);
+      templateName = 'fashion-ad';
     }
 
-    await cesdk.addPlugin(new DesignEditorConfig());
-    // Add asset source plugins
-    await cesdk.addPlugin(new BlurAssetSource());
-    await cesdk.addPlugin(new ColorPaletteAssetSource());
-    await cesdk.addPlugin(new CropPresetsAssetSource());
-    await cesdk.addPlugin(
-      new UploadAssetSources({ include: ['ly.img.image.upload'] })
-    );
-    await cesdk.addPlugin(
-      new DemoAssetSources({
-        include: [
-          'ly.img.templates.blank.*',
-          'ly.img.templates.presentation.*',
-          'ly.img.templates.print.*',
-          'ly.img.templates.social.*',
-          'ly.img.image.*'
-        ]
-      })
-    );
-    await cesdk.addPlugin(new EffectsAssetSource());
-    await cesdk.addPlugin(new FiltersAssetSource());
-    await cesdk.addPlugin(new PagePresetsAssetSource());
-    await cesdk.addPlugin(new StickerAssetSource());
-    await cesdk.addPlugin(new TextAssetSource());
-    await cesdk.addPlugin(new TextComponentAssetSource());
-    await cesdk.addPlugin(new TypefaceAssetSource());
-    await cesdk.addPlugin(new VectorShapeAssetSource());
-
-    const engine = cesdk.engine;
-
-    // Load template from a scene file URL
-    await engine.scene.loadFromURL(postcardSceneUrl);
-
-    // Zoom viewport to fit the loaded scene
-    const scene = engine.scene.get();
-    if (scene != null) {
-      await engine.scene.zoomToBlock(scene, { padding: 40 });
+    if (method === 'url') {
+      // Load template from a scene URL
+      await engine.scene.loadFromURL(postcardSceneUrl);
+      templateName = 'postcard';
+    }
+
+    if (method === 'string') {
+      // Load template from serialized string
+      await engine.scene.loadFromString(businessCardSceneString);
+      templateName = 'business-card';
     }
 
     // Verify the loaded scene
-    const loadedScene = engine.scene.get();
-    if (loadedScene != null) {
-      const pages = engine.scene.getPages();
-      // eslint-disable-next-line no-console
-      console.log(`Template loaded with ${pages.length} page(s)`);
+    const scene = engine.scene.get();
+    if (scene == null) {
+      throw new Error('Failed to load scene');
     }
 
-    // Configure navigation bar with template loading buttons
-    cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [
-      'ly.img.undoRedo.navigationBar',
-      'ly.img.spacer',
-      {
-        id: 'ly.img.action.navigationBar',
-        key: 'load-archive',
-        label: 'Import Archive',
-        icon: '@imgly/Download',
-        variant: 'regular',
-        onClick: async () => {
-          // Load template from archive URL (bundled assets)
-          await engine.scene.loadFromArchiveURL(fashionAdArchiveUrl);
-          const s = engine.scene.get();
-          if (s != null) {
-            await engine.scene.zoomToBlock(s, { padding: 40 });
-          }
-        }
-      },
-      {
-        id: 'ly.img.action.navigationBar',
-        key: 'load-url',
-        label: 'Import URL',
-        icon: '@imgly/Download',
-        variant: 'regular',
-        onClick: async () => {
-          // Load template from scene URL
-          await engine.scene.loadFromURL(postcardSceneUrl);
-          const s = engine.scene.get();
-          if (s != null) {
-            await engine.scene.zoomToBlock(s, { padding: 40 });
-          }
-        }
-      },
-      {
-        id: 'ly.img.action.navigationBar',
-        key: 'load-string',
-        label: 'Import String',
-        icon: '@imgly/Download',
-        variant: 'regular',
-        onClick: async () => {
-          // Load template from serialized string
-          await engine.scene.loadFromString(businessCardSceneString);
-          const s = engine.scene.get();
-          if (s != null) {
-            await engine.scene.zoomToBlock(s, { padding: 40 });
-          }
-        }
-      }
-    ]);
+    const pages = engine.scene.getPages();
+    // eslint-disable-next-line no-console
+    console.log(`Loaded ${templateName} template with ${pages.length} page(s)`);
+
+    // Export the loaded template to a PNG file
+    const blob = await engine.block.export(scene, { mimeType: 'image/png' });
+    const buffer = Buffer.from(await blob.arrayBuffer());
+    const outputPath = `output-${templateName}.png`;
+    writeFileSync(outputPath, buffer);
+    // eslint-disable-next-line no-console
+    console.log(`Exported template to ${outputPath}`);
+
+    // eslint-disable-next-line no-console
+    console.log('Example completed successfully!');
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Error:', error);
+    throw error;
+  } finally {
+    // Always dispose the engine when done
+    engine.dispose();
   }
 }
 
-export default Example;
+// Run the example
+main().catch((error) => {
+  // eslint-disable-next-line no-console
+  console.error('Failed to run example:', error);
+  process.exit(1);
+});
 ```
 
-This guide covers how to load templates from archives, URLs, and strings, and work with the loaded content.
+This guide covers how to load templates from archives, URLs, and strings, and export the result.
 
 ## Load from Archive
 
@@ -185,60 +167,62 @@ await engine.scene.loadFromArchiveURL(fashionAdArchiveUrl);
 Load a template from a remote `.scene` file URL using `loadFromURL()`. The scene file is a JSON-based format that references assets via URLs.
 
 ```typescript highlight=highlight-load-from-url
-// Load template from a scene file URL
+// Load template from a scene URL
 await engine.scene.loadFromURL(postcardSceneUrl);
 ```
 
 ## Load from String
 
-For templates stored in databases or received from APIs, load from a serialized string using `loadFromString()`. This method works with content previously saved using `engine.scene.saveToString()`.
+For templates stored in databases or files, load from a serialized string using `loadFromString()`.
 
 ```typescript highlight=highlight-load-from-string
 // Load template from serialized string
 await engine.scene.loadFromString(businessCardSceneString);
 ```
 
+This method works with content previously saved using `engine.scene.saveToString()`.
+
 ## Working with the Loaded Scene
 
-After loading a template, you can verify its contents and adjust the viewport.
+After loading a template, verify the scene loaded correctly and inspect its contents.
 
 ### Verify the Scene
 
 Use `engine.scene.get()` to retrieve the scene block and `engine.scene.getPages()` to inspect its pages.
 
 ```typescript highlight=highlight-get-scene
-// Verify the loaded scene
-const loadedScene = engine.scene.get();
-if (loadedScene != null) {
-  const pages = engine.scene.getPages();
-  // eslint-disable-next-line no-console
-  console.log(`Template loaded with ${pages.length} page(s)`);
-}
+    // Verify the loaded scene
+    const scene = engine.scene.get();
+    if (scene == null) {
+      throw new Error('Failed to load scene');
+    }
+
+    const pages = engine.scene.getPages();
 ```
 
-### Zoom to Content
+## Cleanup
 
-Fit the loaded template in the viewport using `zoomToBlock()` with optional padding.
+Always dispose the engine when finished to release resources.
 
-```typescript highlight=highlight-zoom-to-scene
-// Zoom viewport to fit the loaded scene
-const scene = engine.scene.get();
-if (scene != null) {
-  await engine.scene.zoomToBlock(scene, { padding: 40 });
-}
+```typescript highlight=highlight-cleanup
+// Always dispose the engine when done
+engine.dispose();
 ```
 
+
+
 ---
 
 ## Related Pages
 
-- [Import Templates from Scene Files](./create-templates/import/from-scene-file.md) - Load and import templates from scene files in CE.SDK for web applications
+- [Import Templates from Scene Files](./create-templates/import/from-scene-file.md) - Load and import templates from scene files programmatically using CE.SDK in Node.js for headless automation
+
 
 ---
 
 ## More Resources
 
-- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS documentation
+- **[Node.js Documentation Index](https://img.ly/docs/cesdk/node.md)** - Browse all Node.js documentation
 - **[Complete Documentation](./llms-full.txt.md)** - Full documentation in one file (for LLMs)
-- **[Web Documentation](./js.md)** - Interactive documentation with examples
-- **[Support](mailto:support@img.ly)** - Contact IMG.LY support
+- **[Web Documentation](./node.md)** - Interactive documentation with examples
+- **[Support](mailto:support@img.ly)** - Contact IMG.LY support