How to proxy OpenAI image generation on Webflow Cloud without exposing your API key

Webflow Cloud Apps can support an AI image generator without exposing an OpenAI API key by placing OpenAI image requests in a server-side Next.js Route Handler running on Cloudflare Workers, while a client-side form submits prompts and renders returned base64 PNG data. The setup requires a Webflow site, Webflow CLI, Node.js 22.13.0 or newer, a GitHub-connected deployment workflow, and an OpenAI account with API access; the key should be stored as an uncommitted local environment variable for development and configured separately in Webflow Cloud for deployment. The workflow involves scaffolding a Next.js app at a chosen mount path, validating prompts and forwarding them to OpenAI’s Images API, handling loading and error states in the browser, and deploying through the CLI or GitHub. The guidance recommends using the current gpt-image-2 model rather than deprecated gpt-image-1.5 or gpt-image-1-mini, warns that public endpoints need protections such as rate limiting, prompt limits, filtering, and spending controls, and notes that base64 images can be large. Common problems include missing cloud environment variables, OpenAI content-policy rejections, rate limits, build/runtime configuration issues, and slow requests, which may require lower-quality generation or asynchronous job handling.

Use this post, company, and trend context to find content marketing opportunities, perform competitive analysis, or address product feature gaps via the Plushcap MCP server or the Plushcap API.