diff --git a/docs/ff-concepts/agentic-ai/genui/_category_.json b/docs/ff-concepts/advanced/genui/_category_.json similarity index 60% rename from docs/ff-concepts/agentic-ai/genui/_category_.json rename to docs/ff-concepts/advanced/genui/_category_.json index 22bb6cfd..5d7e300a 100644 --- a/docs/ff-concepts/agentic-ai/genui/_category_.json +++ b/docs/ff-concepts/advanced/genui/_category_.json @@ -1,4 +1,4 @@ { "label": "GenUI Chat", - "position": 1 -} \ No newline at end of file + "position": 2 +} diff --git a/docs/ff-concepts/agentic-ai/genui/app-event-integrations.md b/docs/ff-concepts/advanced/genui/app-event-integrations.md similarity index 100% rename from docs/ff-concepts/agentic-ai/genui/app-event-integrations.md rename to docs/ff-concepts/advanced/genui/app-event-integrations.md diff --git a/docs/ff-concepts/agentic-ai/genui/component-catalog.md b/docs/ff-concepts/advanced/genui/component-catalog.md similarity index 100% rename from docs/ff-concepts/agentic-ai/genui/component-catalog.md rename to docs/ff-concepts/advanced/genui/component-catalog.md diff --git a/docs/ff-concepts/agentic-ai/genui/genui.md b/docs/ff-concepts/advanced/genui/genui.md similarity index 99% rename from docs/ff-concepts/agentic-ai/genui/genui.md rename to docs/ff-concepts/advanced/genui/genui.md index 6d5794ed..a9d276de 100644 --- a/docs/ff-concepts/agentic-ai/genui/genui.md +++ b/docs/ff-concepts/advanced/genui/genui.md @@ -4,8 +4,7 @@ title: GenUI Chat description: Add a conversational AI surface to your FlutterFlow app that can render catalog components, call action blocks as tools, and react to local app events. tags: [AI, Chat, Conversational UI] sidebar_position: 1 -keywords: [FlutterFlow, GenUI, Conversational AI, Chat widget, AI agent, A2UI protocol, Component rendering, Tool calling -] +keywords: [FlutterFlow, GenUI, Conversational AI, Chat widget, AI agent, A2UI protocol, Component rendering, Tool calling] --- # GenUI Chat diff --git a/docs/ff-concepts/agentic-ai/genui/imgs/personal-shopper.avif b/docs/ff-concepts/advanced/genui/imgs/personal-shopper.avif similarity index 100% rename from docs/ff-concepts/agentic-ai/genui/imgs/personal-shopper.avif rename to docs/ff-concepts/advanced/genui/imgs/personal-shopper.avif diff --git a/docs/ff-concepts/agentic-ai/genui/imgs/three-pillars.avif b/docs/ff-concepts/advanced/genui/imgs/three-pillars.avif similarity index 100% rename from docs/ff-concepts/agentic-ai/genui/imgs/three-pillars.avif rename to docs/ff-concepts/advanced/genui/imgs/three-pillars.avif diff --git a/docs/ff-concepts/agentic-ai/genui/tools-configuration.md b/docs/ff-concepts/advanced/genui/tools-configuration.md similarity index 100% rename from docs/ff-concepts/agentic-ai/genui/tools-configuration.md rename to docs/ff-concepts/advanced/genui/tools-configuration.md diff --git a/docs/ff-concepts/advanced/method-channels.md b/docs/ff-concepts/advanced/method-channels.md index 41435c02..21442821 100644 --- a/docs/ff-concepts/advanced/method-channels.md +++ b/docs/ff-concepts/advanced/method-channels.md @@ -3,7 +3,7 @@ slug: /concepts/advanced/method-channels title: Integrating Native SDKs Using Method Channels description: Learn how to integrate third-party native SDKs into your FlutterFlow project using Method Channels. This guide walks through setting up channels, writing native code, and connecting it back to FlutterFlow. tags: [Flutter] -sidebar_position: 1 +sidebar_position: 3 keywords: [FlutterFlow, Flutter, Method Channels, Existing Flutter Codebases,] --- @@ -626,4 +626,4 @@ But like any system boundary, MethodChannels require disciplined design. Misuse * A clear path to ship advanced features without waiting on plugin ecosystems * A sustainable integration model that scales with your team and product -Flutter will continue to evolve with innovative solutions for platform interoperability in the future through two key tools: FFIgen and JNIgen. FFIgen automates the creation of Objective-C and Swift API bindings, while JNIgen handles Java and Kotlin API connections, making native code integration more streamlined and maintainable across platforms. \ No newline at end of file +Flutter will continue to evolve with innovative solutions for platform interoperability in the future through two key tools: FFIgen and JNIgen. FFIgen automates the creation of Objective-C and Swift API bindings, while JNIgen handles Java and Kotlin API connections, making native code integration more streamlined and maintainable across platforms. diff --git a/docs/ff-concepts/agentic-ai/_category_.json b/docs/ff-concepts/agentic-ai/_category_.json deleted file mode 100644 index ce91d2cf..00000000 --- a/docs/ff-concepts/agentic-ai/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Agentic AI", - "position": 11 -} \ No newline at end of file diff --git a/docs/ff-concepts/ai-agent.md b/docs/ff-concepts/ai-agent.md new file mode 100644 index 00000000..c10b5374 --- /dev/null +++ b/docs/ff-concepts/ai-agent.md @@ -0,0 +1,150 @@ +--- +slug: /concepts/ai-agent +title: AI Agent +description: Use AI Agent from the FlutterFlow desktop app to set up supported AI agent CLI tools, connect them to your project, and build with natural-language prompts. +tags: [AI, AI Agent, Desktop App, FlutterFlow CLI] +sidebar_position: 11 +keywords: [FlutterFlow, AI Agent, desktop app, Codex, Claude, FlutterFlow CLI, MCP, live sessions] +--- + +# AI Agent + +AI Agent lets you work with AI coding agents directly from the FlutterFlow desktop app. Instead of manually opening a terminal, navigating to your project, and configuring command-line tools yourself, FlutterFlow checks the required setup and helps prepare the tools needed to work with your project. + +After you choose an agent, FlutterFlow launches it with the correct project context. Depending on your selected agent, FlutterFlow may also install or verify the required CLI, initialize or reuse a local FlutterFlow AI workspace, register the FlutterFlow MCP server, and guide the agent through authentication. Once connected, you can describe the change you want, review the agent's plan, and apply updates to your project. + +The agent works with your FlutterFlow project through the [FlutterFlow CLI](./advanced/flutterflow-cli/overview.md) and the same agent workflow described in [Build with AI Agents](./advanced/flutterflow-cli/flutterflow-mcp.md). + +:::info[Desktop app only] +AI Agent is available only in the FlutterFlow desktop app. It is not available in browser-based FlutterFlow. To use AI Agent, download the [**FlutterFlow desktop app**](https://flutterflow.io/desktop). +::: + +:::note[Different from in-app AI Agents] +This page is about using external AI coding agents to build and edit your FlutterFlow project. If you want to create AI-powered chat, text-to-speech, speech-to-text, image generation, or video generation experiences inside your app, see [**AI Agents**](../ff-integrations/ai/ai-agents.md). +::: + +AI Agent is useful for project editing tasks such as: + +- Creating or updating pages and components +- Adjusting widget properties, layout, styling, and responsiveness +- Wiring actions, action blocks, app state, and app events +- Updating theme values, design tokens, and navigation +- Reviewing project structure and finding issues +- Applying focused changes to a specific widget with Copy AI Selector + +For more details about what agents can and cannot edit, see [Agent Edit Scope](./advanced/flutterflow-cli/flutterflow-mcp.md#agent-edit-scope). + +## Prerequisites + +Before using AI Agent, make sure you have: + +- The [FlutterFlow desktop app](https://flutterflow.io/desktop) installed and signed in. +- An account with the provider of your selected agent, such as a ChatGPT account for **Codex** or an Anthropic account for **Claude**. + +## Set Up AI Agent + +When you open AI Agent for the first time, FlutterFlow checks whether the required tools are ready for the selected agent. + +:::info +You do not need to download a separate AI agent desktop app before getting started. The setup panel checks the required CLI tools for the selected agent and lets you install missing tools from the AI Agent setup panel. +::: + +To set up AI Agent: + +1. Open your project in the **FlutterFlow desktop app**. +2. Select the **brain icon** in the toolbar. +3. In the **Set up your AI agent** panel, choose **Claude** or **Codex**. +4. Review the setup checklist. FlutterFlow checks the selected agent's CLI, Flutter SDK, FlutterFlow CLI, local workspace, and sign-in status. +5. If any required CLI tools are missing, click **Install required tools**. +6. After installing tools or signing in, click **Re-check** to refresh the setup status. +7. When prompted, sign in with the account for the selected agent, such as your Anthropic account for Claude or your ChatGPT account for Codex. + +The selected agent runs on your own account and follows that account's usage and limits. Your conversations are processed by the local coding CLI and stored only on your Mac. FlutterFlow does not receive or store them. + +
+ +
+

+ +## Use AI Agent + +After setup is complete: + +1. Describe what you want the agent to do, such as "Create a profile settings page," "Fix the login button action," or "Update this card to match the new design." +2. Review the agent's proposed changes before applying them. +3. Verify the result visually. + +:::tip +For targeted widget updates, right-click the widget in the builder and select [**Copy AI Selector**](./advanced/flutterflow-cli/flutterflow-mcp.md#copy-ai-selector). Paste the selector into your prompt so the agent can locate the exact widget you want to update. +::: + +
+ +
+

+ +## Settings + +Select the **Settings** icon in the AI Agent panel to manage how FlutterFlow connects to local agents, stores workspaces, and opens sessions. + +- **Workspace location:** Shows where FlutterFlow creates local MCP workspaces on your Mac and displays the current workspace for the open project. +- **Claude:** Lets you sign in to Claude and review the permissions that control which tools Claude can run without asking each time. You can open the Claude permissions file at `~/.claude/settings.json`. +- **Codex:** Shows your signed-in ChatGPT account, plan, and current usage limits as reported by the Codex CLI. You can also log out from here. +- **Codex permissions:** Lets you review the permissions that control which tools Codex can run without asking each time. You can open the Codex permissions file at `~/.codex/config.toml`. +- **Terminal:** Selects which terminal app FlutterFlow uses when you choose **Open in terminal** to resume an agent session. +- **Show conversation recap:** Turns the conversation recap on or off. When enabled, FlutterFlow shows a one-line recap above the prompt after a few exchanges in a thread. +- **Troubleshooting:** Lets you download diagnostic logs for AI Agent setup and conversations, including tool installs, workspace initialization, CLI launches, and errors. Conversations and personal data are not included in these logs. +- **Privacy:** Confirms that conversations are processed by the coding CLI on your Mac and stored locally. FlutterFlow does not receive or store them. +:::tip +If the setup status does not update after installing tools or signing in, click **Re-check**. If it still does not update, restart the FlutterFlow desktop app and open the AI Agent panel again. +::: + +## Best Practices + +- Be specific about the outcome you want, not just the widget you want changed. +- Use **Copy AI Selector** when multiple widgets look similar or when the target widget is deeply nested. +- Ask the agent to inspect the current project before making broad changes. +- Review changes in the visual builder before continuing with additional prompts. +- Keep a [Live Session](./advanced/flutterflow-cli/flutterflow-mcp.md#live-sessions) running only while you are actively using it. diff --git a/docs/intro/ff-ui/imgs/toolbar.avif b/docs/intro/ff-ui/imgs/toolbar.avif index fb92242a..56e9dcc8 100644 Binary files a/docs/intro/ff-ui/imgs/toolbar.avif and b/docs/intro/ff-ui/imgs/toolbar.avif differ diff --git a/docs/intro/ff-ui/toolbar.md b/docs/intro/ff-ui/toolbar.md index 7cefc8c3..836183ae 100644 --- a/docs/intro/ff-ui/toolbar.md +++ b/docs/intro/ff-ui/toolbar.md @@ -44,11 +44,14 @@ Open the Command Palette by selecting the search button or pressing **Cmd/Ctrl + ![command-palette.avif](imgs/command-palette.avif) +## AI Agent + +[AI Agent](../../ff-concepts/ai-agent.md) lets you work with AI coding agents directly from the FlutterFlow desktop app. It is helpful for making project updates with natural-language prompts, such as creating pages, adjusting widgets, wiring actions, or reviewing your project structure. + ## AI Generation History The **AI Generation History** panel lets you track the status of your AI-generated items. It provides a list of all previously generated pages and components, and you can easily preview them in the panel. - ## Project Comments Project Comments let you leave thoughts, questions, or feedback on a specific widget for your project team or client. While adding a comment, you can tag users, and they will be able to respond, creating a thread of conversation. @@ -59,6 +62,8 @@ To tag users, select the **@** symbol and choose the project team member(s). ::: + + ## Project Suggestions Project Suggestions identifies opportunities to improve your app's design and performance.