Angular CLI에는 Cursor, Antigravity, JetBrains AI 등의 AI 어시스턴트가 Angular CLI와 직접 상호작용할 수 있게 하는 모델 컨텍스트 프로토콜(MCP) 서버가 포함되어 있습니다. 코드 생성, 워크스페이스 분석, 빌드 및 테스트 실행 도구를 제공합니다.
Angular AI 에이전트 스킬과 통합하기
Antigravity처럼 호스트 환경이 커스텀 에이전트 스킬을 지원한다면 Angular CLI MCP 서버와 공식 Angular AI 스킬을 함께 사용할 수 있습니다. 스킬은 에이전트에 구체적인 작업 지침과 코딩 표준을 제공하고, MCP 서버는 컴파일, 테스트 실행, 워크스페이스 분석 등 지침을 실행할 도구를 제공합니다. 두 기능을 결합하면 완성도 높고 강력한 개발 에이전트를 구성할 수 있습니다.
시작하기
MCP 서버를 사용하려면 호스트 환경(IDE 또는 CLI)이 npx @angular/cli mcp를 실행하도록 설정하세요.
사용 가능한 기본 도구
MCP 서버를 활성화하면 AI 에이전트가 다음 도구에 접근할 수 있습니다.
| 이름 | 설명 |
|---|---|
ai_tutor |
대화형 AI 기반 Angular 튜터를 시작합니다. |
devserver_start |
개발 서버(ng serve)를 비동기로 시작하고 즉시 반환합니다. |
devserver_stop |
개발 서버를 중지합니다. |
devserver_wait_for_build |
실행 중인 개발 서버의 가장 최근 빌드 로그를 반환합니다. |
get_best_practices |
독립형 컴포넌트, 타입이 있는 폼 등에 중요한 Angular 모범 사례 가이드를 가져옵니다. |
list_projects |
angular.json을 읽어 워크스페이스의 모든 애플리케이션과 라이브러리를 나열합니다. |
onpush_zoneless_migration |
코드를 분석하고 존리스 전환의 전제 조건인 OnPush 변경 감지로 마이그레이션할 계획을 제공합니다. |
run_target |
설정된 대상(예: build, test, lint, e2e, deploy)을 실행합니다. |
search_documentation |
https://angular.dev의 공식 문서를 검색합니다. |
일반적인 작업 흐름
다음 작업 흐름은 AI 어시스턴트가 여러 MCP 도구를 조합하여 복잡한 개발 작업을 자동으로 수행하는 방법을 보여 줍니다.
1. 성능 최적화: 존리스와 OnPush 마이그레이션
AI 에이전트가 변경 감지 성능을 최적화하고 컴포넌트를 존리스 환경에 준비된 상태로 전환합니다.
- 워크스페이스 파악:
list_projects를 호출하여 워크스페이스의 컴포넌트, 프로젝트, 스타일 및 테스트 설정을 찾습니다. - 스키매틱으로 최신화(선행 조건): 표준
ng generate명령어로 필요한 시그널 마이그레이션(예: 시그널 입력, 시그널 쿼리)을 먼저 실행합니다. - 마이그레이션 계획: 디렉터리 또는 컴포넌트 파일의 절대 경로로
onpush_zoneless_migration을 호출합니다. - 변경 적용: 도구가 반환한 실행 가능한 변경 한 가지를 코드베이스에 자동으로 적용합니다.
- 변경 검증: 대상 매개변수를
"test"로 설정하여run_target을 호출하고 단위 테스트를 실행합니다. - 반복:
onpush_zoneless_migration을 다시 호출해 다음 단계를 가져오고, 도구가 마이그레이션 완료를 알릴 때까지 반복합니다.
2. 기능 개발과 TDD 반복
AI 에이전트가 새 기능 개발에 필요한 조사, 구현, 검증을 자동화합니다.
- API와 문법 조사:
search_documentation으로 Angular API나 문법 규칙(예:@defer블록 옵션)을 찾아봅니다. - 코딩 표준 불러오기: 워크스페이스 경로로
get_best_practices를 호출하여 Angular 버전에 맞는 코딩 규칙을 가져옵니다. - 로컬 개발 서버 시작:
devserver_start를 호출하여 백그라운드 서버를 시작합니다. - 빌드 확인: 코드를 편집하는 동안
devserver_wait_for_build로 빌드 로그를 확인하고 컴파일이 성공하는지 검증합니다. - 테스트 작성과 실행:
list_projects로 프로젝트의 테스트 프레임워크(예: Jasmine, Jest, Vitest)를 파악하고 알맞은 테스트 파일을 작성한 뒤"test"로run_target을 호출하여 테스트를 실행합니다. - 개발 서버 중지: 작업을 마치면
devserver_stop을 호출하여 실행 중인 개발 서버를 중지합니다.
3. 개발자 온보딩과 학습
AI 에이전트가 대화형 샌드박스에서 개발자에게 Angular 개념을 안내합니다.
- 프로젝트 파악:
list_projects를 호출하여 워크스페이스를 살펴보고 코드베이스 구조를 파악합니다. - 튜터 시작:
ai_tutor를 실행하여 교육과정 지침, 페르소나, 학습 안내 지침을 불러옵니다. - 교육과정 진행: 개념을 설명하고 만들거나 수정할 컴포넌트를 안내하면서 사용자가 교육과정을 진행하도록 돕습니다.
- 구현과 검증: 샌드박스 코드 구현을 돕고
"test"나"build"로run_target을 호출하여 변경 사항을 검증합니다.
명령어 옵션
설정의 args 배열에서 MCP 서버에 인자를 전달할 수 있습니다.
--read-only: 프로젝트를 수정하지 않는 도구만 등록합니다.--local-only: 인터넷 연결이 필요하지 않은 도구만 등록합니다.
읽기 전용 모드 예제:
"args": ["-y", "@angular/cli", "mcp", "--read-only"]