FlutterFlow项目API开发辅助工具

社区ff mcp

免责声明： 这是一个非官方的社区建设项目。它不隶属于FlutterFlow，也不受FlutterFlow的认可或赞助。“FlutterFlow”是FlutterFlow股份有限公司的商标。该项目使用FlutterFlow公共API。

FlutterFlow项目API的MCP服务器。通过Claude和其他兼容MCP的客户端实现人工智能辅助的FlutterFlow开发。

这个MCP最擅长什么

此MCP擅长 阅读、探索和理解 您的FlutterFlow项目。以下是它的优点：

• 项目勘探 --浏览您的项目、页面、组件和文件结构
• 了解功能 --获取页面或组件功能的清晰摘要，包括其小部件树、操作、参数和状态
• 跟踪使用情况 --查找使用组件的所有位置，或指向页面的每个导航操作
• 检查配置 -查看主题设置、API端点、数据模型、自定义代码、应用程序状态、集成等
• 搜索 --按关键字、前缀或正则表达式搜索项目文件，以准确找到所需内容
• YAML引用 --FlutterFlow的YAML模式的内置文档，因此您的AI助手可以理解和生成有效的YAML
• 引导式编辑 --工作流程指南(get_editing_guide)在进行任何YAML更改之前，先完成正确的步骤

简言之： 将其视为赋予您的AI助手对FlutterFlow项目的完全读取权限，并在需要时提供谨慎的写入权限。

快速开始

1.获取FlutterFlow API代币

您需要FlutterFlow API令牌进行身份验证。以下是如何获得一个：

1. 打开 FlutterFlow 并登录
2. 点击您的 头像 （左下角）
3. 首选 账户设置
4. 滚动到 API代币 部分
5. 点击 复制 复制您的令牌

注： API令牌需要 付费FlutterFlow订阅 （标准计划或以上）。免费帐户没有API访问权限。

2.添加到您的MCP客户端

在下面选择您的AI客户端，并按照设置说明进行操作。

claude mcp add flutterflow -e FLUTTERFLOW_API_TOKEN=your_token_here -- npx -y community-ff-mcp

{
  "mcpServers": {
    "flutterflow": {
      "command": "npx",
      "args": ["-y", "community-ff-mcp"],
      "env": {
        "FLUTTERFLOW_API_TOKEN": "your_token_here"
      }
    }
  }
}

{
  "mcpServers": {
    "flutterflow": {
      "command": "npx",
      "args": ["-y", "community-ff-mcp"],
      "env": {
        "FLUTTERFLOW_API_TOKEN": "your_token_here"
      }
    }
  }
}

{
  "mcpServers": {
    "flutterflow": {
      "command": "npx",
      "args": ["-y", "community-ff-mcp"],
      "env": {
        "FLUTTERFLOW_API_TOKEN": "your_token_here"
      }
    }
  }
}

{
  "mcpServers": {
    "flutterflow": {
      "command": "npx",
      "args": ["-y", "community-ff-mcp"],
      "env": {
        "FLUTTERFLOW_API_TOKEN": "your_token_here"
      }
    }
  }
}

3.开始建设

让你的AI助手列出你的FlutterFlow项目、检查页面或浏览你的应用程序——其余的都由它处理。

示例提示开始：

• “列出我的FlutterFlow项目”
• “显示项目X中的所有页面”
• “主页做什么？带我浏览它的小部件树”
• “PaywallCard组件在哪里使用？”
• “配置了哪些API终结点？”
• “显示主题颜色”

引擎盖下的工作原理

此MCP旨在使AI代理在使用FlutterFlow时尽可能有效。以下是它运行良好的原因：

智能本地缓存

MCP不再为每个问题点击FlutterFlow API，而是下载您的整个项目一次(sync_project)并将其缓存在本地。之后，大多数工具都会从缓存中读取数据——使它们 即时且不受API费率限制。如果您在FlutterFlow中进行了更改，只需重新同步即可刷新缓存。

内置文档

AI模型本身并不理解FlutterFlow的内部结构。此MCP随附 21份参考文件 涵盖每种小部件类型、操作、变量、主题设置和编辑模式。人工智能可以准确地查找按钮、列或导航动作的结构，因此不必猜测。

引导式编辑工作流程

在做出任何更改之前，AI可以调用 get_editing_guide 用简单的英语描述它想做什么（例如。， “更改登录页面上的按钮颜色”).MCP返回确切的步骤、相关文档和要遵循的规则，以减少出错的机会。

25专用工具

MCP提供的不是一个通用的“读取项目”工具 25种专用工具 --每个都是为特定任务设计的。想知道组件在哪里使用吗？有一个专门的工具。想要查看指向页面的所有导航操作吗？也有一个。这意味着人工智能总是为工作选择合适的工具，而不是下载所有内容并进行搜索。

限制和注意事项

小心编辑

此MCP可以对FlutterFlow项目进行更改，但是 编辑应该小心处理:

• 推送前务必进行审核 --让你的人工智能助手在它推动任何事情之前，准确地向你展示它计划改变什么。确保你理解这一变化。
• API更改没有撤消按钮 --更改将立即应用于您的项目。您可以使用FlutterFlow的版本历史进行回滚，但最好是防止错误的编辑，而不是修复错误的编辑。
• 从只读任务开始 --在要求人工智能修改任何内容之前，请放心地询问有关项目的问题（页面摘要、组件使用、主题检查）。
• 较小的编辑更安全 --编辑单个小部件比替换整个页面更安全。人工智能知道做出有针对性的改变，但有意识是件好事。

FlutterFlow API不能做的事情

这些是FlutterFlow自己的API的限制。它们会影响连接到FlutterFlow的任何工具，而不仅仅是这个MCP。

• 自定义代码可以读取，但不能编辑 --AI可以读取你的自定义操作、自定义函数和自定义小部件，但它 无法推送代码更改 回到FlutterFlow。API不正确地支持它-试图推送代码会损坏FlutterFlow编辑器。相反，AI将向您显示修改后的代码，然后您将其复制粘贴到FlutterFlow代码编辑器中。
• 已解锁 main.dart 无法更新 --如果你已经解锁 main.dart 对于原始Dart编辑，AI可以读取它，但不能推送代码更改。启动/关闭操作列表仍可修改。
• 平台配置文件是间接的 --您不能直接编辑 AndroidManifest.xml, Info.plist，或 build.gradle相反，您可以在FlutterFlow中配置钩子和设置，FlutterFlow会为您生成这些文件。AI可以读取和修改这些钩子。
• 编辑平台配置文件需要格外小心 --FlutterFlow在内部将所有平台配置文件组合在一起。如果AI将更改推送到一个（例如Android Manifest），FlutterFlow可能会删除其他更改（例如ProGuard规则、Gradle配置）。MCP通过始终将所有现有文件包含在同一推送中来处理这个问题，但这是需要注意的。
• 禁用条件操作的工作方式不同 --在FlutterFlow编辑器中，您可以使用开关打开/关闭条件操作。API对此的处理略有不同，因此AI使用一种解决方法来实现相同的结果。
• 验证并不完美 --验证步骤捕获了大多数错误，但偶尔通过验证的东西在推送时仍然会失败。这很少见，但这就是为什么在推动之前审查变化很重要。
• 项目列表可能不完整 -API可能不会返回您可以访问的所有项目，尤其是共享项目或团队项目。如果缺少项目，请直接从FlutterFlow编辑器中复制其ID（单击左上角的项目名称），并将其粘贴到AI提示中。

一般限制

• 没有实时同步 --MCP使用项目的快照。它不会实时监视您在FlutterFlow编辑器中所做的更改。如果你一直在FlutterFlow中编辑，请在要求AI进行更改之前重新同步。
• 非常大的页面 --一些非常大的页面可能无法加载。人工智能可以通过加载单个小部件而不是整个页面来解决这个问题。
• 缓存可能会过时 --如果你在同步后在FlutterFlow中编辑你的项目，那么AI的本地副本已经过时了。重新运行同步（AI会在检测到过时数据时告诉你）。

有关每个API限制的完整技术细节，请参阅 docs/flutterflow-api-limitations.md.

工具

发现与探索

阅读与理解

项目配置

编辑

资源

提示

内置YAML参考

此MCP附带了一个全面的FlutterFlow YAML参考目录，AI模型可以在运行时访问：

• get_yaml_docs 工具 --按主题搜索（例如。 get_yaml_docs(topic: "Button"))或浏览完整索引
• ff://docs 资源 --直接访问涵盖小部件、操作、变量、主题化和编辑工作流的所有21个参考文档

看 docs/ff yaml/ 查看完整目录。

AI代理技能

该MCP包括 技能s.sh-兼容技能，教AI助手如何有效地使用FlutterFlow MCP。该技能为小部件、操作、数据绑定、主题化等提供工具编排工作流程、关键的YAML规则和参考文档。

安装技能

npx skills add mohn93/ff-mcp --skill community-ff-mcp

这适用于 18+人工智能代理 包括Claude Code、Cursor、GitHub Copilot、Codex、Goose、Windsurf等。这 skills CLI会自动检测您的AI工具，并将技能安装到正确的位置。

该技能教给你的人工智能什么

安装后，您的AI助手将知道如何：

• 发现 --列出项目、页面、组件和搜索项目文件
• 阅读 --总结页面/组件，跟踪组件使用情况，检查导航
• 编辑 --按照正确的阅读→ 引导→ edit → 验证→ 推送工作流
• 配置 -阅读主题、应用程序状态、API端点、数据模型和集成

技能+MCP设置

技能和MCP服务器是分开安装的：

1. MCP服务器 为AI提供工具（参见 快速开始 以上）
2. 技能 教授人工智能 如何 有效地使用这些工具

如果技能检测到MCP工具未连接，它将自动引导用户完成设置。

Claude代码技能

您还可以从以下位置复制Claude Code特定的技能 skills/ 进入你的项目 .claude/skills/ 目录：

• ff-yaml-dev.md --核心工作流程：读取、编辑和创建FlutterFlow页面/组件
• ff-widget-patterns.md --常见小部件YAML模式和代码片段的快速参考

发展

git clone https://github.com/mohn93/ff-mcp.git
cd ff-mcp
npm install
npm run build
npm run dev          # watch mode

需求

• Node.js 18+
• FlutterFlow API代币（需要付费FlutterFlow订阅）

许可证

麻省理工学院