用途:让 AI 助手通过 MCP 工具开发 FlutterFlow 应用,以 YAML 形式读取、检查、编辑项目中的页面、组件、主题、动作、数据模型与设置。
前提:需安装并连接 community-ff-mcp MCP 服务器。先确认 list_projects 工具是否可用;若不可用,需从 FlutterFlow 的 Profile > Account Settings > API Token 获取令牌(需付费订阅),再添加服务器。Claude Code 命令:claude mcp add flutterflow -e FLUTTERFLOW_API_TOKEN=<token> -- npx -y community-ff-mcp。其他客户端在 MCP 配置中加入:{ "command": "npx", "args": ["-y", "community-ff-mcp"], "env": { "FLUTTERFLOW_API_TOKEN": "<token>" } }。重启客户端后用 list_projects 验证。
主要能力:共 25 个工具。发现与探索包括 list_projects、list_project_files、list_pages、search_project_files、sync_project;读取与理解包括 get_page_by_name、get_project_yaml、get_page_summary、get_component_summary、find_component_usages、find_page_navigations;配置与设置包括 get_theme、get_app_state、get_api_endpoints、get_data_models、get_custom_code、get_general_settings、get_project_setup、get_app_settings、get_in_app_purchases、get_integrations;编辑与文档包括 get_editing_guide、get_yaml_docs、validate_yaml、update_project_yaml。
使用方式:典型流程为先 list_projects 选项目,再 sync_project 本地缓存,随后用 list_pages 与 get_page_summary 浏览。编辑单个控件时,用 get_page_by_name 获取页面 YAML,定位节点文件键(如 page/id-Scaffold_XXX/page-widget-tree-outline/node/id-Widget_YYY),用 get_project_yaml 取节点 YAML,修改后先 validate_yaml,再 update_project_yaml 推送。新增控件需更新 tree outline 并创建独立节点文件,在同一次调用中一起推送。创建组件需按文档生成元数据、tree outline、根节点(isDummyRoot: true)与子节点。
关键规则:inputValue 与 mostRecentInputValue 需保持同步(fontWeightValue、fontSizeValue 例外);编辑应使用节点级文件键,避免整页编辑;推送前必须验证;Column 无 mainAxisSize,用 minSizeValue: { inputValue: true } 实现收缩;AppBar 的 templateType 仅确认 LARGE_HEADER 有效,用 toolbarHeight 控制高度;自定义代码只读,修改需在 FlutterFlow UI 中进行。
限制:自定义动作、函数、控件与 AI 代理无法通过 MCP API 创建或编辑;API 令牌需付费 FlutterFlow 订阅;文档查询依赖内置 21 份参考文档。其他收费、平台与效果信息暂未提供。