@easybits.cloud/html-tailwind-generator 0.1.0 → 0.1.2

package/README.md

@@ -6,12 +6,12 @@ Built and maintained by [EasyBits](https://easybits.cloud).
 
 ## Features
 
-- **AI Generation** — Streaming landing page creation with Claude (Sonnet for generation, Haiku for refinement)
+- **AI Generation** — Streaming landing page creation with Claude or OpenAI GPT-4o
 - **Canvas Editor** — iframe-based preview with click-to-select, inline text editing, section reorder
 - **Floating Toolbar** — AI prompt input, style presets (Minimal, Cards, Bold, Glass, Dark), reference image support
 - **Code Editor** — CodeMirror 6 with HTML syntax, flash highlight on scroll-to-code, format, Cmd+S
 - **Theme System** — 5 preset themes (Neutral, Dark, Slate, Midnight, Warm) + custom multi-color picker
-- **Image Enrichment** — Auto-replace placeholder images with Pexels stock photos
+- **Image Enrichment** — Auto-replace placeholder images with Pexels stock photos or DALL-E generated images
 - **Deploy** — To EasyBits hosting (`slug.easybits.cloud`) or any S3-compatible storage
 
 ## Install
@@ -20,16 +20,41 @@ Built and maintained by [EasyBits](https://easybits.cloud).
 npm install @easybits.cloud/html-tailwind-generator
 ```
 
+## Environment Variables
+
+All API keys can be set via environment variables instead of passing them explicitly:
+
+| Variable | Used by | Description |
+|----------|---------|-------------|
+| `OPENAI_API_KEY` | `generateLanding`, `refineLanding`, DALL-E images | OpenAI API key — enables GPT-4o generation + DALL-E 3 images |
+| `ANTHROPIC_API_KEY` | `generateLanding`, `refineLanding` | Anthropic API key (auto-read by `@ai-sdk/anthropic`) |
+| `PEXELS_API_KEY` | `enrichImages`, `searchImage` | Pexels stock photo API key |
+
+**Priority**: If both `OPENAI_API_KEY` and `ANTHROPIC_API_KEY` are set, OpenAI takes precedence. To force Anthropic, pass `anthropicApiKey` explicitly and omit `openaiApiKey`.
+
 ## Quick Start
 
 ### Generate a landing page (server-side)
 
+The simplest usage — set either `OPENAI_API_KEY` or `ANTHROPIC_API_KEY` (plus `PEXELS_API_KEY` for stock photos) in your `.env`:
+
 ```ts
 import { generateLanding } from "@easybits.cloud/html-tailwind-generator/generate";
 
+const sections = await generateLanding({
+  prompt: "SaaS de gestión de proyectos para equipos remotos",
+  onSection(section) {
+    console.log("New section:", section.label);
+  },
+});
+```
+
+You can also pass keys explicitly if you prefer:
+
+```ts
 const sections = await generateLanding({
   anthropicApiKey: "sk-ant-...",
-  pexelsApiKey: "...",           // optional, for stock photos
+  pexelsApiKey: "...",
   prompt: "SaaS de gestión de proyectos para equipos remotos",
   onSection(section) {
     console.log("New section:", section.label);
@@ -38,17 +63,33 @@ const sections = await generateLanding({
     console.log("Images enriched for", id);
   },
 });
+```
+
+### Generate with OpenAI + DALL-E
 
-console.log(`Generated ${sections.length} sections`);
+Pass `openaiApiKey` to use GPT-4o for text and DALL-E 3 for images (one key for everything):
+
+```ts
+const sections = await generateLanding({
+  openaiApiKey: "sk-...",
+  prompt: "SaaS de gestión de proyectos para equipos remotos",
+  onSection(section) {
+    console.log("New section:", section.label);
+  },
+});
 ```
 
+When `openaiApiKey` is provided:
+- **Generation** uses GPT-4o (or custom `model`)
+- **Refinement** uses GPT-4o-mini (GPT-4o when `referenceImage` is provided)
+- **Images** use DALL-E 3 with Pexels as fallback
+
 ### Refine a section
 
 ```ts
 import { refineLanding } from "@easybits.cloud/html-tailwind-generator/refine";
 
 const html = await refineLanding({
-  anthropicApiKey: "sk-ant-...",
   currentHtml: sections[0].html,
   instruction: "Make it more minimal with more whitespace",
   onChunk(accumulated) {
@@ -132,14 +173,16 @@ const url = await deployToS3({
 
 ## Exports
 
-| Path | Description |
-|------|-------------|
-| `@easybits.cloud/html-tailwind-generator` | Everything (types, themes, builders, generate, refine, deploy, images, components) |
-| `@easybits.cloud/html-tailwind-generator/generate` | `generateLanding`, `extractJsonObjects`, `SYSTEM_PROMPT` |
-| `@easybits.cloud/html-tailwind-generator/refine` | `refineLanding`, `REFINE_SYSTEM` |
-| `@easybits.cloud/html-tailwind-generator/deploy` | `deployToEasyBits`, `deployToS3` |
-| `@easybits.cloud/html-tailwind-generator/images` | `searchImage`, `enrichImages`, `findImageSlots` |
-| `@easybits.cloud/html-tailwind-generator/components` | `Canvas`, `SectionList`, `FloatingToolbar`, `CodeEditor` |
+| Path | Exports |
+|------|---------|
+| `@easybits.cloud/html-tailwind-generator` | Everything below (re-exported for convenience) |
+| `@easybits.cloud/html-tailwind-generator/generate` | `generateLanding`, `extractJsonObjects`, `SYSTEM_PROMPT`, `PROMPT_SUFFIX`, type `GenerateOptions` |
+| `@easybits.cloud/html-tailwind-generator/refine` | `refineLanding`, `REFINE_SYSTEM`, type `RefineOptions` |
+| `@easybits.cloud/html-tailwind-generator/deploy` | `deployToEasyBits`, `deployToS3`, types `DeployToS3Options`, `DeployToEasyBitsOptions` |
+| `@easybits.cloud/html-tailwind-generator/images` | `searchImage`, `enrichImages`, `findImageSlots`, `generateImage`, type `PexelsResult` |
+| `@easybits.cloud/html-tailwind-generator/components` | `Canvas`, `SectionList`, `FloatingToolbar`, `CodeEditor`, type `CanvasHandle` |
+
+Types also exported from the root path: `Section3`, `IframeMessage`, `LandingTheme`, `CustomColors`.
 
 ## Theme System
 
@@ -156,18 +199,24 @@ The generator uses a semantic color system with CSS custom properties:
 **Required:**
 - `react` >= 18
 - `ai` >= 4 (Vercel AI SDK)
-- `@ai-sdk/anthropic` >= 3
+- `@ai-sdk/anthropic` >= 3 (for Claude)
+
+**Optional (for OpenAI support):**
+- `@ai-sdk/openai` >= 1
 
 **Optional (for editor components):**
 - `react-dom`, `react-icons`
-- `@codemirror/*` packages (for CodeEditor)
+- CodeMirror packages (required if you use `CodeEditor`):
+  ```bash
+  npm install @codemirror/lang-html @codemirror/state @codemirror/theme-one-dark @codemirror/view @codemirror/commands @codemirror/search @codemirror/language @codemirror/autocomplete
+  ```
 
 ## TODO
 
 > These are planned improvements — contributions welcome for noncommercial use.
 
 - [ ] **Inline Tailwind CSS build** — Replace CDN `<script src="tailwindcss.com">` with `@tailwindcss/standalone` or PostCSS to generate only used CSS as `<style>`. Faster load, no external dependency, production-ready.
-- [ ] **DALL-E image generation** — Add `openaiApiKey` option to generate unique images instead of Pexels stock. Sections with `data-image-query` could use AI-generated images for cases where stock photos don't fit.
+- [x] **DALL-E image generation** — `openaiApiKey` option generates unique images via DALL-E 3 with Pexels fallback.
 - [ ] **tsup build** — Add a proper build step (ESM + CJS + types) for npm publish. Currently exported as raw TypeScript source, which works for monorepo consumers but not for external npm users.
 - [ ] **i18n** — Component labels are in Spanish. Add a `locale` prop or i18n system for English and other languages.
 - [ ] **Tests** — Unit tests for `extractJsonObjects`, `findImageSlots`, `buildDeployHtml`, `buildCustomTheme`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easybits.cloud/html-tailwind-generator",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "AI-powered landing page generator with Tailwind CSS — canvas editor, streaming generation, and one-click deploy",
   "license": "PolyForm-Noncommercial-1.0.0",
   "type": "module",
@@ -22,6 +22,7 @@
     "react-dom": ">=18",
     "ai": ">=4",
     "@ai-sdk/anthropic": ">=3",
+    "@ai-sdk/openai": ">=1",
     "@codemirror/lang-html": ">=6",
     "@codemirror/state": ">=6",
     "@codemirror/theme-one-dark": ">=6",
@@ -33,16 +34,39 @@
     "react-icons": ">=5"
   },
   "peerDependenciesMeta": {
-    "@codemirror/lang-html": { "optional": true },
-    "@codemirror/state": { "optional": true },
-    "@codemirror/theme-one-dark": { "optional": true },
-    "@codemirror/view": { "optional": true },
-    "@codemirror/commands": { "optional": true },
-    "@codemirror/search": { "optional": true },
-    "@codemirror/language": { "optional": true },
-    "@codemirror/autocomplete": { "optional": true },
-    "react-icons": { "optional": true },
-    "react-dom": { "optional": true }
+    "@codemirror/lang-html": {
+      "optional": true
+    },
+    "@codemirror/state": {
+      "optional": true
+    },
+    "@codemirror/theme-one-dark": {
+      "optional": true
+    },
+    "@codemirror/view": {
+      "optional": true
+    },
+    "@codemirror/commands": {
+      "optional": true
+    },
+    "@codemirror/search": {
+      "optional": true
+    },
+    "@codemirror/language": {
+      "optional": true
+    },
+    "@codemirror/autocomplete": {
+      "optional": true
+    },
+    "react-icons": {
+      "optional": true
+    },
+    "@ai-sdk/openai": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
   },
   "dependencies": {
     "nanoid": "^5.1.5"

package/src/generate.ts

@@ -3,8 +3,22 @@ import { createAnthropic } from "@ai-sdk/anthropic";
 import { nanoid } from "nanoid";
 import { findImageSlots } from "./images/enrichImages";
 import { searchImage } from "./images/pexels";
+import { generateImage } from "./images/dalleImages";
 import type { Section3 } from "./types";
 
+function resolveModel(opts: { openaiApiKey?: string; anthropicApiKey?: string; modelId?: string; defaultOpenai: string; defaultAnthropic: string }) {
+  const openaiKey = opts.openaiApiKey || process.env.OPENAI_API_KEY;
+  if (openaiKey) {
+    const { createOpenAI } = require("@ai-sdk/openai");
+    const openai = createOpenAI({ apiKey: openaiKey });
+    return openai(opts.modelId || opts.defaultOpenai);
+  }
+  const anthropic = opts.anthropicApiKey
+    ? createAnthropic({ apiKey: opts.anthropicApiKey })
+    : createAnthropic();
+  return anthropic(opts.modelId || opts.defaultAnthropic);
+}
+
 export const SYSTEM_PROMPT = `You are a world-class web designer who creates AWARD-WINNING landing pages. Your designs win Awwwards, FWA, and CSS Design Awards. You think in terms of visual hierarchy, whitespace, and emotional impact.
 
 RULES:
@@ -113,6 +127,8 @@ export function extractJsonObjects(text: string): [any[], string] {
 export interface GenerateOptions {
   /** Anthropic API key. Falls back to ANTHROPIC_API_KEY env var */
   anthropicApiKey?: string;
+  /** OpenAI API key. If provided, uses GPT-4o instead of Claude */
+  openaiApiKey?: string;
   /** Landing page description prompt */
   prompt: string;
   /** Reference image (base64 data URI) for vision-based generation */
@@ -121,7 +137,7 @@ export interface GenerateOptions {
   extraInstructions?: string;
   /** Custom system prompt (overrides default SYSTEM_PROMPT) */
   systemPrompt?: string;
-  /** Model ID (default: claude-sonnet-4-6) */
+  /** Model ID (default: gpt-4o for OpenAI, claude-sonnet-4-6 for Anthropic) */
   model?: string;
   /** Pexels API key for image enrichment. Falls back to PEXELS_API_KEY env var */
   pexelsApiKey?: string;
@@ -142,11 +158,12 @@ export interface GenerateOptions {
 export async function generateLanding(options: GenerateOptions): Promise<Section3[]> {
   const {
     anthropicApiKey,
+    openaiApiKey: _openaiApiKey,
     prompt,
     referenceImage,
     extraInstructions,
     systemPrompt = SYSTEM_PROMPT,
-    model: modelId = "claude-sonnet-4-6",
+    model: modelId,
     pexelsApiKey,
     onSection,
     onImageUpdate,
@@ -154,11 +171,8 @@ export async function generateLanding(options: GenerateOptions): Promise<Section
     onError,
   } = options;
 
-  const anthropic = anthropicApiKey
-    ? createAnthropic({ apiKey: anthropicApiKey })
-    : createAnthropic();
-
-  const model = anthropic(modelId);
+  const openaiApiKey = _openaiApiKey || process.env.OPENAI_API_KEY;
+  const model = resolveModel({ openaiApiKey, anthropicApiKey, modelId, defaultOpenai: "gpt-4o", defaultAnthropic: "claude-sonnet-4-6" });
 
   // Build prompt content (supports multimodal with reference image)
   const extra = extraInstructions ? `\nAdditional instructions: ${extraInstructions}` : "";
@@ -207,7 +221,7 @@ export async function generateLanding(options: GenerateOptions): Promise<Section
         allSections.push(section);
         onSection?.(section);
 
-        // Enrich images with Pexels (non-blocking per section)
+        // Enrich images (DALL-E if openaiApiKey, otherwise Pexels)
         const slots = findImageSlots(section.html);
         if (slots.length > 0) {
           const sectionRef = section;
@@ -216,8 +230,15 @@ export async function generateLanding(options: GenerateOptions): Promise<Section
             (async () => {
               const results = await Promise.allSettled(
                 slotsSnapshot.map(async (slot) => {
-                  const img = await searchImage(slot.query, pexelsApiKey).catch(() => null);
-                  const url = img?.url || `https://placehold.co/800x500/1f2937/9ca3af?text=${encodeURIComponent(slot.query.slice(0, 30))}`;
+                  let url: string | null = null;
+                  if (openaiApiKey) {
+                    url = await generateImage(slot.query, openaiApiKey).catch(() => null);
+                  }
+                  if (!url) {
+                    const img = await searchImage(slot.query, pexelsApiKey).catch(() => null);
+                    url = img?.url || null;
+                  }
+                  url ??= `https://placehold.co/800x500/1f2937/9ca3af?text=${encodeURIComponent(slot.query.slice(0, 30))}`;
                   return { slot, url };
                 })
               );

package/src/images/dalleImages.ts

@@ -0,0 +1,29 @@
+/**
+ * Generate an image using DALL-E 3 API.
+ */
+export async function generateImage(
+  query: string,
+  openaiApiKey: string
+): Promise<string> {
+  const res = await fetch("https://api.openai.com/v1/images/generations", {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${openaiApiKey}`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      model: "dall-e-3",
+      prompt: query,
+      n: 1,
+      size: "1792x1024",
+    }),
+  });
+
+  if (!res.ok) {
+    const err = await res.text().catch(() => "Unknown error");
+    throw new Error(`DALL-E API error ${res.status}: ${err}`);
+  }
+
+  const data = await res.json();
+  return data.data[0].url;
+}

package/src/images/enrichImages.ts

@@ -1,4 +1,5 @@
 import { searchImage } from "./pexels";
+import { generateImage } from "./dalleImages";
 
 interface ImageMatch {
   query: string;
@@ -102,14 +103,21 @@ export function findImageSlots(html: string): ImageMatch[] {
 /**
  * Enrich all images in an HTML string with Pexels photos.
  */
-export async function enrichImages(html: string, pexelsApiKey?: string): Promise<string> {
+export async function enrichImages(html: string, pexelsApiKey?: string, openaiApiKey?: string): Promise<string> {
   const slots = findImageSlots(html);
   if (slots.length === 0) return html;
 
   let result = html;
   const promises = slots.map(async (slot) => {
-    const img = await searchImage(slot.query, pexelsApiKey).catch(() => null);
-    const url = img?.url || `https://placehold.co/800x500/1f2937/9ca3af?text=${encodeURIComponent(slot.query.slice(0, 30))}`;
+    let url: string | null = null;
+    if (openaiApiKey) {
+      url = await generateImage(slot.query, openaiApiKey).catch(() => null);
+    }
+    if (!url) {
+      const img = await searchImage(slot.query, pexelsApiKey).catch(() => null);
+      url = img?.url || null;
+    }
+    url ??= `https://placehold.co/800x500/1f2937/9ca3af?text=${encodeURIComponent(slot.query.slice(0, 30))}`;
     const replacement = slot.replaceStr.replace("{url}", url);
     result = result.replaceAll(slot.searchStr, replacement);
   });

package/src/images/index.ts

@@ -1,2 +1,3 @@
 export { searchImage, type PexelsResult } from "./pexels";
 export { enrichImages, findImageSlots } from "./enrichImages";
+export { generateImage } from "./dalleImages";

package/src/index.ts

@@ -44,6 +44,7 @@ export {
   searchImage,
   enrichImages,
   findImageSlots,
+  generateImage,
   type PexelsResult,
 } from "./images/index";
 

package/src/refine.ts

@@ -2,6 +2,19 @@ import { streamText } from "ai";
 import { createAnthropic } from "@ai-sdk/anthropic";
 import { enrichImages } from "./images/enrichImages";
 
+function resolveModel(opts: { openaiApiKey?: string; anthropicApiKey?: string; modelId?: string; defaultOpenai: string; defaultAnthropic: string }) {
+  const openaiKey = opts.openaiApiKey || process.env.OPENAI_API_KEY;
+  if (openaiKey) {
+    const { createOpenAI } = require("@ai-sdk/openai");
+    const openai = createOpenAI({ apiKey: openaiKey });
+    return openai(opts.modelId || opts.defaultOpenai);
+  }
+  const anthropic = opts.anthropicApiKey
+    ? createAnthropic({ apiKey: opts.anthropicApiKey })
+    : createAnthropic();
+  return anthropic(opts.modelId || opts.defaultAnthropic);
+}
+
 export const REFINE_SYSTEM = `You are an expert HTML/Tailwind CSS developer. You receive the current HTML of a landing page section and a user instruction.
 
 RULES:
@@ -26,6 +39,8 @@ TAILWIND v3 NOTES:
 export interface RefineOptions {
   /** Anthropic API key. Falls back to ANTHROPIC_API_KEY env var */
   anthropicApiKey?: string;
+  /** OpenAI API key. If provided, uses GPT-4o-mini instead of Claude */
+  openaiApiKey?: string;
   /** Current HTML of the section being refined */
   currentHtml: string;
   /** User instruction for refinement */
@@ -34,7 +49,7 @@ export interface RefineOptions {
   referenceImage?: string;
   /** Custom system prompt (overrides default REFINE_SYSTEM) */
   systemPrompt?: string;
-  /** Model ID (default: claude-haiku-4-5-20251001, claude-sonnet-4-6 when referenceImage is provided) */
+  /** Model ID (default: gpt-4o-mini/gpt-4o for OpenAI, claude-haiku/claude-sonnet for Anthropic) */
   model?: string;
   /** Pexels API key for image enrichment. Falls back to PEXELS_API_KEY env var */
   pexelsApiKey?: string;
@@ -53,6 +68,7 @@ export interface RefineOptions {
 export async function refineLanding(options: RefineOptions): Promise<string> {
   const {
     anthropicApiKey,
+    openaiApiKey: _openaiApiKey,
     currentHtml,
     instruction,
     referenceImage,
@@ -64,13 +80,10 @@ export async function refineLanding(options: RefineOptions): Promise<string> {
     onError,
   } = options;
 
-  const anthropic = anthropicApiKey
-    ? createAnthropic({ apiKey: anthropicApiKey })
-    : createAnthropic();
-
-  // Use Haiku for speed, Sonnet for vision
-  const defaultModel = referenceImage ? "claude-sonnet-4-6" : "claude-haiku-4-5-20251001";
-  const model = anthropic(modelId || defaultModel);
+  const openaiApiKey = _openaiApiKey || process.env.OPENAI_API_KEY;
+  const defaultOpenai = referenceImage ? "gpt-4o" : "gpt-4o-mini";
+  const defaultAnthropic = referenceImage ? "claude-sonnet-4-6" : "claude-haiku-4-5-20251001";
+  const model = resolveModel({ openaiApiKey, anthropicApiKey, modelId, defaultOpenai, defaultAnthropic });
 
   // Build content (supports multimodal with reference image)
   const content: any[] = [];
@@ -102,8 +115,8 @@ export async function refineLanding(options: RefineOptions): Promise<string> {
       html = html.replace(/^```(?:html|xml)?\s*/, "").replace(/\s*```$/, "");
     }
 
-    // Enrich images
-    html = await enrichImages(html, pexelsApiKey);
+    // Enrich images (DALL-E if openaiApiKey, otherwise Pexels)
+    html = await enrichImages(html, pexelsApiKey, openaiApiKey);
 
     onDone?.(html);
     return html;