--- title: "Connecting AI tools | Customer's Canvas Hub" canonical: "https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/connecting-ai-tools/" --- # Connecting AI tools > Handy Editor supports advanced image processing capabilities by integrating with third-party AI services. These integrations allow you to: > - Remove backgrounds from images (including complex or animated backgrounds) > - Upscale images while preserving or recreating details > - Vectorize raster images (useful for logos or vector-based illustrations) > - Generate images from text prompts (text-to-image) This guide explains how to enable and configure these AI features in your Handy Editor instance. ## Supported AI operations You can enable one or more of the following AI features for your users: | Operation | Description | Supported Vendors | |-----------|-------------|-------------------| | **Background Removal** | Removes the background from images, leaving only the main subject. Ideal for logos or photos where the subject needs isolation. | Picsart, RemoveBg, CutoutPro | | **Upscale** | Improves image resolution while maintaining or enhancing visual quality. Useful for low-quality uploads. | Picsart | | **Vectorize** | Converts raster images (PNG, JPEG) into scalable vector formats. Ideal for logos or illustrations. | VectorizerAi | | **Text-to-Image** | Generates new images based on text prompts. | OpenAi | ## How it works To use these features, follow these steps: 1. **Obtain an API Key** Each vendor has its own terms and pricing model (usually credit-based). Purchase credits from your chosen provider, as each API call (image processing) consumes credits. 2. **Connect the Vendor in Customer's Canvas** Configure the vendor's API credentials in **Settings > Image Operations** as described in the [Admin Guide](https://customerscanvas.com/docs/hub/admin-guide/settings/image-operations.md). 3. **Enable the Feature in Handy Editor** Add the corresponding configuration to the `itemTools` section of your Handy Editor settings. See the [Configuration Examples](#configuration-examples) below. 4. **(Optional) Use ImageProcessingHub API** For external image processing outside the editor, you can use the [ImageProcessingHub API](https://api.customerscanvashub.com/swagger/docs/v1/image-processing-hub) as a proxy. ## Configuration examples ### Background removal #### Step 1: Choose a vendor Select a vendor based on your needs: - **[Picsart](https://picsart.io/)**: Multi-purpose, cost-effective. - **[RemoveBg](https://www.remove.bg/)**: Specializes in high-quality background removal. - **[CutoutPro](https://www.cutout.pro/)**: Ideal for isolating faces or complex subjects. #### Step 2: Connect the vendor In **Settings > Image Operations > Remove Background**, add the vendor and enter your API key. Refer to the [Admin Guide](https://customerscanvas.com/docs/hub/admin-guide/settings/image-operations.md) for details. #### Step 3: Enable in Handy Editor Add the following to your `itemTools` configuration: ```json { "settings": { "itemTools": { "backgroundRemoval": { "enabled": true, "vendor": "Picsart" } } } } ``` - `enabled`: Toggles the **Background Removal** button in the editor. Default: `false`. - `vendor`: Specifies the AI service provider. Default: Uses the tenant-wide setting. ![Background Removal control](images/background-removal.png) ### Vectorize #### Step 1: Connect Vectorizer.AI 1. Obtain an API key from [Vectorizer.AI](https://www.vectorizer.io/). 2. In **Settings > Image Operations > Vectorize**, add the vendor and enter your API key. #### Step 2: Enable in Handy Editor Add the following configuration: ```json { "settings": { "itemTools": { "vectorize": { "enabled": true, "vendor": "VectorizerAi" } } } } ``` - `enabled`: Toggles the **Vectorize** button. Default: `false`. - `vendor`: Specifies the service provider. Only `"VectorizerAi"` is supported. ![Vectorize control](images/vectorize.png) ### Upscale #### Step 1: Connect Picsart 1. Obtain an API key from [Picsart](https://picsart.io/). 2. In **Settings > Image Operations > Upscale**, add the vendor and enter your API key. #### Step 2: Enable in Handy Editor Add the following configuration: ```json { "settings": { "itemTools": { "upscale": { "enabled": true, "vendor": "Picsart" } } } } ``` - `enabled`: Toggles the **Upscale** button. Default: `false`. - `vendor`: Specifies the service provider. Only `"Picsart"` is supported. ![Upscale control](images/upscale.png) ### Text-to-Image To enable **Text-to-Image** generation in Handy Editor, configure the `textToImage` section under `assetLibrary.images` in your settings. #### Step 1: Connect a vendor 1. Obtain an API key from a supported vendor: - **[OpenAI](https://openai.com/)** - **[Picsart](https://picsart.io/)** 2. In **Settings > Image Operations > Generate by Text**, add the vendor and enter your API key. Refer to the [Admin Guide](https://customerscanvas.com/docs/hub/admin-guide/settings/image-operations.md) for details. #### Step 2: Enable in Handy Editor Add the following configuration to enable the **Text-to-Image** tool in the **Asset Library**: ```json { "settings": { "assetLibrary": { "images": { "enabled": true, "textToImage": { "enabled": true, "vendor": "OpenAi" } } } } } ``` - `enabled`: Toggles the **Text-to-Image** tool in the **Asset Library**. Default: `false`. - `vendor`: Specifies the AI service provider. Available values: `"OpenAi"`, `"Picsart"`. Default: Uses the tenant-wide setting. #### How it works Once enabled, users can: 1. Open the **Asset Library** in Handy Editor. 2. Switch to the **Images** tab. 3. Use the **Text-to-Image** tool to enter a prompt and generate an image. ## ImageProcessingHub API example You can use the [ImageProcessingHub API](https://api.customerscanvashub.com/swagger/docs/v1/image-processing-hub) to process images outside the editor. The following example shows how you can upscale images with the endpoint `POST /api/image-processing-hub/v1/upscale/to-resource`. **cURL** ```bash curl -X POST \ "https://api.customerscanvashub.com/api/image-processing-hub/v1/upscale/to-resource?tenantId=123&vendor=Picsart&resourceParams.ownerId=user123&resourceParams.namespace=default&resourceParams.name=upscaled-image&resourceParams.type=image/png&resourceParams.anonymousAccess=true&resourceParams.overwriteExisting=true" \ -H "accept: application/json" \ -H "Authorization: Bearer " \ -H "Content-Type: multipart/form-data" \ -F "sourceFile=@.jpg" ``` **HTTP** ```http POST https://api.customerscanvashub.com/api/image-processing-hub/v1/upscale/to-resource?tenantId=123&vendor=Picsart&resourceParams.ownerId=user123&resourceParams.namespace=default&resourceParams.name=upscaled-image&resourceParams.type=image/png&resourceParams.anonymousAccess=true&resourceParams.overwriteExisting=true Authorization: Bearer Content-Type: multipart/form-data sourceFile=@.jpg ``` **C#** ```csharp // Initialize the API client var apiClient = new ImageProcessingHubApiClient(); // Upscale and save as a resource var result = await apiClient.UpscaleAsync( tenantId: 123, vendor: UpscaleVendorType.Picsart, sourceFile: new FileParameter(File.OpenRead(".jpg"), "image.jpg"), resourceParams_ownerId: "user123", resourceParams_namespace: "default", resourceParams_name: "upscaled-image", resourceParams_type: "image/png", resourceParams_anonymousAccess: true, resourceParams_overwriteExisting: true, cancellationToken: CancellationToken.None ); ``` **TS** ```typescript // Initialize the API client const apiClient = new ImageProcessingHubApiClient(); // Upscale and save as a resource const result = await apiClient.upscale( 123, // tenantId UpscaleVendorType.Picsart, // vendor { file: new Blob([await (await fetch('.jpg')).arrayBuffer()]), fileName: 'image.jpg' }, // sourceFile 'user123', // resourceParams_ownerId 'default', // resourceParams_namespace 'upscaled-image', // resourceParams_name undefined, // resourceParams_sourceId 'image/png', // resourceParams_type true, // resourceParams_anonymousAccess true // resourceParams_overwriteExisting ).toPromise(); ``` ```js // Example response /* { "url": "https://example.com/resources/upscaled-image", "resourceId": "res_123456", "operationType": "Upscale", "vendorType": "Picsart", "isTestModeUsed": false } */ ``` ## Troubleshooting - **Button Not Appearing?** Ensure the feature is enabled in both **Settings > Image Operations** and the `itemTools` configuration. - **API Errors?** Verify your API key and vendor settings in **Settings > Image Operations**. Check your credit balance with the vendor. - **Performance Issues?** Consider setting [usage limits](https://customerscanvas.com/docs/hub/admin-guide/settings/image-operations.md#common-configuration-steps) to control API consumption.