ChatGPT

A Webflow site holds your content, your pages, and your publishing pipeline. The work around it usually stays manual: auditing pages, rewriting metadata that has drifted, drafting CMS items from a pile of notes, and answering the same visitor question for the hundredth time.

Since July 1, 2026, Webflow has shipped as an official app in ChatGPT, so you can audit a site and act on what the audit finds, then create or update CMS items, without leaving the chat window. Underneath that sits the Webflow MCP server, which gives AI agents structured access to your projects. You can also still put a ChatGPT-powered chatbot on your published pages or build a custom OpenAI API workflow when you need control over every prompt and response.

This fits agency teams managing dozens of client sites, marketing managers who need copy and metadata fast, e-commerce operators generating product descriptions at scale, and developers building custom AI features on Webflow-hosted pages.

How to integrate ChatGPT with Webflow

What is ChatGPT? ChatGPT is OpenAI's conversational AI assistant, used for writing, analysis, and coding help. It also runs third-party apps inside the chat window, which is how Webflow connects to it directly, and it reads from MCP servers, which is how AI tools in general connect to Webflow.

Which path you pick depends on who the AI is working for. If it is working for you, on your site, start in ChatGPT itself. If it is answering your visitors, you need a widget on the published page. There are five ways to connect the two:

• The Webflow app in ChatGPT lets you audit a site, fix SEO, and edit CMS content by asking for it in plain language, with no code and no API key.
• The Webflow MCP server gives coding agents and AI desktop tools the same kind of structured access to your projects, with install guides for a documented set of clients.
• Chatbot widgets and Code Embeds put a visitor-facing assistant on your published pages, running on OpenAI models through a third-party vendor that holds the key.
• The Webflow Data API with the OpenAI API gives you control over prompts, response formatting, and CMS writes, and it needs server-side development.
• Automation platforms connect Webflow events to OpenAI actions for asynchronous jobs, such as turning a form submission into a drafted CMS item.

Most teams end up running two of these at once: one for managing the site and one for talking to visitors. We look at each below, starting with the app that lives inside ChatGPT.

1. Manage your Webflow site from ChatGPT

The Webflow app in ChatGPT is the fastest way to get real work done on a site, because there is nothing to install on the Webflow side and no key to protect. You grant the app access to specific sites, then ask for changes in plain language.

Webflow documents three things the app does: audit a site for SEO, content quality and usability and then implement the fixes directly, create and update CMS content across your collections, and analyze site structure, content and performance so you can see what is working.

To set it up:

1. Open the Webflow app listing in ChatGPT.
2. Grant access to the Webflow sites you want it to manage.
3. Start prompting, for example: "Audit the blog collection for meta descriptions over 160 characters and shorten them," or "Draft three new CMS case study items from these notes."

Webflow for ChatGPT is currently available at no additional cost and does not consume AI credits, though certain AI-powered actions may require AI credits as capabilities expand. Edits follow the same rules as manual ones, so a change is not live on your domain until you publish.

One point of confusion worth clearing up: this is an app inside ChatGPT's own app surface, not an MCP client setup. You do not add a server URL, paste a config file, or run a command. That is also why ChatGPT does not appear in Webflow's MCP install guides, even though the MCP docs name it as a compatible tool.

2. Connect the Webflow MCP server to your other AI tools

The Webflow MCP server is the layer that lets an AI agent read and change a Webflow project rather than guess at it, and it is where the deepest capabilities live. Webflow names Claude Code, Claude Desktop, ChatGPT, Codex and Cursor as tools it works with, and publishes install guides for Claude Code, Claude Desktop, Cursor, Windsurf and Postman. If you already work in one of those, connect it there; our Claude integration page walks through that side.

The server groups its capabilities as follows:

• Design and build: Create and modify a site's visual design, including responsive layouts, elements, styles, components, page branches, custom code, custom fonts, and design systems.
• Manage: Work with CMS content, pages, assets, forms, comments, schema markup, sitemap control, SEO fields, and content audits.
• Analyze: Read traffic and engagement data from Webflow Analyze, including top pages, dimension breakdowns, engagement events, and time on page.
• Automate: Chain multiple steps into repeatable workflows such as design to production pipelines, content analysis, style refactoring, quality assurance, and cross-site management.
• Governance: Control what agents may do through per-site Agent Instructions, permissions and roles, and a site activity log that records the changes they make.

Two things make the setup less repetitive over time: a prompt library of tested requests, and installable skills that teach an agent a workflow once instead of every session.

Be honest with yourself about the limits before you plan a workflow around it. Interactions (IX3) cannot be automated and have to be built by hand. Creating new localized CMS items is not supported. Agents cannot change a site's or Workspace's access settings, such as adding users. And each authorization grants access to a single workspace, so an agency covering several client workspaces authorizes each one separately.

3. Embed a ChatGPT-powered chatbot widget

When you want a chatbot your visitors can talk to rather than one that manages the site, use a third-party platform that runs on OpenAI models and installs with a single script tag. This is the fastest path to a working on-page bot.

Your OpenAI API key stays on the vendor's server, so it never appears in your site code. Here are some options.

YourGPT Chatbot

YourGPT Chatbot is an AI-first, no-code platform for building conversational agents on top of current language models.

You can train a bot on your own data, run conversations in several languages, and connect it to messaging platforms and business tools alongside your site.

Key capabilities include:

• Visual builder: A drag-and-drop editor lets you design the conversation flow without writing any code.
• Multi-source training: Feed the bot PDFs, website pages, Google Drive files, or Notion documents as its knowledge base.
• Multi-language replies: The bot answers in a visitor's language with automatic translation, which matters if your Webflow site is localized.
• In-chat lead capture: Lead-generation forms run inside the conversation, so a qualified visitor never leaves the chat to fill in a form.
• Human handoff: Conversations escalate to a live agent when the bot cannot answer, which keeps support questions from dead-ending.

Aside from YourGPT Chatbot, other options are Chatbase, Elfsight AI Chatbot, and ChatBot.com. Each gives you a dashboard to configure the bot, upload training data, and generate an embed snippet.

To set up a widget using YourGPT as an example:

1. Create an account on the chatbot platform and configure your AI agent with training data (URLs, documents, or Q&A pairs).
2. Go to the platform's deploy or embed section and copy the provided <script> tag.
3. In Webflow, open Site settings, go to the Custom code in head and body tags section, and paste the script into the Footer code field.
4. Click Save changes and publish your site.

These widgets typically support floating chat bubbles on every page, training on your own content, multi-language support, and lead capture during a conversation. YourGPT also offers a Marketplace app install path through Site settings > Apps & integrations, which handles script injection automatically.

Placing a chat interface with a Code Embed

When you need the chat interface at a specific spot in your layout rather than as a floating bubble, use a Code Embed element. Platforms like Chatbase provide an iframe option that renders a full-size chat window inside the page, which works well for dedicated support or FAQ pages.

Here’s how:

1. In your chatbot platform's dashboard, go to the deploy section and select the iframe embed option.
2. In Webflow, open the Add panel and drag a Code Embed element to the location on your canvas.
3. Double-click the element to open the code editor and paste the iframe code, for example:

<iframe
  src="https://www.chatbase.co/chatbot-iframe/YOUR_CHATBOT_ID"
  width="100%"
  style="height: 100%; min-height: 700px"
  frameborder="0">
</iframe>

4. Click Save and close, then publish your site.

The iframe shows a placeholder box while you are building in Webflow but renders fully on the published site. For a bot on a single page only, use per-page custom code: open the Pages panel, click the gear icon on the target page, and paste your script into the "Before </body>" field.

4. Build with the Webflow and OpenAI APIs

For control over prompts, response formatting, CMS writes, and the visitor experience, build a custom integration on both APIs. Our OpenAI integration page covers the platform side in more depth.

Plan for server-side work: JavaScript on the Webflow front end, plus a serverless function such as Cloudflare Workers or AWS Lambda to proxy requests to OpenAI without exposing your key.

Four pieces do most of the work:

• OpenAI Responses API: The Responses API handles chat completions, streaming, function calling, and built-in tools like web search, and it is the current standard for new builds.
• Webflow Data API: The Data API reads and writes CMS collections, retrieves form submissions, and triggers site publishing.
• Webflow webhooks: Webhooks fire on real-time events such as form_submission and collection_item_created, which is what kicks off AI processing.
• OpenAI Batch API: Batch runs process large content jobs asynchronously at lower cost, which suits bulk CMS generation rather than anything a visitor is waiting on.

Never place your OpenAI API key in Webflow custom code or client-side JavaScript. Browser-to-API calls also fail because the OpenAI API does not send CORS headers for browser origins, so every production integration routes through a server-side proxy. If the output reaches visitors, pass inputs and responses through OpenAI's Moderation API first, which is free and classifies text for categories like violence, self-harm, and hate speech.

Setting up a serverless proxy

A serverless proxy sits between your Webflow site and the OpenAI API. It stores your key as an environment variable, accepts requests from your front end, forwards them to OpenAI, and returns the response.

Follow these steps:

1. Create a free Cloudflare account and run npm create cloudflare@latest.
2. Write a Worker that accepts POST requests and reads the key from env.OPENAI_API_KEY. Add the key as a secret in the Cloudflare dashboard, not in the code.
3. Deploy the Worker to obtain a URL such as https://my-worker.username.workers.dev.
4. In Webflow, add custom code to send user input to your Worker URL using fetch().
5. Configure CORS headers in the Worker to allow requests from your Webflow domain.

Vercel Functions, Netlify Functions, and AWS Lambda all work the same way.

Generating CMS content with the API

You can build a pipeline that generates posts or product descriptions with OpenAI and writes them straight to your Webflow CMS.

Here’s the process:

1. Call the OpenAI Responses API from your serverless function and request structured output for fields such as title, body, slug, and meta description.
2. Send a POST to https://api.webflow.com/v2/collections/{collection_id}/items with the content mapped to your CMS fields. Items are created as drafts.
3. Send a second POST to https://api.webflow.com/v2/collections/{collection_id}/items/publish to make the item live.

The site's publish endpoint limits one successful publish per minute, so a batch pipeline has to pace itself between publish calls rather than fire them in a loop.

Processing form submissions with AI

Register a Webflow webhook for the form_submission event to trigger AI processing whenever someone submits a form.

Here’s how to set it up:

1. Register a webhook with POST https://api.webflow.com/v2/sites/{site_id}/webhooks, triggerType set to form_submission, and the URL pointing to your serverless function.
2. When a submission arrives, extract the form data from the payload, send it to the OpenAI Responses API, and process the result (score the lead, generate a response, or write to the CMS).
3. Verify the x-webflow-signature header on every incoming webhook to block spoofed payloads.

Webhooks are asynchronous, so you cannot return the AI response directly to the visitor's browser through this path alone. For real-time responses on submit, intercept the form's submit event with client-side JavaScript, call your proxy, and render the result in the DOM.

5. Connect with Zapier

Automation platforms connect Webflow events to OpenAI actions through a visual builder. These work best for asynchronous jobs such as generating CMS content from form submissions, scheduling posts, or processing orders with AI. They do not handle real-time on-page chat.

Zapier has the clearest pre-built templates for this pair, including workflows that send new Webflow form submissions to OpenAI and write the responses back as Webflow CMS items.

On the Webflow side, the instant triggers are New Form Submission, New Order, Updated Order, and New Comment. On the OpenAI side, the actions include Send Prompt, Extract Structured Data, Generate an Image with DALL·E, and Create Transcription with Whisper.

To set up a form-to-CMS content pipeline:

1. Create a Webflow form with a text input for the user's prompt or topic.
2. In Zapier, set the trigger to Webflow: New Form Submission.
3. Add an action for OpenAI: Send Prompt, mapping the form field to the prompt input.
4. Add a second action for Webflow: Create Live Item, mapping the OpenAI response to your CMS collection fields.

Your OpenAI API key is stored in Zapier's credential vault, not in your Webflow code. Zapier offers a ready-made template for this exact workflow.

What you can build with the ChatGPT Webflow integration

Connecting ChatGPT and Webflow lets you run a site conversationally and add AI features to any page without rebuilding on a different platform:

• Conversational site management: Run SEO and content audits, apply the fixes, and create or update CMS items across collections from inside ChatGPT, with no code and no dashboard hunting.
• AI support chatbot trained on your content: Deploy a chatbot on your help center or product pages that answers questions from your documentation, blog, or FAQ content. Platforms like Chatbase and YourGPT let you upload your site URLs and generate a widget that responds to site-specific queries.
• Automated blog content pipeline: Generate posts from a keyword list or spreadsheet and publish them straight to your Webflow CMS as Collection List items, with Zapier scheduling weekly runs and DALL·E generating featured images.
• Intelligent lead qualification from forms: Process contact form submissions through ChatGPT to score leads, extract structured data such as budget, timeline and company size, and route high-intent prospects to your CRM automatically.
• Agent guardrails for client work: Set per-site Agent Instructions, scope each authorization to one workspace, and review the site activity log so you can see exactly which changes an agent made.

For conversational control with no setup, connect ChatGPT to Webflow and grant it access to your sites. If you would rather build the pipeline yourself, follow our walkthrough on adding OpenAI to Webflow forms.