Webflow CMS Image Generator

A powerful Next.js application for generating and managing AI images for Webflow CMS collections. This tool integrates with OpenAI (DALL-E) and Webflow to automate the process of creating and updating OG images and other assets for your CMS items.

🔗 Related Projects & Resources

Check out our other tools and resources:

• Beton App - The main application.
• Beton Facade - Manage your AI facades.
• Beton Blog - Tips, tricks, and updates.

✨ Features

• Webflow Integration: Seamlessly connect to your Webflow sites and collections.
• AI Image Generation: Generate images using OpenAI's DALL-E 3 based on your CMS content.
• Automated Updates: Automatically upload generated images to Webflow and update CMS items.
• Billing System: Integrated Stripe billing for pay-as-you-go usage.
• SEO Tools: Built-in SEO auditing and improvement suggestions (using Ahrefs data).

🧠 Generation & publishing flow

• All text edits and AI generations are staged locally; nothing is pushed to Webflow until you press Publish.
• Generate Selected counts only the visible columns in the grid. If 9 rows are selected and 5 columns are visible, only 45 fields are generated.
• Free limit = 5 * (visible columns) fields. Usage is tracked per field; inline single-field generation consumes 1 free field if applicable.
• Inline actions: click/drag-drop on image cells to stage uploads; use the wand button to generate a single field immediately (still staged).
• SEO/meta ready: all CMS fields, including SEO/open graph fields returned by Webflow, are surfaced for editing and generation.
• Generations run field-by-field with full row context and field names to keep prompts accurate and avoid failing entire batches.
• Publishing from this tool updates CMS items only; republishing the live site must be confirmed separately inside Webflow.

🛠 Prerequisites

• Node.js 18+
• Supabase Account
• Webflow Account (and API Token)
• OpenAI API Key
• Stripe Account

🚀 Getting Started

1. Clone the repository

git clone https://github.com/getbeton/facade
cd webflow-cms-image-generator
npm install

2. Environment Setup

Copy the example environment file:

cp env.example .env.local

Fill in your credentials in .env.local:

• Supabase: URL and Anon Key.
• Stripe: Secret Key, Webhook Secret, Publishable Key.
• App URL: http://localhost:3000 for development.

3. Database Setup (Supabase)

This project uses Supabase for the backend. You need to apply the database migrations to set up the schema.

1. Install Supabase CLI (if not installed).
2. Login to Supabase: supabase login
3. Link your project: supabase link --project-ref your-project-ref
4. Apply migrations:

supabase db push

🗄️ Database Schema

This project uses Supabase (PostgreSQL). The schema is managed via migrations in supabase/migrations.

Tables

• integrations

  • Stores user API keys (Webflow, OpenAI) encrypted.
  • Linked to profiles.

• sites

  • Stores connected Webflow sites.
  • Tracks preferred domains (primary_domain for the first custom domain if present, webflow_domain fallback, custom_domains JSONB).
  • Linked to integrations.

• collections

  • Stores Webflow collections synced from sites.
  • Includes collection_slug and url_base to build per-item URLs from slugs.
  • Linked to sites.

• profiles

  • Extends Supabase Auth users.
  • Tracks free tier usage and Stripe customer ID.

• payments

  • Stores Stripe payment records for pay-as-you-go.

• generation_logs

  • Tracks every image generation attempt, cost, and status.

• seo_generations

  • Tracks SEO metadata generation requests.

• seo_suggestions

  • Stores generated SEO suggestions (title/description) for review.

• publications

  • One row per publish action; references profiles, collections, and sites.
  • Stores totals for items/fields, success/failure counts, status, and timestamps.

• publication_items

  • Per-CMS-item results for each publication.
  • References publications (and indirectly the user) plus collections; stores slug/url, field totals, status, and errors.

4. Google OAuth Setup

To enable Google Login:

1. Go to the Google Cloud Console.
2. Create a new OAuth 2.0 Client ID.
3. Add https://<your-project>.supabase.co/auth/v1/callback to Authorized redirect URIs.
4. Add your Google Client ID and Secret to your Supabase Auth settings.
5. In Supabase > Authentication > URL Configuration, add http://localhost:3000/** to Redirect URLs.

5. Run the Application

npm run dev

Open http://localhost:3000 to view the app.

6. Run with Docker (hot reload)

Use the dev compose stack to run the app in Docker while keeping hot code reloading:

cp env.example .env.local                    # if you have not created it yet
docker compose -f docker-compose.dev.yml up --build

• The container installs dependencies into an internal node_modules volume, so your host stays clean.
• Code edits on the host are watched with polling (WATCHPACK_POLLING/CHOKIDAR_USEPOLLING) and reload automatically.
• The app listens on http://localhost:3000 inside Docker; update .env.local as needed for Supabase/Stripe keys before starting.
• Stop with docker compose -f docker-compose.dev.yml down (add -v if you want to clear the node_modules volume).

🤝 Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.