Flutter MCP provides real-time Flutter/Dart documentation and pub.dev package information to AI assistants, supporting over 50,000 packages on demand. This ensures your AI generates accurate, up-to-date Flutter code instead of hallucinated widgets or deprecated APIs.
Get the server running with npm:
# One-line usage (no installation required)
npx flutter-mcp
# Or install globally
npm install -g flutter-mcp
flutter-mcp
The server will automatically install dependencies and start running.
For MCP SuperAssistant Users: Use
npx flutter-mcp --transport http --port 8000
to enable HTTP transport!
Edit ~/Library/Application Support/Claude/claude_desktop_config.json
:
{
"mcpServers": {
"flutter-docs": {
"command": "npx",
"args": ["flutter-mcp"]
}
}
}
Or if you installed globally:
{
"mcpServers": {
"flutter-docs": {
"command": "flutter-mcp"
}
}
}
Restart Claude Desktop after saving.
Create a .mcp.json
file in your Flutter project root:
{
"mcpServers": {
"flutter-docs": {
"command": "npx",
"args": ["flutter-mcp"]
}
}
}
Then run Claude Code in your project directory:
cd your-flutter-project
claude
MCP SuperAssistant requires HTTP transport:
npx flutter-mcp --transport http --port 8000
http://localhost:8000
Flutter MCP provides two main tools for AI assistants:
"Search for Flutter animation widgets"
"Find state management packages"
"Look for HTTP clients in pub.dev"
"Show me Container widget documentation"
"Get the docs for provider package"
"Explain dart:async Future class"
Get documentation for specific package versions:
# Exact versions
"Show me provider:6.0.5 breaking changes"
"How does riverpod:2.5.1 AsyncNotifier work?"
# Version ranges
"Compare dio:^5.0.0 vs dio:^4.0.0"
"What's new in bloc:>=8.0.0?"
# Special keywords
"Try get:latest experimental features"
"Is provider:stable production ready?"
flutter_search
- Universal SearchSearch across Flutter/Dart documentation and pub.dev packages:
{
"tool": "flutter_search",
"arguments": {
"query": "state management",
"limit": 10 // Optional: max results (default: 10)
}
}
flutter_docs
- Smart Documentation FetcherGet documentation for any Flutter/Dart identifier:
{
"tool": "flutter_docs",
"arguments": {
"identifier": "Container", // Auto-detects as Flutter widget
"topic": "examples", // Optional: filter content
"max_tokens": 10000 // Optional: limit response size
}
}
Supports various formats:
"Container"
- Flutter widget"material.AppBar"
- Library-qualified class"provider"
- pub.dev package"dart:async.Future"
- Dart core libraryflutter_status
- Health CheckMonitor service health and cache statistics:
{
"tool": "flutter_status",
"arguments": {}
}
This means the system cannot find the flutter-mcp
command. Solutions:
{
"mcpServers": {
"flutter-docs": {
"command": "npx",
"args": ["flutter-mcp"]
}
}
}
npm install -g flutter-mcp
node --version
npx flutter-mcp
python3 --version
DEBUG=true npx flutter-mcp
Different MCP clients require different transport protocols:
Claude Desktop: Uses STDIO transport (default)
npx flutter-mcp
MCP SuperAssistant: Requires HTTP transport
npx flutter-mcp --transport http --port 8000
http://localhost:8000
Custom clients: May need SSE transport
npx flutter-mcp --transport sse --port 8080
http://localhost:8080/sse
To add this MCP server to Claude Code, run this command in your terminal:
claude mcp add-json "flutter-mcp" '{"command":"flutter-mcp","args":["start"]}'
See the official Claude Code MCP documentation for more details.
There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json
file so that it is available in all of your projects.
If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json
file.
To add a global MCP server go to Cursor Settings > Tools & Integrations and click "New MCP Server".
When you click that button the ~/.cursor/mcp.json
file will be opened and you can add your server like this:
{
"mcpServers": {
"flutter-mcp": {
"command": "flutter-mcp",
"args": [
"start"
]
}
}
}
To add an MCP server to a project you can create a new .cursor/mcp.json
file or add it to the existing one. This will look exactly the same as the global MCP server example above.
Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.
The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.
You can also explicitly ask the agent to use the tool by mentioning the tool name and describing what the function does.
To add this MCP server to Claude Desktop:
1. Find your configuration file:
~/Library/Application Support/Claude/claude_desktop_config.json
%APPDATA%\Claude\claude_desktop_config.json
~/.config/Claude/claude_desktop_config.json
2. Add this to your configuration file:
{
"mcpServers": {
"flutter-mcp": {
"command": "flutter-mcp",
"args": [
"start"
]
}
}
}
3. Restart Claude Desktop for the changes to take effect