Koniec z długiem technicznym? Angular CLI MCP Server jako wsparcie dla Twojego asystenta AI

Angular CLI (Command Line Interface) od dawna stanowi jedno z podstawowych narzędzi ekosystemu Angular. Automatyzuje rutynowe zadania – od inicjalizacji projektu (ng new) i generowania kluczowych elementów architektury (ng generate component, ng generate service), po budowanie, serwowanie i testowanie aplikacji. Nie tylko usprawnia pracę dewelopera, ale także częściowo narzuca jednolite, najlepsze praktyki i strukturę, co jest nieocenione szczególnie w dużych zespołach i złożonych projektach.

Ostatnie lata przyniosły przełom w narzędziach deweloperskich za sprawą sztucznej inteligencji, w szczególności dużych modeli językowych (ang. Large Language Model, LLM). Asystenci AI, tacy jak Github Copilot czy dedykowane narzędzia w środowiskach IDE, stały się integralną częścią codziennej pracy, oferując szybkie sugestie, uzupełnianie kodu, a nawet generowanie złożonych funkcjonalności.

Problem pojawia się, gdy te modele, pomimo ogromnej wiedzy, muszą podejmować decyzje w kontekście konkretnego projektu – jego unikalnej struktury plików, aktualnych wersji zależności czy specyficznych konwencji nazewnictwa. Modele te, bazujące na statycznych danych treningowych, sięgających 2-3 lata wstecz, często nie są świadome realnego kontekstu przestrzeni roboczej Angulara, co prowadzi do generowania nieoptymalnego lub wręcz przestarzałego (ang. legacy) kodu.

Angular, będąc technologią niezwykle dynamiczną, wprowadził w ostatnich latach mnóstwo ulepszeń i nowych, wydajnych API, które znacznie podnoszą komfort kodowania. Niestety, LLM-y pozostają nieświadome tych zmian. Funkcja Web Search, oferowana przez wielu dostawców AI, tylko częściowo rozwiązuje ten problem, ponieważ może ona odczytywać zarówno nieaktualne strony internetowe, jak i treści niskiej jakości (a nawet artykuły generowane przez same LLM-y). W efekcie, generowany kod może z marszu stać się kodem legacy, który wymaga ręcznego refaktoringu.

Aby w pełni wykorzystać potencjał AI, potrzebujemy interfejsu, który zapewni modelom dostęp do aktualnej i autorytatywnej wiedzy na temat konkretnej przestrzeni roboczej Angulara.

Czym jest Model Context Protocol (MCP) Server?

Model Context Protocol (MCP) Server to ustandaryzowany serwer protokołu, który ma na celu ułatwienie komunikacji w czasie rzeczywistym między dużymi modelami językowymi a narzędziami deweloperskimi i środowiskiem kodu. W swojej istocie MCP Server działa jako inteligentny tłumacz i pomost.

Zamiast polegać wyłącznie na wbudowanej wiedzy, LLM może wysyłać zapytania do serwera MCP, aby uzyskać aktualny kontekst na temat projektu, narzędzi, a nawet najlepszych praktyk. Serwer ten udostępnia LLM-om zestaw specjalistycznych funkcji (ang. tools), które te mogą wywoływać. Dzięki temu, model AI może wykonywać precyzyjne operacje w środowisku deweloperskim, takie jak:

1. Pobieranie konfiguracji: Zrozumienie struktury projektu.
2. Wyszukiwanie danych: Dostęp do aktualnej dokumentacji.
3. Wywoływanie akcji: Uruchamianie specyficznych poleceń narzędzi.

Angular CLI MCP Server

Angular CLI MCP Server to eksperymentalna implementacja protokołu MCP, stworzona specjalnie dla ekosystemu Angulara. Jej głównym celem jest wyposażenie asystentów AI w zdolność do interakcji i rozumienia przestrzeni roboczej Angulara z dokładnością, której nie są w stanie osiągnąć same modele językowe.

Dostępne narzędzia:

• get_best_practices – pobiera Oficjalny Przewodnik Najlepszych Praktyk Kodowania Angulara, zapewniając aktualne standardy.
• search_documentation – wyszukuje w dokumentacji angular.dev w czasie rzeczywistym.
• list_projects – analizuje plik angular.json i zwraca pełną strukturę przestrzeni roboczej (aplikacje, biblioteki, konfiguracje).
• ai_tutor – uruchamia interaktywny tutor AI zorientowany na wiedzę o Angularze.
• find_examples – wyszukuje autorytatywne przykłady kodu zgodne z najlepszymi praktykami.
• onpush-zoneless-migration – analizuje kod i tworzy plan migracji do strategii wykrywania zmian OnPush, przygotowując aplikację do przyszłego modelu zoneless.
• modernize – wykonuje migracje kodu i dostarcza instrukcje, jak unowocześnić istniejący kod Angulara (narzędzie eksperymentalne).

Lista narzędzi jest ciągle rozszerzana, warto więc śledzić oficjalną dokumentację.

Konfiguracja

Narzędzie jest dostępne dla wielu środowisk, Ja w omawianych przykładach będę używać VS Code z Github Copilotem oraz model Claude Sonnet 4.5 –w tym wypadku konfiguracja sprowadza się do dodania .vscode/mcp.json o treści:

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

Po tej operacji powinniśmy mieć w oknie czatu możliwość wyboru narzędzia angular-cli.

Przykłady użycia

Pierwsze, co rzuciło mi się w oczy zaraz po konfiguracji, to fakt, że mój agent do tworzenia komponentów czy serwisów zaczął wykorzystywać angular-cli, czego domyślnie nie robił.

Druga różnica widoczna jest w generowanym kodzie. Dla przykładu utworzyłam dwa identyczne projekty – Angular CLI MCP Server i bez MCP, a następnie poprosiłam o stworzenie przykładowego serwisu API i komponentu do logowania. Poniżej najbardziej znaczące fragmenty.

Bez MCP

//TypeScript
@Component({
  selector: 'app-login',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  templateUrl: './login.component.html',
  styleUrl: './login.component.scss'
})
export class LoginComponent {
  loginForm: FormGroup;
  isLoading = false;
  errorMessage = '';

  constructor(
    private fb: FormBuilder,
    private router: Router
  ) {
    this.loginForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]]
    });
  }

//HTML

<div class="error-message" *ngIf="email?.invalid && email?.touched">
          <span *ngIf="email?.errors?.['required']">Email is required</span>
          <span *ngIf="email?.errors?.['email']">Please enter a valid email</span>
        </div>

Z Angular CLI MCP Server

//TypeScript
@Component({
  selector: 'app-login',
  imports: [ReactiveFormsModule],
  templateUrl: './login.html',
  styleUrl: './login.scss',
})
export class Login {
  private readonly fb = inject(FormBuilder);
  private readonly api = inject(Api);

  protected readonly isLoading = signal(false);
  protected readonly errorMessage = signal<string | null>(null);

//HTML 
@if (loginForm.controls.email.invalid && loginForm.controls.email.touched) {
        <span class="field-error">Please enter a valid email</span>
      }

Nie ulega wątpliwości, że w drugim przypadku agent napisał kod lepiej przystający do najnowszych standardów. Kluczowe różnice to:

• wykorzystanie inject zamiast konstruktora do wstrzykiwania zależności,
• reaktywność oparta na sygnałach,
• pominięcie flagi standalone:true, która stała się domyślna od wersji 19. W przypadku HTML zastąpił dyrektywę *ngIf nową składnią @if, która jest bardziej wydajna i czytelna.

Podsumowanie

Angular CLI MCP Server to niewątpliwie brakujące ogniwo w pracy z asystentami AI. Zamiast zgadywać strukturę plików lub proponować rozwiązania sprzed lat, Copilot czy Claude zyskują wreszcie „oczy i uszy” wewnątrz Twojego projektu. Dzięki temu generowany kod przestaje być źródłem długu technologicznego, a staje się realnym wsparciem w utrzymaniu wysokiej jakości.

Warto jednak pamiętać, że jest to narzędzie w fazie eksperymentalnej (ang. development preview). Ekosystem MCP rozwija się niezwykle dynamicznie, co oznacza, że lista dostępnych funkcji może się zmieniać, a samo narzędzie może wymagać od nas czasem odrobiny cierpliwości. Nie należy traktować go więc jeszcze jako ostatecznej wyroczni, ale jako znaczące wsparcie w codziennym kodowaniu.

Najlepszym sposobem na ocenę przydatności Angular CLI MCP Server jest przetestowanie go na własnym kodzie. Zachęcam do eksperymentowania i śledzenia rozwoju tego projektu, bo wydaje się, że tak właśnie wygląda przyszłość efektywnego programowania.

Przydatne linki

• Angular CLI MCP Server setup