diff --git a/site/lib/src/components/layout/header.dart b/site/lib/src/components/layout/header.dart index 4b3322b71c6..82bb08d26cf 100644 --- a/site/lib/src/components/layout/header.dart +++ b/site/lib/src/components/layout/header.dart @@ -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', diff --git a/site/lib/src/components/layout/sidenav.dart b/site/lib/src/components/layout/sidenav.dart index 57a4aad7cce..6edad3663cd 100644 --- a/site/lib/src/components/layout/sidenav.dart +++ b/site/lib/src/components/layout/sidenav.dart @@ -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', diff --git a/site/lib/src/layouts/dash_layout.dart b/site/lib/src/layouts/dash_layout.dart index 72e756f55fb..af2c8457e27 100644 --- a/site/lib/src/layouts/dash_layout.dart +++ b/site/lib/src/layouts/dash_layout.dart @@ -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 sidenavData => navEntriesFromData(sidenavData), + _ => null, + }, final List sidenavData => navEntriesFromData(sidenavData), _ => null, }; diff --git a/site/lib/src/utils/active_nav.dart b/site/lib/src/utils/active_nav.dart index 5d766d89ab6..a7763e9a801 100644 --- a/site/lib/src/utils/active_nav.dart +++ b/site/lib/src/utils/active_nav.dart @@ -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, } diff --git a/src/content/ai/ai-rules.md b/src/content/ai/ai-rules.md index b5c8f2de877..9c4f71c4d68 100644 --- a/src/content/ai/ai-rules.md +++ b/src/content/ai/ai-rules.md @@ -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 diff --git a/src/content/ai/ai-toolkit/chat-client-sample.md b/src/content/ai/ai-toolkit/chat-client-sample.md index d5e82a0c077..9f96753d02e 100644 --- a/src/content/ai/ai-toolkit/chat-client-sample.md +++ b/src/content/ai/ai-toolkit/chat-client-sample.md @@ -1,5 +1,6 @@ --- title: Chat client sample +sidenav: ai description: > Learn about the chat client sample included in the AI Toolkit. prev: diff --git a/src/content/ai/ai-toolkit/custom-llm-providers.md b/src/content/ai/ai-toolkit/custom-llm-providers.md index 3382047b4ad..a2f2d416f9f 100644 --- a/src/content/ai/ai-toolkit/custom-llm-providers.md +++ b/src/content/ai/ai-toolkit/custom-llm-providers.md @@ -1,5 +1,6 @@ --- title: Custom LLM providers +sidenav: ai description: > How to integrate with other Flutter features. prev: diff --git a/src/content/ai/ai-toolkit/feature-integration.md b/src/content/ai/ai-toolkit/feature-integration.md index b49d1d21b9f..8a0d0a5a730 100644 --- a/src/content/ai/ai-toolkit/feature-integration.md +++ b/src/content/ai/ai-toolkit/feature-integration.md @@ -1,5 +1,6 @@ --- title: Feature integration +sidenav: ai description: > How to integrate with other Flutter features. prev: diff --git a/src/content/ai/ai-toolkit/index.md b/src/content/ai/ai-toolkit/index.md index 8ac3b624dd5..afb27c69e99 100644 --- a/src/content/ai/ai-toolkit/index.md +++ b/src/content/ai/ai-toolkit/index.md @@ -1,5 +1,6 @@ --- title: Flutter AI Toolkit +sidenav: ai shortTitle: AI Toolkit description: > Learn how to add the AI Toolkit chatbot diff --git a/src/content/ai/ai-toolkit/user-experience.md b/src/content/ai/ai-toolkit/user-experience.md index 42dc728ffcf..2d4101ee666 100644 --- a/src/content/ai/ai-toolkit/user-experience.md +++ b/src/content/ai/ai-toolkit/user-experience.md @@ -1,5 +1,6 @@ --- title: User experience +sidenav: ai description: > How the user will experience the AI Toolkit in your app. prev: diff --git a/src/content/ai/best-practices/developer-experience.md b/src/content/ai/best-practices/developer-experience.md index 647ead4a346..b85d2987bc2 100644 --- a/src/content/ai/best-practices/developer-experience.md +++ b/src/content/ai/best-practices/developer-experience.md @@ -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. diff --git a/src/content/ai/best-practices/index.md b/src/content/ai/best-practices/index.md index b91032631d1..96666921efe 100644 --- a/src/content/ai/best-practices/index.md +++ b/src/content/ai/best-practices/index.md @@ -1,5 +1,6 @@ --- title: Flutter AI best practices +sidenav: ai shortTitle: AI best practices breadcrumb: Best practices description: > diff --git a/src/content/ai/best-practices/mode-of-interaction.md b/src/content/ai/best-practices/mode-of-interaction.md index bde33836be0..a3e04461c0d 100644 --- a/src/content/ai/best-practices/mode-of-interaction.md +++ b/src/content/ai/best-practices/mode-of-interaction.md @@ -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. diff --git a/src/content/ai/best-practices/prompting.md b/src/content/ai/best-practices/prompting.md index afb3c6e6130..e77f8b102e2 100644 --- a/src/content/ai/best-practices/prompting.md +++ b/src/content/ai/best-practices/prompting.md @@ -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. diff --git a/src/content/ai/best-practices/structure-output.md b/src/content/ai/best-practices/structure-output.md index 10d9f12139c..d80bea60f0c 100644 --- a/src/content/ai/best-practices/structure-output.md +++ b/src/content/ai/best-practices/structure-output.md @@ -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. diff --git a/src/content/ai/best-practices/tool-calls.md b/src/content/ai/best-practices/tool-calls.md index 5d6758368bd..e7590b68cee 100644 --- a/src/content/ai/best-practices/tool-calls.md +++ b/src/content/ai/best-practices/tool-calls.md @@ -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 diff --git a/src/content/ai/coding-assistants.md b/src/content/ai/coding-assistants.md new file mode 100644 index 00000000000..bc96640e1fe --- /dev/null +++ b/src/content/ai/coding-assistants.md @@ -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. + + + + +## 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). diff --git a/src/content/ai/create-with-ai.md b/src/content/ai/create-with-ai.md index 78d172844f6..135444bbf96 100644 --- a/src/content/ai/create-with-ai.md +++ b/src/content/ai/create-with-ai.md @@ -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"> -[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,14 +110,13 @@ 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: @@ -124,10 +124,9 @@ environment. You can use it to: * 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 diff --git a/src/content/ai/gemini-cli-extension.md b/src/content/ai/gemini-cli-extension.md index b7880b9b6fe..c5823987112 100644 --- a/src/content/ai/gemini-cli-extension.md +++ b/src/content/ai/gemini-cli-extension.md @@ -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 diff --git a/src/content/ai/genui/components.md b/src/content/ai/genui/components.md index 4d515f75659..fe403262e48 100644 --- a/src/content/ai/genui/components.md +++ b/src/content/ai/genui/components.md @@ -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 diff --git a/src/content/ai/genui/get-started.md b/src/content/ai/genui/get-started.md index e5b20ff23b7..e3bae1af87b 100644 --- a/src/content/ai/genui/get-started.md +++ b/src/content/ai/genui/get-started.md @@ -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: >- diff --git a/src/content/ai/genui/index.md b/src/content/ai/genui/index.md index 13995dde0bd..e704773a6c3 100644 --- a/src/content/ai/genui/index.md +++ b/src/content/ai/genui/index.md @@ -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 diff --git a/src/content/ai/genui/input-events.md b/src/content/ai/genui/input-events.md index 49d4cf6fb7d..2dc7dfb7baa 100644 --- a/src/content/ai/genui/input-events.md +++ b/src/content/ai/genui/input-events.md @@ -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 diff --git a/src/content/ai/index.md b/src/content/ai/index.md index 059b982053a..3ae9d43d80f 100644 --- a/src/content/ai/index.md +++ b/src/content/ai/index.md @@ -1,5 +1,6 @@ --- title: Flutter & AI +sidenav: ai shortTitle: AI layout: toc description: >- diff --git a/src/content/ai/mcp-server.md b/src/content/ai/mcp-server.md index b0ce7a3029a..7495483c8ef 100644 --- a/src/content/ai/mcp-server.md +++ b/src/content/ai/mcp-server.md @@ -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 diff --git a/src/data/ai.yml b/src/data/ai.yml new file mode 100644 index 00000000000..accf21c71a4 --- /dev/null +++ b/src/data/ai.yml @@ -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