Angular CLI MCP Server

Angular CLI включает Model Context Protocol (MCP) server, который позволяет ИИ-ассистентам (Cursor, Antigravity, JetBrains AI и др.) напрямую взаимодействовать с Angular CLI. Он предоставляет инструменты для генерации кода, анализа workspace, а также запуска сборок и тестов.

Начало работы

Чтобы использовать MCP-сервер, настройте хост-среду (IDE или CLI) на запуск npx @angular/cli mcp.

    {
      "mcpServers": {
        "angular-cli": {
          "command": "npx",
          "args": ["-y", "@angular/cli", "mcp"]
        }
      }
    }

    {
      "mcpServers": {
        "angular-cli": {
          "command": "npx",
          "args": ["-y", "@angular/cli", "mcp"]
        }
      }
    }

    {
      "servers": {
        "angular-cli": {
          "command": "npx",
          "args": ["-y", "@angular/cli", "mcp"]
        }
      }
    }

Доступные инструменты (по умолчанию)

Когда MCP-сервер включён, ИИ-агенты получают доступ к следующим инструментам:

Типовые сценарии

Эти сценарии показывают, как ИИ-ассистенты координируют разные MCP-инструменты, чтобы автоматически решать сложные задачи разработчика.

1. Настройка производительности: миграция на Zoneless и OnPush

ИИ-агент оптимизирует производительность обнаружения изменений и переводит компоненты в состояние, готовое к zoneless.

1. Обнаружение workspace: агент вызывает list_projects, чтобы найти компоненты, проекты и конфигурации стилей/тестов.
2. Модернизация схемами (предпосылка): агент выполняет необходимые миграции сигналов стандартными командами ng generate (например, Signal Inputs, Signal Queries).
3. План миграции: агент вызывает onpush_zoneless_migration с абсолютным путём к каталогу или файлу компонента.
4. Применение изменений: агент автоматически применяет к кодовой базе одно конкретное изменение, возвращённое инструментом.
5. Проверка изменений: агент запускает unit-тесты через run_target с параметром "test".
6. Повтор: агент снова вызывает onpush_zoneless_migration за следующим шагом и повторяет цикл, пока инструмент не сообщит о завершении миграции.

2. Разработка функций и цикл TDD

ИИ-агент автоматизирует исследование, реализацию и проверку при разработке новых функций.

1. Исследование API и синтаксиса: агент использует search_documentation для поиска Angular API или правил синтаксиса (например, опции блока @defer).
2. Загрузка стандартов кодирования: агент вызывает get_best_practices с путём workspace, чтобы загрузить правила, соответствующие версии Angular.
3. Запуск локального dev-сервера: агент запускает фоновый сервер через devserver.start.
4. Мониторинг сборки: агент использует devserver.wait_for_build, чтобы следить за логами сборки и убедиться, что компиляция проходит успешно при правках кода.
5. Написание и запуск тестов: агент определяет тестовый фреймворк проекта (например, Jasmine, Jest, Vitest) через list_projects, пишет соответствующий тестовый файл и запускает тесты через run_target с "test".
6. Остановка dev-сервера: по завершении агент останавливает активный dev-сервер через devserver.stop.

3. Онбординг и обучение разработчика

ИИ-агент проводит разработчика по концепциям Angular в интерактивной песочнице.

1. Обнаружение проектов: агент вызывает list_projects, чтобы просканировать workspace и понять структуру кодовой базы.
2. Запуск наставника: агент запускает ai_tutor, чтобы загрузить учебный план, персону и рекомендации по обучению.
3. Следование учебному плану: агент проводит пользователя по программе, объясняя концепции и указывая, какие компоненты создавать или изменять.
4. Реализация и проверка: агент помогает реализовать код песочницы и проверяет изменения через run_target с "test" или "build".

Параметры команды

Аргументы MCP-серверу можно передавать в массиве args конфигурации:

• --read-only: регистрирует только инструменты, которые не изменяют проект.
• --local-only: регистрирует только инструменты, которым не нужен интернет.

Пример режима только для чтения:

"args": ["-y", "@angular/cli", "mcp", "--read-only"]