Angular + ШІ: що таке MCP і навіщо воно нам?

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Колись ми мріяли про автодоповнення у редакторах. А вже сьогодні без ШІ навіть трохи дивно писати код. ChatGPT, Claude, Gemini — всі ці «аішки» допомагають нам зараз. Але завжди було одне «але» — вони не бачили весь контекст додатку.

Це як розмовляти з «сеньйором», який вже радить, як переписати сервіс, але сам працює тут перший день. Приблизно так ШІ допомагали нам раніше.

З виходом Angular CLI 20.1 у фреймворку з’явилася експериментальна фіча під назвою MCP-сервер (Model Context Protocol).

MCP — що це таке?

MCP придумали в Anthropic у 2024 році. Це відкритий протокол, який дозволяє ШІ підключатися до ваших інструментів розробки.

Сенс тут простий: замість того, щоб пиляти 100500 інтеграцій, є один універсальний інтерфейс для всіх моделей.

Окей з цим розібралися.

Angular і MCP

Хлопці з Angular не просто прикрутила MCP. Вони зробили Angular щось подібне до ШІ платформи.

Треба запустити ось цю команду:

ng mcp

— і ваш workspace стає доступним для LLM модельки у структурованому вигляді.

Що тепер бачить ця «аішка»?

По-перше, вона має доступ до офіційних гайдів Angular. Тобто радить не якісь випадкові шматки коду з GitHub, а саме те, що рекомендує сама команда фреймворку.

Уявімо приклад: ви написали компонент списку користувачів:

@Component({
  selector: 'app-user-list',
  template: `
    <div *ngFor="let user of users">
      <app-user-card [user]="user" (click)="selectUser(user)"></app-user-card>
    </div>
  `
})
export class UserListComponent {
  @Input() users: User[] = [];
  @Output() userSelected = new EventEmitter<User>();

  selectUser(user: User) {
    this.userSelected.emit(user);
  }
}

ШІ дивиться на код і каже:

«Бачу кілька можливостей для модернізації:

1. Перетворити на standalone-компонент
2. Використати signal inputs/outputs
3. Оновити шаблони до нового синтаксису @for
4. Додати trackBy для продуктивності

Хочеш, щоб я застосував ці модернізації?»

По-друге, модель розуміє структуру вашого проєкту: бачить app, lib, як вони між собою зв’язані. І завдяки цьому вже може підказувати щось не абстрактне, а прямо по контексту вашого коду.

Налаштування

Візьмемо для прикладу VS Code. Тут усе просто — створюємо файл .vscode/mcp.json і кидаємо туди такий конфіг:

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

Тепер VS Code знає, що треба піднімати Angular CLI в режимі MCP, і будь-який ШІ-агент (Copilot, Cursor тощо) може підключатися до нього.

У JetBrains усе трохи інакше: йдемо у Settings → Tools → AI Assistant

і вставляємо як JSON

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

Після цього все працює аналогічно — IDE розуміє, що Angular CLI може виступати MCP-сервером, і ШІ отримує доступ до контексту твого проєкту.

З Nx трохи інакше: Angular CLI у монорепі виступає не напряму, а через обгортку nx.

Якщо Angular CLI MCP — це вхідна точка для одного workspace, то Nx пішли далі й зробили інтеграцію MCP на рівні монорепо. Це значить, що «аішка» бачить не тільки окремий проєкт, а всю структуру з apps/, libs/, CI пайплайнами й навіть генераторами.

Якщо у вас стоїть Nx Console (плагін із marketplace) — вам взагалі нічого робити не треба. MCP-сервер для Nx піднімається автоматично!

У WebStorm трохи інакше: після встановлення Nx Console IDE сама запропонує:

«Покращити Copilot/AI agent Nx-контекстом?»

Тиснете Так— і все.

Що з’явилося у 20.2

Ось тут стає цікавіше. Angular CLI 20.2 додав нові MCP-фічі.

modernize — асистент по міграціях

ШІ тепер знає все про міграцію:

• *ngIf → @if,
• Input/Output → Signals,
• NgModule → Standalone API.

Приклад діалогу з агентом:

AI: «Я проаналізував твою кодову базу. У вас 47 компонентів, що використовують старі патерни.
Пропоную такий план модернізації:

1. Спершу перетворюємо на standalone (47 файлів)
2. Потім мігруємо до signal inputs (23 компоненти)
3. І нарешті оновлюємо синтаксис control flow (15 шаблонів)

Почнемо з конверсії до standalone?»

Ви: «Так, але давай по модулях.»

AI: «Чудово! Почнемо з SharedModule. Це зачіпає 8 компонентів, можна тестувати спершу…»

Щоб ШІ не почав «робити все сам», в Angular MCP придумали режими доступу.

• --read-only — тільки аналізує та радить, нічого не змінює.
• --local-only — працює повністю офлайн.
• -E modernize — вмикає експериментальні інструменти модернізації.

В яких кейсах ще можна використовувати?

Наприклад, у старому проєкті модель сама складає план міграції і веде вас крок за кроком.

Або для код-рев’ю режиму ви можете дати йому read-only, і він буде писати вам дискусії в дусі: «додай trackBy», «заміни *ngIf на @if», «цей сервіс варто винести».