FlutterFlow MCP Tutorial | New Feature

The FlutterFlow MCP lets you use any AI agent, Claude Code, Codex, Gemini CLI, or Cursor, to take full control of building your FlutterFlow apps. You can edit projects you've already built visually in FlutterFlow, spin up brand new apps straight from your agent, or jump back and forth between the two. In this video, I walk through both flows from scratch and share a bunch of tips and hidden tricks to help you get the most out of it. 👇 Here's what we cover: Installing the FlutterFlow CLI and setting up your workspace Creating a brand new app from your agent (we build a basketball shoes e-commerce app) Applying a custom design system in one prompt Keeping your agent and FlutterFlow's visual editor in sync Connecting an existing FlutterFlow project to your agent Adding navigation, integrations, and @Firebase collections via prompts Using the FlutterFlow AI selector to target specific widgets Adding custom widgets from pub.dev (panorama viewer demo) Letting your agent fix layout and runtime errors for you Combining FlutterFlow MCP with other MCPs ( @Supabase schema generation demo) Working on feature branches with your agent 🔗 Resources mentioned FlutterFlow CLI on pub.dev: https://pub.dev/packages/flutterflow_cli FlutterFlow CLI docs: https://docs.flutterflow.io/flutterfl... Design system reference (Designer MD directory): https://designdotmd.directory/ ⏱️ Chapters below 00:00 Intro — what the FlutterFlow MCP unlocks 00:19 Installing the FlutterFlow CLI 00:43 Creating a new project & grabbing your API key 01:37 Opening the workspace in your agent (Claude) 01:54 Prompting Claude to build the e-commerce app + design system 02:34 Visual edits in FlutterFlow + syncing changes back 03:09 Connecting an existing FlutterFlow project to your agent 04:17 Prompting the agent to add navigation 04:56 Adding integrations (Firebase collections & schema) 05:13 Tip 1: Targeted edits with the FlutterFlow AI selector 05:38 Tip 2: Adding custom widgets from pub.dev 05:57 Tip 3: Letting the agent fix FlutterFlow errors 06:26 Tip 4: Combining MCPs (Supabase schema demo) 07:16 Tip 5: Working on feature branches 07:34 Wrap up Ready to try FlutterFlow for yourself? Start building your app today with a free trial 👉 https://www.flutterflow.com Follow us on Twitter 👉   / flutterflow   -------------- FlutterFlow is a visual development platform for building native apps, bringing design and development into one tool. With drag-and-drop functionality, you can build pixel-perfect UIs and easily connect your app to live data via Firebase or APIs. Plus, you can add advanced features like push notifications, payments, animations, and more. Whether you build your own custom widgets or write custom code, FlutterFlow makes it easy to bring your app ideas to life.