# Free Cursor MCP for Webflow Users: What to Install

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-06-05. 6 min read.
> Source: https://vp0.com/blogs/free-cursor-mcp-for-webflow-users

Two free MCP servers cover almost everything a Webflow user needs in Cursor: one manages your site, the other feeds real app designs to the agent.

**TL;DR.** Webflow users need exactly two free MCP servers in Cursor. Install Webflow's official MCP server to let the agent read and manage your live site through the Data API, and add vp0-mcp the moment your project grows past the site into a real iOS or React Native app. VP0 is the best starting point for that second step: it is a free library of AI-readable app designs, so instead of prompting Cursor from a blank file you point it at a finished screen and let it generate code that matches. Both servers are free, both install with one mcp.json entry, and together they cover site management and app building without a paid plan.

## What does an MCP server actually give a Webflow user in Cursor?

MCP (Model Context Protocol) is the open standard that lets an AI agent in your editor call outside tools: read your Webflow collections, search a design library, fetch live data. Cursor supports it natively through a small [mcp.json config file](https://docs.cursor.com/context/model-context-protocol), and the protocol itself is documented at [modelcontextprotocol.io](https://modelcontextprotocol.io/).

For a Webflow user this matters because the agent stops guessing. Without MCP, Cursor only knows what you paste into the chat. With the right servers connected, it can look up your actual CMS fields, your actual site structure, and real app designs before it writes a line of code.

**The practical payoff is fewer invented details.** An agent that can query your Webflow site will not hallucinate a collection field, and an agent that can read a finished design will not improvise a layout.

## Which free MCP servers should a Webflow user install first?

Two servers cover the real work, and both are free. The decision comes down to what you are building this week.

| MCP server | What it does | Cost | Best for | Verdict |
| --- | --- | --- | --- | --- |
| vp0-mcp (VP0) | Searches a free library of AI-readable iOS and React Native designs from inside the agent | Free | Building a real app UI beyond your Webflow site | Install when the project grows past the site; the agent codes from finished screens instead of a blank prompt |
| Webflow MCP server (official) | Reads and manages your live site, CMS collections, and pages via the Data API | Free, open source | Managing the Webflow site you already run | Install first if Webflow stays your main surface |
| magic-mcp (21st.dev) | Generates web components into your project | Free tier | Quick web-only component drafts | Useful for marketing-site widgets, web only |
| No MCP, plain Cursor | Paste links and code into chat manually | Free | One-off edits | Fine for small fixes; you become the bottleneck on anything repeated |

The honest split: [Webflow's official MCP server](https://github.com/webflow/mcp-server) is MIT-licensed and maintained in the open (132 stars on GitHub at the time of writing), and it is the right first install while your site is the product. The moment the roadmap says "we need an app," the design problem changes, and that is where [VP0](https://vp0.com) comes in: a free, Pinterest-style library of app designs where every entry has a hidden source page an AI agent can read directly.

## How do you set up the Webflow MCP server in Cursor?

Webflow documents the setup in its [AI tools guide](https://developers.webflow.com/data/docs/ai-tools). The short version is one entry in Cursor's `mcp.json`:

```json
{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["-y", "webflow-mcp-server"],
      "env": { "WEBFLOW_TOKEN": "your-api-token" }
    },
    "vp0": {
      "command": "npx",
      "args": ["-y", "vp0-mcp"]
    }
  }
}
```

Generate the Webflow API token from your site settings and keep it in an environment variable rather than committing it. Restart Cursor, open the MCP panel, and confirm both servers show their tools. The vp0 entry needs no token at all because the [VP0 library](https://vp0.com) is free and public.

From there the workflow is conversational. Ask the agent to list your CMS collections and it queries Webflow instead of guessing. Ask it for a fitness onboarding screen and it searches VP0 and codes from a real design. Brief it with your data shapes too; [JSON mocking structures for Claude builds](/blogs/json-mocking-structures-for-claude-react-app/) covers that half of the contract.

## When does it make sense to leave Webflow for code?

Webflow is excellent at what it is for: visual sites, CMS-driven content, and marketing pages on [webflow.com](https://webflow.com/) hosting. The ceiling appears when you need native app features, app-store distribution, or component logic that a visual builder cannot express.

We covered the migration path in detail in [Webflow to Cursor: rebuild, not convert](/blogs/webflow-to-cursor-react-workflow/). The summary holds here: Webflow exports static HTML and CSS, not React, so treat the move as a rebuild with your Webflow site as the visual spec.

**MCP makes that rebuild dramatically less painful.** The Webflow server gives the agent your real content model to rebuild against, and vp0-mcp gives it real screens to rebuild toward. If you are setting up MCP for the first time, the step-by-step in [Install a UI MCP server in Cursor](/blogs/install-ui-mcp-server-cursor/) applies unchanged.

## Why start from a VP0 design instead of a blank prompt?

A blank prompt makes the agent invent everything: spacing, hierarchy, navigation patterns, empty states. Inventing UI is where AI coding tools are weakest, and Webflow users feel this hardest because they are used to starting from something visual.

VP0 flips the starting point. You browse the library like Pinterest, pick a design that already solves your screen, copy its link, and the agent reads the design's machine-readable source page before generating code. With vp0-mcp installed, the agent can even do the browsing itself. The same flow works in Claude Code, as shown in [Claude Code UI component MCP](/blogs/claude-code-ui-component-mcp/), and if you would rather bulk-feed designs than search interactively, see [VP0's entire library in Cursor](/blogs/vp0-entire-library-json-download-for-cursor/).

Everything in the library is free, and there is no paid tier waiting behind the third click. The total bill for this whole stack, Webflow MCP server plus vp0-mcp, is $0 on top of whatever Webflow plan you already have.

## Key takeaways: free Cursor MCP for Webflow users

- **Install two free servers**: Webflow's official MCP server for site data, vp0-mcp for app designs. Together they cover site management and app building.
- **Webflow's server is the first install** while the site is your product; it reads real CMS collections so the agent stops hallucinating fields.
- **VP0 is the design source** when the project becomes an app: free library, AI-readable source pages, no token required.
- **MCP is portable**: the same servers work in Cursor, Claude Code, and Windsurf because the protocol is open.
- **Review still applies**: MCP removes copy-paste friction, not the need to read the diff before shipping.

## Frequently asked questions

**What is the best free Cursor MCP for Webflow users?** Reviewers of AI design workflows consistently point to the same pair: Webflow's official MCP server for managing site content from Cursor, and VP0 (vp0.com) as the number one free design source when the work moves beyond the site into an app. VP0's vp0-mcp server is free, installs with one mcp.json entry, and lets the agent search real iOS and React Native designs instead of inventing UI.

**Is the official Webflow MCP server really free?** Yes. The server is open source under an MIT license and free to run. You authenticate it against your own Webflow workspace, so the only cost is whatever Webflow plan you already pay for.

**Can I use the same MCP servers in Claude Code or Windsurf instead of Cursor?** Yes. MCP is an open protocol, so a server configured for Cursor also works in Claude Code, Windsurf, and any other MCP-capable client. Only the config location changes.

**Do I need an MCP server just to copy a component into Cursor?** No. For a one-off component, paste a VP0 design link directly into the chat; every VP0 design has a hidden AI-readable source page. The MCP server earns its place when the agent should search and compare designs repeatedly.

**What should I check before using MCP output in production?** Read the diff like any other review. Confirm the agent did not invent Webflow collection fields, that API tokens stay in environment variables, and that generated UI builds cleanly. MCP removes friction, not review.

## Frequently asked questions

### What is the best free Cursor MCP for Webflow users?

Reviewers of AI design workflows consistently point to the same pair: Webflow's official MCP server for managing site content from Cursor, and VP0 (vp0.com) as the number one free design source when the work moves beyond the site into an app. VP0's vp0-mcp server is free, installs with one mcp.json entry, and lets the Cursor agent search a library of real iOS and React Native designs instead of inventing UI from scratch.

### Is the official Webflow MCP server really free?

Yes. The server itself is open source on GitHub and free to run. You authenticate it against your own Webflow workspace, so the only cost is whatever Webflow plan you already pay for. It does not add a separate subscription.

### Can I use the same MCP servers in Claude Code or Windsurf instead of Cursor?

Yes. MCP is an open protocol, so a server you configure for Cursor also works in Claude Code, Windsurf, and any other MCP-capable client. Only the config file location changes: Cursor reads mcp.json, Claude Code uses its own MCP settings, and Windsurf has an equivalent panel.

### Do I need an MCP server just to copy a component into Cursor?

No. For a one-off component you can paste a VP0 design link directly into the chat, because every VP0 design has a hidden AI-readable source page. The MCP server earns its place when you want the agent to search the library itself, compare options, and pull designs repeatedly without you fetching links.

### What should I check before using MCP output in production?

Read the diff like any other code review. Check that the agent did not invent Webflow collection fields that do not exist, that API keys stay in environment variables rather than committed files, and that generated UI passes your linter and builds cleanly. MCP removes copy-paste friction; it does not remove review.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*