vite-plugin-vue-mcp
Плагин Vite с MCP-сервером: агент видит компоненты, маршруты и хранилища Pinia запущенного Vue-приложения
- 578 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Агент может менять состояние запущенного приложения
- Плагин открывает на dev-сервере конечную точку `/__mcp` без авторизации, а параметр `host` меняет адрес, который она слушает
- Плагин сам правит файл `.cursor/mcp.json`, пока не задано `updateCursorMcpJson: false`
Установка
- Работает в
Ручная установка
pnpm install vite-plugin-vue-mcp -DПакет ставится как dev-зависимость проекта на Vite.
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Агент может менять состояние запущенного приложения
- Плагин открывает на dev-сервере конечную точку `/__mcp` без авторизации, а параметр `host` меняет адрес, который она слушает
- Плагин сам правит файл `.cursor/mcp.json`, пока не задано `updateCursorMcpJson: false`
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Плагин vite-plugin-vue-mcp подключается в `vite.config.ts` и запускает MCP-сервер рядом с dev-сервером Vue-приложения. Данные агент берет из страницы, открытой в браузере: дерево и состояние компонентов, сведения о маршрутизаторе и хранилища Pinia. Инструментов семь: `get-component-tree`, `get-component-state`, `edit-component-state`, `highlight-component`, `get-router-info`, `get-pinia-tree` и `get-pinia-state`. Через `edit-component-state` агент подставляет новое значение в состояние компонента. `highlight-component` подсвечивает компонент на странице. Сервер отвечает по адресу http://localhost:порт/__mcp/sse. Если в корне проекта есть папка .cursor, плагин сам вписывает этот адрес в `.cursor/mcp.json`.
Для кого. Для разработчиков Vue-приложений на Vite, которые отлаживают интерфейс вместе с агентом, например в Cursor.
Подходит, если
- Агенту нужно понять, из каких компонентов собрана страница, не перечитывая все файлы проекта
- Нужно узнать значение в состоянии компонента или в хранилище Pinia, пока приложение работает
- Нужно подсветить на странице компонент, о котором идет разговор с агентом
- Нужно быстро подставить другое значение в состояние компонента, чтобы воспроизвести ошибку
Не подходит, если
- Приложение написано не на Vue или собирается не через Vite: плагин встраивается в dev-сервер Vite
- Нужен разбор исходников без запуска проекта: плагин работает только с запущенным приложением
- Проект на Nuxt и нужен обзор его конфигурации и автоимпортов: для этого лучше подойдет отдельный модуль Nuxt
Пример запроса к агенту
Покажи дерево компонентов страницы, текущее состояние хранилища Pinia с контактами и подсвети компонент UserInfo.MCP
- Транспорт
- sse
- Авторизация
- не нужна
Ограничения
Встроенный сервер работает только по транспорту SSE, поэтому клиент агента должен его поддерживать. Плагин добавляет на страницу собственный скрипт. В клиентах кроме Cursor адрес сервера вносят в настройки вручную. Совместимые версии Vue и Vite автор не перечисляет. Проверьте плагин на своей версии, прежде чем добавлять его в общий конфиг команды. Пример подключения лежит в папке playground репозитория. Последний коммит сделан в апреле 2025 года. Лицензия MIT.
Как отключить. Уберите `VueMcp()` из массива plugins в `vite.config.ts` и удалите пакет командой `pnpm remove vite-plugin-vue-mcp`. Запись сервера в `.cursor/mcp.json` плагин добавил сам, и по умолчанию она называется `vue-mcp`. Удалите ее вручную. Чтобы плагин не трогал этот файл, задайте `updateCursorMcpJson: false`.
Частые вопросы
Как задать свое имя сервера в настройках Cursor?
По умолчанию плагин называет запись `vue-mcp`. Другое имя задает параметр `updateCursorMcpJson.serverName`.
Что нужно агенту, чтобы изменить состояние компонента?
Инструмент `edit-component-state` принимает четыре параметра: `componentName`, `path`, `value` и `valueType`. Инструмент пишет значение по указанному пути прямо в запущенное приложение.
Можно ли подключить собственный MCP-сервер вместо встроенного?
Можно. Параметр `mcpServer` принимает функцию, которая возвращает ваш сервер, и тогда семь штатных инструментов не регистрируются.
Как добавить свои инструменты к штатным?
Параметр `mcpServerSetup` вызывается при создании сервера и получает его объект вместе с dev-сервером Vite. На этом объекте регистрируют дополнительные инструменты. Функция может вернуть и новый сервер на замену штатному.
Как изменить адрес MCP-сервера плагина?
По умолчанию сервер слушает localhost и отвечает по пути `/__mcp`. Адрес меняют параметры `host` и `mcpPath`.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
MCP-серверыNuxt MCP Dev
nuxt-mcp-dev / vite-plugin-mcp
Модуль Nuxt и плагин Vite поднимают MCP-сервер на порту dev-сервера: агент видит конфигурацию, страницы, компоненты, автоимпорты и граф модулей
Vibe MCP отдает агенту компоненты, иконки и токены дизайн-системы monday.com Vibe
Официальный MCP-сервер и плагин Svelte: актуальная документация, автоисправление компонентов и скиллы по Svelte 5
Подключает агента к запущенному dev-серверу Next.js 16+: ошибки, маршруты, логи и путь к документации нужной версии
MCP-сервер и расширение Chrome: выбираете элемент DOM в браузере по Option+клику, агент видит его текст, стили и селектор
Shadcn UI MCP Server
Shadcn UI v4 MCP Server
MCP-сервер, который отдает агенту исходники, демо и блоки компонентов shadcn/ui для React, Svelte, Vue и React Native
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| vite-plugin-vue-mcp (эта запись) | нет | не нужна | 578 | |
| Nuxt MCP Dev | нет | не нужна | 913 | модуль Nuxt и плагин Vite с MCP на порту dev-сервера: агент видит конфигурацию, страницы, компоненты, автоимпорты и граф модулей, а этот плагин читает состояние запущенной страницы |
| vue-skills | нет | 3 216 | скиллы с практиками Vue 3, которые учат агента писать код, а запущенное приложение не показывают |
Коротко о README
Страница проекта начинается с установки, подключения в `vite.config.ts` и таблицы параметров. Каждый из семи инструментов показан короткой анимацией. В конце есть схема архитектуры и ссылка на vite-plugin-mcp Антони Фу, от которого автор отталкивался.