Skip to main content

AI Agent Integration

The simplest integration is to copy the Demo Agent file and register it with SharedComponents.AiAgent. You do not need to implement SSE parsing, tool calls, Undo/Redo, or event handling yourself.

1. Copy the Demo file​

Copy this file into your project:

demo/src/examples/AIAgent/DemoAiAgent.tsx

Then follow the Demo entry point that registers the component with SharedComponents.AiAgent: AIAgent/index.tsx.

The file already includes:

  • AiAgentPanel
  • the AI Worker request
  • streaming response handling
  • conversation history persistence
  • snapshot save and restore
  • quick actions

2. Set the API URL​

After copying the file, only change the API URL and sessionId in onChat:

const onChat: AiChatHandler = async (request) => {
  return fetch("https://agent-api.beacas.com/v1/easy-email/respond-stream", {
    method: "POST",
    headers: {
      "content-type": "application/json",
    },
    signal: request.signal,
    body: JSON.stringify({
      sessionId: "your-tenant-or-user-id",
      prompt: { text: request.message },
      images: request.images || [],
      template: request.template,
      history: request.history,
      editorContext: request.editorContext,
      decisionResponse: request.decisionResponse,
    }),
  });
};

The Demo API can be called directly. If you need custom authentication, add a server-side proxy and keep the request shape unchanged.

3. Register the Agent​

Register the copied component at your editor entry point:

import { useEffect } from "react";
import { SharedComponents } from "easy-email-pro-theme";
import { DemoAiAgent } from "./DemoAiAgent";

export default function MyEditor() {
  SharedComponents.AiAgent = DemoAiAgent;

  useEffect(() => {
    return () => {
      if (SharedComponents.AiAgent === DemoAiAgent) {
        SharedComponents.AiAgent = undefined;
      }
    };
  }, []);

  return <YourEmailEditor />;
}

The editor will show the AI Agent entry point, allowing users to edit the current email with natural-language instructions.

Request fields​

The copied Demo passes the required context automatically:

FieldPurpose
prompt.textThe user's current instruction
templateThe current Easy Email Pro template
historyThe current Agent conversation history
imagesImages uploaded or selected by the user
editorContextThe selected block, images, and paths
decisionResponseThe user's answer to an Agent question
sessionIdA tenant or user session identifier

In most integrations, keep the Demo onChat implementation and do not assemble these fields manually.

Supported capabilities​

The Agent can currently:

  • edit the whole email or a selected block;
  • edit the subject;
  • update text, links, colors, spacing, and mobile styles;
  • add, remove, duplicate, and move blocks;
  • replace Hero or other images;
  • generate and apply images;
  • generate a complete email template;
  • ask follow-up questions when a request is ambiguous;
  • restore changes with snapshots and Undo/Redo.

The SDK handles block targeting, tool calls, history, and applying changes. Your integration only needs the editor and API URL.

Custom quick actions​

Edit quickActions in the copied DemoAiAgent.tsx file:

<AiAgentPanel
  onChat={onChat}
  quickActions={[
    {
      label: "Improve hero",
      prompt: "Improve the hero headline, supporting copy, and primary CTA.",
    },
    {
      label: "Compact mobile",
      prompt: "Optimize the mobile layout and reduce crowded copy.",
    },
  ]}
/>

Pass an empty array to hide quick actions:

<AiAgentPanel onChat={onChat} quickActions={[]} />

Complete template generation​

When the user wants to create a new email from a website or Markdown instead of editing the current email, use the complete template generation API.