flutter · lamek · Apr 13, 2026 · Apr 9, 2026 · Apr 10, 2026 · Apr 10, 2026
@@ -62,6 +62,11 @@ class DashHeader extends StatelessComponent {
             label: 'Learn',
             isActive: activeEntry == ActiveNavEntry.learn,
           ),
+          _NavItem(
+            href: '/ai/create-with-ai',
+            label: 'AI',
+            isActive: activeEntry == ActiveNavEntry.ai,
+          ),
           const _NavItem(
             href: 'https://api.flutter.dev',
             label: 'Reference',

@@ -43,6 +43,12 @@ final class DashSideNav extends StatelessComponent {
           iconId: 'play_lesson',
           active: activeEntry == ActiveNavEntry.learn,
         ),
+        _TopNavItem(
+          href: '/ai/create-with-ai',
+          label: 'AI',
+          iconId: 'auto_awesome',
+          active: activeEntry == ActiveNavEntry.ai,
+        ),
         const _TopNavItem(
           href: 'https://api.flutter.dev',
           label: 'Reference',

@@ -157,7 +157,12 @@ ga('send', 'pageview');
     final bodyClass = pageData['bodyClass'] as String?;
     final pageUrl = page.url.startsWith('/') ? page.url : '/${page.url}';
 
+    final pageSidenav = pageData['sidenav'] as String? ?? defaultSidenav;
     final sideNavEntries = switch (page.data['sidenav']) {
+      _ when pageSidenav == 'ai' => switch (page.data['ai']) {
+        final List<Object?> sidenavData => navEntriesFromData(sidenavData),
+        _ => null,
+      },
       final List<Object?> sidenavData => navEntriesFromData(sidenavData),
       _ => null,
     };

@@ -7,11 +7,15 @@ ActiveNavEntry activeNavEntry(String pageUrlPath) {
     return ActiveNavEntry.learn;
   }
 
+  if (pageUrlPath.startsWith('/ai')) {
+    return ActiveNavEntry.ai;
+  }
   return ActiveNavEntry.home;
 }
 
 enum ActiveNavEntry {
   home,
   learn,
+  ai,
   // reference,
 }
@@ -1,5 +1,6 @@
 ---
 title: AI rules for Flutter and Dart
+sidenav: ai
 shortTitle: AI rules
 description: >-
   Learn how to add AI rules to tools that accelerate your

@@ -1,5 +1,6 @@
 ---
 title: Chat client sample
+sidenav: ai
 description: >
   Learn about the chat client sample included in the AI Toolkit.
 prev:

@@ -1,5 +1,6 @@
 ---
 title: Custom LLM providers
+sidenav: ai
 description: >
   How to integrate with other Flutter features.
 prev:

@@ -1,5 +1,6 @@
 ---
 title: Feature integration
+sidenav: ai
 description: >
   How to integrate with other Flutter features.
 prev:

@@ -1,5 +1,6 @@
 ---
 title: Flutter AI Toolkit
+sidenav: ai
 shortTitle: AI Toolkit
 description: >
   Learn how to add the AI Toolkit chatbot

@@ -1,5 +1,6 @@
 ---
 title: User experience
+sidenav: ai
 description: >
   How the user will experience the AI Toolkit in your app.
 prev:

@@ -1,5 +1,6 @@
 ---
 title: Developer experience
+sidenav: ai
 description: >
   Learn how to use spec-driven development and Gemini to plan, code, and 
   iterate on high-quality Flutter applications.

@@ -1,5 +1,6 @@
 ---
 title: Flutter AI best practices
+sidenav: ai
 shortTitle: AI best practices
 breadcrumb: Best practices
 description: >

@@ -1,5 +1,6 @@
 ---
 title: Mode of interaction
+sidenav: ai
 description: >
   Learn to balance LLM capabilities with traditional code and implement 
   guardrails to manage nondeterministic AI behavior.

@@ -1,5 +1,6 @@
 ---
 title: Prompting
+sidenav: ai
 description: >
   Learn how to build and optimize generative AI prompts in Flutter using system 
   instructions, dynamic parameters, and versioning techniques.

@@ -1,5 +1,6 @@
 ---
 title: Structure & output
+sidenav: ai
 description: >
   Learn how to use structured input and output schemas to receive reliable, 
   parsable JSON data from an LLM.

@@ -1,5 +1,6 @@
 ---
 title: Tool calls (aka function calls)
+sidenav: ai
 shortTitle: Tool calls
 description: >
   Learn how to implement tool calling, manage agentic loops, and incorporate 

@@ -0,0 +1,44 @@
+---
+title: AI Coding Assistants
+sidenav: ai
+description: >
+  Learn how to use AI-powered coding assistants like Antigravity and Gemini CLI
+  to accelerate your Flutter development.
+---
+
+AI tools are not only features in your app, but can also be powerful assistants in your development workflow. Tools like Antigravity and Gemini CLI can help you write code faster, understand complex concepts, and reduce boilerplate.
+
+## Antigravity
+
+[Antigravity](https://antigravity.google/) is an in-IDE AI agent that can read and write code, run terminal commands, and help you build complex features. Some of its capabilities include:
+
+*   **Agentic capabilities**: Unlike chat-based assistants, Antigravity can proactively edit files and run terminal commands to complete tasks.
+*   **Complex reasoning**: It can plan and execute multi-step workflows which makes it suitable for larger refactors or feature implementations.
+*   **Verification**: It can run tests and verify its own changes to ensure correctness.
+
+<YouTubeEmbed
+  id="YY2w2JEX2xk"
+  title="Flutter + Antigravity in 10 minutes">
+</YouTubeEmbed>
+
+## Gemini CLI
+
+The [Gemini CLI](https://geminicli.com/) is a command-line AI workflow tool. It allows you to interact with Gemini models for a variety of tasks without leaving your development environment. You can use it to:
+
+* Quickly scaffold a new Flutter widget, Dart function, or a complete app.
+* Use MCP server tools, such as the Dart and Flutter MCP server.
+* Automate tasks like committing and pushing changes to a Git repository.
+
+To get started, visit the [Gemini CLI](https://geminicli.com/) website, or try this [Gemini CLI codelab](https://codelabs.developers.google.com/gemini-cli-hands-on).
+
+## Flutter extension for Gemini CLI
+
+The [Flutter extension for Gemini CLI]({{site.github}}/gemini-cli-extensions/flutter) combines the [Dart and Flutter MCP server]({{site.dart-site}}/tools/mcp-server) with rules and commands. It uses the default set of [AI rules for Flutter and Dart](/ai/ai-rules), adds commands like `/create-app` and `/modify` to make structured changes to your app, and automatically configures the [Dart and Flutter MCP server]({{site.dart-site}}/tools/mcp-server).
+
+You can install it by running the following command:
+
+```bash
+gemini extensions install https://github.com/gemini-cli-extensions/flutter
+```
+
+To learn more, check out [Flutter extension for Gemini CLI](/ai/gemini-cli-extension).
@@ -1,5 +1,6 @@
 ---
 title: Create with AI
+sidenav: ai
 description: >
   Learn how to use AI to build Flutter apps, from powerful SDKs that integrate
   AI features directly into your app to tools that accelerate your development
@@ -53,9 +54,9 @@ your development workflow.  Tools like [Antigravity][],
 [Cursor][], and [Windsurf][] can help you write code faster, understand complex
 concepts, and reduce boilerplate.
 
-[Antigravity]: https://antigravity.google/
-[Gemini Code Assist]: https://codeassist.google/
-[Gemini CLI]: https://geminicli.com/
+[Antigravity]: /ai/coding-assistants
+[Gemini Code Assist]: /ai/coding-assistants
+[Gemini CLI]: /ai/coding-assistants
 [Claude Code]: https://www.claude.com/product/claude-code
 [Cursor]: https://cursor.com/
 [Windsurf]: https://windsurf.com/
@@ -80,7 +81,7 @@ To learn more, visit the [GenUI SDK for Flutter][] documentation.
 
 ### Antigravity
 
-[Antigravity][] is an in-IDE AI agent that can read and write code, run
+[Antigravity](https://antigravity.google/) is an in-IDE AI agent that can read and write code, run
 terminal commands, and help you build complex features. Some of its capabilities
 include:
 
@@ -96,11 +97,11 @@ include:
   title="Flutter + Antigravity in 10 minutes">
 </YouTubeEmbed>
 
-[Antigravity]: https://antigravity.google/
+To learn more, check out the [AI Coding Assistants](/ai/coding-assistants) guide.
 
 ### Gemini Code Assist
 
-[Gemini Code Assist][] is an AI-powered collaborator available for IDEs like
+[Gemini Code Assist](https://codeassist.google/) is an AI-powered collaborator available for IDEs like
 Visual Studio Code, JetBrains IDEs, and Android Studio. It has a deep
 understanding of your project's codebase and can help you with:
 
@@ -109,25 +110,23 @@ understanding of your project's codebase and can help you with:
 * **In-editor chat**: You can ask questions about your code, Flutter concepts,
   or best practices directly within your IDE.
 * **Debugging and explanation**: If you encounter an error, you can ask Gemini
-  Code Assist to explain it and suggest a fix, and
-  [Dart and Flutter MCP server][dart-mcp-flutter-docs]
+  Code Assist to explain it and suggest a fix.
 
-[Gemini Code Assist]: https://codeassist.google/
+To learn more, check out the [AI Coding Assistants](/ai/coding-assistants) guide.
 
 ### Gemini CLI
 
-The [Gemini CLI][] is a command-line AI workflow tool. It allows you to interact
+The [Gemini CLI](https://geminicli.com/) is a command-line AI workflow tool. It allows you to interact
 with Gemini models for a variety of tasks without leaving your development
 environment. You can use it to:
 
 * Quickly scaffold a new Flutter widget, Dart function, or a complete app.
 * Use MCP server tools, such as the Dart and Flutter MCP server
 * Automate tasks like committing and pushing changes to a Git repository
 
-To get started, visit the [Gemini CLI][] website, or try this
+To get started, visit the [Gemini CLI](https://geminicli.com/) website, or try this
 [Gemini CLI codelab][].
 
-[Gemini CLI]: https://geminicli.com/
 [Gemini CLI codelab]: https://codelabs.developers.google.com/gemini-cli-hands-on
 
 #### Flutter extension for Gemini CLI
@@ -146,9 +145,11 @@ gemini extensions install https://github.com/gemini-cli-extensions/flutter
 ```
 
 To learn more, check out
-[Flutter extension for Gemini CLI](/ai/flutter-ext-for-gemini).
+[Flutter extension for Gemini CLI](/ai/gemini-cli-extension).
 
 [flutter-extension]: {{site.github}}/gemini-cli-extensions/flutter
+[dart-mcp-dart-docs]: /ai/mcp-server
+[AI rules for Flutter and Dart]: /ai/ai-rules
 
 ### Dart and Flutter MCP server
 
@@ -171,17 +172,10 @@ This bridges the gap between the AI's natural language understanding,
 and Dart and Flutter's suite of developer tools.
 
 To get started, check out the official documentation for the
-[Dart and Flutter MCP server][dart-mcp-dart-docs]
-on dart.dev and the [Dart and Flutter MCP repository][dart-mcp-github].
-
-[dart-mcp-dart-docs]: {{site.dart-site}}/tools/mcp-server
-[dart-mcp-github]: {{site.github}}/dart-lang/ai/tree/main/pkgs/dart_mcp_server
-[dart-mcp-flutter-docs]: #dart-and-flutter-mcp-server
+[Dart and Flutter MCP server][dart-mcp-dart-docs].
 
 ### Rules for Flutter and Dart
 
 You can use a rules file with AI-powered editors to provide
 context and instructions to an underlying LLM. To get
 started, visit the [AI rules for Flutter and Dart][] guide.
-
-[AI rules for Flutter and Dart]: /ai/ai-rules
@@ -1,5 +1,6 @@
 ---
 title: Flutter extension for Gemini CLI
+sidenav: ai
 description: >
   Learn how to use the Flutter extension for Gemini CLI
   to make structured changes to your app at the command line

@@ -1,5 +1,6 @@
 ---
 title: GenUI SDK main components and concepts
+sidenav: ai
 breadcrumb: Main components & concepts
 description: >-
   Familiarize yourself with the main components and concepts of the

@@ -1,5 +1,6 @@
 --- 
 title: Get started with the GenUI SDK for Flutter
+sidenav: ai
 shortTitle: Get started with the GenUI SDK
 breadcrumb: Get started
 description: >-

@@ -1,5 +1,6 @@
 ---
 title: GenUI SDK for Flutter
+sidenav: ai
 shortTitle: GenUI SDK
 description: >-
   Learn how to use GenUI SDK for Flutter to build more

@@ -1,5 +1,6 @@
 ---
 title: Input and events
+sidenav: ai
 description: How input and events are handled in GenUI applications.
 prev:
   title: Get started with the GenUI SDK for Flutter

@@ -1,5 +1,6 @@
 ---
 title: Flutter & AI
+sidenav: ai
 shortTitle: AI
 layout: toc
 description: >-

@@ -1,5 +1,6 @@
 ---
 title: Dart and Flutter MCP server
+sidenav: ai
 shortTitle: MCP server
 description: >
   Learn about the Dart and Flutter MCP server tool that

@@ -0,0 +1,62 @@
+- title: AI with Flutter
+  permalink: /ai/create-with-ai
+
+- title: Develop with AI
+  expanded: true
+  children:
+    - title: Rules for Flutter and Dart
+      permalink: /ai/ai-rules
+    - title: Dart & Flutter MCP server
+      permalink: /ai/mcp-server
+    - title: AI Coding Assistants
+      permalink: /ai/coding-assistants
+      children:
+        - title: Overview
+          permalink: /ai/coding-assistants
+        - title: Flutter extension for Gemini CLI
+          permalink: /ai/gemini-cli-extension
+    - title: Developer Experience
+      permalink: /ai/best-practices/developer-experience
+
+- title: Build AI-powered apps
+  expanded: true
+  children:
+    - title: Firebase AI Logic
+      permalink: https://firebase.google.com/docs/ai-logic/get-started?platform=flutter
+    - title: GenUI SDK for Flutter
+      permalink: /ai/genui
+      children:
+        - title: Overview
+          permalink: /ai/genui
+        - title: Main components & concepts
+          permalink: /ai/genui/components
+        - title: Get started
+          permalink: /ai/genui/get-started
+        - title: Input and events
+          permalink: /ai/genui/input-events
+    - title: Flutter AI Toolkit
+      permalink: /ai/ai-toolkit
+      children:
+        - title: Overview
+          permalink: /ai/ai-toolkit
+        - title: User experience
+          permalink: /ai/ai-toolkit/user-experience
+        - title: Feature integration
+          permalink: /ai/ai-toolkit/feature-integration
+        - title: Custom LLM providers
+          permalink: /ai/ai-toolkit/custom-llm-providers
+        - title: Chat client sample
+          permalink: /ai/ai-toolkit/chat-client-sample
+    - title: AI Best Practices
+      permalink: /ai/best-practices
+      children:
+        - title: Overview
+          permalink: /ai/best-practices
+        - title: Prompting
+          permalink: /ai/best-practices/prompting
+        - title: Structure & output
+          permalink: /ai/best-practices/structure-output
+        - title: Tool calls (aka function calls)
+          permalink: /ai/best-practices/tool-calls
+        - title: Mode of interaction
+          permalink: /ai/best-practices/mode-of-interaction