Webflow MCP 2.0: The Best & Worst Use Cases

Today we're talking about the Webflow MCP and some of the best cases and worst use cases that I've seen. So first of all, let's dig into what is an MCP because it's helpful to understand what are we even talking about as you're prompting your AI tools. I've always found it's helpful to know some of the inner workings and what's going on behind the scenes cuz it'll also help you try to figure out what's going wrong and what you might be able to do better.

MCP stands for model context protocol and it's a way of interacting between computers and humans and let's break down each one of those words and figure out kind of what we're talking about. Model means the AI large language model. So whether that's Claude or Codex or ChatGPT or Cursor or a number of other items, that is your model. Context is the information and the tools that are available to that model.

It can go both ways. It can be the information that you are bringing to the table through your prompting or through your text files or your personal information, whatever that is. And it can be the tools that are available from the platform that you're trying to interface with. Protocol just means that this is the standard that we're talking about. So when you put it all together, you're really saying this is the way that the AI model should be interacting with the platform.

And to say that another way, what tools are available for the AI models to interact with this platform? What levers can you pull to get things done? Now onto the question of how do you actually work with an MCP? The first requirement is you definitely need to have your own AI agent. So for the sake of this video, let's assume it's going to be Claude, Claude in the desktop. And I'm just going to tell you right now that you are not going to be getting the full power unless you're paying a $20 subscription.

They're really just two different things. The free version really cannot do nearly as much as the paid version. I think it's worth it for somebody like me or a business professional who is using these tools all the time. I pay for an even higher subscription because that's how much I use it. But unless you're paying at least a base subscription, you're not going to get a ton of brain power to be able to handle these connections to other tools.

So head on over to Anthropic or OpenAI or whoever you want to go to, get yourself a subscription to a frontier AI model that has a desktop app or a web browser that can connect to these MCP tools. Next, you need to authorize your platform. And since we're talking about Webflow, you're going to be logging in to your Webflow account through the workflow from that model. I know we're all getting used to these big blank box prompts.

So, what you have to do first is to tell your agent what you want to do. You say, "Please connect me to the Webflow MCP." That should hopefully kick off a workflow that connects your specific agent to the platform and it authenticates your credentials. After that, it should say you're connected and what do you want to do next? And that's where you get to decide what am I actually prompting? What are we trying to build?

What do I need? And then that's when you can you just use natural language to talk to your AI agent and to tell it what you're trying to do. So, let's move on to the best cases that I've seen for working in the MCP. One of the number one things that the Webflow MCP is useful for is working with CMS collections and content. I've found it to be extremely powerful and fast. And some of my criteria for best and worst is how does the AI agent understand what I'm asking?

How much capability does the platform expose to my actual agents? And the bottom line is how well can the tools do what I ask them to do? With Webflow, one of the best uses of the MCP is to work with CMS content. The tools seem to work really well for working with the content. They know what your collections are, they can see all the items inside your collections, they can see all the fields, they can see how they're connected, what the status of each item is.

As far as I can tell, it sees all the same things that I can see on the front end, which is a great benefit and it seems to work really well. It's super useful for migrating content between sites, posting new content, downloading, uploading, all those things can all be done from your phone basically but just by prompting your AI. In a similar vein, the MCP is really good at pulling down the SEO settings and making changes to your site.

Oftentimes, you might get an error from some sort of SEO tool like Ahrefs or Semrush or Google Search Console, but you're not quite sure where to go to make that change. And that's where this MCP just comes in really handy because you can feed it that report and ask it what you need to do or what decisions you need to make. It'll say, "What do you want this heading to be?" And then you just write your new heading or you tell it your decision and the MCP just knows where to put the content.

So, it knows all the technical things you might need to know and Webflow exposes all the right surfaces and controls so that you can really easily put your content right back where it needs to go and to fix the errors that you might be seeing from an SEO standpoint. Probably the most complicated but most powerful feature of the MCP is working with components and style guides. So, this is heavily dependent on how well you or your team or your developer has set up your site.

But, if you have a really robust style guide, a great component library, and a strong variable design system, you're going to have a really great time building with the MCP because all the building blocks are going to be well-ordered, well-structured, clearly labeled. It's basically like going into a workshop and seeing that the drawers have the right labels on it and everything is where it belongs and you can look clearly and say, "Oh, I need screws.

Oh, here they are right there." And that's kind of what the MCP finds when you have a good design system and all those things that I mentioned. If you don't have those things, if your site is super cluttered, the MCP is going to struggle for sure, but that's just the case as with anything. If you're not well organized, you're going to have a harder time working. So, that leads me to the worst use cases that I've seen for the MCP or the worst results that I've had when I'm working with the MCP.

The worst thing that you could possibly try to do is to try to one-shot a page. And what I mean by one-shot is that you're trying to in a single prompt or in a single pass, you're trying to get a perfect result. That's just a super unrealistic expectation really with for any AI tool. Doesn't matter which platform you're trying to connect to. It's really hard to get the perfect result on a first try, especially if you are taking a huge bite at a time.

So, my favorite workflow is to try to work one component at a time or one element at a time or one section at a time to get the right results and then stack those approvals and stack those building blocks together to get a good result. But, if you're going to try to one-shot a page, I would say you should give up cuz the MCP is not going to be able to solve those problems and Claude is not going to solve that problem because it's really a problem that the AI agents are not good at.

There's so many little decisions that need to be made that you haven't given it enough building blocks and enough direction to get a good result. So, I'm not going to blame Webflow. I'm not going to blame Claude. I'm blaming you as the user who are not putting out a good prompt. So, that's not really even a Webflow problem. It's really just a direction problem that you need to give very clear directions when you're expecting a specific result.

Unfortunately, it's also pretty hard to get these AI tools to find the right section or the right classes based on visuals alone. So, when you're passing in like a Figma file or a screenshot, it can be pretty hard to get an accurate result because the tool often wants to build its own classes and build things from scratch. And I don't like that because then that means I have new classes everywhere and the system I've built becomes harder to maintain.

So, I always try to force it to use existing things and it's really bad at matching up existing visuals with a new section that I might want to build. So, the best way to do it that I found is to know the names of the classes or the components that I'm trying to use and to tell it "Make sure you use this hero component." Or "Make sure you use features three." And if you don't do that, you're not really going to get a clear result or it's going to try to invent something and go kind of go rogue and you're going to end up with something that's pretty cluttered and doesn't match the rest of your site.

Right now, at the end of August, the Webflow MCP also doesn't expose many controls for interactions and animations. I'm hoping that's going to change soon. I'll revisit that in a little bit. Currently, if you need animations, you're really basically relying on a custom CSS snippet. All these AI tools love to build custom CSS and it's tempting for these AI tools to just build a ton of custom embed codes and I always tell them no, no, no.

You have to build this directly in Webflow. I make the tools right in Webflow native code because I hate having a bunch of CSS embeds that aren't able to be visually edited. You're basically losing all the value of Webflow if you rely on a bunch of custom code snippets, especially if the Webflow features are there and they're just not exposed right now to the MCP. I think that's probably just a feature that's coming soon rather than a limitation or something that they're actively deciding not to fix.

Unfortunately, the agents are also pretty bad at reviewing what they built and unless you tell it to look on the front end and look at the Figma file side by side, try to compare what's missing, even then they still are not very good at catching mistakes. So, whether it's a margin issue or an alignment issue, they can do content okay, but a lot of the visuals, the models themselves are bad at reviewing.

Again, it's not really a function of the Webflow MCP not being robust enough, it's a function of the AI models not having the capability to fully match and review visually. So, you'll have some issues there. It's always better to review manually and then you can get the exact result by saying you need to add 16 more pixels to the left side of this element. So, you need to be more specific. The AI models in general, I have not found to be very good at doing a broad review visually and comparing what's wrong.

But, if you give them specific directions on what to change, you'll have better results there. Those are some of the best and worst use cases I've had for the Webflow MCP. Let me know what your experience has been and good luck building with AI in Webflow.