@imgly/codesign-mcp 0.1.5 → 0.1.7

package/assets/docs/guide/import-media/from-remote-source/remote-asset.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) > [Import Media Assets](./import-media.md) > [Import From Remote Source](./import-media/from-remote-source.md) > [Import Remote Asset](./import-media/from-remote-source/remote-asset.md)
 
@@ -6,107 +6,34 @@
 
 Load asset definitions from remote JSON files hosted on CDNs or servers into CE.SDK's asset library.
 
-![Import Remote Assets example showing CE.SDK with loaded remote asset sources](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
-
 > **Reading time:** 10 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-import-media-from-remote-source-remote-asset-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-import-media-from-remote-source-remote-asset-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-import-media-from-remote-source-remote-asset-browser/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-import-media-from-remote-source-remote-asset-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-import-media-from-remote-source-remote-asset-server-js)
 
 Remote asset loading enables you to host asset definitions on a CDN or server and load them dynamically into CE.SDK. This approach separates asset management from your application code, allowing you to update available assets without deploying new app versions. CE.SDK provides `engine.asset.addLocalAssetSourceFromJSONURI()` for loading from URLs and `engine.asset.addLocalAssetSourceFromJSONString()` for loading from JSON content you already have.
 
-```typescript file=@cesdk_web_examples/guides-import-media-from-remote-source-remote-asset-browser/browser.ts reference-only
-import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
-
-import {
-  BlurAssetSource,
-  CaptionPresetsAssetSource,
-  ColorPaletteAssetSource,
-  CropPresetsAssetSource,
-  DemoAssetSources,
-  EffectsAssetSource,
-  FiltersAssetSource,
-  PagePresetsAssetSource,
-  StickerAssetSource,
-  TextAssetSource,
-  TextComponentAssetSource,
-  TypefaceAssetSource,
-  UploadAssetSources,
-  VectorShapeAssetSource
-} from '@cesdk/cesdk-js/plugins';
-import { VideoEditorConfig } from './video-editor/plugin';
-
-class Example implements EditorPlugin {
-  name = 'guides-import-media-from-remote-source-remote-asset-browser';
-  version = '1.0.0';
-
-  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
-    if (!cesdk) {
-      throw new Error('CE.SDK instance is required for this plugin');
-    }
+```typescript file=@cesdk_web_examples/guides-import-media-from-remote-source-remote-asset-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { config } from 'dotenv';
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
 
-    await cesdk.addPlugin(new VideoEditorConfig());
-
-    // Add asset source plugins
-    await cesdk.addPlugin(new BlurAssetSource());
-    await cesdk.addPlugin(new CaptionPresetsAssetSource());
-    await cesdk.addPlugin(new ColorPaletteAssetSource());
-    await cesdk.addPlugin(new CropPresetsAssetSource());
-    await cesdk.addPlugin(
-      new UploadAssetSources({
-        include: [
-          'ly.img.image.upload',
-          'ly.img.video.upload',
-          'ly.img.audio.upload'
-        ]
-      })
-    );
-    await cesdk.addPlugin(
-      new DemoAssetSources({
-        include: [
-          'ly.img.templates.video.*',
-          'ly.img.image.*',
-          'ly.img.audio.*',
-          'ly.img.video.*'
-        ]
-      })
-    );
-    await cesdk.addPlugin(new EffectsAssetSource());
-    await cesdk.addPlugin(new FiltersAssetSource());
-    await cesdk.addPlugin(
-      new PagePresetsAssetSource({
-        include: [
-          'ly.img.page.presets.instagram.*',
-          'ly.img.page.presets.facebook.*',
-          'ly.img.page.presets.x.*',
-          'ly.img.page.presets.linkedin.*',
-          'ly.img.page.presets.pinterest.*',
-          'ly.img.page.presets.tiktok.*',
-          'ly.img.page.presets.youtube.*',
-          'ly.img.page.presets.video.*'
-        ]
-      })
-    );
-    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());
-
-    await cesdk.actions.run('scene.create', {
-      page: {
-        sourceId: 'ly.img.page.presets',
-        assetId: 'ly.img.page.presets.instagram.story',
-        color: { r: 0, g: 0, b: 0, a: 1 }
-      }
-    });
+// Load environment variables from .env file
+config();
 
-    const engine = cesdk.engine;
+async function main() {
+  // Initialize the headless Creative Engine for server-side processing
+  const engine = await CreativeEngine.init({
+    baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+    // license: process.env.CESDK_LICENSE,
+  });
 
+  try {
     // Load remote assets from a JSON manifest URL
     // The parent directory of the JSON file is used as the base path for relative URLs
     const audioSourceId = await engine.asset.addLocalAssetSourceFromJSONURI(
@@ -190,6 +117,13 @@ class Example implements EditorPlugin {
     });
     console.log(`Loaded ${customAssets.total} custom assets`);
 
+    // Create a scene and apply an asset
+    const scene = engine.scene.create();
+    const page = engine.block.create('page');
+    engine.block.appendChild(scene, page);
+    engine.block.setWidth(page, 800);
+    engine.block.setHeight(page, 600);
+
     // Apply an asset from the loaded source to the scene
     const imageAssets = await engine.asset.findAssets(imageSourceId, {
       page: 0,
@@ -208,73 +142,40 @@ class Example implements EditorPlugin {
     // Remove an asset source when no longer needed
     engine.asset.removeSource(cdnSourceId);
     console.log('Removed asset source:', cdnSourceId);
+
+    // Export the scene to a file
+    const outputDir = './output';
+    if (!existsSync(outputDir)) {
+      mkdirSync(outputDir, { recursive: true });
+    }
+
+    const blob = await engine.block.export(page, { mimeType: 'image/png' });
+    const buffer = Buffer.from(await blob.arrayBuffer());
+    const outputPath = `${outputDir}/remote-asset-result.png`;
+    writeFileSync(outputPath, buffer);
+    console.log(`Exported scene to: ${outputPath}`);
+
+    console.log('\nRemote asset loading completed successfully!');
+  } finally {
+    // Always dispose of the engine to release resources
+    engine.dispose();
   }
 }
 
-export default Example;
+main().catch(console.error);
 ```
 
 This guide covers how to load remote asset manifests, customize base URLs for relative paths, and verify loaded assets.
 
 ## Setup
 
-We start by initializing CE.SDK with default and demo asset sources, then create a design scene.
+We start by initializing the headless Creative Engine for server-side processing.
 
 ```typescript highlight=highlight-setup
-await cesdk.addPlugin(new VideoEditorConfig());
-
-// Add asset source plugins
-await cesdk.addPlugin(new BlurAssetSource());
-await cesdk.addPlugin(new CaptionPresetsAssetSource());
-await cesdk.addPlugin(new ColorPaletteAssetSource());
-await cesdk.addPlugin(new CropPresetsAssetSource());
-await cesdk.addPlugin(
-  new UploadAssetSources({
-    include: [
-      'ly.img.image.upload',
-      'ly.img.video.upload',
-      'ly.img.audio.upload'
-    ]
-  })
-);
-await cesdk.addPlugin(
-  new DemoAssetSources({
-    include: [
-      'ly.img.templates.video.*',
-      'ly.img.image.*',
-      'ly.img.audio.*',
-      'ly.img.video.*'
-    ]
-  })
-);
-await cesdk.addPlugin(new EffectsAssetSource());
-await cesdk.addPlugin(new FiltersAssetSource());
-await cesdk.addPlugin(
-  new PagePresetsAssetSource({
-    include: [
-      'ly.img.page.presets.instagram.*',
-      'ly.img.page.presets.facebook.*',
-      'ly.img.page.presets.x.*',
-      'ly.img.page.presets.linkedin.*',
-      'ly.img.page.presets.pinterest.*',
-      'ly.img.page.presets.tiktok.*',
-      'ly.img.page.presets.youtube.*',
-      'ly.img.page.presets.video.*'
-    ]
-  })
-);
-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());
-
-await cesdk.actions.run('scene.create', {
-  page: {
-    sourceId: 'ly.img.page.presets',
-    assetId: 'ly.img.page.presets.instagram.story',
-    color: { r: 0, g: 0, b: 0, a: 1 }
-  }
+// Initialize the headless Creative Engine for server-side processing
+const engine = await CreativeEngine.init({
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+  // license: process.env.CESDK_LICENSE,
 });
 ```
 
@@ -321,37 +222,37 @@ console.log('Loaded audio assets from:', audioSourceId);
 Call `engine.asset.addLocalAssetSourceFromJSONString()` when you have the JSON content available, for example from an API response or embedded configuration.
 
 ```typescript highlight=highlight-load-from-string
-// Load assets from a JSON string when content is already available
-const customAssetJSON = JSON.stringify({
-  version: '2.0.0',
-  id: 'my.custom.assets',
-  assets: [
-    {
-      id: 'sample_image_1',
-      label: { en: 'Sample Image 1' },
-      meta: {
-        uri: 'https://img.ly/static/ubq_samples/sample_1.jpg',
-        thumbUri: 'https://img.ly/static/ubq_samples/sample_1.jpg',
-        blockType: '//ly.img.ubq/graphic',
-        mimeType: 'image/jpeg'
-      }
-    },
-    {
-      id: 'sample_image_2',
-      label: { en: 'Sample Image 2' },
-      meta: {
-        uri: 'https://img.ly/static/ubq_samples/sample_2.jpg',
-        thumbUri: 'https://img.ly/static/ubq_samples/sample_2.jpg',
-        blockType: '//ly.img.ubq/graphic',
-        mimeType: 'image/jpeg'
-      }
-    }
-  ]
-});
+    // Load assets from a JSON string when content is already available
+    const customAssetJSON = JSON.stringify({
+      version: '2.0.0',
+      id: 'my.custom.assets',
+      assets: [
+        {
+          id: 'sample_image_1',
+          label: { en: 'Sample Image 1' },
+          meta: {
+            uri: 'https://img.ly/static/ubq_samples/sample_1.jpg',
+            thumbUri: 'https://img.ly/static/ubq_samples/sample_1.jpg',
+            blockType: '//ly.img.ubq/graphic',
+            mimeType: 'image/jpeg'
+          }
+        },
+        {
+          id: 'sample_image_2',
+          label: { en: 'Sample Image 2' },
+          meta: {
+            uri: 'https://img.ly/static/ubq_samples/sample_2.jpg',
+            thumbUri: 'https://img.ly/static/ubq_samples/sample_2.jpg',
+            blockType: '//ly.img.ubq/graphic',
+            mimeType: 'image/jpeg'
+          }
+        }
+      ]
+    });
 
-const customSourceId =
-  await engine.asset.addLocalAssetSourceFromJSONString(customAssetJSON);
-console.log('Created custom asset source:', customSourceId);
+    const customSourceId =
+      await engine.asset.addLocalAssetSourceFromJSONString(customAssetJSON);
+    console.log('Created custom asset source:', customSourceId);
 ```
 
 ## Customizing the Base Path
@@ -359,30 +260,30 @@ console.log('Created custom asset source:', customSourceId);
 When loading from a string, pass an optional base path as the second parameter to resolve `{{base_url}}` placeholders in the manifest.
 
 ```typescript highlight=highlight-load-with-base-path
-// When loading from string, you can specify a custom base path
-// for resolving {{base_url}} placeholders in the manifest
-const assetsWithBasePath = JSON.stringify({
-  version: '2.0.0',
-  id: 'my.cdn.assets',
-  assets: [
-    {
-      id: 'cdn_image',
-      label: { en: 'CDN Image' },
-      meta: {
-        uri: '{{base_url}}/sample_1.jpg',
-        thumbUri: '{{base_url}}/sample_1.jpg',
-        blockType: '//ly.img.ubq/graphic',
-        mimeType: 'image/jpeg'
-      }
-    }
-  ]
-});
+    // When loading from string, you can specify a custom base path
+    // for resolving {{base_url}} placeholders in the manifest
+    const assetsWithBasePath = JSON.stringify({
+      version: '2.0.0',
+      id: 'my.cdn.assets',
+      assets: [
+        {
+          id: 'cdn_image',
+          label: { en: 'CDN Image' },
+          meta: {
+            uri: '{{base_url}}/sample_1.jpg',
+            thumbUri: '{{base_url}}/sample_1.jpg',
+            blockType: '//ly.img.ubq/graphic',
+            mimeType: 'image/jpeg'
+          }
+        }
+      ]
+    });
 
-const cdnSourceId = await engine.asset.addLocalAssetSourceFromJSONString(
-  assetsWithBasePath,
-  'https://img.ly/static/ubq_samples/'
-);
-console.log('Created CDN asset source with custom base path:', cdnSourceId);
+    const cdnSourceId = await engine.asset.addLocalAssetSourceFromJSONString(
+      assetsWithBasePath,
+      'https://img.ly/static/ubq_samples/'
+    );
+    console.log('Created CDN asset source with custom base path:', cdnSourceId);
 ```
 
 ## Verifying Loaded Assets
@@ -390,18 +291,18 @@ console.log('Created CDN asset source with custom base path:', cdnSourceId);
 Call `engine.asset.findAssets()` with the source ID to query loaded assets. This confirms the manifest was parsed correctly and assets are available.
 
 ```typescript highlight=highlight-verify-assets
-// Verify loaded assets by querying the asset source
-const audioAssets = await engine.asset.findAssets(audioSourceId, {
-  page: 0,
-  perPage: 10
-});
-console.log(`Loaded ${audioAssets.total} audio assets`);
+    // Verify loaded assets by querying the asset source
+    const audioAssets = await engine.asset.findAssets(audioSourceId, {
+      page: 0,
+      perPage: 10
+    });
+    console.log(`Loaded ${audioAssets.total} audio assets`);
 
-const customAssets = await engine.asset.findAssets(customSourceId, {
-  page: 0,
-  perPage: 10
-});
-console.log(`Loaded ${customAssets.total} custom assets`);
+    const customAssets = await engine.asset.findAssets(customSourceId, {
+      page: 0,
+      perPage: 10
+    });
+    console.log(`Loaded ${customAssets.total} custom assets`);
 ```
 
 ## Applying Remote Assets
@@ -441,6 +342,33 @@ engine.asset.removeSource(cdnSourceId);
 console.log('Removed asset source:', cdnSourceId);
 ```
 
+## Exporting the Result
+
+Export the scene to a file after applying assets.
+
+```typescript highlight=highlight-export
+    // Export the scene to a file
+    const outputDir = './output';
+    if (!existsSync(outputDir)) {
+      mkdirSync(outputDir, { recursive: true });
+    }
+
+    const blob = await engine.block.export(page, { mimeType: 'image/png' });
+    const buffer = Buffer.from(await blob.arrayBuffer());
+    const outputPath = `${outputDir}/remote-asset-result.png`;
+    writeFileSync(outputPath, buffer);
+    console.log(`Exported scene to: ${outputPath}`);
+```
+
+## Cleanup
+
+Always dispose of the engine to release resources when done.
+
+```typescript highlight=highlight-cleanup
+// Always dispose of the engine to release resources
+engine.dispose();
+```
+
 ## Error Handling
 
 Wrap calls in try-catch blocks to handle network errors, invalid JSON, or missing files. Both methods throw errors on failure.
@@ -454,20 +382,22 @@ Common issues include:
 
 ## API Reference
 
-| Method                                             | Purpose                                       |
-| -------------------------------------------------- | --------------------------------------------- |
-| `engine.asset.addLocalAssetSourceFromJSONURI()`    | Load asset definitions from a remote JSON URL |
-| `engine.asset.addLocalAssetSourceFromJSONString()` | Load asset definitions from a JSON string     |
-| `engine.asset.findAssets()`                        | Query assets from a loaded source             |
-| `engine.asset.apply()`                             | Apply an asset to the scene                   |
-| `engine.asset.removeSource()`                      | Remove an asset source                        |
-| `engine.asset.findAllSources()`                    | List all registered asset sources             |
+| Method | Purpose |
+|--------|---------|
+| `engine.asset.addLocalAssetSourceFromJSONURI()` | Load asset definitions from a remote JSON URL |
+| `engine.asset.addLocalAssetSourceFromJSONString()` | Load asset definitions from a JSON string |
+| `engine.asset.findAssets()` | Query assets from a loaded source |
+| `engine.asset.apply()` | Apply an asset to the scene |
+| `engine.asset.removeSource()` | Remove an asset source |
+| `engine.asset.findAllSources()` | List all registered asset sources |
+
+
 
 ---
 
 ## 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

package/assets/docs/guide/import-media/from-remote-source.md

@@ -1,28 +1,26 @@
-> 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) > [Import Media Assets](./import-media.md) > [Import From Remote Source](./import-media/from-remote-source.md)
 
 ---
 
+
+
+
+
 ---
 
 ## Related Pages
 
 - [Import Remote Assets](./import-media/from-remote-source/remote-asset.md) - Load asset definitions from remote JSON files hosted on CDNs or servers into CE.SDK's asset library with filtering and custom base URLs.
-- [From Your Server](./import-media/from-remote-source/your-server.md) - Load images, videos, and audio from your backend servers into CE.SDK for integration with CMS, DAM, or custom asset management systems.
-- [Integrate IMG.LY Premium Assets](./import-media/from-remote-source/imgly-premium-assets.md) - Host IMG.LY premium templates on your infrastructure and integrate them into CE.SDK's asset library for user access.
-- [Integrate Third-Party APIs](./import-media/from-remote-source/third-party.md) - Import media from any third-party service into CE.SDK using custom asset sources.
-- [Integrate Unsplash Stock Images](./import-media/from-remote-source/unsplash.md) - Search and import high-quality stock images from Unsplash directly into CE.SDK.
-- [Integrate Pexels Stock Images](./import-media/from-remote-source/pexels.md) - Search and import high-quality royalty-free stock photos from Pexels directly into CE.SDK.
-- [Integrate Getty Images Stock Photos](./import-media/from-remote-source/getty-images.md) - Search and import premium stock photography from Getty Images directly into CE.SDK using a secure proxy server.
-- [Integrate Soundstripe Audio Library](./import-media/from-remote-source/soundstripe.md) - Search and import royalty-free audio tracks from Soundstripe directly into CE.SDK.
 - [Versioning of Assets](./import-media/from-remote-source/asset-versioning.md) - Learn how CE.SDK handles asset URLs in saved designs, including strategies for managing URL changes, migrating assets, and choosing between scene serialization and archive exports.
 
+
 ---
 
 ## 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

package/assets/docs/guide/import-media/overview.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) > [Import Media Assets](./import-media.md) > [Overview](./import-media/overview.md)
 
@@ -20,13 +20,13 @@ CreativeEditor SDK (CE.SDK) supports importing high-resolution images, video, an
 
 ### Image Resolution Limits
 
-### Video Resolution & Duration Limits
+
 
 ---
 
 ## 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