AI Compose Feature

Relevant source files

The following files were used as context for generating this wiki page:

• src/app/api/vibe/route.ts
• src/app/app/page.tsx
• src/app/page.tsx
• README.md
• src/lib/openapi.ts

The AI Compose feature (internally referred to as "Vibe") is a specialized module within the Send Again platform designed to automate the generation and revision of HTML email content. By providing natural language instructions, users can generate professional email body fragments or footer sections without writing raw HTML manually. Sources: src/app/page.tsx:49-53, README.md:10

This system leverages OpenAI's large language models to transform user prompts into production-ready HTML with inline styles. It supports iterative drafting, allowing users to refine existing content by providing updated instructions to the AI. Sources: src/app/api/vibe/route.ts:101-104, src/app/app/page.tsx:1296-1299

System Architecture and API

The AI Compose feature is exposed through a dedicated API route that handles authentication, prompt construction, and communication with external AI services. Sources: src/app/api/vibe/route.ts:83-85

Vibe Generation Endpoint

The primary interface for AI generation is the /api/vibe POST endpoint. It accepts a workspace context and user instructions to return generated HTML. Sources: src/app/api/vibe/route.ts:83-98

Request Parameters:

Parameter	Type	Description
workspaceId	string	The unique identifier of the active workspace.
target	string	Either "email" for body content or "footer" for footers.
instruction	string	Natural language prompt describing the desired content.
currentHtml	string	(Optional) Existing HTML code to be revised by the AI.
from	string	(Optional) The sender email address for context.
websiteUrl	string	(Optional) Workspace website URL for inclusion in links.

Sources: src/app/api/vibe/route.ts:7-14, src/app/app/page.tsx:1305-1311

Data Flow Logic

The following diagram illustrates the lifecycle of an AI Compose request from the user interface to the OpenAI API.

The system ensures that only raw HTML is returned by stripping markdown code fences and strictly configuring the system prompt. Sources: src/app/api/vibe/route.ts:47-53, src/app/api/vibe/route.ts:133-145

Prompt Engineering

The feature uses structured system and user prompts to ensure the AI returns fragments compatible with email clients. Sources: src/app/api/vibe/route.ts:55-81

System Prompts

Two distinct system prompts are used depending on the target value:

• Footer Target: Instructs the AI to generate HTML email footer fragments with inline styles, raw HTML only (no markdown), and mandatory inclusion of {{unsubscribe_url}}. Sources: src/app/api/vibe/route.ts:57-64
• Email Target: Instructs the AI to generate HTML body fragments. It explicitly forbids including <html> or <body> tags or the footer/unsubscribe section, which the application appends separately. Sources: src/app/api/vibe/route.ts:66-72

User Prompt Construction

The user prompt is built dynamically to provide the AI with full context, including the sender identity, website URL, and the current draft if it exists. Sources: src/app/api/vibe/route.ts:74-81

function buildUserPrompt({ workspaceId, instruction, currentHtml, from, websiteUrl, target }) {
  return [
    `Workspace: ${workspaceId}`,
    `From: ${from || `noreply@${workspaceId}`}`,
    `Website: ${websiteUrl || `https://${workspaceId}`}`,
    `Target: ${target}`,
    "",
    "Instruction:",
    instruction,
    "",
    currentHtml
      ? `Current HTML draft to revise:\n${currentHtml}`
      : "No current draft exists. Create from scratch.",
    "",
    "Return only HTML.",
  ].join("\n");
}

Sources: src/app/api/vibe/route.ts:74-91

User Interface Integration

The AI Compose interface is integrated directly into the "Compose" and "Settings" tabs of the main application dashboard. Sources: src/app/app/page.tsx:1653-1660, src/app/app/page.tsx:1912-1915

Component State and Handling

The frontend maintains several states to handle the asynchronous nature of AI generation:

• Prompt States: bodyVibePrompt and footerVibePrompt store user input. Sources: src/app/app/page.tsx:886-887
• Loading States: bodyVibeBusy and footerVibeBusy control UI disablement during API calls. Sources: src/app/app/page.tsx:888-889
• Status Indicators: bodyVibeStatus and footerVibeStatus display results such as the model used or error messages. Sources: src/app/app/page.tsx:890-891

Iterative Generation Sequence

Users can iterate on a draft. When a generation is requested, the current content of the HTML editor is sent back to the API as currentHtml, allowing the AI to modify existing work. Sources: src/app/app/page.tsx:1301-1313

Configuration and Deployment

AI Compose requires external API credentials to function. If these are not provided, the feature is disabled and returns an error response. Sources: src/app/api/vibe/route.ts:114-118

Environment Variable	Description	Default Value
OPENAI_API_KEY	Required API key from OpenAI.	-
OPENAI_MODEL	The specific model to use for generation.	gpt-4.1-mini

Sources: src/app/api/vibe/route.ts:114-121, README.md:95-96

Conclusion

The AI Compose feature serves as a bridge between high-level user intent and the complex requirements of email HTML. By utilizing specific system prompts and a clean API interface, it allows for both the creation of new content and the iterative improvement of existing templates, significantly reducing the technical barrier to creating custom email campaigns. Sources: src/app/api/vibe/route.ts:55-72, src/app/app/page.tsx:1296-1300