Webflow MCP Setup: OAuth, Site Access, and the Bridge App
Connect Webflow through its hosted OAuth server, authorize the intended site, and verify a read before editing. Keep the Bridge App distinction clear: most API work runs remotely, while live Designer context needs an open Designer session.
Connect Webflow through its hosted OAuth server, authorize the intended site, and verify a read before editing. Keep the Bridge App distinction clear: most API work runs remotely, while live Designer context needs an open Designer session.
Table of contents
- What do you need before connecting?
- How do you connect and authorize one site?
- When must the Bridge App remain open?
- How do you verify access without publishing?
- How do you diagnose permission and mode errors?
- How should you move from reading to editing?
What do you need before connecting?
You need a Webflow account with access to the intended site and an MCP client that supports the chosen connection method. Webflow's current documentation lists the server as available on all Site plans, including Starter, and excludes the Reviewer role from connecting. Existing role permissions still apply. Source: Webflow overview.
Choose a site where a mistaken edit is recoverable before experimenting. A staging site or disposable project is easier to reason about than a production marketing site with active campaigns. Record the site's name and identifier, then decide whether your first workflow needs CMS data, page structure, or live Designer context.
Check the publisher and destination through the Webflow server listing. Several tutorials describe earlier versions or different deployment paths. A local package example may introduce token handling that the hosted OAuth route does not require.
Our position is simple: connecting is an access decision, not permission to redesign everything. Define the first task before you authorize the server. “Inspect this page's heading hierarchy” is a clearer starting point than “improve my website.”
How do you connect and authorize one site?
Add https://mcp.webflow.com/mcp as a remote connector, complete Webflow OAuth, and select only the sites and Workspaces relevant to your task. Webflow provides client-specific connectors and plugins, plus a manual URL for other compatible clients. Source: connection instructions.
Follow this sequence:
- Open your client's connector or MCP settings.
- Choose its remote-server installation path and enter the official URL.
- Review the account shown in the browser authorization flow.
- Select the intended site access and finish authorization.
- Return to the client and confirm the server's tools are available.
If your client uses a configuration file, validate that file's structure before restarting it. Config Validator can catch JSON mistakes, while the Cursor guide explains that client's configuration locations. Neither can verify your Webflow account permissions.
The developer getting-started guide describes OAuth site authorization and automatic Bridge App installation. Installation and an active Bridge connection are different states: the app can be installed while no Designer session is connected.
When must the Bridge App remain open?
Keep the Bridge App open when the task depends on the live Designer session. Webflow currently says most Data API operations do not require it, including many changes to elements, styles, variables, CMS content, and pages. The Bridge supplies live context such as snapshots, selection, page, mode, branch, and canvas navigation. Source: architecture.
| Task | Connection to check | Useful first verification |
|---|---|---|
| Read CMS or site data | Hosted OAuth connection | Expected site and collection appear |
| Inspect selected Designer element | Designer plus Bridge | Returned selection matches the canvas |
| Capture a visual snapshot | Designer plus Bridge | Snapshot refers to the intended element |
| Work with current mode or branch | Live Designer context | Mode and branch match the session |
For Bridge-dependent work, open the intended site in Designer, launch the Webflow MCP Bridge App from Apps, and wait for its connected state. It may be minimized, but it must remain open for those capabilities.
Do not troubleshoot a missing visual snapshot by repeatedly granting wider OAuth access. First establish whether the request needs a live session. That distinction prevents unnecessary permission changes and saves considerable confusion.
How do you verify access without publishing?
Read one known site and one known page, then compare their identifiers with Webflow before requesting edits. A connection indicator only proves that some communication succeeded; it does not prove the assistant selected the right site, locale, or page.
Try this prompt: “List the sites available through this Webflow connection. Identify the site I name, then read the title and identifier of its homepage. Do not change content, settings, assets, or publishing state.” If more than one site has a similar name, require an explicit identifier before continuing.
Next, test the specific context you need. For CMS work, inspect one known collection and item. For Designer work, select a recognizable element yourself and ask the assistant to describe that selection. The Webflow overview describes the range of supported work; your verification should cover your own narrow task rather than every available feature.
Save a short acceptance record: site identifier, page or item identifier, client, and date. Do not include OAuth tokens. If a later request returns the wrong content, this gives you a concrete baseline to compare instead of relying on the assistant's memory.
How do you diagnose permission and mode errors?
Check account identity, authorized sites, role, Designer mode, and Bridge state separately. A missing site and a forbidden editing tool are not the same failure. Reinstalling the connector can obscure the original cause without fixing either one.
Use the symptom to choose the next check:
- No tools appear: confirm the server entry is enabled and the client completed authorization.
- The site is absent: inspect which account and sites were authorized.
- A tool returns
ModeForbidden: compare the operation with the current Designer mode. - Live selection or snapshots fail: confirm the correct Designer tab and Bridge connection.
- Configuration cannot load: inspect the file structure before changing credentials.
Webflow documents mode-aware tool behavior and permission enforcement in how the server works. Treat a permission denial as useful information. Do not immediately promote your account or grant access to every Workspace to make an error disappear.
Use Config Doctor for client-side configuration troubleshooting. If the connection works but one operation fails, preserve the operation name, target identifier, and error message after removing sensitive data. That is a more useful support report than an entire account export.
How should you move from reading to editing?
Make one bounded change to a draft, inspect the result, and decide separately whether to publish. The first edit should establish that the assistant can target the correct object and preserve surrounding content, not demonstrate how much it can change at once.
For example, ask it to propose one heading correction on one page. Review the old text, proposed text, target identifier, and affected locale before approving the edit. Afterwards, inspect the page visually and compare the result with the proposal. If layout matters, check a narrow viewport as well as desktop.
Webflow's getting-started documentation connects authorization with prompting, but a team still needs its own approval workflow. We recommend keeping publish actions out of the initial connection test. A successful content update does not establish that navigation, responsive layout, or campaign tracking remains correct.
Write site instructions for recurring constraints: approved components, naming conventions, and which pages must remain untouched. Then verify that the assistant followed them. Instructions improve coordination; permissions and review remain the mechanisms that constrain consequences. Expand the workflow only after one small change has a clear, checked outcome.