Skip to main content

MDN's MCP Server Brings Authoritative Web Docs Into Your Editor

· 4 min read
Gergely Sipos
Gergely Sipos
Frontend Architect

AI coding tools are great at boilerplate, but they still hallucinate web API details, browser support, and even whether a feature exists at all. MDN's new MCP Server tackles that problem by letting MCP-compatible editors and agents pull current MDN documentation and browser compatibility data straight from the source.

What the MDN MCP Server does​

The MDN MCP Server is a remote HTTP MCP server, not a local npx/stdio package. You point your editor or agent at https://mcp.mdn.mozilla.net/, and it can query MDN directly for:

  • documentation search
  • page fetches
  • browser compatibility data

That matters because web platform details change fast. A model trained months ago can easily miss a newly shipped CSS feature, outdated support tables, or subtle API constraints that MDN already documents correctly.

How to set it up in VS Code​

If you're using VS Code, this is the most practical place to start. VS Code's MCP support can connect directly to remote servers, so you don't need to install or run anything locally for MDN.

1. Create the MCP config file​

Add this file to your workspace:

.vscode/mcp.json
{
  "servers": {
    "mdn": {
      "type": "http",
      "url": "https://mcp.mdn.mozilla.net/"
    }
  }
}

2. Reload VS Code if needed​

Once the file is in place, VS Code should detect the server configuration. If it doesn't show up immediately, reload the window and check your MCP server list in Copilot Chat.

3. Use it for web-platform questions​

With the server enabled, your AI assistant can look up MDN-backed answers inside the editor instead of guessing from stale training data. This is especially useful for questions like:

  • "Is this API supported in Firefox yet?"
  • "What's the correct syntax for this CSS feature?"
  • "Can you find the MDN page for this attribute or pseudo-class?"

See the VS Code MCP documentation for the broader MCP workflow and UI details.

tip

Because this is a remote HTTP server, the important part is the URL. You are not installing an MDN package locally; you're connecting your editor to MDN's hosted MCP endpoint.

Setup in other tools​

The MDN team says the server works with VS Code, Zed, Cursor, Claude Code, Codex CLI, Antigravity CLI, and Claude Desktop.

For Claude Code, the setup is a single command:

Terminal
claude mcp add --transport http mdn https://mcp.mdn.mozilla.net/

For Cursor, Zed, and Claude Desktop, the idea is the same: add a remote MCP server that points at https://mcp.mdn.mozilla.net/. The exact UI differs by client, but this is not a local stdio server and doesn't need an npx launcher.

What you get​

In practice, the MDN MCP Server gives your editor three high-value capabilities:

  1. Search documentation when you only know part of a feature name.
  2. Fetch MDN pages so the model can use the actual docs, not a fuzzy memory of them.
  3. Check browser compatibility without relying on outdated guesses.

That last one is the biggest win. Browser support is where generic AI answers often go off the rails, and it's exactly where MDN's data is most useful during day-to-day frontend work.

MDN's test results were hard to ignore​

MDN tested the server with Claude Code on recently shipped Firefox 151 features, including light-dark(), :buffering, shadowrootslotassignment, and the Web Serial API.

Their takeaway was pretty straightforward:

  • usage guidance was usually similar with or without MCP
  • answers backed by MCP were often better structured and more complete
  • browser compatibility answers were far more reliable with MCP
  • responses were roughly twice as fast

MDN says Claude Code without the MCP got browser support fully right in only one of the tested cases, while the MCP-backed version was correct in most cases. That's exactly the sort of gap that makes a practical difference when you're deciding whether a feature is safe to ship.