MDN MCP Server Guide:
Mozilla Docs in Your AI Coding Agent

What Is the MDN MCP Server?

Mozilla's MDN MCP server is an official service that exposes the entire MDN Web Docs knowledge base — documentation, code examples, and browser compatibility data — through the Model Context Protocol (MCP). MCP is an open standard by Anthropic that lets AI applications connect to external tools and data sources, much like how USB-C lets devices connect to peripherals.

Announced on June 15, 2026, the server is currently in experimental phase and available at mcp.mdn.mozilla.net. It works with any MCP-compatible client — VS Code, Cursor, Zed, Claude Code, Codex CLI, Antigravity CLI, and Claude Desktop.

The key insight: instead of your AI coding agent guessing about browser compatibility based on its training data (which is always months to years old), it can query MDN's live database for the exact answer. The difference is dramatic — MDN's own tests showed Claude Code with the MCP server got browser support information significantly more accurate than without it.

Why Mozilla Built It

The fundamental problem is LLM knowledge cutoffs. A model trained in early 2025 has no awareness of features that shipped in late 2025 or 2026. Ask it about @view-transition CSS at-rule, the light-dark() CSS function, or the :buffering pseudo-class, and it will likely fabricate an answer — confidently wrong.

Mozilla tested this systematically with Claude Code Opus 4.7, asking about four features from Firefox 151 (which shipped in May 2026):

• The light-dark() CSS function for images
• The :buffering CSS pseudo-class
• The shadowrootslotassignment attribute on <template>
• The Web Serial API

Without the MCP server, Claude Code got browser support right in only one of four cases. With the MCP server, all four answers were accurate and well-structured. The usage notes were also richer — for example, answers about light-dark() automatically included linear gradient examples that the question didn't explicitly ask for.

This is the same pattern I've observed with AI coding assistants in general — they're powerful when connected to the right tools, but limited when operating from static knowledge alone. The MCP ecosystem is changing this fast.

What Tools Does the MCP Server Expose?

The MDN MCP server exposes several tools that your AI agent can call. These correspond directly to the capabilities of MDN's search and documentation infrastructure:

These tools are the same ones that power the MDN website itself. Your AI agent gets exactly the same data — just delivered through a programmatic interface instead of a browser.

Setting Up the MDN MCP Server

With Claude Code

Easiest setup — single command:

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

Claude Code uses HTTP transport to connect to the remote server. No local installation or download needed. Once added, Claude can instantly query MDN documentation and browser compatibility during any conversation.

With VS Code (via GitHub Copilot MCP)

VS Code supports MCP servers through GitHub Copilot. You'll need to configure the server in your VS Code settings:

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

Once configured, GitHub Copilot in VS Code can query MDN documentation as part of its context. This is especially useful for getting accurate browser compatibility information while writing CSS or JavaScript.

With Cursor

Cursor supports MCP servers through its AI settings. Add to your .cursor/mcp.json:

{
  "mcpServers": {
    "mdn": {
      "type": "http",
      "url": "https://mcp.mdn.mozilla.net/"
    }
  }
}

With Zed

Zed uses its own MCP configuration in ~/.config/zed/mcp.json:

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

With Claude Desktop

Claude Desktop uses Connectors to extend its capabilities. The MDN MCP server can be added through Claude Desktop's MCP configuration.

Running Locally

If you prefer to run the server locally (for privacy or offline use), the source is on GitHub at github.com/mdn/mcp:

git clone https://github.com/mdn/mcp.git
cd mcp
npm install
npm run build
npm start

Practical Use Cases

1. Checking Browser Support During Development

The most common use case: you're writing CSS and need to know if light-dark() is safe to use. Instead of opening a browser tab and searching MDN, your AI agent queries the MCP server directly:

"Is the CSS light-dark() function safe to use in production?"

→ "The light-dark() CSS function is supported in Chrome 133+, Firefox 151+,
   Safari 18.0+. It has 'Widely Available' Baseline status as of Chrome 133
   and Safari 18.2. Safe to use in production."

Without the MCP server, the same question might produce an answer based on outdated training data — for example, claiming the feature doesn't exist yet.

2. Finding API Parameters

Need to know the exact parameters for the Element.animate() method? The agent fetches the full MDN page and extracts parameter signatures, return types, and code examples:

"What parameters does Element.animate() accept?"

→ "Element.animate(keyframes, options) where keyframes is an array of
   keyframe objects or a PropertyIndexedKeyframes object, and options
   includes: id (string), delay (number), direction ('normal'|'reverse'|
   'alternate'|'alternate-reverse'), duration (number|'auto'), easing
   (string), endDelay (number), fill ('none'|'forwards'|'backwards'|
   'both'), iterationStart (number), iterations (number|Infinity),
   composite ('replace'|'add'|'accumulate'), iterationComposite
   ('replace'|'accumulate')."

3. Checking Baseline Status Before Shipping

Before deploying a feature, you want to know if it has achieved "Widely Available" status — meaning it's supported in all major browsers for at least 2.5 years:

"What is the Baseline status of CSS Anchor Positioning?"

→ "CSS Anchor Positioning has 'Newly Available' Baseline status.
   Supported in Chrome 131+, Firefox 133+, Safari 18.2+.
   Not yet Widely Available — use feature detection or a polyfill
   for production."

4. Keeping Up with New Browser Features

With browsers shipping every four weeks (Chrome) and new features arriving constantly, it's hard to keep up. The MCP server can answer questions about the latest releases — features that shipped weeks ago, not years ago. See my Chrome 150 new CSS features guide for the kind of bleeding-edge features the MCP server was designed to handle.

With vs Without MCP — Real Comparison

Let's be concrete. Here's how answers differ for the same question asked to Claude Code with and without the MDN MCP server connected:

Question: "Which browsers support CSS text-wrap: pretty?"

Without MCP: "CSS text-wrap: pretty is supported in Chrome 110+, Firefox 120+, Safari 16.4+. It's widely available."
Plausible-looking, but wrong on the details. The actual Chrome version differs and the Baseline status may be outdated.

With MCP: "CSS overflow-wrap: pretty (the actual property name is text-wrap: pretty) — supported in Chrome 125+, Firefox 121+, Safari 17.5+. Has 'Widely Available' Baseline status as of Chrome 131. Safe to use in production."
Accurate version numbers, correct property usage note, and Baseline context.

The difference isn't subtle. Without the MCP server, you get a confident-sounding answer that may be partially wrong. With it, you get verified, actual data from MDN's compatibility database.

Privacy Considerations

Since the MDN MCP server is currently experimental, Mozilla collects anonymized query data to understand how it's being used and improve the service. According to their privacy notice:

• Queries are logged but not associated with personally identifying information
• Data is stored only during the experimental phase
• You can opt out of first-party analytics by sending the X-Moz-1st-Party-Data-Opt-Out: 1 header
• If you share private information in your query to the LLM, it could theoretically be included in what gets sent to the MCP server

For most developers, the privacy trade-off is minimal — MDN queries contain technology names and version numbers, not personal data. If you're working in a sensitive environment, you can run the server locally from source.

The Bigger Picture: MCP Ecosystem

The MDN MCP server is part of a growing ecosystem of MCP servers that give AI agents access to real-time, authoritative data sources. Official MCP servers now exist for MDN, Figma, Linear, GitHub, and more. For web developers, this means:

• Documentation accuracy — no more hallucinated API signatures
• Current data — features that shipped last week are queryable today
• Less context switching — ask from your editor, not a browser tab
• Verified answers — the agent cites its MDN source

For a broader look at how AI is transforming web development workflows, see my AI code assistants guide. The MDN MCP server is one of the most practically useful additions to this ecosystem — I add it to every new project workspace. For visual verification of how code actually renders in a browser, see the Safari MCP server guide — Apple's recently released MCP server for Safari Technology Preview 247.

FAQ

Get Started

Adding the MDN MCP server to your workflow takes exactly one command in Claude Code, or a few lines of JSON in VS Code or Cursor. The payoff is immediate: your AI coding agent stops guessing and starts knowing — with the entire MDN Web Docs database at its disposal.

This is one of those rare tools that improves every time you use it. Every new MDN update, every shipped feature, every browser release — your agent has access to it on day one. No waiting for model retraining.

I'm a web developer with 20+ years of experience building production applications. If you're planning a web project and want to discuss the right tech stack — frameworks, tools, AI integration — let's talk.