Angular и AI: ускоряем процесс разработки

Как многие знают, Angular сделал большой шаг к тому, чтобы улучшить опыт использования AI. Но эта попытка затерялась на фоне куда более серьезных фичей, которые приковали к себе всё внимание коммьюнити (я имею в виду signals и zoneless). Тем не менее, на мой взгляд, Angular задал интересный тренд в мире фреймворков, который не стоит обходить стороной. Я попробовал воспользоваться новыми возможностями данного фреймворка в области использования AI, и в этой статье хотел бы поделиться своим опытом и первыми впечатлениями

Любите ли вы или ненавидите засилье LLM повсюду, но разработчики Angular определенно видят будущее за использованием AI-агентов. Поэтому в двадцатой версии сего фреймворка мы имеем:

• Что-то вроде гайда по промптингу в Angular https://angular.dev/ai/develop-with-ai

• MCP-сервер для взаимодействия AI-агента с Angular CLI https://angular.dev/ai/mcp

Если с промтами всё плюс-минус понятно даже тем, кто не использует AI-агентов, то за MCP-сервер считаю необходимым пояснить хотя бы кратко. MCP - это Model Context Protocol, т.е. некий стандарт для веб-запросов, через которые AI-агент может контактировать с внешним миром. Подробнее очень хорошо рассказано в этой статье: https://habr.com/ru/articles/914774. Главное, что необходимо понимать - MCP-сервер служит API'шкой, через которую AI-агент может взаимодействовать с тем или иным инструментом

Как это всё использовать (на примере VSCode и Copilot)

Для начала потребуется любой AI-агент. По идее они все уже поддерживают MCP, так что вы легко найдете подходящий вам вариант. Однако для примера возьмем GitHub Copilot, потому что он бесплатный и при этом хорошо справляется со своей задачей

Страничка с расширением в VSCode

Небольшой дисклеймер - по политическим соображениям Copilot не работает на территории РФ, так что скорее всего потребуется в настройках VSCode указать прокси. Для этого надо нажать CTRL + SHIFT + P, выбрать пункт "Preferences: Open User Settings (JSON)" и в открывшемся файлике добавить строку с проксёй:

{
  "http.proxy": "http://proxy:8118"
}

Просто пробуем промптить

Для разогрева попробуем воспользоваться инструкциями с официального сайта Angular, которые призваны заставить агента использовать лучшие практики из последней версии фреймворка: https://angular.dev/assets/context/best-practices.md

В случае с GitHub Copilot инструкции необходимо сохранить в проекте по следующему пути: .github/copilot-instructions.md В общем-то этого достаточно для нашего первого промпта. Для этого переводим чат в режим Agent и пробуем что-нибудь сгенерить

GitHub Copilot действительно ознакомился со всеми нашими предпочтениями

Можем наблюдать, что AI прислушался к нашим предпочтениям, которые мы указали в copilot-instructions.md Само собой, мы вольны всячески изменять этот файл под свой вкус - необязательно ограничиваться лишь только инструкциями от команды Angular

Использование MCP-сервера

Для использования MCP-сервера потребуется версия Angular CLI от 20.1 и выше. Выполним следующую команду в существующем проекте:

ng mcp

После чего CLI выдаст нам инструкцию, как сконфигурировать MCP для текущего окружения. В случае с VSCode нам нужно создать файл .vscode/mcp.json и внести в него следующий конфиг

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

Ну в общем-то всё готово к следующему промпту. Благодаря интеграции с Angular CLI MCP результат получился более впечатляющий

Copilot воспользовался MCP-сервером, чтобы почитать лучшие практики и сгенерить через CLI компонент

Попробуем разобраться, что вообще делает Angular CLI MCP. В документации написано, что он предоставляет следующие инструменты:

• get_best_practices - команда, которая позволяет получить доступ к Angular Best Practices Guide. Скорее всего подразумевается тот самый файлик с инструкциями. Но рискну предположить, что вдобавок к нему AI-агент получает llms.txt(https://angular.dev/ai/develop-with-ai#providing-context-with-llmstxt), который содержит ссылки на подробную документацию по Angular, потому что в моем случае использование Angular CLI MCP сильно улучшило результат промпта

• search_documentation - команда, которая используется для ответов на вопросы касательно Angular. Она просто осуществляет поиск по официальной документации

• list_projects - команда, которая перечисляет все приложения и библиотеки, указанные в окружении (по сути читает angular.json)

AI-агент располагает списком этих инструментов и их описанием. И может воспользоваться ими в той или иной ситуации. По сути, все эти команды просто дают больше контекста и инструкций, избавляя разработчика от необходимости собирать их вручную

Мысли и впечатления

Когда эмоции утихли, я осознал, что в общем-то я всё это время мог промптить и без MCP, и даже без Angular 20 (тот же best-practices.md можно легко подогнать под старые версии)... По сути, новый релиз пропатчил не сам фреймворк, а подход к его использованию. Тем не менее, стоит похвалить команду разработчиков Angular за то, что они попытались познакомить широкие массы с использованием LLM'ок. Ну и да, всё выше сказанное не отменяет того факта, что Angular CLI MCP действительно существенно улучшает генерируемый код. Поэтому очень рекомендую к ознакомлению, если вам интересно внедрить AI в ваш рабочий процесс