npm - @imgly/codesign-mcp - Versions diffs - 0.1.5 → 0.1.7 - Mend

@imgly/codesign-mcp 0.1.5 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1085) hide show

package/assets/docs/guide/starterkits/video-captions.md DELETED Viewed

@@ -1,884 +0,0 @@
-> 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).
-**Navigation:** [Starter Kits](./starterkits.md) > [Video Editing](./starterkits/video-editing.md) > [Video Captions](./starterkits/video-captions.md)
----
-Enhance video creation by importing, customizing, and styling captions directly within the editor.
-![Video Captions starter kit showing a professional video editing interface](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
-> **Reading time:** 10 minutes
->
-> **Resources:**
->
-> - [Download examples](https://github.com/imgly/starterkit-video-captions-react-web/archive/refs/tags/release-$UBQ_VERSION$.zip)
-> - [View source on GitHub](https://github.com/imgly/starterkit-video-captions-react-web/tree/release-$UBQ_VERSION$)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/starterkit-video-captions-react-web/tree/release-$UBQ_VERSION$)
-> - [Live demo](https://img.ly/docs/cesdk/examples/starterkit-video-captions/)
----
-## Pre-requisites
-This guide assumes basic familiarity with JavaScript or TypeScript.
-- **Node.js v20+** with npm – [Download](https://nodejs.org/)
-- **Supported browsers** – Chrome 114+, Edge 114+, Firefox 115+, Safari 15.6+<br />
-  See [Browser Support](./browser-support.md) for the full list
-- **fal.ai API key** (for autocaption mode) – [Get your API key](https://fal.ai/dashboard/keys)<br />
-  Required for AI-powered caption generation with ElevenLabs Scribe V2
----
-<Tabs syncKey="project-type">
-  <TabItem label="New Project">
-    ## Get Started
-    Start fresh with a standalone Video Captions project. This creates a complete, ready-to-run application.
-    ## Step 1: Clone the Repository
-    <TerminalTabs>
-      <TerminalTab label="git">
-        git clone https://github.com/imgly/starterkit-video-captions-react-web.git
-      </TerminalTab>
-      <TerminalTab label="degit">
-        npx degit imgly/starterkit-video-captions-react-web starterkit-video-captions-react-web
-      </TerminalTab>
-    </TerminalTabs>
-    The `src/` folder contains the editor code:
-    ```
-    src/
-    ├── app/                          # Demo application
-    ├── imgly/
-    │   ├── config/
-    │   │   ├── actions.ts                # Export/import actions
-    │   │   ├── features.ts               # Feature toggles
-    │   │   ├── i18n.ts                   # Translations
-    │   │   ├── plugin.ts                 # Main configuration plugin
-    │   │   ├── settings.ts               # Engine settings
-    │   │   └── ui/
-    │   │       ├── canvas.ts                 # Canvas configuration
-    │   │       ├── components.ts             # Custom component registration
-    │   │       ├── dock.ts                   # Dock layout configuration
-    │   │       ├── index.ts                  # Combines UI customization exports
-    │   │       ├── inspectorBar.ts           # Inspector bar layout
-    │   │       ├── navigationBar.ts          # Navigation bar layout
-    │   │       └── panel.ts                  # Panel configuration
-    │   ├── index.ts                  # Editor initialization function
-    │   └── plugins/
-    │       └── auto-caption.ts
-    └── index.tsx                 # Application entry point
-    ```
-    ## Step 2: Install Dependencies
-    Install the required packages:
-    <TerminalTabs syncKey="package-manager">
-      <TerminalTab label="npm">
-        cd starterkit-video-captions-react-web
-        npm install
-      </TerminalTab>
-      <TerminalTab label="pnpm">
-        cd starterkit-video-captions-react-web
-        pnpm install
-      </TerminalTab>
-      <TerminalTab label="yarn">
-        cd starterkit-video-captions-react-web
-        yarn
-      </TerminalTab>
-    </TerminalTabs>
-    ## Step 3: Download Assets
-    CE.SDK requires engine assets (fonts, icons, UI elements) to function. These must be served as static files from your project's `public/` directory.
-    <TerminalTabs>
-      <TerminalTab label="Download">
-        curl -O https://cdn.img.ly/packages/imgly/cesdk-js/$UBQ\_VERSION$/imgly-assets.zip
-        unzip imgly-assets.zip -d public/
-        rm imgly-assets.zip
-      </TerminalTab>
-    </TerminalTabs>
-    > **Asset Configuration:** The starter kit is pre-configured to load assets from `/assets`. If you place assets in a different location, update the `baseURL` in `src/index.tsx`.
-    ```typescript title="src/index.tsx"
-    const config = {
-      // ...
-      baseURL: '/assets'
-      // ...
-    };
-    ```
-    ## Step 4: Run the Development Server
-    <TerminalTabs syncKey="package-manager">
-      <TerminalTab label="npm">
-        npm run dev
-      </TerminalTab>
-      <TerminalTab label="pnpm">
-        pnpm run dev
-      </TerminalTab>
-      <TerminalTab label="yarn">
-        yarn dev
-      </TerminalTab>
-    </TerminalTabs>
-    Open `http://localhost:5173` in your browser.
-  </TabItem>
-  <TabItem label="Existing Project">
-    ## Get Started
-    Integrate the Video Captions into an existing web application. This adds the editor configuration to your current project structure.
-    ## Step 1: Clone
-    <TerminalTabs>
-      <TerminalTab label="Navigate">
-        cd your-project
-      </TerminalTab>
-    </TerminalTabs>
-    Clone the starter kit and copy the editor configuration to your project:
-    <TerminalTabs>
-      <TerminalTab label="git">
-        git clone https://github.com/imgly/starterkit-video-captions-react-web.git
-        cp -r starterkit-video-captions-react-web/src/imgly ./src/imgly
-        rm -rf starterkit-video-captions-react-web
-      </TerminalTab>
-      <TerminalTab label="degit">
-        npx degit imgly/starterkit-video-captions-react-web/src/imgly ./src/imgly
-      </TerminalTab>
-    </TerminalTabs>
-    > **Adjust Path:** The default destination is `./src/imgly`. Adjust the path to match your project structure.
-    The `imgly/` folder contains the editor configuration:
-    ```
-    imgly/
-    ├── config/
-    │   ├── actions.ts                # Export/import actions
-    │   ├── features.ts               # Feature toggles
-    │   ├── i18n.ts                   # Translations
-    │   ├── plugin.ts                 # Main configuration plugin
-    │   ├── settings.ts               # Engine settings
-    │   └── ui/
-    │       ├── canvas.ts                 # Canvas configuration
-    │       ├── components.ts             # Custom component registration
-    │       ├── dock.ts                   # Dock layout configuration
-    │       ├── index.ts                  # Combines UI customization exports
-    │       ├── inspectorBar.ts           # Inspector bar layout
-    │       ├── navigationBar.ts          # Navigation bar layout
-    │       └── panel.ts                  # Panel configuration
-    ├── index.ts                  # Editor initialization function
-    └── plugins/
-        └── auto-caption.ts
-    ```
-    ## Step 2: Install Dependencies
-    Install the required packages for the editor:
-    ### Core Editor
-    Install the Creative Editor SDK:
-    <TerminalTabs syncKey="package-manager">
-      <TerminalTab label="npm">
-        npm install @cesdk/cesdk-js@$UBQ\_VERSION$
-      </TerminalTab>
-      <TerminalTab label="pnpm">
-        pnpm add @cesdk/cesdk-js@$UBQ\_VERSION$
-      </TerminalTab>
-      <TerminalTab label="yarn">
-        yarn add @cesdk/cesdk-js@$UBQ\_VERSION$
-      </TerminalTab>
-    </TerminalTabs>
-    ### Autocaption Plugin
-    Add AI-powered caption generation with ElevenLabs Scribe V2:
-    <TerminalTabs syncKey="package-manager">
-      <TerminalTab label="npm">
-        npm install @imgly/plugin-autocaption-web@$UBQ\_VERSION$
-      </TerminalTab>
-      <TerminalTab label="pnpm">
-        pnpm add @imgly/plugin-autocaption-web@$UBQ\_VERSION$
-      </TerminalTab>
-      <TerminalTab label="yarn">
-        yarn add @imgly/plugin-autocaption-web@$UBQ\_VERSION$
-      </TerminalTab>
-    </TerminalTabs>
-    This plugin provides automatic speech-to-text transcription and caption generation for videos.
-    ## Step 3: Download Assets
-    CE.SDK requires engine assets (fonts, icons, UI elements) to function. These must be served as static files from your project's `public/` directory.
-    <TerminalTabs>
-      <TerminalTab label="Download">
-        curl -O https://cdn.img.ly/packages/imgly/cesdk-js/$UBQ\_VERSION$/imgly-assets.zip
-        unzip imgly-assets.zip -d public/
-        rm imgly-assets.zip
-      </TerminalTab>
-    </TerminalTabs>
-    > **Asset Configuration:** The starter kit is pre-configured to load assets from `/assets`. If you place assets in a different location, update the `baseURL` in Step 5: Initialize the Editor.
-    ## Step 4: Add a Container Element
-    Add a container element to your HTML where the editor will be mounted:
-    ```html
-    <div id="cesdk_container" style="width: 100%; height: 100vh;"></div>
-    ```
-    ## Step 5: Initialize the Editor
-    Choose your caption mode and initialize the editor accordingly:
-    <Tabs syncKey="editor-mode">
-      <TabItem label="Autocaption">
-        ```typescript title="src/index.tsx"
-        import CreativeEditorSDK from '@cesdk/cesdk-js';
-        import { initVideoCaptionsAutocaptionEditor } from './imgly';
-        const config = {
-          userId: 'your-user-id',
-          baseURL: '/assets'
-          // license: 'YOUR_LICENSE_KEY',
-        };
-        CreativeEditorSDK.create('#cesdk_container', config)
-          .then(async (cesdk) => {
-            await initVideoCaptionsAutocaptionEditor(cesdk);
-          })
-          .catch((error) => {
-            console.error('Failed to initialize CE.SDK:', error);
-          });
-        ```
-      </TabItem>
-      <TabItem label="Blank">
-        ```typescript title="src/index.tsx"
-        import CreativeEditorSDK from '@cesdk/cesdk-js';
-        import { initVideoCaptionsBlankEditor } from './imgly';
-        const config = {
-          userId: 'your-user-id',
-          baseURL: '/assets'
-          // license: 'YOUR_LICENSE_KEY',
-        };
-        CreativeEditorSDK.create('#cesdk_container', config)
-          .then(async (cesdk) => {
-            await initVideoCaptionsBlankEditor(cesdk);
-          })
-          .catch((error) => {
-            console.error('Failed to initialize CE.SDK:', error);
-          });
-        ```
-      </TabItem>
-      <TabItem label="Import">
-        ```typescript title="src/index.tsx"
-        import CreativeEditorSDK from '@cesdk/cesdk-js';
-        import { initVideoCaptionsImportEditor } from './imgly';
-        const config = {
-          userId: 'your-user-id',
-          baseURL: '/assets'
-          // license: 'YOUR_LICENSE_KEY',
-        };
-        CreativeEditorSDK.create('#cesdk_container', config)
-          .then(async (cesdk) => {
-            await initVideoCaptionsImportEditor(cesdk);
-          })
-          .catch((error) => {
-            console.error('Failed to initialize CE.SDK:', error);
-          });
-        ```
-      </TabItem>
-      <TabItem label="Pre-captioned">
-        ```typescript title="src/index.tsx"
-        import CreativeEditorSDK from '@cesdk/cesdk-js';
-        import { initVideoCaptionsPreCaptionedEditor } from './imgly';
-        const config = {
-          userId: 'your-user-id',
-          baseURL: '/assets'
-          // license: 'YOUR_LICENSE_KEY',
-        };
-        CreativeEditorSDK.create('#cesdk_container', config)
-          .then(async (cesdk) => {
-            await initVideoCaptionsPreCaptionedEditor(cesdk);
-          })
-          .catch((error) => {
-            console.error('Failed to initialize CE.SDK:', error);
-          });
-        ```
-      </TabItem>
-    </Tabs>
-  </TabItem>
-</Tabs>
-## Caption Modes
-The Video Captions starter kit supports four distinct workflows for working with video captions:
-### Autocaption Mode
-Auto-generate captions using AI-powered speech-to-text transcription with ElevenLabs Scribe V2:
-```typescript title="src/index.ts"
-await initVideoCaptionsAutocaptionEditor(cesdk);
-```
-This mode:
-- Loads a video with audio ready for transcription
-- Integrates the `@imgly/plugin-autocaption-web` plugin
-- Configures the ElevenLabs Scribe V2 provider via fal.ai proxy
-- Automatically transcribes speech and generates styled captions
-- Opens the caption inspector panel for editing
-**Prerequisites:**
-- fal.ai API key configured in `VITE_AUTOCAPTION_PROXY_URL` environment variable
-- Default proxy: `https://proxy.img.ly/api/proxy/falai`
-### Blank Mode
-Start with an empty video canvas for manual caption creation:
-```typescript title="src/index.ts"
-await initVideoCaptionsBlankEditor(cesdk);
-```
-This mode:
-- Creates a new blank video scene (1280x720)
-- Lets you import your own videos
-- Manually create and style captions from scratch
-- No AI processing required
-### Import Mode
-Import existing SRT subtitle files and edit them:
-```typescript title="src/index.ts"
-await initVideoCaptionsImportEditor(cesdk);
-```
-This mode:
-- Loads a video for caption placement
-- Allows importing SRT files with existing captions
-- Edit timing, styling, and positioning
-- Export back to video with embedded captions
-### Pre-captioned Mode
-Edit videos that already have embedded captions:
-```typescript title="src/index.ts"
-await initVideoCaptionsPreCaptionedEditor(cesdk);
-```
-This mode:
-- Loads a video with captions already embedded
-- Automatically selects the first caption for editing
-- Full access to caption styling and timing controls
-- Refine existing captions without re-transcribing
-## Autocaption Setup
-To enable AI-powered caption generation, configure the fal.ai proxy URL:
-```typescript title="src/imgly/index.ts"
-import AutocaptionPlugin from '@imgly/plugin-autocaption-web';
-import { ElevenLabsScribeV2 } from '@imgly/plugin-autocaption-web/fal-ai';
-// Configure the proxy URL (default: https://proxy.img.ly/api/proxy/falai)
-const AUTOCAPTION_PROXY_URL =
-  import.meta.env.VITE_AUTOCAPTION_PROXY_URL ||
-  'https://proxy.img.ly/api/proxy/falai';
-// Add the autocaption plugin with ElevenLabs Scribe V2 provider
-await cesdk.addPlugin(
-  AutocaptionPlugin({
-    provider: ElevenLabsScribeV2({
-      proxyUrl: AUTOCAPTION_PROXY_URL
-    })
-  })
-);
-```
-The proxy URL should point to a server that forwards requests to fal.ai with your API key. For production use, deploy your own proxy to keep the API key secure.
-## Caption Inspector Panel
-The caption inspector panel provides comprehensive controls for editing captions:
-```typescript
-// Open the caption inspector panel programmatically
-cesdk.ui.openPanel('//ly.img.panel/inspector/caption');
-```
-The panel includes:
-- **Caption text editor** - Edit caption content with live preview
-- **Timing controls** - Adjust start time and duration
-- **Styling options** - Font, size, color, background, alignment
-- **Positioning** - Move captions anywhere on the video
-- **Caption presets** - Apply pre-designed caption styles
-The panel automatically opens when using `autocaption` mode, but you can open it manually in any mode using the code above.
-## Set Up a Scene
-Each caption mode has a dedicated init function that handles scene setup automatically.
-For custom workflows beyond the predefined modes, you can load content manually:
-```typescript title="src/index.ts"
-// After initialization, load your own video
-await cesdk.createFromVideo('https://example.com/video.mp4');
-// Or load from a template archive with captions
-await cesdk.loadFromArchiveURL('https://example.com/template.zip');
-// Or load from a scene file
-await cesdk.loadFromURL('https://example.com/scene.json');
-```
-The predefined init functions load appropriate scenes:
-- **autocaption** - Loads a video ready for AI transcription
-- **blank** - Creates an empty 1280x720 video scene
-- **import** - Loads a video for SRT import
-- **pre-captioned** - Loads a video with embedded captions
-> **More Loading Options:** See [Open the Editor](./open-the-editor.md) for all available loading methods.
-## Customize Assets
-The Video Captions uses asset source plugins to provide built-in libraries for video clips, audio, effects, stickers, and fonts. The starter kit includes a curated selection—customize what's included based on your needs.
-Asset sources are added via plugins in `src/index.ts`. Enable or disable individual sources:
-```typescript title="src/index.ts"
-import {
-  FiltersAssetSource,
-  StickerAssetSource,
-  TextAssetSource,
-  VectorShapeAssetSource,
-  EffectsAssetSource
-  // ...
-} from '@cesdk/cesdk-js/plugins';
-// Add only the sources you need
-await cesdk.addPlugin(new FiltersAssetSource());
-await cesdk.addPlugin(new StickerAssetSource());
-await cesdk.addPlugin(new TextAssetSource());
-await cesdk.addPlugin(new VectorShapeAssetSource());
-await cesdk.addPlugin(new EffectsAssetSource());
-// ...
-```
-> **Available Asset Sources:** See [Asset Source Plugins](./plugins/asset-sources.md) for the complete list of available sources.
-For production deployments, self-hosting assets is required—the IMG.LY CDN is intended for development only. See [Serve Assets](./serve-assets.md) for downloading assets, configuring `baseURL`, and excluding unused sources to optimize load times.
-## Configure Actions
-Actions are functions that handle user interactions like exporting videos, saving scenes, and importing files. CE.SDK provides built-in actions that you can run directly or override with custom implementations.
-**Key built-in actions:**
-- `exportDesign` – Export the current video to MP4 format
-- `saveScene` – Save the scene as a JSON string for later editing
-- `importScene` – Import a previously saved scene (supports `.scene` and `.cesdk` formats)
-- `exportScene` – Export the scene as a JSON file or `.cesdk` archive with all assets
-- `uploadFile` – Handle file uploads with progress tracking
-Use `cesdk.actions.run()` to execute any action:
-```typescript
-// Run a built-in action
-await cesdk.actions.run('exportDesign', { mimeType: 'video/mp4' });
-```
-#### Import from File Picker
-```typescript title="src/imgly/config/actions.ts"
-// Let users open videos from their device
-cesdk.actions.register('importVideo', async () => {
-  const blobURL = await cesdk.utils.loadFile({
-    accept: 'video/*',
-    returnType: 'objectURL'
-  });
-  await cesdk.createFromVideo(blobURL);
-});
-```
-#### Export and Save
-```typescript title="src/imgly/config/actions.ts"
-// Register export action that downloads the edited video
-cesdk.actions.register('exportDesign', async (exportOptions) => {
-  const { blobs, options } = await cesdk.utils.export(exportOptions);
-  await cesdk.utils.downloadFile(blobs[0], options.mimeType);
-});
-```
-#### Upload to Your Backend
-```typescript title="src/imgly/config/actions.ts"
-// Override the built-in exportDesign action to send to your server
-cesdk.actions.register('exportDesign', async (exportOptions) => {
-  const { blobs } = await cesdk.utils.export(exportOptions);
-  const formData = new FormData();
-  formData.append('video', blobs[0], 'edited-video.mp4');
-  const response = await fetch('/api/upload', {
-    method: 'POST',
-    body: formData
-  });
-  const { url } = await response.json();
-  console.log('Uploaded to:', url);
-});
-```
-> **Learn More:** See [Actions](./actions.md) for the full list of built-in actions, how to run them, and how to register custom actions.
----
-## Customize (Optional)
-### Theming
-CE.SDK supports light and dark themes out of the box, plus automatic system preference detection. Switch between themes programmatically:
-```typescript title="src/imgly/config/settings.ts"
-// 'light' | 'dark' | 'system' | (() => 'light' | 'dark')
-cesdk.ui.setTheme('dark');
-```
-See [Theming](./user-interface/appearance/theming.md) for custom color schemes, CSS variables, and advanced styling options.
-### Localization
-Customize UI labels and add support for multiple languages. The i18n system supports translation keys for all UI elements:
-```typescript title="src/imgly/config/i18n.ts"
-// Override specific labels
-cesdk.i18n.setTranslations({
-  en: {
-    'actions.export.video': 'Download Video',
-    'common.cancel': 'Cancel',
-    'common.apply': 'Apply'
-  }
-});
-// Add a new language
-cesdk.i18n.setTranslations({
-  de: {
-    'actions.export.video': 'Video herunterladen'
-  }
-});
-// Set the active locale
-cesdk.i18n.setLocale('de');
-```
-See [Localization](./user-interface/localization.md) for supported languages, translation key reference, and right-to-left language support.
-### UI Layout
-![CE.SDK Editor UI Areas](https://img.ly/docs/cesdk/../_shared/assets/CESDK-UI.png)
-Customize the editor interface by modifying the dock, inspector bar, navigation bar, and canvas menu. CE.SDK provides Order APIs to control which components appear and in what sequence.
-```typescript title="src/imgly/config/ui/navigationBar.ts"
-// Get current navigation bar components
-const navOrder = cesdk.ui.getNavigationBarOrder();
-// Add a custom button to the navigation bar
-cesdk.ui.insertNavigationBarOrderComponent(
-  'ly.img.spacer',
-  { id: 'my-custom-action' },
-  'after'
-);
-// Rearrange dock items
-cesdk.ui.setDockOrder([
-  'ly.img.assetLibrary.dock',
-  'ly.img.separator',
-  'my-custom-dock-item'
-]);
-// Customize the inspector bar
-cesdk.ui.setInspectorBarOrder([
-  'ly.img.fill.inspectorBar',
-  'ly.img.separator',
-  'ly.img.filter.inspectorBar'
-]);
-```
-The Order API methods follow a consistent pattern across all UI areas:
-- `get*Order()` – Retrieve the current component order
-- `set*Order()` – Replace the entire order
-- `insert*OrderComponent()` – Add components relative to existing ones
-See [Dock](./user-interface/customization/dock.md), [Inspector Bar](./user-interface/customization/inspector-bar.md), [Navigation Bar](./user-interface/customization/navigation-bar.md), [Canvas Menu](./user-interface/customization/canvas-menu.md), and [Canvas](./user-interface/customization/canvas.md) for detailed layout customization options.
-### Custom Components
-Build custom UI components using the builder system and integrate them in the editor. Custom components receive reactive state updates and can interact with the engine API.
-```typescript title="src/imgly/config/ui/components.ts"
-// Register a custom component
-cesdk.ui.registerComponent('my-custom-button', ({ builder, engine }) => {
-  const selectedBlocks = engine.block.findAllSelected();
-  builder.Button('apply-effect', {
-    label: 'Apply Effect',
-    isDisabled: selectedBlocks.length === 0,
-    onClick: () => {
-      // Apply custom logic to selected blocks
-    }
-  });
-});
-// Add the component to the navigation bar
-cesdk.ui.insertNavigationBarOrderComponent(
-  'ly.img.spacer',
-  'my-custom-button',
-  'after'
-);
-```
-Custom components automatically re-render when the engine state they depend on changes—no manual subscription management required.
-See [Register New Component](./user-interface/ui-extensions/register-new-component.md) for the complete builder API and component patterns.
-### Settings & Features
-Fine-tune editor behavior through settings and features.
-**Settings** configure core engine behavior—rendering, input handling, and history management:
-```typescript title="src/imgly/config/settings.ts"
-cesdk.engine.editor.setSettingBool('page/dimOutOfPageAreas', true);
-cesdk.engine.editor.setSettingBool('mouse/enableZoomControl', true);
-cesdk.engine.editor.setSettingBool('features/undoHistory', true);
-```
-**Features** toggle which editing tools and panels appear in the UI:
-```typescript title="src/imgly/config/features.ts"
-// Toggle editor features
-cesdk.feature.enable('ly.img.trim', true);
-cesdk.feature.enable('ly.img.filter', true);
-cesdk.feature.enable('ly.img.adjustment', true);
-```
-See [Settings](./settings.md) and [Features](./user-interface/customization/disable-or-enable.md) for the complete reference.
-### Explore Plugins
-CE.SDK has a rich plugin ecosystem that extends the editor with powerful capabilities. Plugins can add new features, integrate third-party services, or customize editor behavior.
-#### AI Integration
-Extend the editor with generative AI capabilities for text-to-image generation, image enhancement, and intelligent editing features. CE.SDK integrates with various AI providers.
-```typescript title="src/imgly/config/plugin.ts"
-import AIPlugin from '@imgly/plugin-ai-generation';
-// Configure AI generation
-await cesdk.addPlugin(
-  AIPlugin({
-    provider: 'your-ai-provider',
-    apiKey: 'your-api-key'
-  })
-);
-```
-See [AI Integration](./user-interface/ai-integration.md) for provider setup and supported AI features.
-#### Custom Asset Sources
-Connect external asset libraries like Unsplash, Getty Images, or your own content management system. Asset sources let users browse and insert content from any source.
-```typescript title="src/imgly/config/plugin.ts"
-import UnsplashAssetSource from '@imgly/plugin-unsplash';
-// Add Unsplash integration
-await cesdk.addPlugin(
-  UnsplashAssetSource({
-    accessKey: 'your-unsplash-access-key'
-  })
-);
-```
-See [Custom Asset Sources](./import-media/from-remote-source/unsplash.md) for integration patterns.
-#### Discover More Plugins
-Explore the full plugin ecosystem in the [IMG.LY plugins repository](https://github.com/imgly/plugins). Available plugins include:
-- **Vectorizer** – Convert raster images to vectors
-- **Design Presets** – Pre-built design templates
-- **Social Media Templates** – Platform-specific sizing
-- **And more** – Check the repository for the latest additions
----
-## Key Capabilities
-The Video Captions starter kit includes everything needed for professional video captioning.
-<CapabilityGrid
-features={[
-{
-title: 'AI Caption Generation',
-description:
-'Auto-generate accurate captions using ElevenLabs Scribe V2 speech-to-text technology.',
-imageId: 'text-editing',
-},
-{
-title: 'Caption Styling',
-description:
-'Customize fonts, colors, backgrounds, alignment, and positioning with professional presets.',
-imageId: 'filters',
-},
-{
-title: 'SRT Import/Export',
-description:
-'Import existing SRT subtitle files and export captions in standard subtitle formats.',
-imageId: 'asset-libraries',
-},
-{
-title: 'Timeline Control',
-description:
-'Precise timing controls for caption start time and duration with visual timeline feedback.',
-imageId: 'transform',
-},
-{
-title: 'Caption Inspector',
-description:
-'Dedicated inspector panel for editing caption text, timing, styling, and positioning.',
-imageId: 'text-editing',
-},
-{
-title: 'Video Export',
-description:
-'Export videos with embedded captions to MP4 format with customizable quality settings.',
-imageId: 'client-side',
-},
-]}
-/>
-<br />
-> **Free Trial:** [Sign up for a free trial](https://img.ly/forms/free-trial) to get a license key and remove the watermark.
----
-## Troubleshooting
-### Editor doesn't load
-- **Check the container element exists**: Ensure your container element is in the DOM before calling `create()`
-- **Verify the baseURL**: Assets must be accessible from the CDN or your self-hosted location
-- **Check console errors**: Look for CORS or network errors in browser developer tools
-### Autocaption doesn't work
-- **Check fal.ai API key**: Verify your API key is configured correctly in the proxy URL
-- **Verify proxy URL**: Ensure `VITE_AUTOCAPTION_PROXY_URL` points to a working proxy server
-- **Check network requests**: Look for failed requests to the fal.ai API in DevTools Network tab
-- **Video has no audio**: The autocaption feature requires audio to transcribe
-### Caption Inspector doesn't open
-- **Check video captions feature**: Ensure `features/videoCaptionsEnabled` is set to `true` in settings
-- **Verify caption mode**: The inspector opens automatically in `autocaption` mode
-- **Open manually**: Use `cesdk.ui.openPanel('//ly.img.panel/inspector/caption')` to open it programmatically
-### SRT import fails
-- **Check file format**: Ensure the SRT file follows standard subtitle formatting
-- **Verify encoding**: SRT files should use UTF-8 encoding
-- **Check timestamps**: Timestamps must be in the format `HH:MM:SS,mmm --> HH:MM:SS,mmm`
-### Captions don't appear in export
-- **Wait for caption rendering**: Ensure captions are visible in the editor before exporting
-- **Check caption timing**: Verify caption start times and durations are correct
-- **Export as MP4**: Captions are embedded in the video during MP4 export
-### Video export takes too long
-- **Reduce resolution**: Lower output resolution significantly improves encoding speed
-- **Shorten clip length**: Longer videos take proportionally longer to encode
-- **Check system resources**: Video encoding is CPU-intensive; close other applications
-### Watermark appears in production
-- **Add your license key**: Set the `license` property in your configuration
-- **Sign up for a trial**: Get a free trial license at [img.ly/forms/free-trial](https://img.ly/forms/free-trial)
----
-## Next Steps
-- [Configuration](./configuration.md) – Complete list of initialization options
-- [Serve Assets](./serve-assets.md) – Self-host engine assets for production
-- [Actions](./actions.md) – Build custom export and save workflows
-- [Theming](./user-interface/appearance/theming.md) – Customize colors and appearance
-- [Localization](./user-interface/localization.md) – Add translations and language support
----
-## More Resources
-- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS 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