MF

mohn93/ff-mcp

开发工具

本页由 AI 翻译,技术细节请以原文为准。 查看原文

10 stars 4 forks 质量 75 趋势 12MIT

This is an unofficial, community-built project. It is not affiliated with, endorsed by, or sponsored by FlutterFlow. "FlutterFlow" is a trademark of FlutterFlow Inc.

概览

This is an unofficial, community-built project. It is not affiliated with, endorsed by, or sponsored by FlutterFlow. "FlutterFlow" is a trademark of FlutterFlow Inc. This project uses the FlutterFlow public API. MCP server for the FlutterFlow Project API. Enables AI-assisted FlutterFlow development through Claude and other MCP-compatible clients. This MCP excels at your FlutterFlow projects. Here's what it's great at: - — Browse your projects, pages, components, and file structure - — Get clear summaries of what a page or component does, including its widget tree, actions, parameters, and state - — Find everywhere a component is used, or every navigation action that leads to a page - — View theme settings, API endpoints, data models, custom code, app state, integrations, and more - — Search project files by keyword, prefix, or regex to find exactly what you need - — Built-in documentation for FlutterFlow's YAML schema, so your AI assistant can understand and generate valid YAML - —...

README

以下为原文 README 节选,完整内容请查看原文。

community-ff-mcp

Disclaimer: This is an unofficial, community-built project. It is not affiliated with, endorsed by, or sponsored by FlutterFlow. “FlutterFlow” is a trademark of FlutterFlow Inc. This project uses the FlutterFlow public API.

MCP server for the FlutterFlow Project API. Enables AI-assisted FlutterFlow development through Claude and other MCP-compatible clients.

What This MCP Does Best

This MCP excels at reading, exploring, and understanding your FlutterFlow projects. Here’s what it’s great at:

  • Project exploration — Browse your projects, pages, components, and file structure
  • Understanding functionality — Get clear summaries of what a page or component does, including its widget tree, actions, parameters, and state
  • Tracing usage — Find everywhere a component is used, or every navigation action that leads to a page
  • Inspecting configuration — View theme settings, API endpoints, data models, custom code, app state, integrations, and more
  • Searching — Search project files by keyword, prefix, or regex to find exactly what you need
  • YAML reference — Built-in documentation for FlutterFlow’s YAML schema, so your AI assistant can understand and generate valid YAML
  • Guided editing — A workflow guide (get_editing_guide) that walks through the correct steps before making any YAML changes

In short: Think of it as giving your AI assistant full read access to your FlutterFlow project, plus careful write access when needed.

Quick Start

1. Get Your FlutterFlow API Token

You need a FlutterFlow API token to authenticate. Here’s how to get one:

  1. Open FlutterFlow and log in
  2. Click your profile picture (bottom-left corner)
  3. Go to Account Settings
  4. Scroll to the API Token section
  5. Click Copy to copy your token

Note: The API token requires a paid FlutterFlow subscription (Standard plan or above). Free-tier accounts do not have API access.

2. Add to Your MCP Client

Choose your AI client below and follow the setup instructions.

Open Settings > Developer > Edit Config and add:

{
  "mcpServers": {
    "flutterflow": {
      "command": "npx",
      "args": ["-y", "community-ff-mcp"],
      "env": {
        "FLUTTERFLOW_API_TOKEN": "your_token_here"
在 GitHub 查看完整 README

安装

npx -y community-ff-mcp
新手?先看 mcpskill.org 教程 →

配置

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