AI导哈

Flutter代码生成服务

一个基于Model Context Protocol（MCP）的服务器，用于生成Flutter代码组件，包括项目结构、BLoC模式、模型、仓库和开发工具。

  • by harumazzz
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 harumazzz/Flutter-MCP-Server

使用说明

Flutter MCP服务器

一个用于生成Flutter代码组件的模型上下文协议（MCP）服务器，使用TypeScript和Node.js构建。该服务器为AI助手提供了生成Flutter项目结构、BLoC模式、模型、存储库和开发工具的工具。

🚀 特性

  • MCP集成：完整的模型上下文协议服务器实现，实现无缝的AI助手集成
  • Flutter项目创建：使用最佳实践生成完整的Flutter项目结构
  • BLoC模式生成：创建BLoC状态管理组件（块、状态、事件类）
  • 模型生成：生成带有Freezed注释和JSON序列化的Dart模型类
  • 存储库模式：按照干净的架构创建存储库接口和实现
  • 开发公用事业：在Flutter项目中添加日志和HTTP拦截器
  • TypeScript：完全支持TypeScript，具有严格的类型检查
  • 开发工具：ESLint、Prettier和Jest开箱即用配置

📋 先决条件

  • Node.js（>=18.0.0）
  • npm或纱线

🛠️ 安装

  1. 克隆存储库：
git clone https://github.com/harumazzz/Flutter-MCP-Server.git
cd flutter_mcp
  1. 安装依赖项：
npm install
  1. 构建项目：
npm run build

🎯 用法

运行MCP服务器

启动MCP服务器以集成AI助手：

npm start

发展模式

使用热重载启动开发服务器：

npm run dev

MCP检查员

使用模型上下文协议检查器测试MCP服务器工具：

npm run mcp

可用的MCP工具

服务器为AI助手提供以下工具：

  1. 创建Flutter项目 -生成完整的Flutter项目结构
  2. 生成模型命令 -使用Freezed注释创建Dart模型
  3. generateloc命令 -生成BLoC模式组件（块、状态、事件）
  4. generatepository命令 -创建存储库接口和实现
  5. addLogger命令 -将日志工具添加到Flutter项目中
  6. addInterceptor命令 -为API通信添加HTTP拦截器

代码质量

使用Prettier格式化代码：

npm run format

ESLint的Lint代码：

npm run lint
npm run lint:fix

运行测试：

npm test

📝 例子

使用AI助手

此MCP服务器旨在与支持模型上下文协议的AI助手配合使用。以下是您可以提出的一些示例请求：

生成Flutter项目：

Create a new Flutter project called "my_app" with clean architecture

生成数据模型：

Generate a User model with fields: id (int), name (String), email (String), age (int?)

生成BLoC组件：

Create a BLoC for authentication with login, logout, and refresh token events

生成存储库：

Create a UserRepository for the authentication feature with CRUD operations

手动工具使用

对于开发和测试，您还可以以编程方式使用这些工具：

import { generateModelTool } from './src/generator/generate_model/function.js';

// Example: Generate a User model
const result = await generateModelTool.execute(
  {
    entity: 'User',
    feature: 'authentication',
    fields: [
      { name: 'id', type: 'int', isRequired: true },
      { name: 'name', type: 'String', isRequired: true },
      { name: 'email', type: 'String', isRequired: true },
      { name: 'age', type: 'int?', isRequired: false },
    ],
    modelType: ['request', 'response'],
  },
  {}
);

📂 项目结构

flutter_mcp/
├── src/
│   ├── generator/
│   │   ├── add_interceptor/         # HTTP interceptor generation
│   │   │   ├── execute.ts
│   │   │   ├── function.ts
│   │   │   └── schema/
│   │   ├── add_logger/              # Logger utility generation
│   │   │   ├── execute.ts
│   │   │   ├── function.ts
│   │   │   └── schema/
│   │   ├── create_project/          # Flutter project creation
│   │   │   ├── command.ts
│   │   │   ├── constants.ts
│   │   │   ├── function.ts
│   │   │   └── schema/
│   │   ├── generate_bloc/           # BLoC pattern generation
│   │   │   ├── execute.ts
│   │   │   ├── function.ts
│   │   │   └── schema/
│   │   ├── generate_model/          # Dart model generation
│   │   │   ├── execute.ts
│   │   │   ├── function.ts
│   │   │   └── schema/
│   │   └── generate_repository/     # Repository pattern generation
│   │       ├── execute.ts
│   │       ├── function.ts
│   │       └── schema/
│   ├── server/
│   │   ├── server.ts               # MCP server implementation
│   │   ├── tools.ts                # Tool registration
│   │   └── schema/
│   │       └── tool.ts             # Tool schema definitions
│   ├── utils/
│   │   ├── icons.ts                # Icon utilities
│   │   ├── json.ts                 # JSON utilities
│   │   └── logger.ts               # Logging utilities
│   └── index.ts                    # Application entry point
├── dist/                           # Compiled JavaScript output
├── .eslintrc.js                    # ESLint configuration
├── .prettierrc                     # Prettier configuration
├── jest.config.js                  # Jest testing configuration
├── nodemon.json                    # Nodemon configuration
├── tsconfig.json                   # TypeScript configuration
├── package.json                    # Package dependencies and scripts
└── README.md                       # This file

🔧 可用脚本

脚本 描述
npm run build 将TypeScript编译为JavaScript
npm start 运行MCP服务器
npm run dev 使用热重新加载启动开发服务器
npm run mcp 运行MCP检查器以获取测试工具
npm run clean 删除dist目录
npm run lint 运行ESLint
npm run lint:fix 运行ESLint并自动修复
npm run format 使用Prettier格式化代码
npm test 运行Jest测试

🧪 测试

该项目包括用于测试的Jest。测试文件应放置在：

  • src/**/*.test.ts
  • src/**/*.spec.ts
  • src/**/__tests__/**/*.ts

使用以下工具运行测试：

npm test

📦 依赖项

生产依赖性

  • @模型上下文协议/sdk：用于服务器实现的模型上下文协议SDK
  • 粉笔：终端字符串样式，以获得更好的控制台输出
  • 变更案例：字符串大小写转换实用程序
  • 对数符号：用于日志输出的彩色符号
  • 温斯顿：高级日志库

开发依赖

  • TypeScript：静态类型检查和现代JavaScript功能
  • ts节点：在开发中直接执行TypeScript
  • 节点监控：具有热重新加载功能的开发服务器
  • 埃斯林特：代码过滤和样式执行
  • 更漂亮：代码格式
  • 测试：测试框架
  • @类型/节点：Node.js类型定义
  • 递归删除：跨平台目录删除

🤝 贡献

  1. 复刻仓库
  2. 创建功能分支(git checkout -b feature/amazing-feature)
  3. 提交您的更改(git commit -m 'Add some amazing feature')
  4. 推到分支(git push origin feature/amazing-feature)
  5. 打开拉取请求

添加新工具

要添加新的MCP工具：

  1. 在下创建新目录 src/generator/your_tool_name/
  2. 通过适当的模式验证实现工具功能
  3. 添加执行逻辑
  4. 在中注册该工具 src/server/tools.ts
  5. 为您的工具功能添加测试

📄 许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。

🐛 问题

如果您遇到任何问题或有改进建议，请 打开一个问题.

📈 路线图

  • []添加Flutter小部件生成工具
  • []实现自定义主题生成
  • []添加CLI界面以供独立使用
  • []支持Flutter导航路线生成
  • []与流行的Flutter软件包（Riverpod、GetX）集成
  • []添加代码分析和重构工具
  • []支持多平台Flutter项目（Web、桌面）

🔗 相关项目

相关 MCP