Nuxt MCP Dev

nuxt-mcp-dev / vite-plugin-mcp

Модуль Nuxt и плагин Vite поднимают MCP-сервер на порту dev-сервера: агент видит конфигурацию, страницы, компоненты, автоимпорты и граф модулей

  • 913 ★ репозитория
  • Последний коммит
  • MIT
MCP-сервер

Расширенный доступ

Почему такой уровень

  • Инструмент `nuxt-scaffold` создает файлы в проекте через `nuxi add`
  • Модуль сам правит файлы конфигурации клиентов, включая глобальный файл Windsurf в домашней папке
  • Сервер слушает порт dev-сервера на локальной машине без аутентификации
Все причины и проверки

antfu/nuxt-mcp-dev

Установка

Ручная установка

Текст для агента

Добавь `nuxt-mcp-dev` в `modules` файла `nuxt.config.ts`: `export default defineNuxtConfig({ modules: ['nuxt-mcp-dev'] })`. Для проекта на Vite подключи `ViteMcp()` из `vite-plugin-mcp` в `plugins`. Запусти dev-сервер, подключи MCP-клиент к адресу `http://localhost:3000/__mcp/sse` (для Vite порт 5173). Помни, что пакеты экспериментальные, а модуль сам правит конфигурации клиентов, если не задать `updateConfig: false`.

Доступ и проверки

Как мы проверяем

Расширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.

  • Инструмент `nuxt-scaffold` создает файлы в проекте через `nuxi add`
  • Модуль сам правит файлы конфигурации клиентов, включая глобальный файл Windsurf в домашней папке
  • Сервер слушает порт dev-сервера на локальной машине без аутентификации

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Репозиторий Энтони Фу содержит два пакета. `nuxt-mcp-dev` подключается к проекту на Nuxt строкой в `modules` файла `nuxt.config.ts`, `vite-plugin-mcp` добавляется плагином `ViteMcp()` в `vite.config`. Пока работает dev-сервер, на нем доступен MCP-сервер по адресу вида `http://localhost:3000/__mcp/sse` для Nuxt или `http://localhost:5173/__mcp/sse` для Vite. Отдельного процесса не нужно. В Nuxt агент получает инструменты `get-nuxt-config` (параметры `ssr`, `srcDir`, `rootDir`, псевдонимы, публичный `runtimeConfig`, подключенные модули), `list-nuxt-pages`, `list-nuxt-components` и `list-nuxt-auto-imports-items`. Последние три нужны, чтобы агент использовал существующие страницы, компоненты и функции, а не выдумывал импорты. Инструмент `nuxt-scaffold` вызывает `nuxi add` и создает компонент, страницу, слой, плагин, серверный маршрут и другие шаблоны. Плагин Vite добавляет `get-vite-config` и `get-vite-module-info`: для файла он возвращает импортирующие и импортируемые модули и результат компиляции. Модуль сам прописывает сервер в конфигурации клиентов. Файлы зависят от клиента: `.cursor/mcp.json`, `.vscode/settings.json`, `~/.codeium/windsurf/mcp_config.json` и `.mcp.json` для Claude Code. Вместе с ним по умолчанию добавляется удаленный сервер документации `https://nuxt.com/mcp`, отключается опцией `includeNuxtDocsMcp: false`. Другие модули Nuxt могут дополнить набор инструментов через хук `mcp:setup`.

Для кого. Для разработчиков на Nuxt и Vite, которые пишут код с Cursor, Claude Code, Windsurf или VS Code и хотят, чтобы агент знал устройство их приложения.

Подходит, если

  • Агент добавляет компонент и выдумывает импорты: `list-nuxt-components` и `list-nuxt-auto-imports-items` покажут, что уже есть в приложении
  • Нужно создать страницу или плагин по соглашениям проекта: `nuxt-scaffold` вызывает `nuxi add` в корне приложения
  • Нужно понять, почему модуль попал в сборку или откуда он импортируется: `get-vite-module-info` отдает граф импортов по пути файла
  • В проекте несколько клиентов агентов: модуль сам обновляет `.cursor/mcp.json`, `.vscode/settings.json`, `.mcp.json` и настройки Windsurf
  • Вы пишете собственный модуль Nuxt и хотите отдать агенту свои данные: для этого есть хук `mcp:setup`

Не подходит, если

  • Нужен MCP-сервер для вашего приложения на Nuxt, который отдает данные пользователям: автор отсылает к модулю `@nuxtjs/mcp-toolkit`
  • Нужны только документация и список модулей Nuxt: достаточно удаленного сервера `https://nuxt.com/mcp`
  • Проект не на Nuxt и не на Vite: оба пакета работают только внутри dev-сервера этих инструментов
  • Работа идет в production или в сборке на сервере: плагин рассчитан на dev-сервер, а автор помечает пакеты экспериментальными

Пример запроса к агенту

Посмотри, какие компоненты и автоимпорты уже есть в приложении, и создай страницу профиля, не дублируя существующее

MCP

Транспорт
sse
Авторизация
не нужна

Ограничения

  • Автор помечает `nuxt-mcp-dev` экспериментальным и просит осторожности, а `vite-plugin-mcp` — не готовым к продакшену.
  • Сервер доступен, только пока запущен dev-сервер. Проверка идет на порту dev-сервера, по умолчанию 3000 для Nuxt и 5173 для Vite, адрес выводится в консоль.
  • Режим `updateConfig: 'auto'` сам правит конфигурации клиентов, в том числе глобальный файл Windsurf в домашней папке. Чтобы не менять файлы, задайте `updateConfig: false`.
  • Вместе с модулем в конфигурации клиентов появляется удаленный сервер `nuxt-docs` на `https://nuxt.com/mcp`. Отключается опцией `includeNuxtDocsMcp: false`.
  • Инструмент `nuxt-scaffold` создает файлы проекта. Проверьте результат в git, прежде чем коммитить.

Как отключить. Уберите `nuxt-mcp-dev` из `modules` в `nuxt.config.ts` или `ViteMcp()` из плагинов Vite. Записи сервера, которые модуль добавил в `.cursor/mcp.json`, `.vscode/settings.json`, `.mcp.json` и конфигурацию Windsurf, удаляйте вручную. Чтобы модуль не менял файлы клиентов, задайте `updateConfig: false`.

Частые вопросы

Какие инструменты получает агент в Nuxt?

`get-nuxt-config`, `list-nuxt-pages`, `list-nuxt-components`, `list-nuxt-auto-imports-items` и `nuxt-scaffold`. К ним добавляются `get-vite-config` и `get-vite-module-info` из плагина Vite, на котором модуль построен.

Какие шаблоны умеет создавать nuxt-scaffold?

Список из шестнадцати: `api`, `app`, `app-config`, `component`, `composable`, `error`, `layer`, `layout`, `middleware`, `module`, `page`, `plugin`, `server-middleware`, `server-plugin`, `server-route` и `server-util`. Для каждого нужно имя.

Как расширить набор инструментов своим модулем Nuxt?

Подпишитесь на хук `mcp:setup` в `setup` модуля и зарегистрируйте инструмент методом `mcp.tool` с именем, описанием, схемой параметров и функцией. В примере репозитория инструмент `get-nuxt-root` возвращает корневую папку проекта.

Как не дать модулю менять файлы клиентов?

Задайте `updateConfig: false`. Чтобы ограничить список, укажите один или несколько типов: `cursor`, `vscode`, `windsurf`, `claude-code`. Имя сервера в файлах меняет `updateConfigServerName`.

Что делать с сервером документации Nuxt?

По умолчанию `includeNuxtDocsMcp` равен `true`, и в конфигурацию добавляется `nuxt-docs` на `https://nuxt.com/mcp` с актуальной документацией и списком модулей. Уберите его опцией `includeNuxtDocsMcp: false`.

Обсуждение

Вопросов и отзывов пока нет.

MCP-серверы

Плагин Vite с MCP-сервером: агент видит компоненты, маршруты и хранилища Pinia запущенного Vue-приложения

MCP-серверРасширенный доступ578Звезды репозитория
Официальный

Официальный MCP-сервер и плагин Svelte: актуальная документация, автоисправление компонентов и скиллы по Svelte 5

MCP-серверРасширенный доступ335Звезды репозитория
Официальный

Подключает агента к запущенному dev-серверу Next.js 16+: ошибки, маршруты, логи и путь к документации нужной версии

MCP-серверРасширенный доступ834Звезды репозитория
Официальный

Vibe MCP отдает агенту компоненты, иконки и токены дизайн-системы monday.com Vibe

MCP-серверРасширенный доступ692Звезды репозитория
Официальный

MCP-сервер и плагин 21st.dev: поиск готовых React/Tailwind компонентов, логотипов и генерация интерфейса прямо из агента

MCP-серверРасширенный доступ6,3 тыс.Звезды репозитория

Inspo

inspo

Сервер MCP со справочником реальных рабочих сайтов, по которым агент изучает дизайн до написания интерфейса. Брать приемы, не копировать страницы

MCP-серверРасширенный доступ944Звезды репозитория

Сравнение с похожими

Записи с тем же главным запросом: чем они отличаются.

ЗаписьОфициальныйАвторизацияЗвезды репозиторияГлавное отличие
Nuxt MCP Dev (эта запись)нетне нужна913
Скиллы Энтони Фунет6 019в репозитории antfu/skills лежат скиллы с соглашениями автора и документацией Vue, Vite и Nuxt; Nuxt MCP Dev отдает агенту данные работающего приложения
vite-plugin-vue-mcpнетне нужна578плагин Vite с MCP-сервером

Коротко о README

Корневая документация коротко представляет монорепозиторий с двумя пакетами, предупреждает об экспериментальном статусе и отсылает к `@nuxtjs/mcp-toolkit` и к документации Nuxt по ИИ. В документации каждого пакета есть пример подключения, адрес сервера, описание автоматической настройки клиентов, а у Nuxt еще и хук `mcp:setup`. В репозитории лежат исходники на TypeScript, песочницы для обоих пакетов и тесты экспорта.

Бейдж для README

Сообщить о проблеме

Foxx AINuxt MCP Dev
Foxx AI

Я Foxx AI и уже разобрал этот инструмент. Спросите про установку, настройку или что угодно еще, отвечу простыми словами.