Smart Text Generation

Generate body text, headings, and button labels from natural-language prompts directly inside the editor.

Features

• Smart Text — generates paragraph copy for text blocks.
• Smart Heading — generates headings (H1–H4) from a prompt.
• Smart Button — generates short call-to-action button labels.

Configuration

Enable or disable each feature independently:

ai: {
  mode: 'external',
  features: {
    smartText: true,
    smartHeading: true,
    smartButton: true,
  },
  callbacks: {
    onSmartTextGenerate: async (params: SmartTextParams) => { /* ... */ },
    onSmartHeadingGenerate: async (params: SmartHeadingParams) => { /* ... */ },
    onSmartButtonGenerate: async (params: SmartButtonParams) => { /* ... */ },
  },
}

Callback Parameters

SmartTextParams

Property	Type	Description
prompt	string	The user's text prompt.
tone	'professional' | 'casual' | 'friendly' | 'formal' | 'witty'	Desired tone of voice.
length	'short' | 'medium' | 'long'	Approximate output length.
language	string	BCP-47 language code (e.g. 'en').

SmartHeadingParams

Property	Type	Description
prompt	string	The user's prompt.
level	1 | 2 | 3 | 4	Heading level (H1–H4).
tone	'professional' | 'casual' | 'friendly' | 'formal' | 'witty'	Desired tone of voice.
language	string	BCP-47 language code.

SmartButtonParams

Property	Type	Description
prompt	string	The user's prompt.
maxLength	number	Maximum character count for the label.
language	string	BCP-47 language code.

Return Types

All three callbacks must return a Promise<string>:

callbacks: {
  onSmartTextGenerate: async (params: SmartTextParams): Promise<string> => {
    const response = await fetch('/api/ai/text', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(params),
    });
    const data = await response.json();
    return data.text; // plain HTML string
  },

  onSmartHeadingGenerate: async (params: SmartHeadingParams): Promise<string> => {
    const response = await fetch('/api/ai/heading', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(params),
    });
    const data = await response.json();
    return data.heading; // plain text string
  },

  onSmartButtonGenerate: async (params: SmartButtonParams): Promise<string> => {
    const response = await fetch('/api/ai/button', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(params),
    });
    const data = await response.json();
    return data.label; // plain text string
  },
}

warning

Smart text returns HTML (e.g. <p>Generated copy.</p>). Smart heading and smart button return plain text.

tip

When using pexelize mode, all three callbacks are handled automatically — no implementation needed.

Error Handling

If your callback throws or returns a rejected promise, the editor shows a toast notification to the user and reverts the content block to its previous state.

onSmartTextGenerate: async (params) => {
  const res = await fetch('/api/ai/text', {
    method: 'POST',
    body: JSON.stringify(params),
  });
  if (!res.ok) {
    throw new Error('Text generation failed');
  }
  const data = await res.json();
  return data.text;
},