FlutterFlow MCP 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

Pages & Components

Project Configuration

YAML Operations

CLI Tools (requires flutterflow_cli)

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