Flutter Inspector
A Model Context Protocol server that connects Flutter apps with AI coding assistants like Cursor, Claude, and Cline, enabling AI-powered analysis of widget trees, navigation, and layout issues.
What is Flutter Inspector?
Flutter Inspector is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to model context protocol server that connects flutter apps with ai coding assistants like cursor, claude, and cline, enabling ai-powered analysis of widget trees, navigation, and layout issues.
A Model Context Protocol server that connects Flutter apps with AI coding assistants like Cursor, Claude, and Cline, enabling AI-powered analysis of widget trees, navigation, and layout issues.
This server falls under the Browser Automation category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- A Model Context Protocol server that connects Flutter apps w
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx flutter-inspector-mcp-serverConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Flutter Inspector
The Flutter Inspector MCP server connects AI coding assistants like Claude, Cursor, and Cline directly to a running Flutter application's VM service, enabling real-time widget tree analysis, navigation inspection, layout debugging, and interaction automation. Instead of manually interpreting widget tree dumps, Claude can call tools to take semantic snapshots, inspect specific views, tap elements, scroll, fill forms, and evaluate Dart expressions in the live app. This creates a closed feedback loop where the AI can observe visual and structural state changes immediately after issuing commands.
Prerequisites
- Flutter SDK installed with a working debug build (flutter run --debug)
- Dart runtime (included with Flutter SDK)
- The flutter-mcp-toolkit binary installed via the provided install script
- Claude Desktop, Claude Code CLI, Cursor, or Cline as your MCP client
Install the flutter-mcp-toolkit binary
Run the official install script to download and install the flutter-mcp-toolkit CLI, which includes the MCP server and the codegen and init subcommands.
curl -fsSL https://raw.githubusercontent.com/Arenukvern/mcp_flutter/main/install.sh | bashInitialize MCP codegen in your Flutter app
Navigate to your Flutter project root and run codegen-init. This adds the necessary MCP registration code to your app so the server can communicate with it at runtime.
cd my-flutter-app
flutter-mcp-toolkit codegen-initInstall skills for your AI agent
Install the agent-specific skill files that teach Claude how to use the Flutter MCP tools. Replace 'claude-code' with your client name (cursor, cline, codex, or all).
flutter-mcp-toolkit init claude-codeRun your Flutter app in debug mode
Launch your Flutter app with flutter run in debug mode. The MCP server connects to the app's VM service port to inspect and interact with it.
flutter run --debugStart a debugging or inspection session with Claude
Ask Claude to take a semantic snapshot of the current UI or inspect a specific widget. Claude will use the fmt_* MCP tools to query and interact with the live Flutter app.
Flutter Inspector Examples
Client configuration
After running 'flutter-mcp-toolkit init claude-code', the config is written automatically. A typical Claude Desktop entry looks like this.
{
"mcpServers": {
"flutter-inspector": {
"command": "flutter-mcp-toolkit",
"args": ["serve"]
}
}
}Prompts to try
Use these prompts in Claude while your Flutter app is running in debug mode to inspect and interact with it.
- "Take a semantic snapshot of the current Flutter screen and describe the widget hierarchy"
- "Find the login button in the widget tree and tap it"
- "Evaluate the Dart expression 'Navigator.of(context).currentRoute' and tell me the current route"
- "Scroll down on the main list and take a screenshot of the new state"
- "Hot-reload the app after I make this change and check if the UI updated correctly"Troubleshooting Flutter Inspector
flutter-mcp-toolkit cannot connect to the Flutter app
Ensure your Flutter app is running with 'flutter run --debug' (not release mode). The MCP server connects to the VM service port — check that the app printed 'An Observatory debugger and profiler on...' to confirm the VM service is active.
fmt_* tools return 'connection_selection_required' with a list of targets
If multiple Flutter apps or devices are connected, specify the target explicitly using 'arguments.connection.targetId' with one of the IDs from the availableTargets list returned in the error response.
The main branch version (4.0.0-dev) is unstable
The repository README notes that the current main branch is an untested experimental version. Use the latest stable release tag instead: check the GitHub Releases page and pin your installation to a stable version.
Frequently Asked Questions about Flutter Inspector
What is Flutter Inspector?
Flutter Inspector is a Model Context Protocol (MCP) server that model context protocol server that connects flutter apps with ai coding assistants like cursor, claude, and cline, enabling ai-powered analysis of widget trees, navigation, and layout issues. It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Flutter Inspector?
Follow the installation instructions on the Flutter Inspector GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with Flutter Inspector?
Flutter Inspector works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Flutter Inspector free to use?
Yes, Flutter Inspector is open source and available under the MIT License license. You can use it freely in both personal and commercial projects.
Flutter Inspector Alternatives — Similar Browser Automation Servers
Looking for alternatives to Flutter Inspector? Here are other popular browser automation servers you can use with Claude, Cursor, and VS Code.
Chrome DevTools MCP
★ 40.6kAI-powered Chrome automation server with natural language element detection. Control Chrome browser through MCP protocol for testing, debugging, and performance analysis. Features 91% accuracy in element location, works with free AI models, and suppo
UI TARS Desktop
★ 34.9k📇 🏠 - Browser automation capabilities using Puppeteer, both support local and remote browser connection.
Playwright
★ 32.8kA production-ready browser automation server that enables AI assistants to interact with web pages using tools for navigation, element interaction, and data extraction. It features a built-in Inspector UI and robust crash recovery for reliable automa
Page Agent
★ 18.0kJavaScript in-page GUI agent. Control web interfaces with natural language.
Chrome
★ 11.7kAn extension-based MCP server that enables AI assistants to control your browser, leveraging existing sessions and login states for automation and content analysis. It provides over 20 tools for semantic tab search, interactive element manipulation,
LAMDA
★ 7.8kThe most powerful Android RPA agent framework, next generation mobile automation.
Browse More Browser Automation MCP Servers
Explore all browser automation servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Flutter Inspector in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Flutter Inspector?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.