skills.rest
Dragble
DragbleOFFICIAL
Explore all skills by this author →
WebsiteGitHub

dragble-ai

Configure AI generation features and asset storage for the Dragble editor.

Updated May 11, 2026
Search Tags:#image generation#alt text#ai configuration#presigned url#s3 storage#dragble#editor sdk
One-click install
npx skills add https://github.com/Dragble/dragble-skills --skill dragble-ai-dragble
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dragble-ai
Source: https://github.com/Dragble/dragble-skills/tree/main/dragble-ai
Command: npx skills add https://github.com/Dragble/dragble-skills --skill dragble-ai-dragble

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Integrating AI text/image generation and custom image storage into the Dragble drag-and-drop editor requires knowing exact callback signatures, mode resolution rules, and return shapes—mistakes cause silently disabled features or broken images. ## Core Features & Use Cases - AI Feature Configuration: Set up smart headings, body text, button labels, image generation, image search, and alt text using Dragble's built-in AI, an external backend, or a hybrid per-feature override. - External Asset Storage: Wire your own S3-compatible bucket with presigned URL uploads, asset listing, folder management, and delete/move callbacks. - Use Case: You want the editor to generate marketing headings via your own LLM API while storing uploaded images in your company S3 bucket—configure ai.mode: 'external' with feature callbacks and assetStorage.mode: 'external' with presign/upload handlers. ## Quick Start Configure the Dragble editor with external AI callbacks for smart headings and external S3 storage for image uploads.

Frequently Asked Questions about dragble-ai

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure external AI callbacks in the Dragble editor?▼

Set ai.mode to 'external' in dragble.init and provide a generate callback for each feature under ai.features, such as smartHeading or smartText. Each callback receives typed params and must return the exact documented shape, like { headings: string[] }.

How to connect Dragble editor image uploads to my own S3 bucket?▼

Set assetStorage.mode to 'external' and implement getPresignUrl and onUpload callbacks. The editor PUTs files directly to your presigned URL, then calls onUpload to confirm the final public URL embedded in designs.

Can I use Dragble built-in AI with external storage together?▼

Yes, AI and asset storage are independent subsystems. You can set ai.mode to 'dragble' while assetStorage.mode is 'external', or any other combination, configured separately in dragble.init.

Why are AI features hidden when using external mode?▼

In external mode, any feature without a generate callback is silently disabled—the editor does not fall back to Dragble AI. Also verify ai.mode is not 'disabled' and each feature's enabled flag is true.

Why do Dragble S3 uploads fail with presigned URLs?▼

Common causes are missing CORS headers allowing PUT from the editor origin, expired presigned URLs (use at least 5 minutes), Content-Type mismatches, or returning fields meant only for POST multipart uploads.

Related Skills

Explore More Software Engineering Skills→
kuse-aikuse-ai
6

ui-component-builder

Build reusable UI components for React, Vue, and vanilla JavaScript.

Official
Basic
unlayerunlayer
13

unlayer-export

Export Unlayer editor content to HTML, text, images, PDFs, and ZIP archives.

Official
Intermediate
unlayerunlayer
13

unlayer-config

Configure Unlayer editor features, appearance, and security settings via JavaScript.

Official
Advanced
unlayerunlayer
13

unlayer-custom-tools

Create and register custom drag-and-drop tools in the Unlayer editor.

Official
Advanced