Alt Text Generation

Automatically generate alt text for images to improve accessibility. When a user adds an image, the editor can call your backend to produce a descriptive alt attribute.

Configuration

ai: {
  mode: 'external',
  features: {
    altText: true,
  },
  callbacks: {
    onAltTextGenerate: async (params: AltTextParams) => {
      return { altText: 'A golden retriever playing in a park' };
    },
  },
}

AltTextParams

Property	Type	Description
imageUrl	string	Publicly accessible URL of the image.

AltTextResult

interface AltTextResult {
  altText: string; // the generated alt text
}

Example Implementation

onAltTextGenerate: async (params: AltTextParams): Promise<AltTextResult> => {
  const response = await fetch('/api/ai/alt-text', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ imageUrl: params.imageUrl }),
  });

  if (!response.ok) {
    throw new Error('Alt text generation failed');
  }

  const data = await response.json();
  return { altText: data.altText };
},

User Flow

1. User inserts or selects an image block.
2. In the image settings panel, the Generate Alt Text button appears.
3. The user clicks the button; the editor calls onAltTextGenerate.
4. The returned alt text is populated in the alt text field.
5. The user can edit the generated text before confirming.

tip

Alt text improves email deliverability and is required for WCAG compliance. Enable this feature to help users create accessible designs without extra effort.

info

The imageUrl sent to your callback is the same URL stored in the design JSON. Ensure your backend can fetch this URL to analyze the image.

Error Handling

If the callback throws, the alt text field remains empty and a toast notification is shown:

onAltTextGenerate: async (params) => {
  try {
    const res = await fetch('/api/ai/alt-text', {
      method: 'POST',
      body: JSON.stringify({ imageUrl: params.imageUrl }),
    });
    if (!res.ok) throw new Error('Failed');
    return await res.json();
  } catch (err) {
    throw new Error('Could not generate alt text. Please enter it manually.');
  }
},