FlutterFlowのAI機能まとめ｜AIエージェント・Claude Code連携・MCPでできること

FlutterFlow の AI 機能は、「AI に説明して作る」「FlutterFlow Studio の中で AI に手伝わせる」「Claude Code などの外部の AI から操作する」「作るアプリに AI を組み込む」の 4 つに分けると整理できます。2023 年に追加された「ページを 1 枚生成する」機能から大きく変わり、現在は AI エージェントがプロジェクト全体を読んで編集するところまで進んでいます。

この記事では、2026 年 11 月時点で公式に案内されている AI 機能を、できること・使う場所・利用条件に分けてまとめます。FlutterFlow そのものの特徴や料金は「FlutterFlowとは？できること・料金・Studioとの違い」で解説しています。

「AI で作ったアプリを公開できる品質に仕上げたい」「自社のアプリに FlutterFlow が向いているか知りたい」という方は、無料のアプリ開発相談をご利用ください。

FlutterFlow の AI 機能の全体像

現在の FlutterFlow は、AI に説明して作る「FlutterFlow」と、画面を自分で組み立てる「FlutterFlow Studio」（以前からある FlutterFlow）の 2 つに分かれています。AI 機能もこの 2 つにまたがっています。

機能	何をするか	使う場所	利用条件（公式の案内）
FlutterFlow（AI に説明して作る）	作りたいアプリを文章で説明すると、AI エージェントが作り、確認し、修正する	FlutterFlow	Free は初回のみの利用枠。有料プランは毎月の利用枠
AI Agent パネル（ベータ）	Claude や Codex などのエージェントが、開いているプロジェクトを読んで編集する	Studio のデスクトップアプリ	自分の Claude・Codex・Antigravity・Gemini のアカウントを使う
Generate with Designer	文章や Figma のフレームから、ページやコンポーネントを生成する	Studio（ブラウザ・デスクトップ）	プランの AI 利用枠を使う
Claude Code・Codex のプラグイン	手元の Claude Code や Codex から Studio のプロジェクトを読み、編集する	ターミナル、各エージェントのアプリ	CLI と MCP サーバーは有料プランが必要
CLI・MCP サーバー	MCP に対応した AI エージェントに、プロジェクトの読み取りと編集の手段を渡す	ターミナル	有料プランが必要
Test Pilot	文章で書いたテストを、AI が実際にアプリを操作して確かめる	Studio	無料の回数と、追加のクレジット購入（後述）
AI Agents	作るアプリの中から OpenAI・Anthropic・Google などのモデルを呼び出す	Studio	Basic は 1 個、Pro・Max は無制限

出典：FlutterFlow AI、FlutterFlow Studio AI、料金ページ（いずれも FlutterFlow 公式サイト。2026 年 11 月 13 日に確認）

AI に説明して作る「FlutterFlow」

作りたいアプリを文章で説明すると、AI エージェントが iPhone と Android 向けのアプリを作ります。修正も会話で頼みます。公式ページでは、次のような進め方が説明されています。

• アイデアごとにスレッドを分ける：エージェントはアプリの写しの上で作業します。スレッドごとにデータの写しも持つため、試している間に本番のデータが変わることはありません。
• 複数のスレッドを同時に進められる：返事を待っているもの、作業中のもの、最近のもの、に分けて表示されます。
• 選択肢があるときは聞いてくる：やり方が複数あるときは、エージェントが利用者に選ばせます。
• 反映は自分でボタンを押したときだけ：「Push」を押すまで、アプリには何も反映されません。エージェントが勝手に反映や公開をすることはありません。

決済の Stripe、メール送信の Resend、データの Airtable、App Store Connect、Google Play など、12 のサービスとの接続が用意されています。変更を伴う操作は、既定では利用者の承認を待ちます。

注意点は、この「FlutterFlow」で作ったプロジェクトと、Studio のプロジェクトは相互に移せないことです。画面や処理を細かく作り込む予定があるなら、最初から Studio を選びます。

FlutterFlow Studio の中で使える AI 機能

AI Agent パネル（ベータ）

Studio のデスクトップアプリに、AI エージェントと会話する欄が付きました。ツールバーの脳のアイコンから開きます。エージェントは開いているプロジェクトの内容を読んだうえで、次のような編集を行います。

• ページやコンポーネントの作成・更新
• ウィジェットの設定、レイアウト、見た目、画面幅への対応の調整
• アクション、アプリの状態（App State）、アプリのイベントの設定
• テーマの値やナビゲーションの更新
• プロジェクトの構成の確認と、問題点の洗い出し

特定のウィジェットだけを直したいときは、ウィジェットを右クリックして「Copy AI Selector」を選ぶと、その部品を指定して依頼できます。画像（PNG・JPEG・GIF・WebP）を貼り付けて、見本として渡すこともできます。

利用には、Studio のデスクトップアプリと、自分の Claude または Codex などのアカウントが必要です。AI の利用量は、FlutterFlow のプランではなく、そのアカウント側の上限に従います。ブラウザ版の Studio では使えません。

出典：FlutterFlow 公式ドキュメント「AI Agent」（2026 年 11 月 13 日に確認）

Generate with Designer（ページ・コンポーネントの生成）

作りたいページやコンポーネントを文章で説明すると、Studio のウィジェットとして生成されます。プロジェクトのテーマ（色や文字の設定）が反映され、ページは新しいページとして、コンポーネントは共有コンポーネントとして追加されます。

Figma のフレームの URL を渡して、ページやコンポーネントに変換することもできます。ブラウザ版でもデスクトップ版でも使えます。なお、Figma のフレームの取り込みは、料金ページでは Max プランに月 100 件と記載されています。

Test Pilot（AI によるテスト）

「メールアドレスでログインして、投稿を 1 件作る」のように、利用者の操作を文章で書くと、AI がアプリを実際に操作して確かめます。結果には、操作の手順ごとの画面と、成功・失敗が記録されます。

• テストは「Test Group」にまとめ、指示（Instructions）と、期待する結果（Expected Outcome）を書きます。
• ログイン用のメールアドレスなどは「Test Parameters」に登録し、指示の中から呼び出します。暗号化して保存する設定があります。
• 画面サイズは 3 種類まで、明るい表示と暗い表示を選んで実行できます。
• テストが失敗した場所は報告されますが、直すのは人か、AI Agent パネルです。

公式ドキュメントでは、プロジェクトごとに 5 回分の無料枠があり、それ以上は追加の「Test Pilot Credits Pass」（月 5 ドルで 100 回分から）を購入すると案内されています。使う回数は「テストの数 × 画面サイズの数 × 表示モードの数」です。一方、Studio AI の紹介ページには「有料プランが必要」とも書かれています。使う前に、最新の条件を公式ページで確認してください。

出典：FlutterFlow 公式ドキュメント「Test Pilot」（2026 年 11 月 13 日に確認）

Claude Code・Codex から FlutterFlow を操作する

2026 年の変化でいちばん大きいのが、FlutterFlow の外にある AI コーディングエージェントから、Studio のプロジェクトを直接編集できるようになったことです。エージェントが加えた変更は、実際の Studio のプロジェクトに反映され、いつもの編集画面で開いて確認できます。

公式プラグイン

Claude Code と Codex には、公式のプラグインが用意されています。Claude Code の場合は、次の 2 行で入ります。

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

プラグインは FlutterFlow の CLI を自動で入れ、作業用のフォルダを用意し、変更のたびに「現状の把握 → 検証 → 反映」の順で進めます。API キーは、コピーしたものをプラグインが一度だけ読み取って保存する方式で、会話の中にキーを書かずに済みます。

• 必要なもの：Claude Code、Git、Dart（Flutter に含まれます）。
• Windows では、自動設定に Git Bash か WSL が必要です。

出典：FlutterFlow 公式ドキュメント「Claude Code Plugin」（2026 年 11 月 13 日に確認）

CLI と MCP サーバー

プラグインの中身は、FlutterFlow の CLI と、それに含まれる MCP サーバーです。MCP は、AI エージェントに外部の道具を渡すための共通の仕組みです。Claude Code と Codex 以外にも、Gemini CLI、OpenCode、Cursor など、MCP に対応したエージェントから使えます。

dart pub global activate flutterflow_cli
flutterflow ai init

flutterflow ai init を実行すると、作業用のフォルダと、エージェントごとの設定ファイルが作られます。エージェントはこの MCP サーバーを通して、プロジェクトの中身を調べ、変更を計画し、検証してから反映します。validate は、反映せずに変更が通るかだけを確かめる命令です。

公式ドキュメントに書かれている、できないことも押さえておきます。

• アプリの実行や、ストアへの提出はしません。編集画面の代わりにはなりません。
• Firebase のプロジェクトの作成や、秘密の値（シークレット）の管理は対象外です。
• ほかの人が同じプロジェクトを先に変更していた場合、反映は拒否され、エージェントがやり直します。
• iOS・Android の設定ファイルの編集は、利用者が許可したときだけ行われます。

出典：FlutterFlow 公式ドキュメント「Build with AI Agents」（2026 年 11 月 13 日に確認）。公式の紹介ページでは、CLI と MCP サーバーは有料プランが必要と案内されています。

実務で使ってみた実感

FlutterFlow Cafe を運営する株式会社ランデストでも、MCP サーバーと Claude Code を組み合わせた開発を実務で確認しています。使ってみて分かったのは、次の点です。

• 画面の組み立てや、似た画面の量産は、AI に任せると早く進みます。
• データの持ち方、権限、課金のような「あとから直しにくい部分」は、人が先に決めておく必要があります。AI は指示された範囲をうまく作りますが、設計の良し悪しまでは保証しません。
• FlutterFlow で作りにくい部分は、コードを書き出して Flutter で実装する、という分担ができます。AI エージェントは両方を扱えるので、この切り替えがしやすくなりました。

作るアプリに AI を組み込む「AI Agents」

ここまでは「アプリを作るための AI」でした。AI Agents は、作るアプリの機能として AI を使うための仕組みです。Studio で「エージェント」を定義し、アプリのアクションから呼び出します。

種類	使えるサービス（公式ドキュメントの記載）
チャット	OpenAI、Google、Anthropic
画像の生成	Google（Gemini）、OpenAI
動画の生成	Google（Veo）
音声の読み上げ・文字起こし	ElevenLabs

• チャットでは、AI への前提の指示（システムメッセージ）、使うモデル、返答の形式（文章・Markdown・JSON）などを設定します。
• 各サービスの API キーは、サーバー側（Cloud Functions）に保存され、アプリの利用者からは見えません。
• Firebase の設定と、Firebase の従量課金プラン（Blaze）が必要です。AI の利用料は、自分の API キーに対して各サービスから請求されます。
• 既定では、ログインした利用者だけが呼び出せます。この設定を外すと、誰でも呼び出せるようになるため注意が必要です。

作れるエージェントの数は、料金ページでは Basic プランが 1 個、Pro・Max プランが無制限と記載されています。出典：FlutterFlow 公式ドキュメント「AI Agents」（2026 年 11 月 13 日に確認）

API を自分で呼び出して ChatGPT を組み込む方法は、「FlutterFlow に ChatGPT の API をつなぐ方法」で紹介しています。

料金と AI の利用枠

AI の利用枠は、プランごとに決まっています。「FlutterFlow」と Studio の AI 機能で 1 つの枠を共有し、残りが割合（％）で表示されます。

プラン	月額	AI の利用枠	AI Agents（アプリに組み込む AI）
Free	0 ドル	無料の利用枠（初回のみ）	なし
Basic	39 ドル	簡単なアプリ 1 つ分の利用量	1 個
Pro	80 ドル	Basic の 2.5 倍。使い切ったら追加購入できる	無制限
Max	150 ドル	Basic の 5 倍。使い切ったら追加購入できる	無制限

年払いにすると、約 25% 安くなります。AI Agent パネルは自分の Claude や Codex のアカウントを使うため、この枠とは別です。出典：FlutterFlow 公式サイトの料金ページ（2026 年 11 月 13 日に確認）

2023 年の AI 機能（AI Gen）からの変化

FlutterFlow に最初の AI 機能が追加されたのは 2023 年 7 月です。当時は「AI Gen」という名前で、ページの生成、コンポーネントの生成、データベースの構造の生成、配色の生成の 4 つがありました。

	2023 年	2026 年
AI がすること	指示された 1 ページ、1 部品を生成する	プロジェクト全体を読み、複数の画面や処理をまとめて編集する
使う場所	FlutterFlow の編集画面の中	編集画面、デスクトップアプリ、ターミナル、外部の AI エージェント
作ったあとの確認	人が画面を見て確かめる	AI が検証し、Test Pilot でテストも実行できる
ページ・部品の生成	AI Gen	Generate with Designer

ページとコンポーネントの生成は、現在は Generate with Designer として案内されています。データベースの構造と配色の生成が今どのように提供されているかは、公式の AI 紹介ページには記載がありませんでした。

AI 機能を使うときの注意点

• AI が作ったものは「たたき台」：画面は早くできますが、データの持ち方、権限、決済まわりは人が確認します。公開するアプリでは、ここが抜けると利用者の情報が見えてしまうなどの事故につながります。
• キーや認証情報の扱い：API キーを会話に貼らない、テストに本番のログイン情報を使わない、という基本は AI を使う場合も同じです。公式ドキュメントも、テストに本番の認証情報を使わないよう勧めています。
• 費用は 2 か所で発生する：FlutterFlow のプラン料金とは別に、アプリに組み込んだ AI の利用料（OpenAI など）と、Firebase の利用料がかかります。
• 作り方の選択は最初に：「FlutterFlow」と Studio の間でプロジェクトは移せません。
• ベータ版の機能がある：AI Agent パネルはベータ版です。仕様や利用条件は変わることがあります。

よくある質問

FlutterFlow の AI 機能は無料で使えますか

一部は使えます。Free プランには初回のみの利用枠があり、「FlutterFlow」でアプリを作り始めることはできます。CLI と MCP サーバーは有料プランが必要と案内されています。AI Agents（アプリに組み込む AI）は Free プランでは使えません。

Claude Code や Codex の契約は別に必要ですか

AI Agent パネルと、プラグイン・MCP サーバー経由の開発では、自分の Claude や Codex などのアカウントを使います。「FlutterFlow」（AI に説明して作るほう）と Generate with Designer は、FlutterFlow のプランの利用枠で動くため、別の契約は要りません。

AI だけでアプリを完成させて公開できますか

簡単なアプリなら、動くところまでは AI で進められます。ただし、ストアの審査への対応、決済、個人情報の扱い、公開後の不具合対応は、AI に任せきりにはできません。公開して運用するアプリでは、仕組みを理解している人の確認が必要です。

プログラミングの知識がなくても使えますか

「FlutterFlow」と Generate with Designer は、文章で説明するだけで使えます。プラグインや CLI は、ターミナルの操作と Dart の準備が要るため、開発の経験がある人向けです。FlutterFlow を初めて触る場合は、「FlutterFlowの始め方」から読むと流れがつかめます。

まとめ

• FlutterFlow の AI 機能は、「AI に説明して作る」「Studio の中で手伝わせる」「外部の AI エージェントから操作する」「作るアプリに組み込む」の 4 つに分けて考えると整理できます。
• Claude Code・Codex の公式プラグインと MCP サーバーにより、AI エージェントが Studio のプロジェクトを直接編集できるようになりました。
• AI の利用枠はプランごとに決まっており、「FlutterFlow」と Studio で共有します。AI Agent パネルは自分の AI アカウントを使います。
• AI が作るのは「たたき台」です。データ、権限、決済、公開後の運用は、人が設計して確認します。

株式会社ランデストは、FlutterFlow と AI エージェントを組み合わせたアプリ開発を行っています。開発事例は「Macroz の開発事例」をご覧ください。「AI で作りかけたアプリを仕上げたい」「FlutterFlow で作れるか判断してほしい」といったご相談は、無料のアプリ開発相談からお寄せください。