서론

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