AI Integration

This page shows how to connect the editor's AI features to your own generation endpoints using external mode with onGenerate callbacks.

src/AiEditor.jsx

import React, { useRef, useCallback } from "react";
import { DragbleEditor } from "dragble-react-editor";

const EDITOR_KEY = "your-editor-key";

const aiConfig = {
  enabled: true,
  mode: "external", // "external" = you handle generation; "builtin" = Dragble handles it

  smartText: {
    enabled: true,
  },
  smartImage: {
    enabled: true,
  },
  smartHeadlines: {
    enabled: true,
  },
};

export default function AiEditor() {
  const editorRef = useRef(null);

  // --- Smart text generation ---
  const onGenerateText = useCallback(async (request, done) => {
    // request: { prompt: string, tone?: string, length?: string, context?: string }
    try {
      const res = await fetch("https://api.example.com/ai/generate-text", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer YOUR_TOKEN",
        },
        body: JSON.stringify({
          prompt: request.prompt,
          tone: request.tone ?? "professional",
          maxTokens: request.length === "short" ? 80 : 250,
        }),
      });
      const data = await res.json();
      done({ text: data.generatedText });
    } catch (err) {
      console.error("Text generation failed:", err);
      done({ error: "Generation failed. Please try again." });
    }
  }, []);

  // --- Smart image generation ---
  const onGenerateImage = useCallback(async (request, done) => {
    // request: { prompt: string, style?: string, width?: number, height?: number }
    try {
      const res = await fetch("https://api.example.com/ai/generate-image", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer YOUR_TOKEN",
        },
        body: JSON.stringify({
          prompt: request.prompt,
          style: request.style ?? "photographic",
          size: `${request.width ?? 512}x${request.height ?? 512}`,
        }),
      });
      const data = await res.json();
      done({ url: data.imageUrl });
    } catch (err) {
      console.error("Image generation failed:", err);
      done({ error: "Image generation failed. Please try again." });
    }
  }, []);

  // --- Smart headlines ---
  const onGenerateHeadlines = useCallback(async (request, done) => {
    // request: { topic: string, count?: number }
    try {
      const res = await fetch("https://api.example.com/ai/generate-headlines", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer YOUR_TOKEN",
        },
        body: JSON.stringify({
          topic: request.topic,
          count: request.count ?? 5,
        }),
      });
      const data = await res.json();
      done({ headlines: data.headlines }); // string[]
    } catch (err) {
      console.error("Headline generation failed:", err);
      done({ error: "Headline generation failed. Please try again." });
    }
  }, []);

  return (
    <div style={{ height: "100vh" }}>
      <DragbleEditor
        ref={editorRef}
        editorKey={EDITOR_KEY}
        ai={aiConfig}
        onGenerateText={onGenerateText}
        onGenerateImage={onGenerateImage}
        onGenerateHeadlines={onGenerateHeadlines}
        minHeight="100%"
      />
    </div>
  );
}

AI config options

Property	Type	Description
ai.enabled	boolean	Master toggle for all AI features
ai.mode	'external' | 'builtin'	external = you supply callbacks; builtin = Dragble cloud handles it
ai.smartText.enabled	boolean	Show the "AI text" button in text blocks
ai.smartImage.enabled	boolean	Show the "AI image" button in image blocks
ai.smartHeadlines.enabled	boolean	Show the "Suggest headlines" option

Callback signatures

onGenerateText(request, done)

request: {
  prompt: string;
  tone?: 'professional' | 'casual' | 'friendly' | 'formal';
  length?: 'short' | 'medium' | 'long';
  context?: string; // surrounding text for context
}
done: (result: { text: string } | { error: string }) => void;

onGenerateImage(request, done)

request: {
  prompt: string;
  style?: 'photographic' | 'illustration' | '3d' | 'flat';
  width?: number;
  height?: number;
}
done: (result: { url: string } | { error: string }) => void;

onGenerateHeadlines(request, done)

request: {
  topic: string;
  count?: number;
}
done: (result: { headlines: string[] } | { error: string }) => void;

Using built-in mode

If you don't need to control the model, set mode: 'builtin' and omit the callbacks. Dragble will use its own AI service and bill usage to your account.

<DragbleEditor
  ai={{ enabled: true, mode: "builtin" }}
  // no onGenerate* callbacks needed
/>