@easybits.cloud/html-tailwind-generator 0.1.1 → 0.1.3

package/README.md

@@ -26,16 +26,19 @@ All API keys can be set via environment variables instead of passing them explic
 
 | 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 |
 
-OpenAI keys must be passed explicitly via `openaiApiKey` — there is no env var fallback (to avoid accidentally mixing providers).
+**Priority**: If both `OPENAI_API_KEY` and `ANTHROPIC_API_KEY` are set, OpenAI takes precedence. To force Anthropic, pass `anthropicApiKey` explicitly and omit `openaiApiKey`.
+
+**Planned**: Mix providers — use Anthropic for text generation + DALL-E for images (best of both). This is on the roadmap; [open an issue](https://github.com/blissito/easybits/issues) to bump priority.
 
 ## Quick Start
 
 ### Generate a landing page (server-side)
 
-The simplest usage — just set `ANTHROPIC_API_KEY` and `PEXELS_API_KEY` in your `.env`:
+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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easybits.cloud/html-tailwind-generator",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "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",
@@ -34,17 +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 },
-    "@ai-sdk/openai": { "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

@@ -7,9 +7,10 @@ import { generateImage } from "./images/dalleImages";
 import type { Section3 } from "./types";
 
 function resolveModel(opts: { openaiApiKey?: string; anthropicApiKey?: string; modelId?: string; defaultOpenai: string; defaultAnthropic: string }) {
-  if (opts.openaiApiKey) {
+  const openaiKey = opts.openaiApiKey || process.env.OPENAI_API_KEY;
+  if (openaiKey) {
     const { createOpenAI } = require("@ai-sdk/openai");
-    const openai = createOpenAI({ apiKey: opts.openaiApiKey });
+    const openai = createOpenAI({ apiKey: openaiKey });
     return openai(opts.modelId || opts.defaultOpenai);
   }
   const anthropic = opts.anthropicApiKey
@@ -157,7 +158,7 @@ export interface GenerateOptions {
 export async function generateLanding(options: GenerateOptions): Promise<Section3[]> {
   const {
     anthropicApiKey,
-    openaiApiKey,
+    openaiApiKey: _openaiApiKey,
     prompt,
     referenceImage,
     extraInstructions,
@@ -170,6 +171,7 @@ export async function generateLanding(options: GenerateOptions): Promise<Section
     onError,
   } = options;
 
+  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)

package/src/refine.ts

@@ -3,9 +3,10 @@ import { createAnthropic } from "@ai-sdk/anthropic";
 import { enrichImages } from "./images/enrichImages";
 
 function resolveModel(opts: { openaiApiKey?: string; anthropicApiKey?: string; modelId?: string; defaultOpenai: string; defaultAnthropic: string }) {
-  if (opts.openaiApiKey) {
+  const openaiKey = opts.openaiApiKey || process.env.OPENAI_API_KEY;
+  if (openaiKey) {
     const { createOpenAI } = require("@ai-sdk/openai");
-    const openai = createOpenAI({ apiKey: opts.openaiApiKey });
+    const openai = createOpenAI({ apiKey: openaiKey });
     return openai(opts.modelId || opts.defaultOpenai);
   }
   const anthropic = opts.anthropicApiKey
@@ -67,7 +68,7 @@ export interface RefineOptions {
 export async function refineLanding(options: RefineOptions): Promise<string> {
   const {
     anthropicApiKey,
-    openaiApiKey,
+    openaiApiKey: _openaiApiKey,
     currentHtml,
     instruction,
     referenceImage,
@@ -79,6 +80,7 @@ export async function refineLanding(options: RefineOptions): Promise<string> {
     onError,
   } = options;
 
+  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 });