서론
iOS / Flutter / AI 개발 기반 개발 등을 하고 있는 미야짱(ミヤちゃん)입니다.
AI 에이전트(Claude Code 등)로 Flutter 개발을 하다 보면,
- 앱의 상태를 AI가 직접 볼 수 있으면 좋겠다
- analyze 에러를 포착해서 알아서 고쳐줬으면 좋겠다
라고 생각하는 장면이 늘어납니다.
그것을 적절히 처리해 주는 것이 바로 Dart & Flutter MCP 서버입니다!
이 기사에서는 그 할 수 있는 일 · 설정 방법 · 사용법을 간략하게 정리했습니다.
Dart MCP 서버란
Dart / Flutter 팀(Google) 제작의 공식 MCP 서버
- Dart/Flutter 개발 도구 조작을 대응 AI 클라이언트에게 공개
- 대응 클라이언트: Claude Code / Cursor / Gemini CLI / GitHub Copilot 등
- 전제 조건: Dart 3.9 / Flutter 3.35 이후
거칠게 말하자면, "AI 에이전트에게 Flutter 개발 도구를 만지게 하는 창구" 같은 것입니다.
할 수 있는 일
앱을 실행하지 않아도 사용할 수 있는 기능
- 에러 분석 및 수정…
analyze를 수행하여 발생한 에러를 수정
- 포맷팅 (Format)…
dart format과 동일한 설정으로 정렬
- 테스트 실행 및 결과 분석… 테스트를 돌리고 실패한 항목을 분석
- pub.dev 검색…
pub_dev_search로 용도에 맞는 패키지를 검색
- 의존성 관리…
pubspec.yaml의 의존성 패키지를 추가 또는 업데이트
- 심볼 해결 (Symbol Resolution)… 심볼의 존재 확인 · 문서 · 시그니처(Signature) 취득
실행 중인 앱에 접속하여 사용할 수 있는 기능
- 실행 중인 앱의 내부 관찰 및 조작… 스크린샷, UI 검사, Widget 트리 취득
- 런타임 에러 (Runtime Error) 취득 및 해석… 실행 중에 발생한 에러를 포착
- 핫 리로드 (Hot Reload) / 핫 리스타트 (Hot Restart)
- 선택 중인 Widget 취득
설정 방법 (Claude Code)
claude mcp add --transport stdio dart -- dart mcp-server
이것뿐입니다. 다른 클라이언트도 공식적인 절차가 있습니다 (대체로 설정 JSON에 command: "dart", args: ["mcp-server"]를 작성하기만 하면 됩니다):
- Gemini CLI / Cursor / Antigravity…
mcpServers에 dart를 추가
- Codex CLI…
codex mcp add dart -- dart mcp-server --force-roots-fallback
- GitHub Copilot (VS Code)… 설정에
"dart.mcpServer": true 추가 (Dart Code 확장 v3.116+ 필요)
사용 예시
앱을 실행하지 않아도 사용할 수 있는 기능:
- "이 프로젝트의 analyze 에러를 고쳐줘"
- "◯◯용 패키지를 찾아서 넣어줘"
- "이 테스트를 통과시켜줘"
실행 중인 앱에 접속하여 사용할 수 있는 기능:
- "지금 발생하고 있는 에러 내용을 알려줘"
- "핫 리로드(Hot Reload) 해줘"
- "지금 선택하고 있는 Widget, 어떤 코드야?"
요약
- Dart MCP는 Google 공식의, Flutter 개발을 AI로부터 조작하는 MCP 서버입니다.
- 정적 기능 (analyze / fix / format / test / pub)은 바로 사용 가능합니다. 우선 이 부분부터 도입하면 효과를 알기 쉽습니다.
- **동적 기능 (Widget 트리 / 핫 리로드 / 런타임 에러)**은 실행 중인 앱에 접속하는 한 단계를 거치면 매우 강력해집니다.
AI 에이전트로 Flutter를 하고 계신 분들은, 도입해 보시면 AI 개발이 훨씬 수월해질지도 모릅니다.
괜찮으시다면 한번 시도해 보세요.
참고
Discussion
