AI Overview
Dragble includes built-in AI features for generating text, headings, images, searching stock photos, and auto-generating alt text — all accessible from the editor toolbar.
AI Modes
| Mode | Description | Configuration |
|---|---|---|
dragble | Uses Dragble's built-in AI backend. No setup required. | ai: { mode: 'dragble' } |
external | Routes all AI requests to your own backend via callbacks. | ai: { mode: 'external', callbacks: { ... } } |
disabled | Hides all AI features from the editor UI. | ai: { mode: 'disabled' } |
Configuration
Pass the ai option when initializing the editor:
const config: DragbleConfig = {
ai: {
mode: "dragble", // 'dragble' | 'external' | 'disabled'
// Only required when mode is 'external'
callbacks: {
onSmartTextGenerate: async (params) => {
/* ... */
},
onSmartHeadingGenerate: async (params) => {
/* ... */
},
onSmartButtonGenerate: async (params) => {
/* ... */
},
onImageGenerate: async (params) => {
/* ... */
},
onImageSearch: async (params) => {
/* ... */
},
onAltTextGenerate: async (params) => {
/* ... */
},
},
// Optional: configure which AI features are enabled
features: {
smartText: true,
smartHeading: true,
smartButton: true,
imageGeneration: true,
imageSearch: true,
altText: true,
},
},
};
Feature Summary
| Feature | Description | Callback |
|---|---|---|
| Smart Text | Generate body copy from a prompt | onSmartTextGenerate |
| Smart Heading | Generate headings from a prompt | onSmartHeadingGenerate |
| Smart Button | Generate button labels from a prompt | onSmartButtonGenerate |
| Image Generation | Create images from a text prompt | onImageGenerate |
| Image Search | Search stock photo libraries | onImageSearch |
| Alt Text | Auto-generate alt text for images | onAltTextGenerate |
tip
Start with dragble mode to try AI features instantly. Switch to external when you need to use your own models or control costs.
info
When mode is 'disabled', all AI buttons and menus are hidden from the editor UI. No AI-related network requests are made.
Enabling Individual Features
You can selectively disable features even in dragble or external mode:
ai: {
mode: 'dragble',
features: {
smartText: true,
smartHeading: true,
smartButton: false, // hide smart button generation
imageGeneration: false, // hide AI image generation
imageSearch: true,
altText: true,
},
}