Tips
Tools
Webflow MCP + Annot: How to turn client feedback into website changes automatically
In this article
Title
Every web project has the same bottleneck. You finish a build. The client reviews it. Feedback comes in some specific, some vague, spread across a page and a half of comments. You read each one, figure out what it means, find the relevant element in Webflow, make the change, mark it resolved, move to the next. Repeat until the round is done.
This loop isn't hard. It's just slow. And it's entirely manual at every step: reading, interpreting, locating, editing, confirming. For a round of twenty comments across a ten page Webflow site, that's hours of overhead that has nothing to do with the quality of the build.
AI agents are well suited to this problem. The gap between "client said fix this" and "fix is live" is almost entirely natural language interpretation and API calls. MCP is what makes that automatable. Webflow
What MCP actually is and why it matters for web teams
MCP stands for Model Context Protocol. It's an open source standard originally developed by Anthropic that creates a universal way for AI tools to connect with external platforms and services. Think of it like a universal adapter: any MCP compatible AI tool can plug into any platform that supports the protocol, without custom code or fragile configuration. Semrush
Before MCP, connecting an AI to an external service meant writing custom integration code for every tool in your stack. Each connection was bespoke and brittle. With M models and N tools, that created M x N necessary integrations. MCP reduces this to M + N. Adobe
In practice for web teams, this means instead of copying and pasting client feedback from a dashboard into a prompt and then copying the AI's suggested fix into Webflow, the AI can read the feedback and write the fix directly. All in one conversation, with both tools connected through the same protocol.
MCP reached 97 million monthly SDK downloads by March 2026, a growth rate that mirrors the adoption curves of foundational infrastructure protocols like REST APIs. It's not experimental. It's the standard that Webflow, Notion, Slack, GitHub, Figma, and hundreds of other platforms have already built on.
What Webflow MCP can do
Webflow launched their official MCP server in February 2026. It connects to both the Data API (covering CMS, pages, assets, scripts, and sites) and the Designer API (covering elements, styles, components, and variables on the live canvas). It works with Claude Desktop, Claude Code, Cursor, and Windsurf. DoHost
The Designer API handles manipulation of the canvas: creation of elements, management of styles, CSS variables, components, and responsive breakpoints. The Data API handles CMS operations (collections, items, fields) plus page management, SEO metadata, and custom code injection. Programa
Concretely, this means an AI agent connected to Webflow MCP can:
Read your entire site structure. Collections, fields, page hierarchy, component inventory, custom code all visible to the AI as structured data it can reason about.
Edit CMS content at scale. Update copy across a collection, rewrite meta descriptions across 200 blog posts, add internal links, change field values all through natural language without touching the Webflow interface.
Make visual changes on the canvas. Create elements, adjust styles, manage variables, and edit responsive breakpoints directly through conversational prompts while you watch.
Publish changes. Push to custom domains and subdomains without leaving the AI conversation.
The non-technical setup takes under three minutes. In Claude, click the + in the chat menu, find the Webflow connector, and authorise your site via OAuth. Claude now has read and write access to your site's CMS and data. For Claude Code, Cursor, or Windsurf, you connect directly to the MCP server at https://mcp.webflow.com/sse for deeper integration.
This is genuinely powerful but it has a gap.
The feedback problem Webflow MCP doesn't solve on its own
Webflow MCP gives an AI agent the ability to act on your site. What it doesn't give the agent is the input the client feedback that defines what needs to change.
Without structured feedback coming in, the workflow still starts with a manual step: you read through comments from email, Slack, or a feedback tool, interpret them, and then describe the changes to the AI in a prompt. The AI can execute faster, but the triage and interpretation work is still on you.
For the loop to close fully from client comment to live change the AI needs access to both ends: the feedback and the site. That's what Annot MCP adds.
What Annot MCP adds
Annot MCP connects your client feedback directly to the same AI session that has access to Webflow. Each comment your client leaves on the live site with its page URL, element context, breakpoint, and status becomes structured data that the AI can read, prioritise, and act on.
The result is a connected workflow that looks like this: your client leaves a comment on the live Webflow site. Annot captures it with full context: what page, what element, what device size, what the client wrote. The AI reads that comment through Annot MCP, understands what it refers to, and uses Webflow MCP to locate the relevant element and make the change. The comment gets marked resolved. The change is live.
The AI isn't guessing from a prose description in a prompt. It's reading structured feedback with page and element context attached, cross-referencing it against a live Webflow site it has direct access to, and executing precisely.
Beyond execution, the AI can do things the manual workflow can't easily do at all:
Triage and prioritise. If there are thirty open comments, the AI can group them by page, by type (copy change vs. layout vs. mobile), and by urgency presenting a structured work plan before making a single edit.
Identify conflicts. Two comments that contradict each other surface as a conflict for human review rather than getting silently resolved one over the other.
Batch similar changes. If five comments across different pages all relate to the same component or style, the AI can make the change once at the component level rather than five separate edits.
Draft responses. For feedback that requires a conversation before implementation, the AI can draft a clarifying response to send back to the client.
The combined workflow in practice
Here's what a revision round looks like with Annot MCP and Webflow MCP connected in the same Claude session:
Client reviews the live site. You share the Annot review link. The client opens it in their browser, clicks anywhere on the live Webflow site to pin comments, and leaves feedback at desktop and mobile breakpoints. No account, no extension, no friction.
Open Claude with both MCPs connected. Annot MCP and Webflow MCP are both active in the same session. You prompt Claude: "Read the open feedback from this Annot project and show me what needs to change on the Webflow site."
Claude reads and interprets the feedback. Claude pulls all open comments from Annot each with its page URL, element context, device size, and the client's exact words. It maps each comment to the relevant part of the Webflow site structure it can see through Webflow MCP. It presents a structured list: what it understands each comment to mean, what change it proposes to make, and flags anything that needs clarification before proceeding.
You review and approve. You confirm the interpretation is correct, clarify anything ambiguous, and tell Claude to proceed. Running in manual approval mode, Claude lists every specific action it will take and waits for your confirmation before executing.
Claude makes the changes. It edits copy, adjusts styles, updates CMS fields, and modifies components directly through Webflow MCP on the live canvas or in the CMS depending on what each change requires.
Comments are marked resolved. Through Annot MCP, Claude marks each addressed comment as resolved. The client can revisit the review link and see what's been done without needing a call to recap progress.
The manual steps that remain (reviewing Claude's proposed changes before it executes, and handling anything genuinely ambiguous) are intentional. The goal isn't to remove human judgment from the process. It's to remove the mechanical overhead so human judgment is applied where it actually matters.
Beyond Webflow: Annot MCP with other stacks
The Webflow MCP combination is the most turnkey setup available today, but Annot MCP isn't limited to Webflow builds. Because MCP is a universal protocol, the same feedback-to-implementation workflow is available on any stack where an AI agent has write access to the codebase or CMS.
Custom websites and code-based builds. For agencies working in React, Next.js, Astro, or any custom stack, Annot MCP connects to Claude Code or Cursor in the same way. The AI reads client feedback from Annot, identifies the relevant component or file, and proposes or makes the change directly in the codebase. A comment pinned to a specific element on a live site maps to the component that renders it.
Framer. Framer's MCP support is in active development. As it matures, the same Annot MCP and Framer MCP combination becomes available for Framer teams, with client feedback on a live Framer site flowing directly into canvas edits through an AI agent.
Shopify and other ecommerce platforms. For Shopify builds, Annot MCP connects to Claude Code or Cursor with access to the theme codebase. Client feedback on a live Shopify store (a layout issue on the product page, a mobile problem on the cart) becomes a structured input the AI can act on against the theme files.
The common thread across all of these is the Annot feedback layer. Whatever platform the site is built on, Annot captures client feedback with full context: page, element, device size, comment text, and status. That structured data is what makes the AI's actions precise rather than approximate. Without it, the AI is guessing from a prose description. With it, the AI has enough context to locate the exact thing that needs changing and change it correctly.
How to set it up
Connect Webflow MCP to Claude (3 minutes, no code)
In Claude, click the + in the chat menu, click Add connectors, search for the Webflow connector, and authorise your site via OAuth. Claude now has access to your site's CMS and data. You'll need a paid Claude plan (Pro, Team, or Enterprise).
For Claude Code, Cursor, or Windsurf, connect directly to the MCP server at https://mcp.webflow.com/sse using OAuth.
Connect Annot MCP to Claude
In your Annot settings, enable the MCP integration and copy the server URL. Add it to your Claude Desktop configuration or paste it into the MCP settings in Cursor or Claude Code. Authenticate with your Annot credentials. Your feedback projects are now readable by the AI in the same session as Webflow.
Start with manual approval mode.
Claude will list every action it plans to take and wait for your confirmation before executing. This builds trust and prevents surprises. Once you're confident in how Claude interprets your feedback and executes changes, you can selectively move lower-risk changes to auto-execute.
Run your first feedback round.
Share your Annot review link with your client. Once comments come in, open Claude, connect both MCPs, and prompt: "Read the open Annot feedback for [project] and map it to the Webflow site. Show me what you'd change and why before making anything."
Frequently asked questions
Do I need to know how to code to use Webflow MCP? No. The nontechnical setup via Claude's connector takes under three minutes and requires no terminal commands. You connect through a UI, authenticate with OAuth, and interact entirely through natural language prompts. For more advanced use cases (Claude Code, Cursor, custom builds) some familiarity with configuration files helps, but the core workflow is accessible to any Webflow designer.
What does Webflow MCP actually have access to on my site? Through the Data API, Claude can read and write CMS collections, items, and fields, manage pages, update SEO metadata, and inject custom code. Through the Designer API, it can create and edit elements, manage styles, CSS variables, components, and responsive breakpoints on the live canvas. Access is scoped to the sites you authorise. Claude can only act on what you've explicitly connected.
Is it safe to give an AI write access to a live Webflow site? The practical safeguard is running in manual approval mode, where Claude lists every planned action and waits for confirmation before executing. This means nothing changes on your site without your explicit approval at each step. For production sites, it's worth keeping manual approval on indefinitely and reserving auto-execution for staging environments.
Does Annot MCP work with AI tools other than Claude? Yes. Because MCP is an open standard, Annot's MCP server connects to any MCP compatible AI tool including Claude Desktop, Claude Code, Cursor, Windsurf, and any other client that supports the protocol. The workflow described in this post works identically in Cursor with both the Webflow plugin and Annot MCP connected.
What happens to comments after Claude resolves them? Comments resolved through Annot MCP are marked as resolved in the Annot interface, visible to both you and your client on the review link. Clients see which comments have been addressed without needing a call to recap. If you prefer to review before marking resolved, you can configure Claude to leave that step to you.
Does this workflow work on Webflow sites with password-protected staging? Annot is proxy based and doesn't support password protected URLs on the client facing feedback side. Clients need to review on a public preview URL. The Webflow MCP connection operates through the API independently of the frontend URL, so the AI's ability to edit the site isn't affected by staging protection. The feedback capture step requires a public URL; the implementation step does not.
Can I use this workflow if I build on a custom stack rather than Webflow? Yes. Annot MCP connects to Claude Code and Cursor regardless of the underlying stack. For custom React, Next.js, or other code-based builds, the AI reads Annot feedback and can propose or implement changes directly in the codebase, rather than through the Webflow API. The feedback layer works the same way; what changes is the implementation tool the AI uses on the other end.
To understand Annot's feedback layer in more detail before connecting it to an AI workflow, see The best website feedback tools for Webflow teams. For the Framer equivalent of this workflow, watch Framer feedback tools: how to collect client feedback on Framer sites — Framer MCP support is in active development and we'll update that post as it matures.