Портал The New Stack составил список MCP-предложений, специально разработанных для фронтенд- и веб-разработчиков.
В наши дни регулярно появляется информация о том, что какая-то компания создала новый MCP-сервер. MCP (Model Context Protocol) — это новый открытый стандарт от Anthropic, предоставляющий моделям искусственного интеллекта возможность взаимодействовать с внешними источниками данных и инструментами. Он подобен универсальному языку и набору правил, позволяющих большой языковой модели (LLM) взаимодействовать с внешними системами.
За быстрым появлением все новых MCP-серверов сложно угнаться, но эти серверы полезны разработчикам, поскольку MCP можно использовать с ИИ в интегрированных средах разработки (IDE) для предоставления документации и поддержки.
Как определить, какой из новых MCP-серверов будет наиболее полезен, учитывая, что анонсы новых MCP-серверов выходят чуть ли не ежедневно? Благодаря обширным исследованиям и небольшой помощи от Gemini удалось выявить десять MCP-серверов (плюс один экспериментальный), которые могут поддерживать и упрощать фронтенд-разработку.
1. Canva MCP Server
До появления Canva MCP Server создание приложений Canva было длительным процессом. Разработчикам приходилось постоянно обращаться в Canva, которая проверяла приложения на соответствие внешнему виду и стилю Canva. Компания поняла, что может перенести использование своих инструментов разработки за пределы Canva и предоставить разработчикам доступ к ним в IDE. Ее MCP-сервер:
- Генерирует приложения Canva одним запросом. MCP Server может создать полностью структурированное приложение, соответствующее лучшим практикам, вызывая генератор приложений Canva CLI. После создания приложения он поможет вам добавить новые функции, используя различные методы из Apps SDK.
- Адаптирует App UI Kit, позволяя разработчикам переносить существующий пользовательский интерфейс в компоненты App UI Kit и обеспечивая единообразие функциональности и внешнего вида во всем приложении.
- Упрощает соблюдение рекомендаций по дизайну Canva;
- Создает отчёт с рекомендациями «нужно/следует/можно» на основе руководств по дизайну Canva. Он даже предлагает рекомендации по улучшению кода.
- Интегрируется с чат-помощниками на основе ИИ, такими как Claude, где разработчики могут обсуждать SDK Canva Apps или API Connect.
- Создаёт интеграции с Canva через API Connect, генерируя клиентский код API Canva Connect для создания новых дизайнов или загрузки ресурсов.
2. Dart MCP Server
MCP-сервер Dart позволяет ИИ-агентам взаимодействовать с платформой Dart. Он дает ИИ-помощникам возможность программно получать доступ к данным и управлять ими в рабочей области Dart, например, к информации о клиентах, проектах, задачах, к отслеживанию времени и выставлению счетов. Ключевые функции включают в себя:
- Взаимодействие с рабочей областью, которое позволяет ИИ-агентам подключаться к определённой рабочей области Dart и выполнять операции в ней.
- Управление клиентами и проектами, которое позволяет запрашивать и, возможно, управлять особенностями клиентов, проектами и связанными задачами.
- Доступ к отслеживанию задач и времени, предоставляющий разработчикам информацию о задачах, статусах и временных записях, зарегистрированных в Dart.
- Данные о выставлении счетов и финансах, с возможностью извлечения информации, связанной со счетами, гонорарами и другими финансовыми аспектами, управляемыми в Dart.
- Совместная работа и коммуникация, включая поддержку обновлений, связанных с проектами и задачами;
- Настраиваемые поля и данные, позволяющие разработчикам получать доступ к данным, хранящимся в настраиваемых полях, сконфигурированных в рабочей области Dart.
3. DigitalOcean MCP Server
MCP-сервер DigitalOcean позволяет ИИ взаимодействовать с облачной инфраструктурой, предоставляя фронтенд-разработчикам простой и понятный интерфейс для бэкенда. Этот сервер:
- Позволяет разработчикам создавать приложения с нуля и развертывать их в DigitalOcean, не выходя из IDE.
- Развертывает новые приложения прямо из репозитория GitHub.
- Изменяет код и повторно развертывает его одним запросом.
- Создает список всех приложений, проверяет их, перезапускает или удаляет из редактора.
- Осуществляет принудительную пересборку или удаление приложения.
- Проверяет доступные регионы и планирует развертывания соответствующим образом.
4. Figma Dev Mode MCP Server
Этот сервер предоставляет информацию о дизайне и контекст для агентов ИИ, генерирующих код из файлов дизайна Figma. Локальный сервер позволяет ИИ-помощникам программно получать подробную информацию о текущем файле Figma, проекте и выбранных элементах дизайна (узлах), а также интегрировать возможности ИИ в рабочий процесс от проектирования до разработки. Он обеспечивает:
- Генерацию кода из выбранных фреймов или узлов. Пользователи могут выбрать фрейм в Figma или указать URL-адрес узла, чтобы ИИ-агент превратил дизайн в код.
- Экстрагирование контекста дизайна из слоёв, извлекая переменные, компоненты и макеты из дизайна, чтобы гарантировать соответствие сборки шаблонам проектирования.
- Code Connect. Сервер информирует ИИ-агентов о существующих компонентах, полученных из информации Code Connect, что позволяет использовать их повторно.
5. GitHub MCP Server
MCP-сервер GitHub создан для разработчиков и позволяет ИИ-агентам напрямую взаимодействовать с кодовой базой, запросами на изменения (PR) и задачами. Он подключает инструменты ИИ напрямую к платформам GitHub, предоставляя агентам, помощникам и чат-ботам ИИ возможность читать репозитории и файлы кода, управлять проблемами и PR, анализировать код и автоматизировать рабочие процессы. Всё это посредством взаимодействия на естественном языке. Это MCP-сервер обеспечивает:
- Управление репозиториями: разработчики могут просматривать и запрашивать код, искать файлы, анализировать коммиты и понимать структуру проекта в любом репозитории, к которому у них есть доступ.
- Автоматизацию проблем и PR: создание, обновление и управление проблемами и PR. ИИ может помочь в сортировке ошибок, проверке изменений кода и ведении досок проектов.
- Добавление интеллекта в CI/CD и рабочие процессы. Он может отслеживать выполнение рабочих процессов GitHub Actions, анализировать сбои сборки, управлять релизами и получать инсайты о процессе разработки.
- Анализ кода, проверку результатов безопасности, проверку оповещений Dependabot, понимание шаблонов кода и получение комплексной информации о вашей кодовой базе.
- Совместную работа в команде путем предоставления доступа к обсуждениям, управления уведомлениями, анализа активности команды и оптимизации процессов для команды.
6. JetBrains MCP Proxy Server
JetBrains предлагает IDE, включая IntelliJ IDEA для Java и Kotlin, PyCharm для Python, WebStorm для JavaScript, Rider для .NET и CLion для C/C++. Компания предлагает плагин для своего прокси-сервера MCP, который позволяет инструментам ИИ использовать возможности IDE по пониманию кода, выполнять рефакторинг, генерировать код и получать доступ к контексту проекта непосредственно в среде разработки, где запущен AI Assistant. Это обеспечивает:
- Интеграцию с IDE, предоставляя мост для внешних агентов ИИ для взаимодействия с плагином AI Assistant, работающим в IDE JetBrains.
- Понимание и анализ кода, позволяя агенту ИИ получать доступ к информации IDE о кодовой базе, включая синтаксис, семантику и структуру проекта.
- Генерацию и модификацию кода, которые облегчают генерацию кода с помощью ИИ, автозавершение, рефакторинг и другие задачи по работе с кодом, которые выполняет IDE.
- Доступ к контексту проекта, позволяющий агенту ИИ получать информацию о текущем проекте, открытых файлах и положении курсора для предоставления контекстно-зависимой помощи.
- Локальное выполнение, то есть прокси-сервер работает локально, обеспечивая взаимодействие между локальным агентом ИИ или инструментом разработки и локальным экземпляром IDE JetBrains.
7. MongoDB MCP Server
MCP-сервер MongoDB позволяет ИИ взаимодействовать с ее базой данных. Фронтенд-разработчик может использовать агента ИИ для:
- Запросов к базе данных для получения определённой информации.
- Управления данными путём добавления нового пользователя в базу данных с использованием естественного языка.
- Управления коллекциями путём создания новых коллекций для базы данных.
- Получения схемы базы данных.
- Генерации кода с учётом контекста, что означает, что разработчики могут описывать необходимые данные и позволять ИИ генерировать запросы к MongoDB и даже код для взаимодействия с базой данных.
8. React MCP Server (сторонний)
О планах выпуска официального MCP-сервера для React пока ничего не известно, но фронтенд-разработчик Каливарапрасад Гонапа из Drishya AI Labs уже создал такой сервер. Согласно репозиторию GitHub, React MCP Server интегрируется с Claude Desktop, что позволяет создавать и изменять приложения React на основе пользовательских запросов. Он позволяет:
- Создавать новые приложения React.
- Запускать серверы разработки React.
- Управлять файлами и каталогами.
- Устанавливать пакеты npm.
- Выполнять команды терминала.
- Отслеживать и управлять длительными процессами.
9. Shopify Dev MCP Server
Этот MCP-сервер подключает ИИ-помощника разработчика к ресурсам разработки Shopify, позволяя ему искать в документации Shopify, изучать схемы API, собирать Functions и получать актуальные ответы на вопросы об API Shopify и передовом опыте. Сервер обеспечивает:
- Обращение к вашему ИИ-помощнику с вопросами о разработке в Shopify.
- Поддержку API Shopify, включая API администратора GraphQL, Functions, веб-компоненты Polaris (опционально) и Liquid (опционально).
- Интеграцию с ИИ-инструментами разработки, такими как Cursor и Claude Desktop.
10. Vercel MCP Server
MCP-сервер Vercel позволяет ИИ взаимодействовать с этой платформой разработки и хостинга фронтенда. Он работает с Gemini CLI, Gemini Code Assist, Windsurf, Goose, Raycast, Devin, VS Code с Copilot, Cursor, Claude и Claude Code, а также ChatGPT. Сервер обеспечивает:
- Развёртывание новой версии приложения.
- Получение отзывов о приложении, включая его новые функции.
- Управление настройками приложения путём проверки переменных среды приложения.
- Обработку конфигурации нового приложения.
На подходе: Angular MCP Server (экспериментальный)
У Angular есть
- Поддержку передовых практик, предоставляя разработчикам доступ к руководству Angular Best Practices Guide, чтобы гарантировать соответствие всего кода современным стандартам.
- Получение списка всех приложений и библиотек, определённых в рабочем пространстве Angular, путём чтения файла конфигурации angular.json.
- Поиск в официальной документации Angular.
