Flutter MCP Service
Provides advanced Flutter development tools via Model Context Protocol with features including widget analysis, documentation search, performance optimization, and code generation.
README
Flutter MCP Service v2.0
Advanced Flutter development tools via Model Context Protocol (MCP) with intelligent caching, token management, and official documentation integration.
🚀 Quick Start
Installation
# Clone the repository
git clone https://github.com/dvillegastech/flutter_mcp_2.git
cd flutter_mcp_service
# Install dependencies
npm install
# Initialize cache
mkdir -p .cache
# Run health check
npm run health-check
# Start service
npm start
Integration with Claude Desktop / Cursor
Add to your MCP configuration file:
{
"mcpServers": {
"flutter-mcp": {
"command": "node",
"args": ["/absolute/path/to/flutter_mcp_service/src/index.js"]
}
}
}
📋 Complete Tool List & Commands
🆕 Unified Tools (v2.0)
1. flutter_status
Check service health and cache statistics.
@flutter-mcp use flutter_status to check service health
2. flutter_search
Universal search across Flutter/Dart documentation, packages, and examples.
@flutter-mcp use flutter_search with query "Container" and limit 5
@flutter-mcp use flutter_search to find ListView examples
Parameters:
query(required): Search termlimit(optional): Max results (default: 10)maxTokens(optional): Response size limit (default: 4000)
3. flutter_analyze
Smart Flutter documentation fetcher and code analyzer.
@flutter-mcp use flutter_analyze with identifier "Container"
@flutter-mcp use flutter_analyze with identifier "Container" and this code:
Container(
width: 100,
height: 100,
color: Colors.blue,
)
Parameters:
identifier(required): Widget/class name or packagecode(optional): Code to analyzetopic(optional): "all", "docs", "analysis", "examples" (default: "all")maxTokens(optional): Response size limitincludeExamples(optional): Include code examples (default: true)includeAnalysis(optional): Include code analysis (default: true)
🔧 Legacy Tools (Backward Compatible)
4. analyze_widget
Analyze Flutter widget code for best practices, performance, and accessibility.
@flutter-mcp use analyze_widget with this widgetCode:
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Text('Hello World'),
);
}
}
Parameters:
widgetCode(required): Flutter widget codecheckAccessibility(optional): Check accessibility (default: true)checkPerformance(optional): Check performance (default: true)
5. validate_flutter_docs
Validate code against official Flutter documentation.
@flutter-mcp use validate_flutter_docs with this code:
Container(
color: Colors.red,
decoration: BoxDecoration(color: Colors.blue), // This will be flagged
)
Parameters:
code(required): Flutter/Dart codewidgetType(optional): Specific widget to focus on
6. analyze_pub_package
Analyze packages from pub.dev for quality and compatibility.
@flutter-mcp use analyze_pub_package with packageName "provider"
@flutter-mcp use analyze_pub_package with packageName "dio" and checkDependencies true
Parameters:
packageName(required): Package name from pub.devcheckDependencies(optional): Analyze dependencies (default: true)checkScores(optional): Retrieve pub.dev scores (default: true)
7. suggest_improvements
Get improvement suggestions based on Flutter best practices.
@flutter-mcp use suggest_improvements for this code:
ListView(
children: List.generate(1000, (i) => Text('Item $i')),
)
Parameters:
code(required): Flutter codefocusArea(optional): "performance", "accessibility", "maintainability", "all"
8. analyze_performance
Analyze Flutter widget tree for performance issues.
@flutter-mcp use analyze_performance with this widgetTree:
Column(
children: [
for (int i = 0; i < 100; i++)
Container(child: Text('Item $i')),
],
)
Parameters:
widgetTree(required): Widget tree codecheckRebuildOptimization(optional): Check rebuilds (default: true)checkMemoryLeaks(optional): Check memory leaks (default: true)
9. analyze_architecture
Analyze project architecture compliance.
@flutter-mcp use analyze_architecture with projectStructure {
"lib": {
"features": ["auth", "home", "profile"],
"core": ["network", "database"],
"shared": ["widgets", "utils"]
}
} and pattern "clean"
Parameters:
projectStructure(required): Project directory structurepattern(optional): "clean", "mvvm", "mvc", "auto"checkDependencies(optional): Check dependency violations (default: true)
10. analyze_bundle_size
Analyze app bundle size with optimization recommendations.
@flutter-mcp use analyze_bundle_size with buildPath "/path/to/build" and platform "android"
Parameters:
buildPath(required): Path to build outputplatform(optional): "android", "ios", "web", "all"includeAssets(optional): Include asset analysis (default: true)
11. generate_tests
Generate comprehensive Flutter tests.
@flutter-mcp use generate_tests for this widgetCode:
class CounterButton extends StatelessWidget {
final VoidCallback onPressed;
final int count;
const CounterButton({required this.onPressed, required this.count});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: onPressed,
child: Text('Count: $count'),
);
}
}
Parameters:
widgetCode(required): Widget codetestType(optional): "unit", "widget", "integration", "golden", "all"includeAccessibility(optional): Include accessibility tests (default: true)
12. trace_state
Trace state flow and rebuilds in Flutter widgets.
@flutter-mcp use trace_state with this widgetCode:
class MyStatefulWidget extends StatefulWidget {
// ... widget code
}
Parameters:
widgetCode(required): Widget codetraceRebuildPaths(optional): Trace rebuilds (default: true)generateVisualization(optional): Generate visualization (default: true)
13. generate_clean_architecture
Generate Clean Architecture structure.
@flutter-mcp use generate_clean_architecture with projectName "todo_app" and features ["auth", "todos", "settings"]
Parameters:
projectName(required): Project/feature namefeatures(required): List of featuresstateManagement(optional): "riverpod", "bloc", "provider", "getx"includeDI(optional): Include dependency injection (default: true)
14. generate_l10n
Generate localization setup with ARB files.
@flutter-mcp use generate_l10n with languages ["en", "es", "fr"]
Parameters:
languages(required): Language codes to supporttranslations(optional): Initial translationsincludeRTL(optional): Include RTL support (default: true)includePluralization(optional): Include pluralization (default: true)
15. monitor_performance
Generate performance monitoring setup.
@flutter-mcp use monitor_performance with monitoringType "balanced"
Parameters:
monitoringType(required): "comprehensive", "balanced", "lightweight"includeNetwork(optional): Monitor network (default: true)includeMemory(optional): Monitor memory (default: true)includeAnalytics(optional): Include analytics (default: true)
16. diagnose_render_issues
Diagnose and fix rendering issues.
@flutter-mcp use diagnose_render_issues with this widgetCode:
Row(
children: [
Expanded(child: Text('Long text')),
Container(width: double.infinity), // This will cause issues
],
)
Parameters:
widgetCode(required): Widget code with issueserrorType(optional): "overflow", "constraint", "layout", "all"includeVisualization(optional): Include debug visualization (default: true)
17. analyze_test_coverage
Analyze test coverage with recommendations.
@flutter-mcp use analyze_test_coverage with coverageData {...} and targetCoverage 80
Parameters:
coverageData(required): Coverage data from lcovprojectStructure(required): Project file structuretargetCoverage(optional): Target percentage (default: 80)generateReport(optional): Generate visual report (default: true)
🎯 Usage Examples
Basic Widget Analysis
@flutter-mcp analyze this Flutter widget for issues:
Container(
child: Column(
children: List.generate(100, (i) => Text('Item $i')),
),
)
Package Research
@flutter-mcp search for "state management" packages and analyze the top result
Performance Optimization Workflow
1. @flutter-mcp analyze_performance for my widget tree
2. @flutter-mcp suggest_improvements based on performance issues
3. @flutter-mcp generate_tests for the optimized code
Full Project Analysis
@flutter-mcp analyze_architecture for my project and suggest clean architecture improvements
🔧 Development Commands
# Development with auto-reload
npm run dev
# Run tests
npm test
npm run test:integration
npm run test:coverage
# Health check
npm run health-check
# Linting and formatting
npm run lint
npm run format
# Docker
npm run build:docker
npm run docker:run
# Clean cache
npm run clean
📊 Features
- Intelligent Caching: SQLite + in-memory cache with TTL
- Token Management: Smart truncation with GPT-3 encoder
- Error Handling: Circuit breaker pattern with retry logic
- Rate Limiting: Respectful API usage (2 req/sec)
- Official Docs Integration: Real-time Flutter/Dart documentation
- Multi-platform: npm, Docker, direct installation
- Health Monitoring: Built-in health checks and statistics
🏗️ Architecture
See docs/ARCHITECTURE.md for detailed architecture documentation.
🤝 Contributing
See docs/DEVELOPMENT.md for development guidelines.
📄 License
MIT License - see LICENSE file for details.
🙏 Acknowledgments
- Flutter team for excellent documentation
- MCP SDK contributors
- Inspired by adamsmaka/flutter-mcp
Made with ❤️ for the Flutter community
推荐服务器
Baidu Map
百度地图核心API现已全面兼容MCP协议,是国内首家兼容MCP协议的地图服务商。
Playwright MCP Server
一个模型上下文协议服务器,它使大型语言模型能够通过结构化的可访问性快照与网页进行交互,而无需视觉模型或屏幕截图。
Magic Component Platform (MCP)
一个由人工智能驱动的工具,可以从自然语言描述生成现代化的用户界面组件,并与流行的集成开发环境(IDE)集成,从而简化用户界面开发流程。
Audiense Insights MCP Server
通过模型上下文协议启用与 Audiense Insights 账户的交互,从而促进营销洞察和受众数据的提取和分析,包括人口统计信息、行为和影响者互动。
VeyraX
一个单一的 MCP 工具,连接你所有喜爱的工具:Gmail、日历以及其他 40 多个工具。
graphlit-mcp-server
模型上下文协议 (MCP) 服务器实现了 MCP 客户端与 Graphlit 服务之间的集成。 除了网络爬取之外,还可以将任何内容(从 Slack 到 Gmail 再到播客订阅源)导入到 Graphlit 项目中,然后从 MCP 客户端检索相关内容。
Kagi MCP Server
一个 MCP 服务器,集成了 Kagi 搜索功能和 Claude AI,使 Claude 能够在回答需要最新信息的问题时执行实时网络搜索。
e2b-mcp-server
使用 MCP 通过 e2b 运行代码。
Neon MCP Server
用于与 Neon 管理 API 和数据库交互的 MCP 服务器
Exa MCP Server
模型上下文协议(MCP)服务器允许像 Claude 这样的 AI 助手使用 Exa AI 搜索 API 进行网络搜索。这种设置允许 AI 模型以安全和受控的方式获取实时的网络信息。