# Build multiplatform apps with Gemini CLI Source: https://www.youtube.com/watch?v=RZPkE5sllck Recap page: https://rapidrecap.app/video/RZPkE5sllck Generated: 2025-11-12T21:07:07.077+00:00 --- ## Quick Overview The video demonstrates how to leverage the Gemini CLI and the Flutter extension to streamline multiplatform app development by allowing the AI agent to execute shell commands, run tests, format code, and even generate an initial Flutter project structure collaboratively with the developer. **Key Points:** - The demonstration shows integrating Gemini CLI with a Flutter extension to enable AI-driven development tasks via command line. - Developers can authenticate using Google login or Gemini/Vertex AI API keys to access the Gemini CLI. - The Flutter extension enables specialized commands like /list_devices, /flutter_driver, /dart_fix, and /dart_format, which communicate with the Dart/Flutter tooling daemon via an MCP server. - A key feature demonstrated is using the /create-app command to generate a new Flutter project based on a natural language description (e.g., a training companion app). - The AI agent can automatically run code checks like 'dart fix --apply' and 'dart format' after code modifications, ensuring adherence to best practices. - The process involves installing the Gemini CLI via npm, installing the Flutter extension for Gemini CLI, connecting the CLI to the running Flutter app's Dart Tooling Daemon via DTD URI, and then issuing commands. - The ability to use commands like /modify and /commit allows the AI to actively participate in code changes and project maintenance based on developer prompts. ![Screenshot at 0:08: The title screen for "Flutter Flight Plans" sets the context for charting a course for the future of app development using AI.](https://ss.rapidrecap.app/screens/RZPkE5sllck/00-00-08.png) **Context:** This video, titled "Flutter Flight Plans," is a technical tutorial presented by John Ryan, a Developer Relations Engineer, focusing on enhancing the Flutter development experience using AI agents, specifically the Gemini CLI and its associated VS Code extension. The goal is to show how these tools can automate code generation, debugging, and project setup for cross-platform applications. ## Detailed Analysis The video details how to integrate the Gemini CLI with Flutter development workflows to build multiplatform apps more efficiently. The process begins with installing the Gemini CLI globally via npm. After authentication (which can be done via Google login or API keys), the developer installs the Flutter extension for Gemini CLI using the command 'gemini extensions install https://github.com/gemini-cli-extensions/Flutter'. Once installed, the developer connects the Gemini CLI to the running Flutter application by running 'connect to my Flutter app' followed by the DTD URI obtained from Flutter DevTools. The connection enables the Gemini MCP Server (Model Context Protocol) to interact with the Dart Tooling Daemon, giving the AI access to tools like 'dart fix', 'dart format', and 'flutter driver'. The demonstration shows the AI successfully creating a new Flutter project from a natural language prompt describing a 'training companion app for runners,' initializing a Git repository, creating a feature branch, and performing initial code formatting. The agent's ability to execute these complex, multi-step tasks, coupled with its support for editing code directly (enabled by pressing Shift+Tab to toggle Yolo mode), significantly accelerates development cycles by automating boilerplate setup and routine maintenance checks. ### Introduction to AI in Flutter - AI agents are changing how apps are built - Flutter is built for the future of app development - Gemini CLI provides access to Gemini models, chain-of-thought reasoning, and commands. ### Setup and Installation - Install Gemini CLI via npm ('npm install -g @google/gemini-cli') - Install the Flutter extension ('gemini extensions install https://github.com/gemini-cli-extensions/Flutter') - Authenticate using Google or API key. ### Connecting to the App - Connect the CLI to the running Flutter app using the DTD URI from DevTools ('connect to my Flutter app ') - This establishes the MCP connection, enabling Dart/Flutter tool execution. ### AI-Driven Project Creation - Use '/create-app a training companion app for runners that creates a scheduled training plan' to scaffold the entire project structure, including Git initialization and branch creation. ### Using MCP Tools - Commands like '/mcp desc' reveal available tools such as 'dart_fix', 'dart_format', and 'hot_reload' - The agent automatically selects the appropriate tool based on the prompt (e.g., 'pub dev search' for package installation). ### Iterative Development with AI - Developers can prompt the AI to modify code directly (after enabling Yolo mode with Ctrl+Y) or run checks like 'dart format' and 'flutter doctor' to maintain code quality and validate changes against design mockups provided via Stitch. ![Screenshot at 0:01: Visual representation of abstract 3D shapes coalescing, symbolizing the integration of different technologies.](https://ss.rapidrecap.app/screens/RZPkE5sllck/00-00-01.png) ![Screenshot at 0:04: The title card for "Flutter Flight Plans" appears over an atomic structure graphic, setting the theme of charting a course for app development.](https://ss.rapidrecap.app/screens/RZPkE5sllck/00-00-04.png) ![Screenshot at 0:16: An emoji sequence \(person + robot -\> phone\) illustrates the core concept: combining human effort with AI to produce a mobile application.](https://ss.rapidrecap.app/screens/RZPkE5sllck/00-00-16.png) ![Screenshot at 0:54: Logos for VS Code and Flutter appear side-by-side, indicating the developer environment tools being integrated with the AI.](https://ss.rapidrecap.app/screens/RZPkE5sllck/00-00-54.png) ![Screenshot at 1:11: The Gemini CLI website is displayed, emphasizing the ability to 'Build \> debug & deploy with AI' directly from the terminal.](https://ss.rapidrecap.app/screens/RZPkE5sllck/00-01-11.png) ![Screenshot at 2:38: The Gemini CLI interface launches with an ASCII art logo and initial tips, showing the environment is ready for command input.](https://ss.rapidrecap.app/screens/RZPkE5sllck/00-02-38.png) ![Screenshot at 2:55: The browser opens to the Flutter documentation page for 'AI Rules,' showing how AI rules can customize LLM behavior for different environments.](https://ss.rapidrecap.app/screens/RZPkE5sllck/00-02-55.png) ![Screenshot at 6:22: The 'IMPLEMENTATION.md' file is displayed in VS Code, outlining the phased plan for building the 'Pacer' app, showing the structure Gemini helped create.](https://ss.rapidrecap.app/screens/RZPkE5sllck/00-06-22.png) ![Screenshot at 6:56: A split screen shows the Gemini CLI terminal running commands alongside the Pacer app running on an iPhone simulator, demonstrating real-time development feedback.](https://ss.rapidrecap.app/screens/RZPkE5sllck/00-06-56.png) ![Screenshot at 8:49: VS Code Flutter DevTools Inspector highlights the 'Pacer' text widget in the UI tree, showing how the AI's code changes are instantly reflected and inspectable.](https://ss.rapidrecap.app/screens/RZPkE5sllck/00-08-49.png)