Flutter MCP Toolkit — Claude Code MCP server: install and setup
Drives and inspects Flutter debug apps using semantic snapshots, widget taps, and hot reload. Helpful for building autonomous testing and UI debugging workflows.
claude mcp add mcp_server_dart -- docker run -i --rm ghcr.io/arenukvern/flutter-mcp-toolkit:7.0.1What Flutter MCP Toolkit does
The server connects to a debug Flutter build and routes calls through tools prefixed with fmt_. It captures semantic UI snapshots, simulates taps, and enters text. Gestures follow a Playwright-style reference model: the agent requests a semantic_snapshot, gets a handle like s_N, and passes it to fmt_tap_widget.
Under the hood sits flutter_mcp_core. This layer powers both the MCP adapter and the fmtk CLI entrypoint. The server can trigger hot reloads with fmt_hot_reload_and_capture, dump render trees, and evaluate ad-hoc Dart code against the running root library.
Inspection requires modifying application code beforehand. You need to add mcp_toolkit and call MCPToolkitBinding.instance.bootstrapFlutter(...) at startup. Without Docker and an active debug process, the server cannot connect to the Dart VM.
What it helps with
- inspect and tap Flutter widgets using semantic reference handles
- run hot reload while taking screenshots and logging runtime errors
- scroll to off-screen elements using the bounded reveal_search helper
- evaluate ad-hoc Dart expressions directly in the running root library
- dump semantics, render, and focus trees for UI diagnostics
Example prompts for the agent
- Take a semantic snapshot of the running Flutter app and tap the submit button.
- Enter text into input field
s_2and scroll down to reveal the next section. - Run
fmt_hot_reload_and_captureto apply recent code changes and verify the view.
How to install Flutter MCP Toolkit
Platform CLI
claude mcp add mcp_server_dart -- docker run -i --rm ghcr.io/arenukvern/flutter-mcp-toolkit:7.0.1Platform CLI
codex mcp add mcp_server_dart -- docker run -i --rm ghcr.io/arenukvern/flutter-mcp-toolkit:7.0.1Config file
{
"mcpServers": {
"mcp_server_dart": {
"command": "docker",
"args": [
"run",
"-i",
"--rm",
"ghcr.io/arenukvern/flutter-mcp-toolkit:7.0.1"
]
}
}
}Config file
{
"servers": {
"mcp_server_dart": {
"type": "stdio",
"command": "docker",
"args": [
"run",
"-i",
"--rm",
"ghcr.io/arenukvern/flutter-mcp-toolkit:7.0.1"
]
}
}
}Platform CLI
gemini mcp add mcp_server_dart docker run -i --rm ghcr.io/arenukvern/flutter-mcp-toolkit:7.0.1Step by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Flutter MCP Toolkit
How do I install Flutter MCP Toolkit in Claude Code?
Run claude mcp add mcp_server_dart -- docker run -i --rm ghcr.io/arenukvern/flutter-mcp-toolkit:7.0.1 in your terminal. Docker must be running locally.
What does Flutter MCP Toolkit do?
It allows your AI agent to inspect and drive running Flutter debug applications. The agent can take UI snapshots, click widgets, scroll views, and trigger hot reloads.
What code changes are required in the Flutter project?
Add the mcp_toolkit package to your dependencies and call MCPToolkitBinding.instance.bootstrapFlutter(...) during app startup. The app must run in debug mode.
