They let you pass structured, scoped context into a model: files, metadata, app state, user roles, and more. If you’re building anything beyond a raw prompt, like agents, scoped assistants, or LLM-based code tools, you’ll probably use one.

This list focuses on the MCP servers I recommend for building and debugging workflows across codebases, design systems, documentation, and structured content. Each one is available for integration, with open source code or documented APIs. I use Cursor as my primary IDE, so the setup instructions focus on it, though most of these MCPs work across other environments too (Visual Studio Code, Windsurf, etc…). Cursor makes it easy to integrate MCP servers right out of the box with built-in support for adding and managing them in settings.

Which MCP servers to know when building with AI

Context7

Context7 is a lightweight, open-source MCP server optimized for codebases. It lets you expose a scoped view of your project directory to any model, and supports access to hundreds of open-source libraries and dependencies. This makes it especially valuable for agents that need to reference real packages, functions, or examples in the most current context.

Cursor also supports documentation files in settings. But you often need to remind the AI in your prompt to reference them. View on GitHub or visit context7.com.

Tip: If you don’t want to add use context7 to every prompt, you can define a simple rule, Cursor Settings > Rules section in Cursor (or the equivalent in your MCP client) to auto-invoke Context7 on any code question:

[[calls]]
match = "when the user requests code examples, setup or configuration steps, or library/API documentation"
tool  = "context7"

Once the rule is set, Context7 will be auto-invoked on relevant prompts. You can customize the match pattern to cover your use cases. See docs.

Context7 key features

• Includes access to hundreds of open-source libraries like React, Tailwind, Next.js, and Shadcn for up-to-date reference and code understanding
• CLI tools and hosted version available
• Helps avoid stale code examples and hallucinated APIs by surfacing accurate library context

Edit ~/.cursor/mcp.json directly:

{
  "mcpServers": {
    "context7": {
      "url": "https://mcp.context7.com/mcp"
    }
  }
}

Figma MCP

Figma’s MCP server lets your LLM or AI agent access structured design context directly from Dev Mode. It surfaces component hierarchies, design tokens, selected nodes, variants, and file structure, making it ideal for prompt-to-code workflows, spec diffs, and automated design handoff. It’s still in beta and runs locally inside the Figma desktop app.

To enable the MCP server in Figma:

1. Open the Figma desktop app and update to the latest version.
2. Create or open a Figma design file.
3. Open the Figma menu in the upper-left corner.
4. Under Preferences, select Enable Dev Mode MCP Server.

Once enabled, you can use compatible tools to access structured context from Dev Mode. Read the full guide or see the announcement to learn more.

Figma MCP key features

• Structured design access exposes component trees, token definitions, variants, and selected nodes from Dev Mode.
• Local dev environment runs inside the Figma desktop app; no external API or cloud service required.
• Prompt-aware agents supports selection-based and link-based prompts in tools like Cursor.
• Natural language editing says “make this responsive” or “center this text.” The agent applies the changes directly.
• Layout-aware refactoring so agents can apply Auto Layout, restructure frames, and fix spacing — not just tweak individual elements.
• Design-to-code sync so agents can update codebases or refactor components based on the current Figma file.
• Session memory tracks selections, commands, and intent across steps, so agents don’t lose context mid-task.

Edit ~/.cursor/mcp.json directly:

{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

Notion MCP server

Notion’s MCP server gives models structured access to content inside your workspace. You can use it to build agents that summarize, clean up, or generate content based on filters or templates. See Notion's MCP-supported tools

Notion MCP server key features

• Search across your Notion workspace using structured filters
• Create new pages directly from search results
• Update properties across multiple pages
• Context is scoped to your access permissions

Edit ~/.cursor/mcp.json directly:

{
  "mcpServers": {
    "Notion": {
      "url": "https://mcp.notion.com/mcp"
    }
  }
}

Firecrawl MCP

Firecrawl is a web crawling tool that gives your LLM structured access to real-time page content. It fetches a site, breaks it into semantic chunks, and passes back clean context your agent can use to reason about layout, metadata, and content. Useful for product research, competitive analysis, or building content-aware agents. Explore Firecrawl or view the GitHub repo.

Firecrawl MCP key features

• Web scraping, crawling, and content discovery
• Search, content extraction, and semantic chunking
• Batch research and deep crawl support
• Can run in the cloud or self-hosted
• Supports Server-Sent Events (SSE) for streaming results

Edit ~/.cursor/mcp.json directly:

{
  "mcpServers": {
    "firecrawl-mcp": {
      "command": "npx",
      "args": ["-y", "firecrawl-mcp"],
      "env": {
        "FIRECRAWL_API_KEY": "YOUR-API-KEY"
      }
    }
  }
}

GitHub MCP server

GitHub’s MCP server gives models structured access to your local repo, including diffs, commit history, file trees, and more. It’s designed to power assistants that review pull requests, write inline comments, and reason about real code changes. Check out the repo on GitHub.

GitHub MCP server key features

• Browse, query, and understand code across your repositories
• Create and manage issues, pull requests, and project boards
• Monitor GitHub Actions workflows and troubleshoot builds
• Review security alerts and analyze code patterns
• Track discussions, team activity, and notifications
• Includes official install guide for Cursor setup

Edit ~/.cursor/mcp.json directly:

{
  "mcpServers": {
    "github": {
      "url": "https://api.githubcopilot.com/mcp/",
      "headers": {
        "Authorization": "Bearer YOUR_GITHUB_PAT"
      }
    }
  }
}

Browserbase MCP server

Browserbase’s MCP server connects your LLM to a live browser session in the cloud. It streams full-page context directly from a remote browser, including DOM structure, cookies, local storage, and navigation history, so agents can work with the actual state of a page. This is useful for tools that browse, extract data, or simulate user flows.

Browserbase's MCP streams context from the browser including DOM structure, cookies, local storage, and navigation history so your agent can work with the actual state of a page. See the MCP integration guide

Browserbase MCP server key features

• Captures live DOM and browser environment state
• Includes session data, cookies, URL path, and scroll position
• Compatible with headless browsing or full render pipelines
• Built for AI agents, test bots, or UX simulations

Edit ~/.cursor/mcp.json directly:

{
  "mcpServers": {
    "browserbase": {
      "url": "your-smithery-url.com"
    }
  }
}

Or for more advanced features:

{
  "mcpServers": {
    "browserbase": {
      "command": "npx",
      "args": ["@browserbasehq/mcp-server-browserbase"],
      "env": {
        "BROWSERBASE_API_KEY": "",
        "BROWSERBASE_PROJECT_ID": "",
        "GEMINI_API_KEY": ""
      }
    }
  }
}

PandaDoc MCP server

You might not use this one every day, but it's one of the most practical. PandaDoc lets you build, send, and manage digital documents like vendor agreements, NDAs, invoices, proposals and contracts. Its MCP server exposes structured context from templates, fields, and recipient flows so models can help generate, validate, or route docs. Read the PandaDoc documentation

PandaDoc MCP server key features

• Access to document templates, field mappings, and roles
• Real-time preview of document state
• Good fit for contract workflows, quoting tools, or approval systems
• Built on top of PandaDoc’s public API

Edit ~/.cursor/mcp.json directly:

{
  "mcpServers": {
    "pandadoc": {
      "url": "https://developers.pandadoc.com/mcp"
    }
  }
}

Webflow MCP server

Webflow is a Website Experience Platform (WXP) that enables teams of marketers, designers, and developers to visually build, manage, and optimize websites. It brings design, data, and deployment into a single environment built for production.

Webflow’s MCP server is used across the platform to power prompt-to-layout, CMS generation, and AI-assisted site updates. It defines structured context for whatever surface you’re working in, including the Designer and CMS. Explore Webflow's AI tools.

Webflow MCP server key features

• Access to CMS collections, items, and page metadata
• List, retrieve, and publish sites and pages
• Modify styles, elements, and scripts through structured tools
• Includes token-based auth, scoped tool access, and model memory config
• Built for prompt-to-structure workflows like scaffolding pages or updating SEO fields

Edit ~/.cursor/mcp.json directly:

{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["-y", "webflow-mcp-server"],
      "env": {
        "WEBFLOW_TOKEN": "YOUR_API_TOKEN"
      }
    }
  }
}

How to add MCP servers to Cursor

Cursor supports native integration with MCP servers. You can manage these through the built-in MCP tools menu. Here are the steps to add MCP servers to Cursor.

1. Open Cursor
2. Go to Settings → Tools & Integrations → MCP tools
3. Click Add New MCP Server
4. Paste the MCP endpoint URL
5. Save and test the connection

All servers listed above work out of the box. No plugins or additional config required. You can also see the full Cursor MCP setup guide.

Final thoughts

MCPs aren’t just infrastructure for AI. They give your LLM structure, scope, and context so it can take meaningful action across tools. Whether you’re passing in UI state, CMS models, file diffs, or DOM metadata, these servers let you move beyond prompt experiments into actual workflows. Check out this collection of MCP servers for other examples not included here along with Cursor’s MCP directory.

If you want to see what this looks like in a real dev environment, here’s a short that walks through how agents use Webflow’s MCP server to update SEO tags, localize CMS content, and scaffold new collections using just a prompt.