FlutterFlow Server

A custom Model Context Protocol (MCP) server that connects AI coding agents like Claude Code to your FlutterFlow projects.

Browse, inspect, and modify your FlutterFlow projects directly from your AI assistant — no copy-pasting YAML or switching between tabs.

Features

• 20 tools for full project management
• Local caching — syncs your project once, then works offline
• Safe editing workflow — validate YAML before pushing changes
• Code export — download the full Flutter source code to your machine
• Firebase deployment — deploy Firestore rules and indexes
• 100% open source — you control every line of code

Quick Start

1. Install

git clone https://github.com/erniecode/flutterflow-mcp.git
cd flutterflow-mcp
npm install
npm run build

2. Get your FlutterFlow API Token

1. Go to FlutterFlow Account Settings
2. Generate an API token (requires a paid FlutterFlow subscription)

3. Add to Claude Code

Run this command in your terminal:

claude mcp add flutterflow --scope user -- node /path/to/flutterflow-mcp/dist/index.js

Then add your API token to the MCP config in ~/.claude.json:

{
  "mcpServers": {
    "flutterflow": {
      "type": "stdio",
      "command": "node",
      "args": ["/path/to/flutterflow-mcp/dist/index.js"],
      "env": {
        "FLUTTERFLOW_API_TOKEN": "your-token-here"
      }
    }
  }
}

4. Restart Claude Code

The FlutterFlow tools will now be available. Try asking:

"List my FlutterFlow projects"

Available Tools

Project Management

Tool	Description
list_projects	List all FlutterFlow projects accessible with your API token
sync_project	Download and cache all YAML files for a project locally
list_files	List all YAML file keys in a project
search_files	Search cached file keys by prefix (e.g. page/, component/)

Pages & Components

Tool	Description
list_pages	List all pages in a project
get_page	Get the full YAML content of a specific page
get_page_summary	Get a high-level summary of a page's structure

Project Configuration

Tool	Description
get_theme	Get theme configuration (colors, typography, breakpoints)
get_app_state	Get global app state variables
get_settings	Get general project settings
get_api_endpoints	List REST API endpoints defined in the project
get_data_models	Get data models, structs, enums, and database collections
get_custom_code	Get custom actions, functions, and widgets

YAML Operations

Tool	Description
get_yaml	Get raw YAML content of any file by key
validate_yaml	Validate YAML changes before applying (always do this first!)
update_yaml	Push YAML changes to FlutterFlow (irreversible!)
clear_cache	Clear the local cache for a project

CLI Tools (requires flutterflow_cli)

Tool	Description
check_cli	Check if the FlutterFlow CLI is installed
export_code	Export/download Flutter source code from a project
deploy_firebase	Deploy Firebase configuration for a project

To use CLI tools, install the FlutterFlow CLI:

dart pub global activate flutterflow_cli

Typical Workflow

1. list_projects          → find your project ID
2. sync_project           → cache all files locally
3. list_pages             → see what pages exist
4. get_page_summary       → understand a page's structure
5. get_yaml               → read the full YAML
6. validate_yaml          → check your changes are valid
7. update_yaml            → push changes to FlutterFlow

Architecture

src/
  index.ts              → MCP server entry point (stdio transport)
  api/
    flutterflow.ts      → FlutterFlow REST API client
  tools/
    projects.ts         → Project management tools
    pages.ts            → Page/component exploration tools
    config.ts           → Theme, settings, data model tools
    yaml-ops.ts         → YAML read/validate/update tools
    cli.ts              → FlutterFlow CLI wrapper tools
  utils/
    cache.ts            → Local file-based caching layer

FlutterFlow API

This server uses the FlutterFlow Project API:

• Base URL: https://api.flutterflow.io/v2
• Auth: Bearer token
• Endpoints: listProjects, listPartitionedFileNames, projectYamls, validateProjectYaml, updateProjectByYaml

Safety Notes

• update_yaml modifies your live FlutterFlow project and cannot be undone
• Always run validate_yaml before update_yaml
• Start with read-only tools (list_*, get_*, sync_*) to get familiar
• Use a test project before working on production projects
• Your API token is stored locally in ~/.claude.json — never commit this file

Requirements

• Node.js 18+
• FlutterFlow account with API access (paid plan)
• Claude Code (or any MCP-compatible AI agent)
• Optional: Dart SDK + flutterflow_cli for code export/Firebase deploy

License

MIT

---

Built with Claude Code by @erniecode