AI providers

AI providers

The editor's AI actions, generate a design, rewrite copy, suggest subject lines, write alt text, and generate images, run through a MailkaroAiAdapter you pass as config.ai.adapter. MailKaro ships first-party adapters for OpenAI, Anthropic (Claude), and Google Gemini, so you don't have to write one.

Use a built-in provider#

import { createOpenAiAdapter, createAnthropicAdapter, createGeminiAdapter } from "react-email-craft";

const adapter = createOpenAiAdapter({ apiKey: process.env.OPENAI_API_KEY!, model: "gpt-4o-mini" });
// or createAnthropicAdapter({ apiKey, model: "claude-sonnet-5" })
// or createGeminiAdapter({ apiKey, model: "gemini-1.5-flash" })

<EmailEditor config={{ ai: { adapter } }} />;

What each does#

• generateSubjectLines / rewriteText / generateAltText, all providers.
• generateDesignFromPrompt, parses the model's JSON into a validated design (falls back to a summary).
• generateImage, OpenAI & Gemini; wires the image block's Generate with AI box.
• editDesign, powers the conversational assistant (below).

Conversational assistant#

When the adapter implements editDesign (all first-party providers do), the toolbar shows a chat panel: describe a change in plain language, “add a footer with an unsubscribe link”, “make the button green”, and the assistant edits the design in place. Under the hood the model returns a list of declarative design ops that MailKaro applies with applyDesignOps; each edit is a saved, undoable snapshot. The panel appears only when editDesign is present and the editor isn't read-only.

// Any adapter can implement it; the first-party providers already do.
const result = await adapter.editDesign({ message: "add a footer with an unsubscribe link", design });
// → { design?: Design, summary: string, operations?: DesignOp[] }

// Reuse the same apply engine anywhere:
import { applyDesignOps } from "email-craft-sdk";
const { design: next, applied, errors } = applyDesignOps(design, [
  { op: "set_body", values: { subject_line: "Spring Sale" } }, { op: "add_block", type: "button", values: { label: "Shop now", href: "https://…" } }
]);