FlutterFlow AI

Q: Can I use Claude Code or Codex with FlutterFlow?

Yes. Add the FlutterFlow marketplace (FlutterFlow/flutterflow-claude or FlutterFlow/flutterflow-codex), install the plugin and copy your FlutterFlow API key. The plugin sets up the FlutterFlow CLI, auth and MCP for you.

Six AI tools for building mobile apps in FlutterFlow, from the first screen to the last test. Jump to one:

Explore the AI tools Start building

FlutterFlow Designer: a multi-screen StockView app on the canvas with the layer tree and properties panel

The FlutterFlow editor with the Pantry Recipes project open

Generate Page

A settings page with the user’s profile at the top, notification toggles for email and push, and a sign-out button at the bottom

CancelGenerate

The FlutterFlow editor dimmed, with the AI Agent panel highlighted beside the canvas

Pluginsflutterflow@flutterflow

OfficialPublic on GitHub

Claude CodeInside Claude Code, or from any terminal

› /plugin marketplace add FlutterFlow/flutterflow-claude
› /plugin install flutterflow@flutterflow

Then copy your API key and tell Claude “I copied my FlutterFlow API key.” The plugin installs the FlutterFlow CLI and registers MCP for you.

CodexFrom any terminal

$ codex plugin marketplace add FlutterFlow/flutterflow-codex --ref main
$ codex plugin add flutterflow@flutterflow

Then start a new Codex task so the skill loads. Same key hand-off, same FlutterFlow workflow.

MCP serverships inside the flutterflow CLI

stdio · per workspace

$ flutterflow ai initscaffolds a workspace and registers the server with every agent it finds on your machine

Claude Code.mcp.json · project-scoped

Codex.codex/config.toml

Gemini CLIregistration command · project

Antigravityuser-global config

Amazon Q Developerregistration command · project

Kiro.kiro/settings/mcp.json

Roughly fifty toolsInspect, validate, run, patch, search, history. Plus assets, integrations, a mock backend and Test Pilot.

Branches and a real three-way mergeWith a no-loss verifier that refuses to commit a merge that dropped someone’s change.

Secrets are never returnedIntegration tools report present or absent, nothing more.

Desktop app · macOS and Windows

AI Agent Panel

Use your Claude, Codex, Antigravity or Gemini account inside the FlutterFlow desktop app. The agent reads your project, edits it and runs it.

ClaudeAnthropic · Claude Code

CodexOpenAI · ChatGPT account

AntigravityGoogle account

GeminiGoogle Workspace or API key

Official plugins · Public on GitHub

Plugins for Claude Code and Codex

Build FlutterFlow apps from Claude Code or Codex. The agent reads your project, makes the change, validates it and ships it live.

PluginsConnect plugins to let Codex work across your tools

Search plugins

Add

PublicFlutterFlowPersonal

Popular

GmailRead and manage Gmail

Remote Desktop CommanderBuild and automate, anywhere

Google DriveDrive, Docs, Sheets or Slides

Outlook EmailTriage Outlook inboxes

SupabaseManage and query databases

Flaim FantasyFantasy Sports Analysis

New & Noteworthy

AdobeDesign, combine, and edit

Meetings (Beta)Take notes and automate follow-up work

ShopifyCreate and manage your store

tldrawDraw and diagram with agents

MagicPathDesign directly in ChatGPT

CanvaCreate, review, edit designs

Small Business

DropboxFind, create, and take action

Intuit QuickBooksBusiness finances made simple

FlutterFlow

FlutterFlowBuild and edit FlutterFlow apps with CodexInstalled

Web and desktop · No setup

Generate with Designer

Describe a page or component and get real FlutterFlow widgets in your app’s theme, in about a minute.

Generate Page

A settings page with the user’s profile at the top, notification toggles for email and push, and a sign-out button at the bottom

CancelGenerate

Added SettingsPage to Pantry Recipes · 41 widgets, your theme

It uses your theme

Your project’s colors and text styles go with the prompt. What comes back looks like it belongs in the app you already have.

Real widgets, not a picture

A page arrives as a new page. A component arrives as a shared component, with any nested components as their own reusable pieces.

Nothing to set up

No provider account, no CLI, no install. Works in the browser editor and the desktop app. Just be signed in.

Find it under the + in Pages or Widgets, or open the command palette and type designer.Or start from your Figma file: Page from Figma, Component from Figma.

Ships inside the FlutterFlow CLI

FlutterFlow MCP server

Install the FlutterFlow CLI and run its setup wizard. Your coding agents can then read, edit, branch and test the project.

Install the CLI
Needs Dart, which comes with Flutter.
dart pub global activate flutterflow_cli
Run the setup wizard
It asks for your API key from your account page, then lets you pick a project or create one.
flutterflow ai
Open the workspace in your agent
The wizard prints its folder. Start Claude Code, Codex or any MCP-aware agent there.
cd <your-workspace>

Prefer flags? flutterflow ai init my-app --project <id> skips the wizard. To add the server to another MCP config, run flutterflow ai mcp --workspace "$(pwd)".

Claude Code.mcp.json · project-scoped
Codex.codex/config.toml
Gemini CLIregistration command · project
Antigravityuser-global config
Amazon Q Developerregistration command · project
Kiro.kiro/settings/mcp.json

Tests tab · Web and desktop

Test Pilot

Write tests in plain English. An agent taps through a real build of your app and shows you, step by step, where it failed.

Log in · Sign Up Flow · iPhone 15, lightStep 1 of 7

Welcome back

Password

Create account

393 × 852 · light

What the agent did

1Opened /login on the Production build.

2Typed $email into the Email field.

3Typed $password into the Password field.

4Tapped Log In.

5Waited for navigation. Button showed a loading state.

6Saw an error banner: “Something went wrong.”

7Checked expectation: Cat Profiles page. Still on Login.

Failed at step 7Expected the Cat Profiles page after logging in. The app showed an error banner and stayed on Login. Every screenshot above is downloadable.

Step-by-step screenshots, optionally in a device frameCancel mid-run, re-open any past runIt reports. Fixing is yours, or the Agent Panel’s.

Standalone product

FlutterFlow Designer

Describe an app and get an editable, multi-screen design with shared navigation and theme, ready to build in FlutterFlow.

Open Designer See how it works

FlutterFlow Designer with a five-screen stock app on the canvas, the layer tree on the left and properties on the right

Multi-screen from one prompt

A creative director agent sets the direction, navigation and theme, then briefs each screen. The result reads as one app, not eight unrelated mockups.

A document, not an image

Every frame is a structured design tree. Select a button and describe the change, or drag, retype and restyle it yourself. One AI edit is one undo.

Continue to Builder

Theme, shared components and page widgets convert into a real FlutterFlow project. Or export PNGs, a .pptx deck, or context for a coding agent.

Designer is its own product. It is also the engine behind Generate with Designer inside FlutterFlow.Web, macOS, and embedded in FlutterFlow.

FlutterFlow AI

Frequently asked questions

Is FlutterFlow AI free?

You can start for free. The Free plan includes 5 AI generation requests, and paid plans include 50 to 500 a month. The AI Agent Panel runs on your own Claude, Codex, Antigravity or Gemini account. Test Pilot, the CLI and the MCP server need a paid plan.

See pricing

Does FlutterFlow use AI?

Yes. FlutterFlow AI is six tools across the workflow: the AI Agent Panel in the desktop app, plugins for Claude Code and Codex, Generate with Designer, the MCP server, Test Pilot for AI testing, and FlutterFlow Designer.

Which AI is best for Flutter coding?

Whichever coding agent you already use. FlutterFlow has official plugins for Claude Code and Codex, the Agent Panel works with Claude, Codex, Antigravity and Gemini accounts, and the MCP server connects Gemini, Cursor, GitHub Copilot, Kiro, Amazon Q Developer and other MCP-aware agents.

Can I use Claude Code or Codex with FlutterFlow?

Yes. Add the FlutterFlow marketplace (FlutterFlow/flutterflow-claude or FlutterFlow/flutterflow-codex), install the plugin and copy your FlutterFlow API key. The plugin sets up the FlutterFlow CLI, auth and MCP for you.

Plugin docs

What is the FlutterFlow MCP server?

It ships with the FlutterFlow CLI and exposes your project to MCP-aware coding agents, so they can read it, plan changes and apply them. Install the CLI with dart pub global activate flutterflow_cli, then run flutterflow ai to set up a workspace.

CLI docs

Can I add AI features to the apps I build?

Yes. AI Agents let your app call models from OpenAI, Anthropic and Google, configured in FlutterFlow. Basic includes one agent, and Growth and Business include unlimited agents.

AI Agents docs

Do I need the FlutterFlow desktop app?

Only for the AI Agent Panel, which runs inside the desktop app. The plugins, CLI and MCP server work from your terminal or coding agent, and Generate with Designer runs in the browser.

FlutterFlow AI

AI Agent Panel

Plugins for Claude Code and Codex

Generate with Designer

FlutterFlow MCP server

Test Pilot

Welcome back

FlutterFlow Designer

Frequently asked questions

Is FlutterFlow AI free?

Does FlutterFlow use AI?

Which AI is best for Flutter coding?

Can I use Claude Code or Codex with FlutterFlow?

What is the FlutterFlow MCP server?

Can I add AI features to the apps I build?

Do I need the FlutterFlow desktop app?

Build it. Test it. Ship it. With AI at every step.