@imgly/codesign-mcp 0.1.5 → 0.1.6

package/assets/docs/guide/user-interface/ai-integration/custom-provider.md

@@ -1,853 +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:** [Guides](./guides.md) > [AI Integration](./user-interface/ai-integration.md) > [Custom AI Provider](./user-interface/ai-integration/custom-provider.md)
-
----
-
-Build a custom AI-powered image generation provider for CE.SDK using the `@imgly/plugin-ai-generation-web` package. You'll implement an AI provider from scratch using the schema-based approach and integrate it seamlessly with the editor.
-
-![Custom AI Provider](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
-
-> **Reading time:** 15 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)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-user-interface-ai-integration-custom-provider-browser/)
-
-This guide walks you through creating an image generation provider that connects to your own AI service. You'll learn about the provider interface, OpenAPI schema-based input configuration, quick actions, middleware patterns, and CE.SDK integration.
-
-```typescript file=@cesdk_web_examples/guides-user-interface-ai-integration-custom-provider-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 {
-  CommonProviderConfiguration,
-  ImageOutput,
-  Provider,
-  loggingMiddleware,
-  uploadMiddleware
-} from '@imgly/plugin-ai-generation-web';
-import ImageGeneration from '@imgly/plugin-ai-image-generation-web';
-import type CreativeEditorSDK from '@cesdk/cesdk-js';
-import packageJson from './package.json';
-import apiSchema from './myApiSchema.json';
-
-// Define your input type based on your schema
-interface MyProviderInput {
-  prompt: string;
-  width: number;
-  height: number;
-  style: string;
-  image_url?: string; // For image-to-image operations
-}
-
-// Define provider configuration interface extending CommonProviderConfiguration
-interface MyProviderConfiguration extends CommonProviderConfiguration<
-  MyProviderInput,
-  ImageOutput
-> {
-  // Add any provider-specific configuration here
-  customApiKey?: string;
-}
-
-// Mock API function that simulates image generation
-// In production, this would be replaced with actual API calls
-async function mockGenerateImage(
-  input: MyProviderInput,
-  _abortSignal?: AbortSignal
-): Promise<{ imageUrl: string }> {
-  // Simulate network delay
-  await new Promise((resolve) => setTimeout(resolve, 1500));
-
-  // Return real demo image URLs based on the style
-  const sampleImages: Record<string, string> = {
-    photorealistic:
-      'https://cdn.img.ly/assets/demo/v3/ly.img.image/images/sample_1.jpg',
-    cartoon:
-      'https://cdn.img.ly/assets/demo/v3/ly.img.image/images/sample_2.jpg',
-    sketch:
-      'https://cdn.img.ly/assets/demo/v3/ly.img.image/images/sample_3.jpg',
-    painting:
-      'https://cdn.img.ly/assets/demo/v3/ly.img.image/images/sample_4.jpg'
-  };
-
-  return {
-    imageUrl: sampleImages[input.style] || sampleImages.photorealistic
-  };
-}
-
-// Create a function that returns your provider
-export function MyImageProvider(
-  _config: MyProviderConfiguration
-): (context: {
-  cesdk: CreativeEditorSDK;
-}) => Promise<Provider<'image', MyProviderInput, ImageOutput>> {
-  // Return a function that returns the provider
-  return async ({ cesdk: _cesdk }) => {
-    // Create and return the provider
-    const provider: Provider<'image', MyProviderInput, ImageOutput> = {
-      // Unique identifier for your provider
-      id: 'my-image-provider',
-
-      // Define output type as 'image'
-      kind: 'image',
-
-      // Initialize your provider
-      initialize: async () => {
-        console.log('Initializing my image provider');
-        // Any setup needed (e.g., API client initialization)
-      },
-
-      // Define input panel and UI using schema
-      input: {
-        panel: {
-          type: 'schema',
-          document: apiSchema, // Your OpenAPI schema
-          inputReference: '#/components/schemas/GenerationInput', // Reference to your input schema
-          userFlow: 'placeholder', // Creates a block first, then updates it with the generated content
-          orderExtensionKeyword: 'x-order-properties', // Used to control property display order
-
-          // Convert API input to block parameters
-          getBlockInput: async (input) => ({
-            image: {
-              width: input.width || 512,
-              height: input.height || 512,
-              label: `AI: ${input.prompt?.substring(0, 20)}...`
-            }
-          })
-        },
-
-        // Add quick actions for canvas menu
-        quickActions: {
-          supported: {
-            // Map quick action IDs to provider input transformations
-            'ly.img.editImage': {
-              mapInput: (quickActionInput) => ({
-                prompt: quickActionInput.prompt,
-                image_url: quickActionInput.uri,
-                width: 512,
-                height: 512,
-                style: 'photorealistic'
-              })
-            },
-            'ly.img.swapBackground': {
-              mapInput: (quickActionInput) => ({
-                prompt: quickActionInput.prompt,
-                image_url: quickActionInput.uri,
-                width: 512,
-                height: 512,
-                style: 'photorealistic'
-              })
-            },
-            'ly.img.createVariant': {
-              mapInput: (quickActionInput) => ({
-                prompt: quickActionInput.prompt,
-                image_url: quickActionInput.uri,
-                width: 512,
-                height: 512,
-                style: 'photorealistic'
-              })
-            },
-            'ly.img.styleTransfer': {
-              mapInput: (quickActionInput) => ({
-                prompt: quickActionInput.style,
-                image_url: quickActionInput.uri,
-                width: 512,
-                height: 512,
-                style: 'photorealistic'
-              })
-            }
-          }
-        }
-      },
-
-      // Define output generation behavior
-      output: {
-        // Allow cancellation of generation
-        abortable: true,
-
-        // Store generated assets in browser's IndexedDB
-        history: '@imgly/indexedDB',
-
-        // Add middleware for logging and uploading
-        middleware: [
-          loggingMiddleware({ enable: true }),
-          // Example of upload middleware that stores generated images on your server
-          uploadMiddleware(async (output: ImageOutput) => {
-            // In production, upload the image to your server
-            // For this example, we just return the output as-is
-            console.log('Upload middleware: Processing output', output.url);
-            return output;
-          }),
-          // Custom error handling middleware
-          async (input, options, next) => {
-            try {
-              return await next(input, options);
-            } catch (error: any) {
-              // Prevent default error notification
-              options.preventDefault();
-
-              // Show custom error notification
-              options.cesdk?.ui.showNotification({
-                type: 'error',
-                message: `Image generation failed: ${error.message}`
-              });
-
-              throw error;
-            }
-          }
-        ],
-
-        // Configure success/error notifications
-        notification: {
-          success: {
-            show: true,
-            message: 'Image generated successfully!'
-          },
-          error: {
-            show: true,
-            message: (context) => `Generation failed: ${context.error}`
-          }
-        },
-
-        // The core generation function
-        generate: async (input, { abortSignal }) => {
-          try {
-            // Use mock API for demonstration
-            // In production, replace with actual API call:
-            // const response = await fetch(config.proxyUrl, { ... });
-            const data = await mockGenerateImage(input, abortSignal);
-
-            // Return the image URL
-            return {
-              kind: 'image',
-              url: data.imageUrl
-            };
-          } catch (error) {
-            console.error('Image generation failed:', error);
-            throw error;
-          }
-        }
-      }
-    };
-
-    return provider;
-  };
-}
-
-class Example implements EditorPlugin {
-  name = packageJson.name;
-  version = packageJson.version;
-
-  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
-    if (!cesdk) {
-      throw new Error('CE.SDK instance is required for this plugin');
-    }
-
-    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());
-
-    await cesdk.actions.run('scene.create', {
-      page: {
-        sourceId: 'ly.img.page.presets',
-        assetId: 'ly.img.page.presets.print.iso.a6.landscape'
-      }
-    });
-
-    // Add translations for the custom provider
-    cesdk.i18n.setTranslations({
-      en: {
-        'panel.my-image-provider.generate': 'Generate Image'
-      }
-    });
-
-    // Add your image generation provider
-    await cesdk.addPlugin(
-      ImageGeneration({
-        providers: {
-          text2image: MyImageProvider({
-            proxyUrl: 'https://your-proxy-server.com/api/proxy',
-            headers: {
-              'x-client-version': '1.0.0',
-              'x-request-source': 'cesdk-tutorial'
-            }
-          })
-        },
-        debug: true
-      })
-    );
-
-    // Add the dock component to open the AI image generation panel
-    cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [
-      'ly.img.ai.image-generation.dock',
-      ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' })
-    ]);
-
-    // Open the AI Image Generation panel
-    cesdk.ui.openPanel('ly.img.ai.image-generation');
-  }
-}
-
-// Example: Control which features are visible in the UI
-// eslint-disable-next-line @typescript-eslint/no-unused-vars -- Reference implementation exported as example snippet in docs.
-function configureFeatures(cesdk: CreativeEditorSDK) {
-  // Hide the provider dropdown if you only have one provider
-  cesdk.feature.set(
-    'ly.img.plugin-ai-image-generation-web.providerSelect',
-    () => false
-  );
-  // Enable text-to-image generation
-  cesdk.feature.set(
-    'ly.img.plugin-ai-image-generation-web.fromText',
-    () => true
-  );
-  // Disable image-to-image generation
-  cesdk.feature.set(
-    'ly.img.plugin-ai-image-generation-web.fromImage',
-    () => false
-  );
-}
-
-export default Example;
-```
-
-This guide covers:
-
-- Understanding the Provider interface for image generation
-- Creating an OpenAPI schema for input configuration
-- Implementing a custom image provider with quick actions
-- Adding middleware for logging, uploads, and error handling
-- Integrating the provider with CE.SDK
-
-## Prerequisites
-
-- Basic knowledge of TypeScript and React
-- Familiarity with CreativeEditor SDK
-- An image generation API to integrate with
-
-## Project Setup
-
-First, set up your project and install the necessary packages:
-
-```bash
-# Create a new project or use an existing one
-mkdir my-image-provider
-cd my-image-provider
-
-# Initialize package.json
-npm init -y
-
-# Install required dependencies
-npm install @imgly/plugin-ai-generation-web@$UBQ_VERSION$ @imgly/plugin-ai-image-generation-web@$UBQ_VERSION$ @cesdk/cesdk-js@$UBQ_VERSION$ typescript
-```
-
-Then import the packages in your TypeScript file:
-
-```typescript highlight-install
-import {
-  CommonProviderConfiguration,
-  ImageOutput,
-  Provider,
-  loggingMiddleware,
-  uploadMiddleware
-} from '@imgly/plugin-ai-generation-web';
-import ImageGeneration from '@imgly/plugin-ai-image-generation-web';
-```
-
-## Understanding the Provider Interface
-
-The core of the AI generation system is the `Provider` interface. For image generation, we implement this interface with `kind: 'image'`.
-
-Key components of an image provider:
-
-- **id**: Unique identifier for your provider
-- **kind**: Always 'image' for image generation
-- **initialize**: Setup function for any necessary configuration
-- **input**: Configuration for the input UI panel and parameters
-- **output**: Configuration for generation behavior and result handling
-
-## Creating an OpenAPI Schema
-
-For schema-based input, you need an OpenAPI schema that defines your input parameters. The schema controls what UI components appear in the generation panel:
-
-```json file=@cesdk_web_examples/guides-user-interface-ai-integration-custom-provider-browser/myApiSchema.json
-{
-  "openapi": "3.0.0",
-  "info": {
-    "title": "My Image Generator API",
-    "version": "1.0.0"
-  },
-  "components": {
-    "schemas": {
-      "GenerationInput": {
-        "type": "object",
-        "required": ["prompt"],
-        "properties": {
-          "prompt": {
-            "type": "string",
-            "title": "Description",
-            "description": "Describe the image you want to generate",
-            "x-imgly-builder": {
-              "component": "TextArea"
-            }
-          },
-          "width": {
-            "type": "integer",
-            "title": "Width",
-            "default": 512,
-            "enum": [256, 512, 768, 1024],
-            "x-imgly-builder": {
-              "component": "Select"
-            }
-          },
-          "height": {
-            "type": "integer",
-            "title": "Height",
-            "default": 512,
-            "enum": [256, 512, 768, 1024],
-            "x-imgly-builder": {
-              "component": "Select"
-            }
-          },
-          "style": {
-            "type": "string",
-            "title": "Style",
-            "default": "photorealistic",
-            "enum": ["photorealistic", "cartoon", "sketch", "painting"],
-            "x-imgly-builder": {
-              "component": "Select"
-            }
-          }
-        },
-        "x-order-properties": ["prompt", "width", "height", "style"]
-      }
-    }
-  }
-}
-```
-
-Key concepts in the schema:
-
-- **Required vs optional properties**: Use the `required` array to specify which fields must be filled
-- **x-imgly-builder extension**: Specifies the UI component type (TextArea, Select, etc.)
-- **x-order-properties**: Controls the display order of fields in the UI
-- **enum values**: Provides predefined options for Select components
-
-Import the schema in your provider:
-
-```typescript highlight-schema
-import apiSchema from './myApiSchema.json';
-```
-
-## Understanding CommonProviderConfiguration
-
-Before creating your provider, understand the `CommonProviderConfiguration` interface. This interface provides standardized configuration options that all providers should extend:
-
-```typescript highlight-configuration
-// Define provider configuration interface extending CommonProviderConfiguration
-interface MyProviderConfiguration extends CommonProviderConfiguration<
-  MyProviderInput,
-  ImageOutput
-> {
-  // Add any provider-specific configuration here
-  customApiKey?: string;
-}
-```
-
-### Configuration Options
-
-**proxyUrl**: The URL of your proxy server that forwards requests to your AI API. This is essential for keeping API keys secure on the server side.
-
-**headers**: Custom headers to include in all API requests. Useful for:
-
-- Adding client identification headers
-- Including version information
-- Passing through metadata required by your API
-- Adding correlation IDs for request tracing
-
-**history**: Override the provider's default history storage behavior:
-
-- `false`: Disable history storage entirely
-- `'@imgly/local'`: Use temporary local storage (not persistent across sessions)
-- `'@imgly/indexedDB'`: Use browser IndexedDB storage (persistent across sessions)
-- `string`: Use your own custom asset source ID
-
-**supportedQuickActions**: Configure which quick actions are supported:
-
-- `false` or `null`: Remove the quick action entirely
-- Object with `mapInput`: Override with custom input mapping
-
-**properties**: Define default values for any provider property (static values or dynamic functions based on context).
-
-## Defining Input Types
-
-Define TypeScript interfaces for your provider's input and configuration:
-
-```typescript highlight-input-types
-// Define your input type based on your schema
-interface MyProviderInput {
-  prompt: string;
-  width: number;
-  height: number;
-  style: string;
-  image_url?: string; // For image-to-image operations
-}
-```
-
-## Creating the Provider Factory
-
-The provider factory function returns a provider instance configured with your settings:
-
-```typescript highlight-provider-factory
-// Create a function that returns your provider
-export function MyImageProvider(
-  _config: MyProviderConfiguration
-): (context: {
-  cesdk: CreativeEditorSDK;
-}) => Promise<Provider<'image', MyProviderInput, ImageOutput>> {
-  // Return a function that returns the provider
-  return async ({ cesdk: _cesdk }) => {
-    // Create and return the provider
-    const provider: Provider<'image', MyProviderInput, ImageOutput> = {
-      // Unique identifier for your provider
-      id: 'my-image-provider',
-
-      // Define output type as 'image'
-      kind: 'image',
-
-      // Initialize your provider
-      initialize: async () => {
-        console.log('Initializing my image provider');
-        // Any setup needed (e.g., API client initialization)
-      },
-```
-
-## Configuring the Input Panel
-
-The input panel configuration uses your OpenAPI schema to automatically generate the UI:
-
-```typescript highlight-input-panel
-      // Define input panel and UI using schema
-      input: {
-        panel: {
-          type: 'schema',
-          document: apiSchema, // Your OpenAPI schema
-          inputReference: '#/components/schemas/GenerationInput', // Reference to your input schema
-          userFlow: 'placeholder', // Creates a block first, then updates it with the generated content
-          orderExtensionKeyword: 'x-order-properties', // Used to control property display order
-
-          // Convert API input to block parameters
-          getBlockInput: async (input) => ({
-            image: {
-              width: input.width || 512,
-              height: input.height || 512,
-              label: `AI: ${input.prompt?.substring(0, 20)}...`
-            }
-          })
-        },
-```
-
-Configuration properties:
-
-- **type**: Set to `'schema'` for OpenAPI-driven UI
-- **document**: Your OpenAPI schema object
-- **inputReference**: JSON pointer to the input schema definition
-- **userFlow**: Either `'placeholder'` (creates a block first) or `'direct'`
-- **getBlockInput**: Transforms API input to block parameters (dimensions, label)
-
-## Adding Quick Actions
-
-Quick actions appear in the canvas context menu for supported block types. Map quick action IDs to your provider's input format:
-
-```typescript highlight-quick-actions
-// Add quick actions for canvas menu
-quickActions: {
-  supported: {
-    // Map quick action IDs to provider input transformations
-    'ly.img.editImage': {
-      mapInput: (quickActionInput) => ({
-        prompt: quickActionInput.prompt,
-        image_url: quickActionInput.uri,
-        width: 512,
-        height: 512,
-        style: 'photorealistic'
-      })
-    },
-    'ly.img.swapBackground': {
-      mapInput: (quickActionInput) => ({
-        prompt: quickActionInput.prompt,
-        image_url: quickActionInput.uri,
-        width: 512,
-        height: 512,
-        style: 'photorealistic'
-      })
-    },
-    'ly.img.createVariant': {
-      mapInput: (quickActionInput) => ({
-        prompt: quickActionInput.prompt,
-        image_url: quickActionInput.uri,
-        width: 512,
-        height: 512,
-        style: 'photorealistic'
-      })
-    },
-    'ly.img.styleTransfer': {
-      mapInput: (quickActionInput) => ({
-        prompt: quickActionInput.style,
-        image_url: quickActionInput.uri,
-        width: 512,
-        height: 512,
-        style: 'photorealistic'
-      })
-    }
-  }
-}
-```
-
-Available quick action IDs:
-
-- `'ly.img.editImage'`: Edit selected image with AI
-- `'ly.img.swapBackground'`: Replace image background
-- `'ly.img.createVariant'`: Generate variation of image
-- `'ly.img.styleTransfer'`: Apply style to image
-
-## Configuring Output Behavior
-
-The output configuration defines how generation works and handles results:
-
-```typescript highlight-output-config
-      // Define output generation behavior
-      output: {
-        // Allow cancellation of generation
-        abortable: true,
-
-        // Store generated assets in browser's IndexedDB
-        history: '@imgly/indexedDB',
-```
-
-## Adding Middleware
-
-Middleware functions process requests and responses in the generation pipeline:
-
-```typescript highlight-middleware
-        // Add middleware for logging and uploading
-        middleware: [
-          loggingMiddleware({ enable: true }),
-          // Example of upload middleware that stores generated images on your server
-          uploadMiddleware(async (output: ImageOutput) => {
-            // In production, upload the image to your server
-            // For this example, we just return the output as-is
-            console.log('Upload middleware: Processing output', output.url);
-            return output;
-          }),
-          // Custom error handling middleware
-          async (input, options, next) => {
-            try {
-              return await next(input, options);
-            } catch (error: any) {
-              // Prevent default error notification
-              options.preventDefault();
-
-              // Show custom error notification
-              options.cesdk?.ui.showNotification({
-                type: 'error',
-                message: `Image generation failed: ${error.message}`
-              });
-
-              throw error;
-            }
-          }
-        ],
-```
-
-### Available Middleware
-
-**loggingMiddleware()**: Debug logging for development.
-
-**uploadMiddleware()**: Store generated images on your server before adding to design.
-
-**Custom middleware**: Create your own for error handling, rate limiting, or request transformation.
-
-### Custom Error Handling with preventDefault()
-
-Middleware can suppress default UI feedback using `options.preventDefault()`. This is useful when you want complete control over how errors are presented:
-
-**What gets prevented:**
-
-- Error/success notifications (toast messages)
-- Block error state (error icon)
-- Console error logging
-
-**What is NOT prevented:**
-
-- Pending → Ready transition (loading spinner always stops)
-
-## Configuring Notifications
-
-Configure success and error notifications shown to users:
-
-```typescript highlight-notification
-// Configure success/error notifications
-notification: {
-  success: {
-    show: true,
-    message: 'Image generated successfully!'
-  },
-  error: {
-    show: true,
-    message: (context) => `Generation failed: ${context.error}`
-  }
-},
-```
-
-## Implementing the Generate Function
-
-The generate function is the core of your provider—it calls your AI API and returns the result:
-
-```typescript highlight-generate
-// The core generation function
-generate: async (input, { abortSignal }) => {
-  try {
-    // Use mock API for demonstration
-    // In production, replace with actual API call:
-    // const response = await fetch(config.proxyUrl, { ... });
-    const data = await mockGenerateImage(input, abortSignal);
-
-    // Return the image URL
-    return {
-      kind: 'image',
-      url: data.imageUrl
-    };
-  } catch (error) {
-    console.error('Image generation failed:', error);
-    throw error;
-  }
-};
-```
-
-In production, replace the mock API call with actual requests to your image generation service.
-
-## Integrating with CE.SDK
-
-Register your provider with CE.SDK using the image generation plugin:
-
-```typescript highlight-integration
-// Add your image generation provider
-await cesdk.addPlugin(
-  ImageGeneration({
-    providers: {
-      text2image: MyImageProvider({
-        proxyUrl: 'https://your-proxy-server.com/api/proxy',
-        headers: {
-          'x-client-version': '1.0.0',
-          'x-request-source': 'cesdk-tutorial'
-        }
-      })
-    },
-    debug: true
-  })
-);
-```
-
-Add the dock component to make the panel accessible:
-
-```typescript highlight-dock
-// Add the dock component to open the AI image generation panel
-cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [
-  'ly.img.ai.image-generation.dock',
-  ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' })
-]);
-```
-
-## Controlling Features with Feature API
-
-Control which UI elements and features are available to users:
-
-```typescript highlight-feature-api
-// Hide the provider dropdown if you only have one provider
-cesdk.feature.set(
-  'ly.img.plugin-ai-image-generation-web.providerSelect',
-  () => false
-);
-// Enable text-to-image generation
-cesdk.feature.set('ly.img.plugin-ai-image-generation-web.fromText', () => true);
-// Disable image-to-image generation
-cesdk.feature.set(
-  'ly.img.plugin-ai-image-generation-web.fromImage',
-  () => false
-);
-```
-
-Available feature flags:
-
-- `ly.img.plugin-ai-image-generation-web.providerSelect`: Show/hide provider dropdown
-- `ly.img.plugin-ai-image-generation-web.fromText`: Enable text-to-image input
-- `ly.img.plugin-ai-image-generation-web.fromImage`: Enable image-to-image input
-
-## Troubleshooting
-
-Common issues and solutions:
-
-- **API errors**: Check proxy URL configuration and headers. Ensure your proxy server is correctly forwarding requests to your AI API.
-- **Generation not starting**: Verify the license key is valid. Check browser console for initialization errors.
-- **Quick actions not appearing**: Ensure quick action IDs are mapped correctly in the `supported` object. Verify the block type supports quick actions.
-- **UI not updating**: Check that `generate()` returns the correct output format with `kind: 'image'` and a valid `url`.
-
-## Next Steps
-
-- Explore the [AI Image Generation Overview](./user-interface/ai-integration/image-generation.md) for built-in provider options
-- Learn about [AI Text Generation](./user-interface/ai-integration/text-generation.md) for text-based AI providers
-- Understand the [Plugin System](./plugins.md) for extending CE.SDK
-
----
-
-## 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