Эта статья — перевод оригинальной статьи «Introducing the MDN MCP server». Самые полезные MCP и скиллы для фронтенд разработки можешь найти в этом посте. Мы рады объявить о релизе MDN MCP-сервера. MCP (Model Context Protocol) — это открытый стандарт, который позволяет ИИ-инструментам подключаться к внешним источникам данных.

MDN MCP-сервер использует этот протокол, чтобы доставлять документацию MDN и данные о совместимости браузеров прямо в твой редактор кода или IDE. Все больше ИИ-инструментов внедряются в рабочие процессы веб-разработки. Однако они часто выдают устаревшую информацию о веб-платформе из-за ограничений в их обучающих данных (knowledge cutoff). Например, большая языковая модель (LLM) или ИИ-агент могут банально не знать о существовании CSS-правила @view-transition или о том, получила ли фича статус «Widely Available» (широко доступна) в Baseline, чтобы её можно было безопасно использовать в продакшене. MDN MCP открывает вашему ИИ-помощнику доступ к точной и самой актуальной информации о веб-технологиях. Кроме того, это упрощает жизнь и самому разработчику: теперь можно получать свежую документацию, не покидая любимый редактор. Важно: На данный момент сервер работает в экспериментальном режиме. Подробности об обработке данных можно найти в нашем соглашении о конфиденциальности.

MDN MCP-сервер совместим с любым клиентом, поддерживающим стандарт MCP, включая: Консольные ИИ-агенты (CLI): Claude Code, Codex CLI и Antigravity CLI (бывший Gemini CLI). В качестве быстрого примера — вот так можно подключить сервер к Claude Code: Нам не терпится увидеть, как вы интегрируете это решение в свои рабочие процессы и в каких сценариях оно окажется наиболее полезным. Учитывая недетерминированную природу LLM и разнообразие моделей, часто бывает трудно сравнить их поведение с включенными инструментами и без них.

Мы протестировали Claude Code (Opus 4.7) с включенным и выключенным MDN MCP на нескольких фичах, которые совсем недавно появились в Firefox 151. Мы спрашивали модель, как использовать эти фичи и какова их поддержка в браузерах. Вопросы были следующие: Как использовать CSS-функцию light-dark() для изображений и какие браузеры её поддерживают? Как использовать CSS-псевдокласс :buffering и какие браузеры его поддерживают? Как использовать атрибут shadowrootslotassignment у тега