WEBFLOW MCP SERVER

Connect Webflow to Andromity with the Webflow MCP server

Connect Webflow's official MCP server to Andromity: let your AI coding agent work with CMS content, pages, styles and components on your Webflow sites.

Server
https://mcp.webflow.com/mcp
Connects with
Browser sign-in (OAuth)
Category
Design & content

Webflow hosts an official MCP server at https://mcp.webflow.com/mcp. With it, Andromity can work on your Webflow sites while it codes: read and edit CMS content, pages, assets, styles, variables and components, and, with a Designer session open, inspect what is on the canvas.

Webflow uses OAuth. Connecting opens a browser sign-in where you choose which sites the agent may access. During authorization Webflow also installs its MCP Bridge App on those sites, which is used only for the features that need a live Designer session.

What the agent can do with Webflow

  • Create and edit elements, components, styles and variables on a site.
  • Manage CMS content, pages, assets and fonts.
  • Capture visual snapshots of the page open in the Designer (needs the Bridge App).
  • Read or change the current selection, page, mode and branch in the Designer, and read breakpoints (needs the Bridge App).
  • Load the Webflow Guide as a resource so the agent follows Webflow's conventions.
  • Receive site-level Agent Instructions that Webflow passes to connected agents automatically.

Example prompts

Ask for the work in plain language. Naming the server helps, for example “use the Webflow MCP server”.

  • Add a Case Studies CMS collection to my Webflow site with title, slug, summary and hero image fields, then create three draft items from the markdown files in /content.
  • Our design tokens in tokens.json changed. Update the matching variables in Webflow so the colors and spacing match.
  • List the pages on my Webflow site and tell me which ones are missing SEO titles or descriptions.
  • Take a snapshot of the page open in the Designer and compare it with the layout described in docs/landing-spec.md.

Connect Webflow

  1. You need a Webflow account with access to at least one site.
  2. In VS Code, open Andromity Hub → MCP Servers → Discover. In the terminal app, open /settings → MCP → + Connect an app. Find Webflow and select Connect.
  3. Sign in to Webflow in your browser and authorize the sites you want the agent to use. If you cancel, nothing is saved.
  4. Andromity saves Webflow to ~/.andromity/mcp.json and connects it.
  5. For Designer features, open the site in the Webflow Designer, launch the MCP Bridge App from the Apps panel and wait for it to connect. You can minimize it, but it must stay open.

See Connect an app for how Andromity stores connectors and tokens.

Access and safety

  • The server enforces your own Webflow permissions and roles, including custom roles. The agent can only do what you can do in the Designer.
  • Webflow records agent changes in the site's activity log. Review it to see what the agent did.
  • Webflow advises granting site access to external agents only when needed.
  • Andromity's permission modes apply to every Webflow tool call.

In an untrusted folder, MCP servers don’t start at all. Read workspace trust and permission modes for the full model.

Limits to know

  • Features that depend on the Designer stop working if the MCP Bridge App is closed.
  • A tool that is unavailable in the current Designer mode returns a ModeForbidden error.
  • Webflow says Agent Instructions are likely, but not guaranteed, to be followed.
  • Webflow's docs do not state rate limits or plan requirements for the server.

Questions

Does Webflow have an official MCP server?
Yes. Webflow runs a remote MCP server at https://mcp.webflow.com/mcp and documents it in its developer docs.
Do I need to open the Webflow Designer?
Not for most work, which goes through Webflow's Data API. Designer-session features such as snapshots and selection need the MCP Bridge App open on the site.
Does the agent get more access than I have?
No. Webflow enforces your roles and permissions, so the agent is limited to what you can do in the Designer.

Sources

This guide is based on Webflow’s own documentation. The app controls its server, so tools can change; check the source for the current list.

Webflow is a trademark of its owner. Andromity is not affiliated with or endorsed by Webflow.