Skip to main content
Connect Webflow via OAuth and describe what you want to build in chat. Rocket reads your CMS collections, pages, and site structure as live context, bridging your visual design and your app’s data layer seamlessly.
This connector is only available for Next.js TypeScript web build tasks.
Webflow is a workspace-level connector. Connect it once from Settings and it is available across all tasks.

​
What you can do

Use CMS collections as data

A blog collection becomes a blog page. A product catalog becomes a storefront. A team roster becomes a people directory.

Publish content updates

Push new CMS items and content updates programmatically. Automate publishing workflows without touching the Webflow editor.

Pull live site structure

Read your Webflow site’s pages, assets, and components to generate code that matches what already exists visually.

Sync Webflow as a data source

Keep your Next.js app in sync with Webflow CMS in real time. No manual exports or copy-paste.

​
Before you connect

Webflow uses OAuth, so no API key is required. The connection flow has two steps: check the redirect URL and authorize Rocket access to your Webflow account, then select the specific sites or workspaces to grant access to.
Rocket can only access the Webflow site you select during the connection flow. To switch sites, disconnect and reconnect with the new site selected.

​
Connect Webflow

You can connect from three places. All do the same thing.Option 1: From chatType a prompt that mentions Webflow - for example, Connect my Webflow site and list the Blog CMS collection. Rocket detects the intent and shows a Connect button inline. Click it to open the authorization flow.
Chat showing a Connect button inline after a Webflow prompt.Chat showing a Connect button inline after a Webflow prompt.
Option 2: From the Connectors tabClick the ... button in the preview toolbar, then select Connectors.
Toolbar dropdown with Connectors option highlighted.Toolbar dropdown with Connectors option highlighted.
Click the Webflow card, then click Connect with Webflow.
Connectors panel showing the Webflow card with a Connect with Webflow button.Connectors panel showing the Webflow card with a Connect with Webflow button.
Option 3: From workspace Settings

Connect from workspace Settings

Connect once from Settings and it is available across all tasks.
Step 1: Authorize RocketWebflow MCP’s authorization screen opens. Review what Rocket is requesting access to, check I recognize and trust this URL, then click Continue.
Webflow MCP screen showing Rocket is requesting access with a Continue button.
Step 2: Select sites to authorizeOn the next screen, select the Webflow sites or workspaces you want Rocket to access, then click Authorize App.
Webflow MCP Bridge App screen showing site and workspace selection.
A green dot appears next to Webflow when the connection is active.Disconnect

Disconnect a service

Disconnect or switch sites from workspace Settings.

​
Example prompts

Use casePrompt
Blog from CMSPull the Blog CMS collection from my Webflow site and build a blog page with listing and detail views.
Product catalogUse the Products CMS collection from Webflow and build a product grid with filtering and a product detail page.
Team pageFetch the Team Members collection from Webflow and render a responsive team directory with photos and bios.
Publish CMS itemAdd a form that creates a new CMS item in the Webflow Blog collection and publishes it immediately.
Sync collectionsList all CMS collections from my Webflow site and show me the fields available in each one.
Content dashboardBuild an admin dashboard that lets me view, create, and update CMS items across all my Webflow collections.

​
Tips

  • Select the right site during setup. If your Webflow workspace has multiple sites, make sure you pick the one that contains the collections you want to use.
  • To switch sites, reconnect. You can only connect one Webflow site at a time per workspace. Disconnect and reconnect to switch to a different site.
  • Webflow tools are powered by MCP. Rocket connects to Webflow via a live MCP integration. It reads your real site structure and CMS data at generation time, not static exports.
  • Publishing requires the right Webflow plan. Webflow’s CMS API publishing capabilities depend on your Webflow subscription. Make sure your plan supports CMS API access.
  • Pair with Supabase for user-specific data. Webflow CMS is great for editorial content. Use Supabase alongside it for user accounts, preferences, and transactional data.

​
What’s next?

Supabase

Add user auth and a database alongside your Webflow CMS content.

Strapi

Need a headless CMS you fully control? Strapi is a self-hosted alternative.

Airtable

Use Airtable as a lightweight CMS alongside or instead of Webflow collections.

Netlify

Deploy your Webflow-powered Next.js app to Netlify with one click.