OpenAI

The Webflow CMS stores structured content, and forms collect submissions. Webflow's AI features can generate pages and copy, but it has no built-in way to run your own prompts, output schemas, or classification logic against CMS items and form submissions. Form submissions arrive as raw key-value pairs. They lack an urgency score and any attached summary or category. OpenAI models handle that language work, but they have no built-in path onto a Webflow site.

An OpenAI model behind Webflow events can classify a form submission through a Responses API call and write the result back as a live CMS item. Beyond forms, a keyword list can become published blog posts with generated thumbnails and SEO metadata, while a visitor chat widget can answer questions from your CMS content with the API key stored on a server instead of in the page.

This integration suits marketing and content teams who publish at volume into CMS collections and want drafts generated to spec. Support and ops leads use it to triage inbound forms before a person reads them. Developers and agencies use the Webflow Data API and Webflow Cloud to ship visitor-facing AI features across client sites without exposing credentials.

How to integrate OpenAI with Webflow

What is OpenAI? OpenAI is an AI company that sells access to its models through the OpenAI API Platform, a product line separate from ChatGPT. The API exposes text generation through the Responses API, plus embeddings, image generation, transcription, and speech endpoints api.openai.com/v1. A ChatGPT Business subscription does not include API usage, so a Webflow integration needs its own API account and key.

Teams pair the two when content or inbound volume outgrows manual work. OK Gold, a network of licensed dispensaries running one Webflow site per location, uses the OpenAI API to draft long-form editorial stories from structured strain data. Airtable holds the master record for every strain and lab result, and Make scenarios create, update, and unpublish the CMS items across each dispensary site. The pattern generalizes: the site handles publishing and hosting, and the model runs somewhere you control.

The OpenAI-Webflow integration supports three approaches:

• The Webflow app in ChatGPT and Codex, alongside Code Embed elements, covers prompt-driven CMS editing and visitor chat widgets with little or no custom development.
• Zapier, Make, and n8n let you route form submissions, orders, and CMS items through OpenAI models and write results back without writing code.
• The Webflow and OpenAI APIs give you full control over prompts, output schemas, and publishing, but require server-side development.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Edit the CMS from ChatGPT and add a chat widget with Code Embed

Two low-code paths connect OpenAI and Webflow without an automation platform or a full API build, and they run in opposite directions. The Webflow app inside ChatGPT lets an agent read and change your site: collections, items, pages, styles. A Code Embed element goes the other way, placing a chat or text-generation widget on a page for your visitors, as long as that widget talks to a server you control rather than to OpenAI directly. Webflow in ChatGPT is currently available at no additional cost and does not consume AI credits. The embed path needs an active Site plan or a Core, Growth, Agency, or Freelancer Workspace for custom code.

Edit CMS content from ChatGPT

The Webflow app is available in ChatGPT and Codex with built-in skills for content management, site optimization, and development. It runs on the Webflow MCP server, which exposes CMS collections, pages, components, custom code, and the design system as tools an agent can call. Webflow's MCP reference lists site audits for broken links and missing alt text, SEO metadata edits across pages, and bulk CMS updates among the documented uses, and every agent action stays inside your existing Webflow permissions and roles and lands in the site activity log. The ChatGPT MCP Connector listing is the install point, and Webflow publishes it rather than a third party. This is site management for editors, not a visitor-facing feature.

To connect ChatGPT to a site:

1. Install the ChatGPT MCP Connector from the Marketplace and authorize it for the Workspace holding the site you want to edit.
2. View the authorization later at Workspace settings > Integrations > Connected apps, and uninstall on another tab: Workspace settings > Apps & integrations. Removing a Workspace authorization removes it for every site in that Workspace.
3. In ChatGPT, describe the collection or items you want. The MCP server can create a collection and populate its items from a single prompt.

Two documented limits matter before you plan work around it. The server updates existing localized CMS items but will not create new ones, so multi-locale content still starts in Webflow. And each authorization covers a single workspace, so a second workspace means removing and reinstalling the connector.

Place a chat widget with Code Embed

A Code Embed element accepts HTML, CSS, and JavaScript up to 50,000 characters, and Webflow lists live chat apps as a supported use. The widget's script should post messages to a backend endpoint, such as a Webflow Cloud route or a Cloudflare Worker, which holds the key and calls POST /v1/responses. OpenAI's API key safety guidance is explicit: "Never deploy your key in client-side environments like browsers or mobile apps." Anything you paste into an embed or into custom code in head and body tags is readable in browser DevTools, so treat a key that reaches the page as already compromised and rotate it.

To add the widget:

1. Open the Add panel > Advanced and drag a Code Embed element onto the page.
2. Paste the widget markup and a <script> that calls your proxy URL, keeping the block under 50,000 characters.
3. For a site-wide widget, paste the script into Site settings > Custom code > Footer code instead.
4. Publish to your .webflow.io staging subdomain and test the round trip before publishing to your custom domain.

A bundled chat UI often exceeds the character limit, so host larger files on a CDN and reference them with <script src>. OpenAI's ChatKit follows the same shape: an embeddable chat surface on the page, backed by your own server.

Connect with Zapier, Make, or n8n

Zapier, Make, and n8n each publish a dedicated Webflow and OpenAI integration page, which is the practical reason to start with one of the three. IFTTT can pair its Webflow "Form submitted" trigger with ChatGPT, but its ChatGPT service exposes one "Prompt" query and no actions, so it cannot write the result back to Webflow on its own. On every platform that can, the pattern is the same. A Webflow event fires, an OpenAI module transforms the data, and a Webflow action writes the result to the CMS.

Available triggers and actions include:

• Webflow New Form Submission → OpenAI Conversation (Responses API) → Webflow Create Live Item (Zapier)
• Webflow New Order or Updated Order → ChatGPT conversation (Zapier)
• Webflow form submission or collection update → OpenAI Generate a completion → Webflow Create an Item or Publish an Item (Make)
• Webflow Get a Form Submission → OpenAI Transform text to structured data → Webflow Update an Item (Make)
• Webflow Get Many items → OpenAI Generate a Model Response → Webflow Update (n8n)

The Zapier template for form submissions prompts OpenAI with each new entry and adds the response as a live item to "correct grammar, generate summaries, or craft follow-up messages without the need for a manual update." One n8n template pulls ideas from Google Sheets, generates the article and a thumbnail image, and publishes to the CMS with title, image, body, summary, and read time. Another n8n template rewrites existing item titles and meta descriptions to fixed length targets, then auto-publishes. Make carries the largest module library of the three, and n8n is the one you can self-host. Its Webflow node puts the deprecated Data API v1 behind a Legacy toggle, so leave that toggle off.

Build with the Webflow and OpenAI APIs

The API path suits developers who need visitor-facing AI features or bulk content pipelines with full control over prompts, schemas, and publish timing. It requires server-side code. Custom code sections in Webflow only run HTML, CSS, and JavaScript, and the browser is the wrong place for a key. Both APIs use bearer tokens: Authorization: Bearer OPENAI_API_KEY for OpenAI, and an OAuth token or Site Token for the Webflow Data API v2 at api.webflow.com/v2. Target v2 and the Responses API: the Data API v1 deprecation took effect on March 31, 2025, and the Assistants API was sunset on August 26, 2026.

One contract point is worth reading before you pick a path. OpenAI's Services Agreement grants the right to integrate the API into your own applications and make them available to end users, which is what every method on this page does. The same section bars buying, selling, or transferring API keys to or from a third party, which is the clause to check before handing your key to a bring-your-own-key Webflow app. Read it rather than taking our word for the scope.

On the OpenAI side, the Responses API covers text generation, structured JSON output, built-in file search, and background mode for long tasks. On the Webflow side, the Data API reads and writes CMS collections and form submissions, while Webflow webhooks push events to your server as they happen. Each sub-method below pairs one OpenAI endpoint with the Webflow endpoints it needs.

Proxy OpenAI calls through Webflow Cloud

Webflow Cloud runs Next.js, Astro, and Vite on the Workers runtime, so an API route can hold the OpenAI key and answer requests from your pages. Our own form-to-OpenAI tutorial, linked from this page, shows the full flow: a Webflow form posts to an App Route Handler, the handler calls openai.responses.create(), and about 25 lines of custom JavaScript render the returned text without a page reload. The key lives in an environment variable named OPENAI_API_KEY and never reaches the browser.

To build the proxy:

1. Create a Webflow Cloud App, then add OPENAI_API_KEY as an encrypted environment variable.
2. Add a Route Handler that reads the request body, calls POST /v1/responses with the form values as input, and returns the text.
3. In Webflow, add a form and a <script> that intercepts submit, posts to your route, and writes the response into the page.
4. Deploy the app and publish the site. Starter and Basic Site plans allow no custom domain mount for a Cloud app, so those sites stay on .webflow.io.

Webflow Cloud enforces a 20 second timeout per request. For long generations, stream and flush early, or run the response in background mode and receive the response.completed webhook when it finishes.

Generate CMS items with Structured Outputs

Structured Outputs make the model return JSON that matches your collection schema, so the response maps straight onto fieldData without parsing. In the Responses API, set text.format to type: "json_schema" and supply the schema; in Chat Completions, set response_format to type: "json_schema" with strict: true. The create item endpoint then accepts the result as a staged draft, and a separate call publishes it.

To generate and publish items:

1. Call POST /v1/responses with a JSON Schema whose keys match the collection's fields.
2. Send POST https://api.webflow.com/v2/collections/{collection_id}/items with fieldData.name and fieldData.slug set. isDraft defaults to true, and the endpoint returns HTTP 202. Use /items/bulk for up to 100 items per request.
3. Publish with POST /v2/collections/{collection_id}/items/publish and an itemIds array; the response lists publishedItemIds and errors. To skip staging, use POST .../items/live instead.
4. Update existing items with PATCH /v2/collections/{collection_id}/items/{item_id}.

You'll need the cms:write scope for all of these. Generate a Site Token under Site settings > Apps & integrations > API access. A token expires after 365 days of inactivity, which is long enough to forget about and short enough to break a seasonal automation.

Classify form submissions with webhooks

A form_submission webhook delivers each entry to your server within seconds, where a Responses API call can return a category, summary, and sentiment. Register the webhook with POST /v2/sites/{site_id}/webhooks and a body of {"triggerType": "form_submission", "url": "https://your-endpoint.com/..."}. The optional filter targets one form by name and works for this trigger only. The payload carries payload.name, payload.data (the field values), payload.submittedAt, and payload.formId.

To process submissions:

1. Verify the request using the x-webflow-timestamp and x-webflow-signature headers. Compute an HMAC-SHA256 over timestamp + ":" + JSON.stringify(request_body) using your OAuth client secret, or your site token secret if the webhook is not tied to an OAuth app, and reject anything older than 5 minutes. Webhooks created in the dashboard do not include these headers; only API-created ones do.
2. Pass the payload.data pairs to POST /v1/responses as the user message, with a Structured Outputs schema like {"category": "...", "summary": "...", "sentiment": "..."}.
3. For spam or abuse checks, call POST /v1/moderations with OpenAI's current moderation model. The moderation endpoint is free to use and returns flagged, categories, and category_scores.
4. Write the result back with PATCH /v2/sites/{site_id}/form_submissions/{form_submission_id} (forms:write) or create a CMS item for your team's queue.

A failed delivery retries three times, at 10 minute intervals, and then drops the event for good, so return a 200 immediately, log the raw payload, and run the OpenAI call asynchronously.

Index CMS content for semantic search

Embeddings turn each CMS item into a vector you can compare against a visitor's question. That comparison is how a chatbot answers from your own pages instead of general knowledge. Fetch items with GET /v2/collections/{collection_id}/items, paginating with offset and limit, and extract fieldData.name, fieldData.slug, and the rich-text fields. Send them to POST /v1/embeddings, choosing whichever of OpenAI's current embedding models fits your accuracy and cost budget.

To build the index:

1. Batch item text into the input array. Each string caps at 8,192 tokens, so split long rich-text fields before you send them.
2. Store data[].embedding alongside the item id and slug in your database, then rank matches by cosine similarity.
3. At query time, embed the question, pull the top matches, and pass them to POST /v1/responses as context.

If you would rather not run a vector database, upload the content as files to an OpenAI vector store. By default it splits each file into 800 token chunks with 400 tokens of overlap and embeds them automatically. Then call /v1/responses with tools: [{"type": "file_search", "vector_store_ids": [...]}], where max_num_results returns 10 results and can be raised to 50. No webhook fires when ingestion finishes, so poll before you query. A collection_item_changed webhook on the Webflow side tells you when to re-embed.

What you can build with the OpenAI Webflow integration

Integrating OpenAI with Webflow lets you generate, classify, and search site content automatically without hiring for every draft or reading every inbound form by hand.

• Lead qualification from forms: A contact form posts to a webhook or Zapier trigger, OpenAI scores urgency and drafts a reply, and the result lands as a live CMS item or a CRM record. FlowX runs ChatGPT-driven qualification on its Webflow site synced with HubSpot, and an n8n template rejects low-quality leads and pushes the rest to HubSpot and Gmail.
• Automated blog and product content: A Make scenario watches a source of record, an OpenAI call drafts the copy, and items are created, updated, and unpublished across a fleet of sites, as in the OK Gold build above. A keyword-list template in n8n writes the article, converts it to Webflow-ready HTML, and pushes drafts to the CMS for a human to approve.
• AI search over site content: Embed every Collection item once, store the vectors, and answer a visitor's question from your own pages instead of the model's general knowledge. The same pipeline powers a support chatbot grounded in your help center collection and a header search that returns an answer rather than ten links.
• Generated images for CMS entries: A Webflow Cloud route calls OpenAI's current image model on demand and writes the result into a Collection. Server-side, POST /v1/images/generations returns b64_json rather than a hosted URL, so you create asset metadata at POST /v2/sites/{site_id}/assets with fileName and an MD5 fileHash, upload the binary to the returned uploadUrl, and reference the asset in the item.

Use the API path when you need control over prompts and publish timing, including retries under load. For a build you can copy end to end, see the AI image generator walkthrough.

If you would rather manage the site than build against it, connect the MCP server and let ChatGPT or Codex work on your collections, pages, and SEO metadata inside your existing roles and permissions.