Getting Started with MCP in Webflow

An MCP or model context protocol server lets you connect AI tools directly to outside data sources. With the Web Flow MCP, an AI tool can connect directly to our Web Flow workspace. So, we can ask questions about our websites or create and update content directly through AI. Today, we'll use the AI code editor cursor to see what we can do with the Web Flow MCP. As a few examples, we'll find and replace some content in a blog post collection, do a little bit of a deeper search to find some specific blog posts and create a brand new post all with the MCP.

So to get started, we will want to connect the AI tool we're using, cursor, to web flow. I'll open up the Web Flow developer docs to see how we can do this and scroll on down here. We can see we have a few options. You can use Claude, cursor, or wind surf. I've got the cursor open and I'm going to copy this snippet right here. With it copied, I'm going to hop over into cursor. From here in cursor, I'll click settings and then tools and MCP. From here, I'll add custom MCP and I'll get this little JSON file. And this is where I will paste that little snippet I copied and hit save.

With it saved, I'll move back to cursor settings. And here now it says needs authentication. So, I will click connect. And now it should open up and ask me for some permissions to connect to my Web Flow workspace. So I'll go ahead and click open here. It's requesting access to my Web Flow workspace. So I'll hit approve. And here I will just select the workspaces I want to authorize. So here I will click Casey's workspace and then authorize app. Okay, all done. And it'll ask me to go back into cursor.

So, I will be back here now. It'll say loading tools. And in a little bit, we should see everything connected. All right, we're all connected. It's green, which we like to see. And if I open this piece up, you can see all the things it's allowed to do. So, we can see that everything's connected. It's got a list of calls it can make to our workspace, and we are all ready to go.

It has access to my workspace and we're going to be working in an example website called Seawwood Ranch. So, this has a blog post collection here in our CMS that we're going to make some changes to. In our first example here in the collection, you can see there's a bunch of blog posts with the name Seawwood in here. I want to change all of them to say Seawwood Ranch instead of Seawwood. Doing this manually would require me hopping into each of these or exporting it as a CSV and replacing it and reimporting it. So, let's just ask the MCP to do it.

So, I'll hop back into cursor here. And from here, you could either create a new project in cursor since it's an AI code editor, or we can just start chatting with the AI directly. So, up here, I will open up the AI pane, and this opens up a new chat. So this is where I will ask it to make those changes. So let's put a prompt together. So first I'm going to tell it where to go. So I will what will I say? Find the Seawwood blog website in my workspace and find the blog post collection in the CMS. So, we've told it where to go. Now, I'll tell it what to do. So, I'll say replace any titles that say Seawwood with Seawwood Ranch. I think that's pretty good. So, let's go ahead and send it. And now we wait.

It varies on the request depending how long this takes. So, it's putting together a task list. It's telling me which tools it's running. And as it's going through the task list, it's you can see it's crossing certain ones off. We can see it's already found the site and going through and kind of finding the different things as we've asked it to.

All right. So we've reached a point in the chat where we have to allow it to do something. So by default the MCP server cannot do everything. You do have to give it permission to do things like update items, create items. So we can see here that it's asking if we can update some live items. If I hop in here to our parameters, you can see exactly which ones it's changing. We can see the whole list of things it's changing. One thing I can see in here is that it didn't capitalize Seawwood Ranch, which is my bad. That's fine, and we can always change that later. So, I'm just going to go ahead and click run.

So, we can see that we're all done here. No more things to run. It gave us a summary of what has changed. So, let's hop into Web Flow and see those changes live. So, we can see this is what we had before. I'll go ahead and hit refresh. And here you can see all of those changes have been pushed live. So we have all of the places that said seawwood. It now says seawwood ranch. We could do that again to make sure it's capitalized, but that is going to take a few seconds instead of hours of exporting reimporting to make that change. So a huge timesaver to do it this way. So let's move on to our next example.

When using Web Flow CMS, sometimes it can be difficult to find really specific things, maybe nested in a specific field in the Web Flow collection and specifically maybe in a rich text field, finding a blog post that mention something. So in this example, let's try to find all of the blog posts that mention conservation efforts at Seawwood Ranch. Because we can't look into our post body here in the web flow UI. Let's try and do it with the MCP. So, hopping back into cursor, I'll prompt something like find all blog posts that mention conservation efforts in Seawwood Ranch.

All right, so let's wait on that one. And this one will be quite a bit shorter since it already knows what collection we're in. When you're doing this, it's good to kind of tell it where to go first, and then you can base all of the other requests after that since it already knows which place it's in, and it doesn't have to make those calls again.

All right, it is all done. Looks like we have three posts here that mention conservation. And I can confirm by maybe searching this first one and checking in our collection. So, I'll just search here, open it up, and I can see, yep, this one talks about conservation. So, with that information, we can do these sort of deeper searches. And if I wanted to, I could also say, oh, instead of conservation, could you say this word or could you add this in those specific blog posts? So, I can really continue that and speed up workflows this way, too.

All right, so let's do our last example. With this last example, let's go ahead and create a brand new blog post with the MCP. So, let's say we want to draft up a new blog post about fall events in Seawwood Ranch. I'll hop into cursor and write that up. So, let's say, please draft a blog post about upcoming fall events in Seawwood Ranch. And that's all I want cuz I don't know what they are. So, let's go ahead and just send this. So, this is really great to use as a starting point to get the ball rolling. And if you had more information about your fall events, you could put that in the prompt as well, so that it has all the context to start creating that draft post.

All right, so looks like it's all done. It's created a draft. Upcoming fall events in Seawwood Ranch. We've got a slug. There's some stuff in there already. I can even see here a little bit of what it's created, but let's just hop into Web Flow and see what it looks like. All right. So, in here, I'll just go ahead and click refresh to see our changes. All right. And up at the very top, we have our drafted post. All right. There it is. Our fall events in Seawwood Ranch. You can see it's done the name, slug, and our post body, our post summary too, but it hasn't done images. So, the Web Flow MCP cannot create images. You'll need to upload these manually. And you'll probably also want to make lots of changes in here. This is just a great place to start from.

All right, so those are our three examples. And there is so much more you can do with this. By connecting AI tools directly to Web Flow, we can significantly speed up these types of tedious manual workflows. Try it out and see what you can speed up with the Web Flow MCP.