mcp_flutter MCP — 사용 사례, 설치 & 라이브 데모

왜 쓰나요

핵심 기능

get_app_errors — condensed error info from the running app
view_screenshot — real screenshots (enable with --images)
get_view_details — screen size, pixel ratio, widget info
Dynamic tool registration — your app registers bespoke tools at runtime
Works with Cursor, Claude (Desktop/Code), Cline, Windsurf via stdio

라이브 데모

실제 사용 모습

flutter.replay ▶ 준비됨

0/0

설치

클라이언트 선택

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "flutter": {
      "command": "TODO",
      "args": [
        "See README: https://github.com/Arenukvern/mcp_flutter"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config 열기. 저장 후 앱 재시작.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "flutter": {
      "command": "TODO",
      "args": [
        "See README: https://github.com/Arenukvern/mcp_flutter"
      ],
      "_inferred": true
    }
  }
}

Cursor는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "flutter": {
      "command": "TODO",
      "args": [
        "See README: https://github.com/Arenukvern/mcp_flutter"
      ],
      "_inferred": true
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "Edit Configuration" 선택.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "flutter": {
      "command": "TODO",
      "args": [
        "See README: https://github.com/Arenukvern/mcp_flutter"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "flutter",
      "command": "TODO",
      "args": [
        "See README: https://github.com/Arenukvern/mcp_flutter"
      ]
    }
  ]
}

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json

{
  "context_servers": {
    "flutter": {
      "command": {
        "path": "TODO",
        "args": [
          "See README: https://github.com/Arenukvern/mcp_flutter"
        ]
      }
    }
  }
}

context_servers에 추가. 저장 시 Zed가 핫 리로드.

claude mcp add flutter -- TODO 'See README: https://github.com/Arenukvern/mcp_flutter'

한 줄 명령. claude mcp list로 확인, claude mcp remove로 제거.

사용 사례

실전 활용법: mcp_flutter

Debug a Flutter render error with AI eyes on the running app

👤 Flutter devs ⏱ ~15 min intermediate

언제 쓸까: You're iterating on UI and something broke. Instead of describing it, let the AI see the screenshot + errors.

사전 조건

Flutter app with mcp_toolkit package — Add to pubspec.yaml and initialize in main()
Running in debug mode — flutter run — the server connects to Dart VM service

흐름

Connect

Connect to my running Flutter app (VM port 8181) via mcp_flutter.✓ 복사됨

→ Tools list now includes get_app_errors, view_screenshot
Capture state

Take a screenshot of the current view. Also pull any errors from the last 60 seconds.✓ 복사됨

→ Screenshot + error log
Suggest fix

Based on this error and screenshot, what's wrong and how do I fix it?✓ 복사됨

→ Code diff proposal

결과: Tight debug loop where the AI can verify each fix by looking at the next screenshot.

함정

Screenshot tool disabled by default — Start the server with --images flag
VM port conflicts when running multiple apps — Specify --vm-service-port per app; default 8181

Expose your app's test harness as MCP tools

👤 Flutter devs building QA workflows ⏱ ~30 min intermediate

언제 쓸까: Your app has debug-only seeders / state toggles you want AI to call during dev.

흐름

Register tools in Dart

Using mcp_toolkit, register tools seed_users(count: int) and set_feature_flag(name: str, value: bool) in my app's debug initializer.✓ 복사됨

→ Dart snippet registering tools
Drive from Claude

Seed 10 users, flip feature flag 'new_checkout' to true, take screenshot of checkout screen.✓ 복사됨

→ Multi-step tool call sequence with final screenshot

결과: Faster manual QA via chat-driven state manipulation.

함정

Tools shipped to release mode accidentally — Gate registration with kDebugMode — release builds don't see them

Understand a confusing widget tree

👤 Flutter devs inheriting someone else's code ⏱ ~20 min intermediate

언제 쓸까: You're trying to understand why a screen renders a certain way and the code has 8 levels of nested Builders.

흐름

Get view details

get_view_details for the current screen and summarize the widget hierarchy.✓ 복사됨

→ Widget tree summary
Ask why

Why does this text overflow? Reference specific widgets in the tree.✓ 복사됨

→ Layout reasoning grounded in actual tree

결과: Faster onboarding to unfamiliar Flutter code.

함정

Big widget trees blow up token budget — Ask for a depth-limited summary first, then drill in

조합

다른 MCP와 조합해 10배 효율

flutter + git-2

Debug → fix → commit loop

Screenshot, diagnose, have me apply the fix, then git_commit with message describing the fix.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출	비용
get_app_errors	since?: int (seconds)	After triggering a bug in the running app	free
view_screenshot		Visual verification; requires --images flag	tokens per image
get_view_details		Understand layout / screen geometry	free
<custom>	Varies per app registration	Whatever you register via mcp_toolkit	free

비용 및 제한

운영 비용

API 쿼터: None
호출당 토큰: Screenshots are large (~1-3k vision tokens); widget trees 500-5k
금액: Free, MIT
팁: Disable screenshots (remove --images) when debugging non-visual issues — widget tree + errors are much cheaper.

보안

권한, 시크릿, 파급범위

자격 증명 저장: None — connects to local Dart VM service

데이터 외부 송신: Local only in typical use; screenshots go to your LLM provider

절대 부여 금지: Expose VM service port to the network in release builds

Only works in debug/profile mode — release builds lock down the VM service.
Tested on macOS/iOS; Android and desktop support is marked 'not tested' in the README.

문제 해결

자주 발생하는 오류와 해결

Cannot connect to Dart VM

Start your Flutter app first, then the MCP server. Confirm VM port (usually 8181) matches config.

확인: curl http://127.0.0.1:8181/

Screenshots return 404

Server started without --images flag. Restart with the flag.

Custom tools not showing up

mcp_toolkit must be initialized after runApp; verify kDebugMode gate isn't false in your build.

대안

mcp_flutter 다른 것과 비교

대안	언제 쓰나	단점/장점
Flutter DevTools MCP	You want the official Flutter tooling	Doesn't exist yet as an MCP; this is the closest

mcp_flutter