mcp_flutter MCP — Use Cases, Install & Live Demo

Why use it

Key features

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

Live Demo

What it looks like in practice

flutter.replay ▶ ready

0/0

Install

Pick your client

~/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
    }
  }
}

Open Claude Desktop → Settings → Developer → Edit Config. Restart after saving.

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

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

Cursor uses the same mcpServers schema as Claude Desktop. Project config wins over global.

VS Code → Cline → MCP Servers → Edit

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

Click the MCP Servers icon in the Cline sidebar, then "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Same shape as Claude Desktop. Restart Windsurf to pick up changes.

~/.continue/config.json

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

Continue uses an array of server objects rather than a map.

~/.config/zed/settings.json

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

Add to context_servers. Zed hot-reloads on save.

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

One-liner. Verify with claude mcp list. Remove with claude mcp remove.

Use Cases

Real-world ways to use mcp_flutter

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

👤 Flutter devs ⏱ ~15 min intermediate

When to use: You're iterating on UI and something broke. Instead of describing it, let the AI see the screenshot + errors.

Prerequisites

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

Flow

Connect

Connect to my running Flutter app (VM port 8181) via mcp_flutter.✓ Copied

→ 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.✓ Copied

→ Screenshot + error log
Suggest fix

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

→ Code diff proposal

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

Pitfalls

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

When to use: Your app has debug-only seeders / state toggles you want AI to call during dev.

Flow

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.✓ Copied

→ Dart snippet registering tools
Drive from Claude

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

→ Multi-step tool call sequence with final screenshot

Outcome: Faster manual QA via chat-driven state manipulation.

Pitfalls

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

When to use: You're trying to understand why a screen renders a certain way and the code has 8 levels of nested Builders.

Flow

Get view details

get_view_details for the current screen and summarize the widget hierarchy.✓ Copied

→ Widget tree summary
Ask why

Why does this text overflow? Reference specific widgets in the tree.✓ Copied

→ Layout reasoning grounded in actual tree

Outcome: Faster onboarding to unfamiliar Flutter code.

Pitfalls

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

Combinations

Pair with other MCPs for X10 leverage

flutter + git-2

Debug → fix → commit loop

Screenshot, diagnose, have me apply the fix, then git_commit with message describing the fix.✓ Copied

Tools

What this MCP exposes

Tool	Inputs	When to call	Cost
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

Cost & Limits

What this costs to run

API quota: None
Tokens per call: Screenshots are large (~1-3k vision tokens); widget trees 500-5k
Monetary: Free, MIT
Tip: Disable screenshots (remove --images) when debugging non-visual issues — widget tree + errors are much cheaper.

Security

Permissions, secrets, blast radius

Credential storage: None — connects to local Dart VM service

Data egress: Local only in typical use; screenshots go to your LLM provider

Never grant: 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.

Troubleshooting

Common errors and fixes

Cannot connect to Dart VM

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

Verify: 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.

Alternatives

mcp_flutter vs others

Alternative	When to use it instead	Tradeoff
Flutter DevTools MCP	You want the official Flutter tooling	Doesn't exist yet as an MCP; this is the closest

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills