diff --git a/sites/docs/firebase.json b/sites/docs/firebase.json index 4bcb70d2ef..85f355f471 100644 --- a/sites/docs/firebase.json +++ b/sites/docs/firebase.json @@ -35,12 +35,29 @@ { "source": "/ai-best-practices/:rest*", "destination": "/ai/best-practices/:rest*", "type": 301 }, { "source": "/ai-toolkit", "destination": "/ai/ai-toolkit", "type": 301 }, { "source": "/ai-toolkit/:rest*", "destination": "/ai/ai-toolkit/:rest*", "type": 301 }, - { "source": "/ai/flutter-ext-for-gemini", "destination": "/ai/antigravity-cli", "type": 301 }, - { "source": "/ai/gemini-cli-extension", "destination": "/ai/antigravity-cli", "type": 301 }, + { "source": "/ai/flutter-ext-for-gemini", "destination": "/ai/get-started", "type": 301 }, + { "source": "/ai/gemini-cli-extension", "destination": "/ai/get-started", "type": 301 }, { "source": "/ai/best-practices/tool-calls-aka-function-calls", "destination": "/ai/best-practices/tool-calls", "type": 301 }, - { "source": "/tools/antigravity", "destination": "/ai/antigravity", "type": 301 }, - { "source": "/ai/gemini-code-assist", "destination": "/ai/coding-assistants", "type": 301 }, + { "source": "/tools/antigravity", "destination": "/ai/get-started", "type": 301 }, + { "source": "/ai/gemini-code-assist", "destination": "/ai/get-started", "type": 301 }, { "source": "/ai/firebase-ai-logic", "destination": "https://firebase.google.com/docs/ai-logic/get-started?platform=flutter", "type": 301 }, + { "source": "/ai/create-with-ai", "destination": "/ai/get-started", "type": 301 }, + { "source": "/ai/create-with-ai/:rest*", "destination": "/ai/get-started", "type": 301 }, + { "source": "/ai/coding-assistants", "destination": "/ai/get-started", "type": 301 }, + { "source": "/ai/coding-assistants/:rest*", "destination": "/ai/get-started", "type": 301 }, + { "source": "/ai/antigravity", "destination": "/ai/get-started", "type": 301 }, + { "source": "/ai/antigravity/:rest*", "destination": "/ai/get-started", "type": 301 }, + { "source": "/ai/antigravity-cli", "destination": "/ai/get-started", "type": 301 }, + { "source": "/ai/antigravity-cli/:rest*", "destination": "/ai/get-started", "type": 301 }, + { "source": "/ai/agent-skills", "destination": "/ai/get-started", "type": 301 }, + { "source": "/ai/agent-skills/:rest*", "destination": "/ai/get-started", "type": 301 }, + { "source": "/ai/mcp-server", "destination": "/ai/get-started", "type": 301 }, + { "source": "/ai/mcp-server/:rest*", "destination": "/ai/get-started", "type": 301 }, + { "source": "/ai/ai-rules", "destination": "/ai/get-started", "type": 301 }, + { "source": "/ai/ai-rules/:rest*", "destination": "/ai/get-started", "type": 301 }, + { "source": "/ai/best-practices/developer-experience", "destination": "/ai/get-started", "type": 301 }, + { "source": "/ai/evals", "destination": "/ai/tools", "type": 301 }, + { "source": "/ai/evals/:rest*", "destination": "/ai/tools", "type": 301 }, { "source": "/android-release", "destination": "/deployment/android", "type": 301 }, { "source": "/animations", "destination": "/ui/animations", "type": 301 }, { "source": "/animations/:rest*", "destination": "/ui/animations/:rest*", "type": 301 }, @@ -211,7 +228,7 @@ { "source": "/release/breaking-changes/win_lifecycle_process_function", "destination": "/release/breaking-changes/win-lifecycle-process-function", "type": 301 }, { "source": "/release/archive", "destination": "/install/archive", "type": 301 }, { "source": "/release/upgrade", "destination": "/install/upgrade", "type": 301 }, - { "source": "/resources/ai-overview", "destination": "/ai/create-with-ai", "type": 301 }, + { "source": "/resources/ai-overview", "destination": "/ai/get-started", "type": 301 }, { "source": "/resources/books", "destination": "/reference/learning-resources", "type": 301 }, { "source": "/resources/bootstrap-into-dart", "destination": "https://dart.dev/learn", "type": 301 }, { "source": "/resources/compatibility", "destination": "/release/compatibility-policy", "type": 301 }, diff --git a/sites/docs/src/content/ai/agent-skills.md b/sites/docs/src/content/ai/agent-skills.md deleted file mode 100644 index dd0dc4c9ea..0000000000 --- a/sites/docs/src/content/ai/agent-skills.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Agent skills for Flutter and Dart -shortTitle: Agent skills -description: >- - Learn how to give AI agents new capabilities and expertise - using agent skills. ---- - -This guide covers how to enhance your AI agents and coding assistants -with domain-specific capabilities using agent skills. - -## Overview - -AI agents can write Flutter and Dart code, but they sometimes are unaware of -tools and best practices that professional developers use. - -[Agent skills](https://agentskills.io/) help solve this problem by providing a -standardized way to give your AI agent a set of task-oriented blueprints to -follow. By giving the agent actual domain expertise and repeatable workflows, -you drastically reduce mistakes and can enforce consistent patterns. - - -Skills use what we call "progressive disclosure," which is similar to deferred -loading in Flutter. Instead of loading every single instruction into the context -window up front, the agent only reads the metadata first. It pulls in the heavy, -detailed instructions only when it actually needs them for the task at hand. - -## Official repositories - -The Dart and Flutter teams maintain official repositories packed with skills -tailored specifically for our frameworks. - -* **[dart-lang/skills](https://github.com/dart-lang/skills)**: Provides skills - for Dart development. Use these to generate unit tests, resolve package - dependencies, and fix static analysis errors. -* **[flutter/agent-plugins](https://github.com/flutter/agent-plugins)**: - Provides skills for Flutter development. - These skills help the AI build responsive layouts, - set up declarative routing, and implement JSON serialization. - -## Install agent skills - -The recommended way to install skills for your project is by following the -[Get started with AI](/ai/get-started) guide, which provides step-by-step -instructions on how to install the official Flutter and Dart agent plugins for -Claude Code, Codex, Antigravity, Cursor, and other tools. These plugins act as a -complete package, bundling agent skills with the configuration for the Dart and -Flutter MCP server. - -### Universal agent installation - -By default, compatible AI agents discover agent skills within the -`.agents/skills` directory of your project workspace. - -To download and manage skills in that folder, you can use the `skills` CLI tool. -It's distributed through npm, so you need [Node.js](https://nodejs.org/) -installed to run it with `npx`. - -To install the official Flutter skills: - -```bash -npx skills add flutter/agent-plugins --skill '*' --agent universal --yes -``` - -And to install the official Dart skills: - -```bash -npx skills add dart-lang/skills --skill '*' --agent universal --yes -``` - -Running these commands automatically creates the `.agents/skills` -directory and downloads the requested skills into your project. - -## Manage and verify agent skills - -For more details on available skills, updating, and contributing, see the -[Dart skills repository](https://github.com/dart-lang/skills) and the -[Flutter agent-plugins repository](https://github.com/flutter/agent-plugins). - -:::tip -Once you've added skills to your project, try asking your AI agent to review -your installed skills. You can ask, "Which of my installed skills -can help me with [your current task]?" or "Summarize the capabilities of the -skills I have available." -::: diff --git a/sites/docs/src/content/ai/ai-rules.md b/sites/docs/src/content/ai/ai-rules.md deleted file mode 100644 index b99bd25de1..0000000000 --- a/sites/docs/src/content/ai/ai-rules.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: AI rules -shortTitle: AI rules -description: >- - Learn how to add AI rules to tools that accelerate your - development workflow. ---- - -This guide covers how you can leverage AI rules to -streamline your Flutter and Dart development. - -:::note Agent skills -While rules configure the default behavior for all tasks, -you can use [Agent skills](/ai/agent-skills) to give the AI specific tools -and instructions for discrete tasks. -::: - -## Overview - -AI-powered editors use rules files to provide context and -instructions to an underlying LLM. These files help you: - -* Customize AI behavior to your team's needs. -* Enforce project best practices for code style and - design. -* Provide critical project context to the AI. - -The Flutter project provides several versions of the rules file to accommodate -different tool limits: - -* [`rules.md`](https://raw.githubusercontent.com/flutter/flutter/refs/heads/main/docs/rules/rules.md): - The comprehensive master rule set. -* [`rules_10k.md`](https://raw.githubusercontent.com/flutter/flutter/refs/heads/main/docs/rules/rules_10k.md): - A condensed version (<10k chars) for tools with stricter context limits. -* [`rules_4k.md`](https://raw.githubusercontent.com/flutter/flutter/refs/heads/main/docs/rules/rules_4k.md): - A highly concise version (<4k chars) for limited contexts. -* [`rules_1k.md`](https://raw.githubusercontent.com/flutter/flutter/refs/heads/main/docs/rules/rules_1k.md): - An ultra-compact version (<1k chars) for very strict limits. - - - - Download the Flutter and Dart rules template - - -## Device and editor specific limits - -Different AI coding assistants and tools have varying limits for their "rules" -or "custom instructions" files. *Last updated: 2026-01-05.* - -| Tool / Product | Rules file / Feature | Limit (soft / hard) | Documentation | -|:---|:---|:---|:---| -| Antigravity (Google) | `.agent/rules/.md` | 12,000 chars (Hard) | [Configure rules][antigravity] | -| Claude Code | `CLAUDE.md` | No Hard Limit | [Claude Code Docs](https://code.claude.com/docs/en/memory) | -| Cursor | `AGENTS.md` | No Hard Limit | [Cursor Docs](https://cursor.com/docs/context/rules) | -| Gemini CLI | `GEMINI.md` | 1M+ Tokens (Context) | [Gemini CLI Docs](https://cloud.google.com/vertex-ai/generative-ai/docs/long-context) | -| GitHub Copilot | `.github/copilot-instructions.md` | ~4k chars | [GitHub Copilot Docs](https://docs.github.com/en/copilot/customizing-copilot/adding-custom-instructions-for-github-copilot) | -| JetBrains AI (Junie) | `.junie/guidelines.md` | No Hard Limit | [JetBrains AI Docs](https://www.jetbrains.com/help/junie/get-started-with-junie.html) | -| VS Code | `.instructions.md` | Unknown | [Configure instructions][vs-code] | - -{:.table .table-striped} - -:::note Support is evolving -Support for rules files is still evolving. -Please check the documentation for your specific development environment for -the most up-to-date naming conventions and instructions. -::: - -[copilot]: https://code.visualstudio.com/docs/copilot/customization/custom-instructions#_use-a-githubcopilotinstructionsmd-file -[claude]: https://www.anthropic.com/engineering/claude-code-best-practices#1-customize-your-setup -[cursor]: https://cursor.com/docs/context/rules -[firebase]: https://firebase.google.com/docs/studio/set-up-gemini#custom-instructions -[gemini-cli]: https://geminicli.com/docs/cli/gemini-md -[antigravity]: https://antigravity.google/docs/rules-workflows -[junie]: https://www.jetbrains.com/help/junie/customize-guidelines.html -[vs-code]: https://code.visualstudio.com/docs/copilot/customization/custom-instructions#_use-instructionsmd-files -[windsurf]: https://docs.windsurf.com/windsurf/cascade/memories#rules - -## Create rules for your editor - -You can adapt our Flutter and Dart rules template for your -specific environment. To do so, follow these steps: - -1. Download the Flutter and Dart rules template: - rules.md - -1. In an LLM like [Gemini][], attach the - `rules.md` file that you downloaded in - the last step. - -1. Provide a prompt to reformat the file for your desired - editor. - - Example prompt: - - ```text - Convert the attached rules.md file - into a guidelines.md file for Gemini CLI. Make sure - to use the styles required for a guidelines.md file. - ``` - -1. Review the LLM's output and make any necessary - adjustments. - -1. Follow your environment's instructions to add the new - rules file. This may involve adding to an existing file - or creating a new one. - -1. Verify that your AI assistant is using the new rules to - guide its responses. - -[Gemini]: https://gemini.google.com/ diff --git a/sites/docs/src/content/ai/antigravity-cli.md b/sites/docs/src/content/ai/antigravity-cli.md deleted file mode 100644 index a4c6fa31a7..0000000000 --- a/sites/docs/src/content/ai/antigravity-cli.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Antigravity CLI -shortTitle: CLI -description: Learn how to use the Antigravity CLI for Dart and Flutter. ---- - -## Introduction - -[Antigravity CLI][] (using the executable command `agy`) -is a terminal-based interface (TUI) -for the **Antigravity 2.0** agentic coding assistant. -It connects directly to your workspace -and leverages the **Dart and Flutter MCP server** -to help you build, modify, test, and release Flutter applications -from the command line. - -The Antigravity CLI replaces the legacy Gemini CLI. - -[Antigravity CLI]: https://antigravity.google/docs/cli - -## Installation - -Install the Antigravity CLI on your machine by running the -appropriate command for your platform: - - - - -```bash -curl -fsSL https://antigravity.google/install.sh | bash -``` - - - - -```powershell -irm https://antigravity.google/install.ps1 | iex -``` - - - - -```cmd -winget install Google.AntigravityCLI -``` - - - - -After installation, verify that the tool is available on your path by running: - -```console -$ agy --version -agy version 2.0.0 -``` - -## Migration from Gemini CLI - -If you previously used the Gemini CLI or Gemini CLI extension for Flutter, -migrating to the Antigravity CLI is straightforward. - -### Automatic migration - -The first time you run `agy` in your terminal, -the tool checks for existing Gemini configuration files -(such as `~/.gemini/config/mcp_config.json` -or legacy environment variables). -If found, the tool asks if you would like to -automatically migrate your settings, -preferences, and API configuration. - -### Manual migration - -If you want to migrate your plugins and history manually, -or if you skipped the automated setup, -run the import plugin tool command: - -```bash -agy plugin import gemini -``` - -This command parses your local Gemini configuration -and copies its configurations over to your active Antigravity profile. - -## Workspace configuration and rules - -Like the legacy Gemini CLI tool, -Antigravity CLI respects custom development guidelines -and configurations stored in your workspace directory: - -- **Local rules**: You can place rules files in your project directory - (such as `.agents/skills/` or `AGENTS.md`) - to instruct the agent on specific coding style guidelines - or architectural patterns. - Note that Antigravity CLI also supports backward compatibility - with the legacy `GEMINI.md` file; - however, we recommend renaming it to `AGENTS.md`. -- **Global configuration**: Antigravity CLI stores global settings - and configured MCP servers in `~/.antigravity/` - (e.g., `~/.antigravity/mcp_config.json`). diff --git a/sites/docs/src/content/ai/antigravity.md b/sites/docs/src/content/ai/antigravity.md deleted file mode 100644 index cb1935a616..0000000000 --- a/sites/docs/src/content/ai/antigravity.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Google Antigravity -shortTitle: Antigravity -description: Learn about Google Antigravity agentic coding tools. ---- - -## Introduction - -Google Antigravity is a suite of agentic development tools -for building apps, including Flutter apps. -You can pair with Antigravity to solve coding tasks, -create new codebases, modify existing ones, -and answer questions. - -The Antigravity suite includes: - -* **Antigravity 2.0**: The core agentic assistant experience, - driven via a Terminal User Interface (TUI) - or Command-Line Interface (CLI). -* **Antigravity IDE**: The focused editor experience - featuring an integrated agent panel. - -This page describes the Antigravity IDE. -For details on using the command-line tool, -see the [Antigravity CLI](/ai/antigravity-cli) page. - - -To learn some of what Antigravity is capable of, -watch this talk from Google I/O 2026. - - - -## Installation and setup {: #setup} - -Install the latest version of Antigravity for your platform by visiting -the [Antigravity site](https://antigravity.google/download). - - 1.

Open Antigravity

- - When opening Antigravity for the first time, - a **How do you want to use Antigravity** screen displays and - provides some radio buttons and pulldown menus - for customizing your use of the tool. - - We recommend that you select **Review-driven development**. - This means that Antigravity asks you to approve each command - that it wants to run. - - You can change this setting at any time to give Antigravity - more or less control. Even if you select **Agent driven development**, - which allows Antigravity to directly run commands without approval, - you can specify certain commands that will _always_ ask - for your approval, such as the `rm` command to remove files. - - 1.

Install the Dart and Flutter extensions

- - 1. Open **Settings** (press Cmd/Ctrl + ,). - 1. Click the **Customizations** tab. - 1. In the **Build with Google Plugins** section, click **Customize**. - 1. Click **Download** next to the **Dart and Flutter** integration. - - 1.

Set up any MCP servers that you use

- - 1. Navigate to or open the **Agent** side panel. - - If it's closed, open it by either: - - * Pressing Cmd/Ctrl + L. - * Going to **View** - > **Open View...** - > **Agent**. - - In the upper right of the **Agent** panel, - click the **Additional options** (`...`) menu button. - - 1. Select **MCP Servers**. - - 1. In the upper right of the **Agent** panel, - click **Manage MCP Servers**. - - The **MCP Store** screen appears and you can search for Dart, - which is likely already in the list. - Click **Install**. - - After installing any servers that you want, - view them by clicking the **Manage MCP Servers** button - and click **View raw config** to access your JSON manifest. - - 1.

Get started developing

- - For these tips and more that show some of Antigravity's benefits, - watch the following 10-minute [Flutter + Antigravity video][ag-video]: - - - - For a walkthrough on creating a new Flutter app in Antigravity, - visit [Create a new Flutter app][]. - To learn more about the development features enabled by - the Dart and Flutter extensions, - check out [How to develop Flutter apps in VS Code][vs-code]. - -{:.steps} - -## Agentic Hot Reload {: #agentic-hot-reload} - -If you are using Antigravity in Agent mode, -the agent can automatically hot reload your running application -when you prompt it to modify your app. -This enables a hands-free, "prompt-to-reload" workflow -that reduces context switching and development latency. - -[ag-video]: {{site.yt.watch}}?v=YY2w2JEX2xk&t=1s -[Create a new Flutter app]: /reference/create-new-app#antigravity -[vs-code]: /tools/vs-code diff --git a/sites/docs/src/content/ai/best-practices/developer-experience.md b/sites/docs/src/content/ai/best-practices/developer-experience.md deleted file mode 100644 index 7cea121968..0000000000 --- a/sites/docs/src/content/ai/best-practices/developer-experience.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: Developer experience -description: > - Learn how to use spec-driven development and Gemini to plan, code, and - iterate on high-quality Flutter applications. -prev: - title: Mode of interaction - path: /ai/best-practices/mode-of-interaction ---- - - -Generative AI is not just useful for implementing features in your app; it's -also useful for generating the code to implement those features. - -Unfortunately, it's just as easy as prompting an AI coding agent to "build a -Flutter app that solves crossword puzzles." I'm sure that prompt would yield -something, but I doubt very much that it would give us the powerful AI-assisted, -user-validated combination the Crossword Companion provides. - -With better prompting, however, the sample app was implemented with Gemini 2.5 -Pro for the bulk of the functionality and Gemini 3 Pro Preview to add the final -touches. The process to get the best results from both models was the same: - -- Plan -- Code -- Validate -- Iterate - -### Plan - -The goal of the planning process is to kick off the coding process with enough -detail to let the agent know what you have in mind. The Crossword Companion -planning process was started with the following prompt: - -```plaintext -I'd like to create a file called requirements.md in the plans folder at the root of the project. here's a description of the project: - -The application will be an open-source sample hosted on GitHub in the flutter/demos directory. It aims to demonstrate the use of Flutter, Firebase AI Logic, and Gemini to produce an agentic workflow that can solve a small crossword puzzle (one with a size under 10x10)....lots more description of the app along with a sample puzzle screenshot... -Ask any questions you may have before you get started. -``` - -This prompt, with a little bit of Q&A, manual edits by a human, and some updates -during the coding process, yielded [the requirements file][requirements]. - -Before jumping into architectural design, the Gemini CLI was asked to initialize -the GEMINI.md rules file and then to update it with a list of architectural -principles: - -```plaintext -DRY (Don't Repeat Yourself) – eliminate duplicated logic by extracting shared utilities and modules. - -Separation of Concerns – each module should handle one distinct responsibility. - -Single Responsibility Principle (SRP) – every class/module/function/file should have exactly one reason to change. - -Clear Abstractions & Contracts – expose intent through small, stable interfaces and hide implementation details. - -Low Coupling, High Cohesion – keep modules self-contained, minimize cross-dependencies. - -Scalability & Statelessness – design components to scale horizontally and prefer stateless services when possible. - -Observability & Testability – build in logging, metrics, tracing, and ensure components can be unit/integration tested. - -KISS (Keep It Simple, Sir) - keep solutions as simple as possible. - -YAGNI (You're Not Gonna Need It) – avoid speculative complexity or over-engineering. -``` - -The GEMINI.md file is loaded into every new prompt you create with Gemini; it -provides the set of rules you want it to remember for any activity. Gemini was -running inside of an empty Flutter app project, so the `/init` command -documented how to build, test and run it, which was useful during coding. - -If you're building something more than a sample, I also recommend adding -something for test-driven development: - -```markdown -- **TDD (Test-Driven Development)** - write the tests first; the implementation - code isn't done until the tests pass. -``` - -This helps to build guardrails to ensure the coding agent is writing solid code -over time. - -With the requirements and rules in place, prompting for the design.md file was -next: - -```plaintext -great. i'd like to work on the design with you to be created in a design.md file to be stored in the plans folder. please use the @GEMINI.md and @requirements.md files as input. ask any questions you may have before you get started. -``` - -After inspecting and editing the generated app design, Gemini was prompted to -break it down into [tasks][tasks-spec]: - -```plaintext -please read the files in the @specs folder and create a corresponding tasks.md file in the same folder that lays out a set of tasks and subtasks representing the functionality of this app. lay out the top-level tasks as minimal new functionality that the user can see in the running app, step-by-step as each top-level task is completed. each top-level task should include sub-tasks for creating and running tests and updating the @README.md with a description of the current functionality of the app. ask any questions you may have before you get started. -``` - -All of this happens before any code is written. You don't have to split things -into separate files, but by carefully considering the requirements, the design -and the task breakdown, you're helping the agent to provide results that meet -your expectations. This is called "Spec-Driven Development" and it's currently -the best way we know of to upgrade your process from "vibe coding" to -"AI-assisted software development." - -Also, the sentence that says "ask any questions you may have before you get -started" is a great way for the agent to clarify anything that it doesn't -understand instead of just making up the answers as it goes. It's also useful to -help you to decide on details you might not otherwise have considered. - -### Code - -With the requirements, rules, design and tasks in place, kicking off the coding -part is easy: - -```plaintext -Read the @tasks.md file and implement the first milestone. -``` - -You can watch the coding agent at work, jumping in to correct it as it works, or -just let it go. Either way, when it's done, it's time to check its work. - -### Validate - -At this point, you have some code and (in the world outside of samples) some -tests. To validate, ask yourself some questions: - -- Does the analyzer show it to be free of errors? Of warnings? -- Does the app run? -- Does it have the features you asked for? Do they work? -- Do the tests pass? -- Does the code pass your review? - -The answers to these questions are the input for the next phase. - -### Iterate - -Gather the issues that need to be addressed and hand the ones that need fixing -back to the coding agent, iterating between it coding and your validation until -you get to a good place from a functional point of view. - -Now take another pass through validation from an architectural principles point -of view, spinning up a new agent to check the code. By clearing out the agent's -context, you remove the biases the original agent gathered choosing what code to -write in the first place. To ground it on just the code changes the agent has -just made, use a prompt like this: - -```plaintext -Use git diff to find the new code and check it against the architectural principles listed here: @GEMINI.md. Make recommendations for important improvements. -``` - -Doing this a few times keeps the code in good shape for AI agents and humans -alike. - - -[requirements]: {{site.repo.demos}}/blob/main/crossword_companion/specs/requirements.md -[tasks-spec]: {{site.repo.demos}}/blob/main/crossword_companion/specs/tasks.md diff --git a/sites/docs/src/content/ai/coding-assistants.md b/sites/docs/src/content/ai/coding-assistants.md deleted file mode 100644 index 6456cd145d..0000000000 --- a/sites/docs/src/content/ai/coding-assistants.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: AI coding assistants -description: > - Learn how to use AI-powered coding assistants like Antigravity - to accelerate your Flutter development. ---- - -AI tools are not only features in your app, -but can also be powerful assistants in your development workflow. - -To set up your preferred AI coding agent with official Flutter plugins, -skills, and rules, check out the [Get started with AI](/ai/get-started) guide. - -Tools like Antigravity can help you write code faster, -understand complex concepts, and reduce boilerplate. - -## Antigravity - -[Antigravity](https://antigravity.google/) is a suite of agentic development tools that includes: - -* **Antigravity 2.0**: The core agentic assistant experience (TUI/CLI-driven). -* **Antigravity IDE**: The focused editor experience featuring an integrated agent panel. - -Some of Antigravity's 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. - -To get started with the editor experience, see the [Antigravity IDE](/ai/antigravity) page. -To get started with the command-line tool, see the [Antigravity CLI](/ai/antigravity-cli) page. - -## Gemini Code Assist - -[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: - -* **Code completion and generation**: It suggests and generates entire blocks of - code based on the context of what you're writing. -* **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. - -## Gemini CLI (Legacy) - -The [Gemini CLI](https://geminicli.com/) is a command-line AI workflow tool. -For individual developers, it is superseded by the new [Antigravity CLI](/ai/antigravity-cli). -It continues to be supported for Gemini Enterprise users. - -For more details about Gemini CLI, visit the [Gemini CLI](https://geminicli.com/) website. - -## Claude Code - -[Claude Code](https://code.claude.com/) is an agentic coding assistant from -Anthropic that runs in your terminal. - -You can equip Claude Code with domain expertise and tools for Flutter and Dart -by installing the official Flutter plugin, which bundles official -[agent skills](/ai/agent-skills) and the -[Dart and Flutter MCP server](/ai/mcp-server). - -To install the plugin, follow the Claude Code instructions in -[Install agent skills](/ai/agent-skills#install-agent-skills). diff --git a/sites/docs/src/content/ai/create-with-ai.md b/sites/docs/src/content/ai/create-with-ai.md deleted file mode 100644 index 90eef4f9f3..0000000000 --- a/sites/docs/src/content/ai/create-with-ai.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Create with AI -description: > - Learn how to use AI to build Flutter apps, and how to build AI experiences - into your apps. ---- - -Use artificial intelligence to accelerate your Flutter development workflow and build intelligent, AI-powered features into your applications. - -## Develop with AI - -Configure your development environment with official Flutter and Dart plugins, rules, and tools. - -
- - Set up your editor with official plugins, rules, and MCP configuration. - - - Learn about supported AI editors, IDEs, and CLI tools. - - - Enhance your AI assistant with domain-specific task blueprints. - - - Connect your AI to Dart and Flutter developer tools. - - - Configure project-wide guidelines and best practices for models. - -
- -## Build AI-powered apps - -Integrate generative AI features directly into your Flutter applications. - -
- - Use pre-built chat widgets and feature integrations. - - - Orchestrate interactive conversational UIs in your app. - - - Use Firebase to integrate Gemini and Vertex AI features. - - - Build and debug AI flows with an open-source framework. - - - Learn about prompting, tool calls, and interaction modes. - -
- -## AI evaluations - -Measure the reliability and performance of your AI integrations. - -
- - Learn how we use benchmarks and datasets to test and improve AI tooling. - -
diff --git a/sites/docs/src/content/ai/evals.md b/sites/docs/src/content/ai/evals.md deleted file mode 100644 index b1d6b8b2d1..0000000000 --- a/sites/docs/src/content/ai/evals.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: AI evaluations -description: > - Learn about Dart and Flutter's evaluation frameworks for - measuring AI tooling reliability. ---- - -:::experimental -Evaluation tooling and benchmarks are experimental and likely to change. -::: - -To explore the evaluation strategy, -view the open-source dataset and scoring rubrics, -or get involved with community benchmark datasets, -visit the [Flutter Evals repository](https://github.com/flutter/evals). - -Evaluating the capabilities and reliability of AI agents requires testing -approaches that model actual developer tasks. -Because LLMs are non-deterministic, -standard unit testing is insufficient for verifying agentic behaviors like -codebase navigation, plan execution, and code synthesis. - -To build developer confidence in AI tooling, -Dart and Flutter use an evaluation system ("evals") -to test critical user journeys (CUJs). -Evals measure both deterministic code correctness -(compilation, lints, automated tests) and qualitative performance -(reasoning, safety, and conciseness) using automated model judges -and expert human grading. diff --git a/sites/docs/src/content/ai/get-started.md b/sites/docs/src/content/ai/get-started.md index fc4a6d8bf9..c618114f1f 100644 --- a/sites/docs/src/content/ai/get-started.md +++ b/sites/docs/src/content/ai/get-started.md @@ -2,40 +2,113 @@ title: Get started developing with AI shortTitle: Get started description: >- - Learn how to set up and use AI agent plugins for Flutter and Dart using - your preferred coding assistant. + Learn how to set up and use AI agent plugins for Flutter and Dart + using your preferred coding assistant. --- AI coding assistants can accelerate your Flutter development workflow by writing code, fixing errors, and building complete features. -To get the best experience with AI coding assistants, install the official -Flutter agent plugins, which bundle [agent skills](/ai/agent-skills) and -configuration for the [Dart and Flutter MCP server](/ai/mcp-server). +By default, general-purpose AI assistants might not have the latest context on +Flutter patterns, project diagnostics, or third-party packages. Installing the +official Flutter agent plugin equips your assistant with dedicated tools and +recipes tailored for Flutter and Dart development. + +## How Flutter AI plugins work + +An **agent plugin** bundles the tools and knowledge that an AI assistant needs +to understand and modify your Flutter codebase. + +When you install an official Flutter agent plugin, it connects your assistant +to two core capabilities: + +* **[Agent skills](/ai/tools#agent-skills)**: On-demand procedural guides from + the official Flutter and Dart repositories that teach the assistant how to + perform specific tasks, such as creating responsive layouts, managing state, + or writing widget tests. +* **[Dart and Flutter MCP server](/ai/tools#dart-and-flutter-mcp-server)**: + A Model Context Protocol (MCP) server that connects the assistant to the + Dart SDK, giving it real-time access to analyzer diagnostics, symbol + resolution, test runners, and runtime inspection. + +These tools work together automatically: the assistant uses MCP tools to query +live project state and static analysis, while using agent skills to guide its +coding strategies and best practices. + +In addition to core Flutter plugins, you can also equip your assistant with +skills that are shipped directly by third-party `pub.dev` +packages using the [skills](/ai/package-skills) package. + +To learn more about the underlying architecture and capabilities of each tool, +check out [How Flutter AI tools work](/ai/tools). ## Choose your AI coding agent -Select your agent below for instructions on how to install official plugins and -set up rules for Flutter development. +Select your agent below for instructions on how to install official plugins +and configure tools for Flutter development. -[Antigravity](https://antigravity.google/) is a suite of agentic development -tools built by Google that includes the Antigravity IDE and Antigravity CLI. +[Antigravity]( +https://antigravity.google/docs/build-with-google/#dart-and-flutter) +is an agentic development platform by Google that includes the Antigravity +IDE, IDE extensions (for VS Code and other editors), and the Antigravity CLI. -**Install the official plugin** +**Antigravity IDE and extensions** -Equip Antigravity with official Dart and Flutter tools -by installing the plugin from settings: +Equip the Antigravity IDE or Antigravity extension (such as in VS Code) +with official Dart and Flutter tools: -1. Open **Settings** in Antigravity by clicking the gear icon - or pressing Cmd/Ctrl + ,. +1. Open **Settings** in Antigravity by clicking the gear icon or pressing + Cmd/Ctrl + ,. 1. Click the **Customizations** tab. 1. In the **Build with Google Plugins** section, click **Customize**. 1. Click **Download** next to the **Dart and Flutter** integration. +To verify the installation, open the **Agent** panel +(Cmd/Ctrl + L) and ask the agent: + +```text +Summarize the Dart and Flutter tools and skills available in this project. +``` + +**Antigravity CLI** + +The Antigravity CLI runs as the `agy` command in your terminal. + +1. Configure the Dart and Flutter MCP server in your project's + `.agents/mcp_config.json` file (or globally in + `~/.gemini/config/mcp_config.json`): + + ```json + { + "mcpServers": { + "dart": { + "command": "dart", + "args": ["mcp-server"] + } + } + } + ``` + +1. Install official Flutter and Dart skills into your workspace: + + ```bash + # Install Flutter skills + npx skills add flutter/agent-plugins --skill '*' --agent universal --yes + + # Install Dart skills + npx skills add dart-lang/skills --skill '*' --agent universal --yes + ``` + +1. Start an interactive session in your project root: + + ```bash + agy + ``` + @@ -45,39 +118,62 @@ Anthropic that runs in your terminal. **Install the official plugin** -Equip Claude Code with domain expertise and tools for Flutter and Dart by -installing the official plugin from -[flutter/agent-plugins](https://github.com/flutter/agent-plugins): +Equip Claude Code with official Flutter and Dart skills and MCP configuration: 1. Add the marketplace for Claude Code plugins: - ```console - $ claude plugin marketplace add flutter/agent-plugins + ```bash + claude plugin marketplace add flutter/agent-plugins ``` 1. Install the Flutter and Dart plugin: - ```console - $ claude plugin install dart-flutter@dart-flutter + ```bash + claude plugin install dart-flutter@dart-flutter ``` -1. Verify the installation: +**Verify installation** - ```console - $ claude plugin marketplace list +Verify that the plugin is active in Claude Code: + +```bash +claude plugin marketplace list +``` + + + + + +[Cursor](https://cursor.com/) is an AI-powered code editor built on top of +VS Code. + +**Install the local plugin** + +You can install the official plugin bundle locally by copying it to your Cursor +plugins directory: + +1. Clone the repository: + + ```bash + git clone https://github.com/flutter/agent-plugins.git ``` -**Rules setup** +1. Copy the repository to your local Cursor plugins folder: -Claude Code plugins currently cannot bundle rules files automatically. -You can configure rules for your project by following [Rules for Flutter and Dart](/ai/ai-rules). + ```bash + mkdir -p ~/.cursor/plugins/local + cp -r agent-plugins ~/.cursor/plugins/local/dart-flutter + ``` + +1. Restart Cursor. The editor automatically discovers the bundled skills and + configures the Dart and Flutter MCP server. -[Codex](https://chatgpt.com/codex) is an agentic coding assistant -designed for terminal and IDE workflows. +[Codex](https://chatgpt.com/codex) is an agentic coding assistant designed for +terminal and IDE workflows. **Install the official plugin** @@ -85,79 +181,113 @@ Equip Codex with official Flutter and Dart skills and MCP configuration: 1. Add the Dart and Flutter marketplace for Codex plugins: - ```console - $ codex plugin marketplace add flutter/agent-plugins + ```bash + codex plugin marketplace add flutter/agent-plugins ``` 1. Install the Dart and Flutter plugin: - ```console - $ codex plugin add dart-flutter@dart-flutter + ```bash + codex plugin add dart-flutter@dart-flutter ``` -**Rules setup** +**Verify installation** -Codex plugins currently cannot bundle rules files automatically. -You can configure rules for your project by following [Rules for Flutter and Dart](/ai/ai-rules). +Verify that the plugin is active in Codex: - +```bash +codex plugin list +``` - + -[Cursor](https://cursor.com/) is an AI-first code editor built on VS Code. + -**Install the local plugin** +[GitHub Copilot](https://github.com/features/copilot) in VS Code supports +agentic coding, tool calling via MCP, and custom workspace instructions. -You can install the plugin locally by copying it to your Cursor plugins directory: +**Configure the MCP server** +1. Ensure the **Model Context Protocol (MCP)** extension is enabled in VS Code. +1. Create or open `.vscode/mcp.json` in your workspace and add the Dart MCP + server: -1. Clone the repository: - ```bash - git clone https://github.com/flutter/agent-plugins.git + ```json + { + "servers": { + "dart": { + "command": "dart", + "args": ["mcp-server"] + } + } + } ``` -1. Copy the repository directory to your local Cursor plugins folder: - ```bash - mkdir -p ~/.cursor/plugins/local - cp -r agent-plugins ~/.cursor/plugins/local/dart-flutter - ``` +**Install agent skills** + +In your Flutter project root, install official skills using the universal flag: -1. Restart Cursor. The editor automatically discovers and loads the skills - under `skills/` and configures the MCP server defined in `.mcp.json`. +```bash +# Install Flutter skills +npx skills add flutter/agent-plugins --skill '*' --agent universal --yes + +# Install Dart skills +npx skills add dart-lang/skills --skill '*' --agent universal --yes +``` - + -If you're using another compatible agentic assistant: +If you're using another coding assistant (such as Windsurf, Zed, or Cline) +that supports the Model Context Protocol (MCP) or Agent Skills specification, +configure the tools manually. -* **MCP Server**: To connect your agent to Dart and Flutter developer tools, - see the [Dart and Flutter MCP server](/ai/mcp-server) setup guide. -* **Agent Skills**: To manually install agent skills into your project's - `.agents/skills` directory using the `skills` CLI tool, see - [Install agent skills](/ai/agent-skills#install-agent-skills). -* **Rules**: To configure rules and project best practices for your assistant, - see [Rules for Flutter and Dart](/ai/ai-rules). +**Configure the MCP server** - +Most MCP-compatible clients use a standard JSON configuration format. Add the +following entry to your client's MCP configuration file: - +```json +{ + "mcpServers": { + "dart": { + "command": "dart", + "args": ["mcp-server"] + } + } +} +``` + +For client-specific setup guides, command-line arguments, and troubleshooting, +check out the [Dart and Flutter MCP server repository]( +https://github.com/dart-lang/ai/tree/main/pkgs/dart_mcp_server). -## The AI tooling stack +**Install agent skills** -To get the most out of AI, it helps to understand how the different pieces work together: +Use the `skills` CLI to download skills into your workspace's standard +`.agents/skills` directory: -| Component | What it is | How it helps | -| :--- | :--- | :--- | -| **Plugins** | Packages MCP and Skills together for your editor. | **Start here.** Recommended for quick setup. | -| **MCP Server** | Connects the AI to Flutter developer tools (hot reload, widget tree). | Provides the raw machinery for advanced tools. | -| **Agent Skills** | Step-by-step blueprints for specific tasks. | Provides the professional know-how to operate tools. | -| **AI Rules** | General guidelines and best practices for your project. | Enforces consistent coding standards. | +```bash +# Install Flutter skills +npx skills add flutter/agent-plugins --skill '*' --agent universal --yes -{:.table .table-striped} +# Install Dart skills +npx skills add dart-lang/skills --skill '*' --agent universal --yes +``` + + + + ## Next steps -* Learn more about [Agent skills](/ai/agent-skills) and how agents use them. -* Explore the [Dart and Flutter MCP server](/ai/mcp-server) integration. -* Check out [Rules for Flutter and Dart](/ai/ai-rules) to customize model behavior. +* To learn more about how skills and tools interact, check out + [How Flutter AI tools work](/ai/tools). +* To publish or consume skills from dependencies, refer to + [Package skills](/ai/package-skills). +* To give your assistant search access to official Flutter and Dart + documentation, connect to the [Developer Knowledge MCP server]( + https://developers.google.com/knowledge/mcp). +* To explore the official plugins, check out the + [flutter/agent-plugins](https://github.com/flutter/agent-plugins) repository. diff --git a/sites/docs/src/content/ai/mcp-server.md b/sites/docs/src/content/ai/mcp-server.md deleted file mode 100644 index d0982613e5..0000000000 --- a/sites/docs/src/content/ai/mcp-server.md +++ /dev/null @@ -1,461 +0,0 @@ ---- -title: Dart and Flutter MCP server -shortTitle: MCP server -description: > - Learn about the Dart and Flutter MCP server tool that - exposes Dart and Flutter tools to compatible - AI-assistant clients and agents. ---- - -This guide discusses the Dart and Flutter MCP server. - -:::experimental -The Dart and Flutter MCP server is experimental and likely to evolve quickly. -The following instructions require Dart 3.9 or later. -::: - -## Overview - -The [Dart and Flutter MCP server][] -exposes Dart and Flutter development tool actions to -compatible AI-assistant clients. MCP (model context protocol) -is a protocol that enables communication between development tools -and AI assistants, allowing the assistants to understand the -context of the code and perform actions on behalf of the developer. - -The Dart and Flutter MCP server can work with any MCP client that -supports standard I/O (stdio) as the transport medium. -To access all the features of the Dart and Flutter MCP server, -an MCP client must support [Tools][] and [Resources][]. -For the best development experience with the Dart and Flutter MCP server, -an MCP client should also support [Roots][]. - -If you are using a client that claims it -supports roots but doesn't actually set them, -pass `--force-roots-fallback` flag to enable tools for managing the roots. - -The Dart and Flutter MCP server provides a growing list of tools that -grant AI assistants deep insights into your project. -Here is an overview of a few things it can do: - -* Analyze and fix errors in your project's code. -* Resolve symbols to elements to ensure their existence and - fetch documentation and signature information for them. -* Introspect and interact with your running application. -* Search the [pub.dev site]({{site.pub}}) for the best package for a use case. -* Manage package dependencies in your `pubspec.yaml` file. -* Run tests and analyze the results. -* Format code with the same formatter and config as - [`dart format`][] and the Dart analysis server. - -[Tools]: https://modelcontextprotocol.io/docs/concepts/tools -[Resources]: https://modelcontextprotocol.io/docs/concepts/resources -[Roots]: https://modelcontextprotocol.io/docs/concepts/roots -[Dart and Flutter MCP server]: https://github.com/dart-lang/ai/tree/main/pkgs/dart_mcp_server -[`dart format`]: {{site.dart-site}}/tools/dart-format - -## Set up your MCP client - -Run the server with the `dart mcp-server` command, -which must be configured in your preferred client. - -This section provides instructions for setting up the -Dart and Flutter MCP server with popular tools such as -Antigravity, Gemini CLI, Cursor, and GitHub Copilot. - -### Antigravity - -To configure Google [Antigravity][] to use the Dart and Flutter MCP server, -you can either install it from the list of available servers or -[connect it as a custom MCP server][antigravity-mcp]. - -1. Navigate to or open the **Agent** side panel. - - If it's closed, open it by either: - - - Pressing Cmd/Ctrl + L. - - Going to **View** - > **Open View...** - > **Agent**. - -1. In the upper right of the **Agent** panel, - click the **Additional options** (`...`) menu button. -1. Select **MCP Servers**. -1. In the upper right of the **Agent** panel, - click **Manage MCP Servers**. - -From here, you can choose to install the MCP server from -[the built-in MCP store](#antigravity-mcp-store-install) or by -[configuring it manually](#antigravity-mcp-manual-install). - -[Antigravity]: https://antigravity.google/ -[antigravity-mcp]: https://antigravity.google/docs/mcp#connecting-custom-mcp-servers - -#### Install from the MCP store {: #antigravity-mcp-store-install} - -1. In the list of available MCP servers, - find or search for **Dart** and click **Install**. - -#### Connect manually {: #antigravity-mcp-manual-install} - -1. In the upper right of the **Manage MCPs** editor view, - click **View raw config**. -1. Add the following `dart-mcp-server` entry to the `mcpServers` map: - - ```json title="mcp_config.json" highlightLines=3-10 - { - "mcpServers": { - "dart-mcp-server": { - "command": "dart", - "args": [ - "mcp-server" - ], - "env": {} - } - } - } - ``` - -#### Install extensions - -It is also recommended to install the Dart and Flutter extensions: - -1. Open the **Extensions** view by either: - - - Pressing Shift + - Cmd/Ctrl + - P. - - Going to **View** - > **Extensions**. - -1. In the **Search Extensions** input box, enter **Flutter**. -1. From the list of extensions, select **Flutter**. -1. In the **Extension: Flutter** view that opens, - click the **Install** button. - - This installs both the Dart and Flutter extensions. - -To learn more about the Dart and Flutter extensions, -check out [Develop Flutter apps in VS Code][]. - -[Develop Flutter apps in VS Code]: /tools/vs-code - -### Gemini CLI - -To configure the [Gemini CLI][] to use the Dart and Flutter MCP server, -add a Dart entry to the `mcpServers` section of the Gemini config. - -- To enable the server for all projects on your device, - edit the `~/.gemini/settings.json` file in your home directory. -- To enable the server for a specific project, - edit the `.gemini/settings.json` file in the project's root directory. - -```json title=".gemini/settings.json" -{ - "mcpServers": { - "dart": { - "command": "dart", - "args": [ - "mcp-server" - ] - } - } -} -``` - -For more information, check out the official Gemini CLI -documentation for [setting up MCP servers][]. - -[Gemini CLI]: https://geminicli.com/ -[setting up MCP servers]: https://geminicli.com/docs/tools/mcp-server/#how-to-set-up-your-mcp-server - -### Gemini Code Assist in VS Code - -[Gemini Code Assist][]'s [Agent mode][] integrates the -Gemini CLI to provide a powerful AI agent directly in your IDE. -If you haven't set up Gemini Code Assist or its agent mode yet, -follow its [Before you begin instructions][gca-setup] to get started. - -To configure Gemini Code Assist to use the Dart and Flutter MCP server, -follow the instructions to [configure the Gemini CLI][]. - -You can verify the MCP server has been configured -properly by typing `/mcp` in the chat window in Agent mode. - -For more information see the official Gemini Code Assist -documentation for [using agent mode][]. - -[gca-setup]: https://developers.google.com/gemini-code-assist/docs/use-agentic-chat-pair-programmer#before-you-begin -[Gemini Code Assist]: https://codeassist.google/ -[Agent mode]: https://developers.google.com/gemini-code-assist/docs/use-agentic-chat-pair-programmer -[configure the Gemini CLI]: #gemini-cli -[using agent mode]: https://developers.google.com/gemini-code-assist/docs/use-agentic-chat-pair-programmer#before-you-begin - -### GitHub Copilot in VS Code - -:::note -Support for the Dart and Flutter MCP server in VS Code requires -v3.116 or later of the [Dart Code extension][]. -::: - -By default, the Dart extension uses the -[VS Code MCP API][] to register the Dart and Flutter MCP server, as well -as a tool to provide the URI for the active Dart Tooling Daemon. - -Explicitly enable or disable the Dart and Flutter MCP server by -configuring the `dart.mcpServer` setting in your VS Code settings. - -To change this globally, update your user settings: - -1. In VS Code, click **View > Command Palette** and then - search for **Preferences: Open User Settings (JSON)**. - -1. Add the following setting: - - ```json - "dart.mcpServer": true - ``` - -If you'd like this setting to apply only to a specific workspace, -add the entry to your workspace settings: - -1. In VS Code, click **View > Command Palette** and then - search for **Preferences: Open Workspace Settings (JSON)**. - -1. Add the following setting: - - ```json - "dart.mcpServer": true - ``` - -For more information, see the official VS Code -documentation for [enabling MCP support][]. - -[Dart Code extension]: https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code -[VS Code MCP API]: https://code.visualstudio.com/api/extension-guides/mcp -[enabling MCP support]: https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_enable-mcp-support-in-vs-code - -### Cursor - -The easiest way to configure the Dart and Flutter MCP server with -Cursor is by clicking the **Add to Cursor** button: - -[![Add to Cursor](https://cursor.com/deeplink/mcp-install-dark.svg)](cursor://anysphere.cursor-deeplink/mcp/install?name=dart&config=eyJjb21tYW5kIjoiZGFydCBtY3Atc2VydmVyIn0%3D){:.light-mode-visible} -[![Add to Cursor](https://cursor.com/deeplink/mcp-install-light.svg)](cursor://anysphere.cursor-deeplink/mcp/install?name=dart&config=eyJjb21tYW5kIjoiZGFydCBtY3Atc2VydmVyIn0%3D){:.dark-mode-visible} - -Alternatively, you can configure the server manually: - -1. Go to **Cursor > Settings > Cursor Settings > Tools & Integrations**. -1. Click **Add Custom MCP** or **New MCP Server** - depending on whether you already have other MCP servers configured. -1. Edit the `.cursor/mcp.json` file in your local project - (configuration will only apply to this project) or - edit the global `~/.cursor/mcp.json` file in your home directory - (configuration will apply for all projects) to - configure the Dart and Flutter MCP server: - - ```json title=".cursor/mcp.json" - { - "mcpServers": { - "dart": { - "command": "dart", - "args": [ - "mcp-server" - ] - } - } - } - ``` - -For more information, see the official Cursor -documentation for [installing MCP servers][]. - -[installing MCP servers]: https://docs.cursor.com/context/model-context-protocol#installing-mcp-servers - -### OpenCode - -To configure [OpenCode][] to use the Dart and Flutter MCP server -for the current project, use the `opencode mcp add` CLI command: - -```console -$ opencode mcp add dart-mcp-server -- dart mcp-server -``` - -[OpenCode]: https://opencode.ai/ - -### Claude Code - -You can configure Claude Code to use the Dart and Flutter MCP server either -by installing the official plugin or by configuring the server manually. - -#### Install via plugin (recommended) - -The easiest way to set up the Dart and Flutter MCP server in Claude Code is to -install the official Flutter plugin, which bundles both the MCP server and -official [agent skills](/ai/agent-skills). - -To install the plugin, follow the Claude Code instructions in -[Install agent skills](/ai/agent-skills#install-agent-skills). - -#### Configure manually - -Alternatively, to configure Claude Code to use only the Dart and Flutter MCP -server for the current project, use the `claude mcp add` CLI command: - -```console -$ claude mcp add --transport stdio dart -- dart mcp-server -``` - -To learn more about configuring MCP servers in Claude Code, -check out their documentation on [Installing MCP servers][claude-install]. - -[claude-install]: https://code.claude.com/docs/en/mcp#installing-mcp-servers - -### Codex CLI - -To configure the Codex CLI to use the Dart and Flutter MCP server -for the current project, use the `codex mcp add` CLI command: - -```console -$ codex mcp add dart -- dart mcp-server --force-roots-fallback -``` - -To learn more about configuring MCP servers in the Codex CLI, -check out their documentation on [Connecting to MCP servers][codex-connect]. - -[codex-connect]: https://developers.openai.com/codex/mcp - -## Use your MCP client - -Once you've set up the Dart and Flutter MCP server with a client, -the Dart and Flutter MCP server enables the client to not only reason -about your project's context but also to take action with tools. - -The [Large Language Model (LLM)][LLM] decides which tools to use and when, -so you can focus on describing your goal in natural language. -Let's see this in action with a couple of examples using -GitHub Copilot's Agent mode in VS Code. - -[LLM]: https://developers.google.com/machine-learning/resources/intro-llms - -### Fix a runtime layout error in a Flutter app - -We've all been there: you build a beautiful UI, run the app, -and are greeted by the infamous yellow-and-black stripes of -a RenderFlex overflow error. -Instead of manually debugging the widget tree, you can now -ask your AI assistant for help with a prompt similar to the following: - -> Check for and fix static and runtime analysis issues. -> Check for and fix any layout issues. - -Behind the scenes, the AI agent uses the Dart and Flutter MCP server's tools to: - -* See the error: It uses a tool to get the current runtime errors - from the running application. -* Inspect the UI: It accesses the Flutter widget tree to understand - the layout that is causing the overflow. -* Apply a fix: Armed with this context, it applies a fix and - checks once more for any remaining errors. - -You can then keep or undo the code changes. - -### Add new functionality with package search - -Imagine you need to add a chart to your app. -Which package should you use? How do you add it and write the boilerplate? -The Dart and Flutter MCP server can streamline this entire process with -a prompt similar to the following: - -> Find a suitable package to add a line chart that -> maps the number of button presses over time. - -The AI agent now acts as a true assistant: - -* Find the right tool: It uses the `pub_dev_search` tool to - find popular and highly-rated charting libraries. -* Manage dependencies: After you confirm its choice, - such as [`package:fl_chart`][], - it uses a tool to add the package as a dependency. -* Generate the code: It generates the new widget code, - complete with boilerplate for a line chart that it places in the UI. - It even self-corrects syntax errors introduced during the process. - You can customize further from there. - -What used to be a multi-step process of research, -reading documentation, editing `pubspec.yaml`, and -writing the appropriate code in your app, -is now a single request. - -[`package:fl_chart`]: {{site.pub-pkg}}/fl_chart - -### Interact with a running app - -You can use the Dart and Flutter MCP server to drive a running -Flutter app from your AI assistant—take screenshots, tap buttons, -enter text, scroll, and hot reload. - -First, add the `flutter_driver` package: - -```console -$ flutter pub add "flutter_driver:{sdk: flutter}" -``` - -On mobile and desktop, gate `enableFlutterDriverExtension()` behind a -`--dart-define` flag in your app's `main()` so it stays out of -production builds: - -```dart -import 'package:flutter_driver/driver_extension.dart'; - -void main() { - if (const bool.fromEnvironment('ENABLE_FLUTTER_DRIVER')) { - enableFlutterDriverExtension(); - } - runApp(const MyApp()); -} -``` - -Launch your app with the flag turned on: - -```console -$ flutter run -d --dart-define=ENABLE_FLUTTER_DRIVER=true -``` - -:::warning -Enabling the Flutter Driver extension disables real keyboard input—typing -is dropped and the on-screen keyboard might not appear. To type manually, -use `enableFlutterDriverExtension(enableTextEntryEmulation: false)`, but -then the agent's `enterText` command stops working. -::: - -Then ask your assistant to connect: - -> Connect to my running Flutter app, take a screenshot, then tap "Sign In". - -The agent uses the `dtd` tool to discover the app and -`flutter_driver_command` to drive its UI. - -:::note -**Web**: the `flutter_driver` extension isn't supported on web builds, so -finder-based commands like screenshots and taps aren't available there. -Pair the Dart MCP server with a browser-driving MCP for those. Everything -that flows through DTD—widget tree, runtime errors, and hot reload—still -works in a normal `flutter run` web debug session. Prefer -`flutter run -d web-server` so the browser the agent drives is the one DTD -is connected to—with `-d chrome`, only the window Flutter spawned receives -hot reload patches. - -See the [setup guide][flutter-driver-guide] for the web-safe conditional -import, the `-d web-server` versus `-d chrome` modes, and common pitfalls. -::: - -[flutter-driver-guide]: https://github.com/dart-lang/ai/blob/main/pkgs/dart_mcp_server/README.md#connect-to-a-running-flutter-app - -## Provide feedback - -If you encounter any issues or have feedback about the -Dart and Flutter MCP server, file an issue on the -[`dart-lang/ai` issue tracker][ai-issues]. - -[ai-issues]: https://github.com/dart-lang/ai/issues diff --git a/sites/docs/src/content/ai/package-skills.md b/sites/docs/src/content/ai/package-skills.md new file mode 100644 index 0000000000..f0d0e9aa83 --- /dev/null +++ b/sites/docs/src/content/ai/package-skills.md @@ -0,0 +1,94 @@ +--- +title: Package skills +description: >- + Learn how to bundle and consume agent skills in Dart and Flutter packages. +--- + +Package skills allow library authors to distribute AI instructions alongside +their code on [pub.dev](https://pub.dev). When developers add your package to +their project, their AI coding assistant can discover and use your package's +official skills. + +## For app developers: Consuming package skills + +When you add a package that includes skills, your coding assistant can access +expert guidance tailored specifically to that library's APIs, patterns, and +code generation workflows. + +### Discover and install skills from dependencies + +To scan your project dependencies and install available package skills, run: + +```bash +dart run skills@ get +``` + +The `skills` CLI scans your dependencies for bundled `skills/` directories, +presents the skills discovered, and lets you choose which skills to install. +Subsequent runs are incremental—displaying only new, updated, or removed +skills. + +To automatically install all discovered skills without interactive prompts, use +the `--all` flag: + +```bash +dart run skills@ get --all +``` + +### Install external skills + +You can also install standalone skills from external Git repositories using the +`add` command: + +```bash +dart run skills@ add https://github.com/my-org/custom-ai-skills.git +``` + +--- + +## For package authors: Publishing skills + +Package authors can publish skills directly in their `pub.dev` package +releases to teach AI assistants how to use their libraries correctly. + +### Add skills to your package repository + +1. Create a `skills/` directory in the root of your package repository. +2. Inside `skills/`, create a subdirectory prefixed with your package name (for + example, `skills/my-package-network/`). +3. Add a `SKILL.md` file containing YAML frontmatter (`name`, `description`) + and step-by-step markdown instructions. +4. Verify that the `skills/` directory is not excluded in your `.pubignore` + file. +5. Publish your package to `pub.dev`. + +### Example `SKILL.md` structure + +```markdown +--- +name: my_package-error-handling +description: >- + Use when making network requests with my_package to ensure safe patterns. +--- + +# Error handling guidelines + +## Best practices +* Always wrap network operations in a try/catch block. +* Catch `NetworkException` specifically to handle retries and diagnostics. +* Provide fallback UI state in the event of a timeout. + +## Example +1. Call `MyClient.fetchData()`. +2. Catch `NetworkException` and log `e.context`. +3. Return a fallback UI model. +``` + +--- + +## Next steps + +* To explore the underlying specification, check out + [agentskills.io](https://agentskills.io/). +* To file issues or give feedback on Dart skills tooling, visit the + [dart-lang/ai repository](https://github.com/dart-lang/ai). diff --git a/sites/docs/src/content/ai/tools.md b/sites/docs/src/content/ai/tools.md new file mode 100644 index 0000000000..333a9b4d5d --- /dev/null +++ b/sites/docs/src/content/ai/tools.md @@ -0,0 +1,129 @@ +--- +title: How Flutter AI tools work +shortTitle: How AI tools work +description: >- + Learn how agent skills, the Dart and Flutter MCP server, and package skills + interact to assist your development workflow. +--- + +Flutter and Dart provide an integrated suite of tools designed to help AI +coding assistants understand your codebase, follow best practices, and execute +development tasks accurately. + +## Tooling ecosystem overview + +The Flutter AI tooling ecosystem consists of four complementary components: + +1. **Agent skills**: Task-oriented blueprints that teach assistants how to + perform specific workflows (such as creating responsive layouts or writing + tests). +2. **Dart and Flutter MCP server**: A Model Context Protocol (MCP) server + exposing real-time SDK diagnostics, symbol resolution, and runtime + introspection to assistants. +3. **Developer Knowledge MCP server**: A cloud-hosted documentation search + server giving assistants direct access to official Flutter and Dart docs. +4. **Package skills**: Skills published directly inside third-party `pub.dev` + packages, giving assistants instant expertise on specific libraries. + +--- + +## Agent skills + +[Agent skills](https://agentskills.io/) provide a standardized way to equip AI +assistants with procedural domain expertise. + +### Progressive disclosure + +Skills use **progressive disclosure** to conserve model context: + +* **Discovery phase**: The assistant initially reads only skill metadata (name + and short description) from the `.agents/skills` directory. +* **Execution phase**: When the assistant determines a skill is relevant to + your prompt, it loads the complete instructions (`SKILL.md`) and supporting + reference scripts. + +### Official skills repositories + +* [**flutter/agent-plugins**](https://github.com/flutter/agent-plugins): + Provides skills for Flutter development, including widget construction, + declarative navigation, responsive design, and state management. +* [**dart-lang/skills**](https://github.com/dart-lang/skills): Provides skills + for Dart development, including unit test authoring, dependency resolution, + and static analysis remediation. + +--- + +## Dart and Flutter MCP server + +The [Dart and Flutter MCP server]( +https://github.com/dart-lang/ai/tree/main/pkgs/dart_mcp_server) +implements the open Model Context Protocol (MCP), connecting AI assistants to +live Dart SDK and Flutter tooling over standard I/O (stdio). + +Key capabilities provided by the MCP server include: + +* **Static analysis & diagnostics**: Inspect and fix analyzer errors and + warnings across your project. +* **Symbol resolution**: Resolve symbols to their definitions, signatures, and + documentation. +* **Runtime introspection**: Query the state of a running Flutter application + during active debugging sessions. +* **Package management**: Search [pub.dev](https://pub.dev) and manage + dependencies in `pubspec.yaml`. +* **Testing & formatting**: Execute unit and widget tests and format code using + `dart format` rules. + +--- + +## Developer Knowledge MCP server + +While the local Dart and Flutter MCP server focuses on local codebase analysis +and runtime debugging, you can also equip your assistant with search access to +official online documentation. + +The [Developer Knowledge MCP server]( +https://developers.google.com/knowledge/mcp) +connects AI assistants to Google's developer documentation corpus, including +[docs.flutter.dev](https://docs.flutter.dev), +[dart.dev](https://dart.dev), and official API references. This allows +assistants to retrieve up-to-date guides, migration notes, and API references +directly during conversation. + +--- + +## Package skills + +In addition to core Flutter skills, library authors can bundle official skills +directly inside their packages on [pub.dev](https://pub.dev). + +When you add a dependency to your project, you can discover and install its +skills using the `skills` CLI: + +```bash +dart run skills@ get +``` + +To learn how to install or publish package skills, check out +[Package skills](/ai/package-skills). + +--- + +## When to use what + +Use the following mental model to understand how different AI mechanisms +interact: + +| Mechanism | Scope and behavior | Best suited for | +| :--- | :--- | :--- | +| **Agent skill** | On demand | Multi-step recipes, patterns | +| **Dart MCP server** | Local SDK tools | Diagnostics, tests, runtime | +| **Developer Knowledge MCP** | Online search | Live docs, API references | +| **Package skill** | From dependencies | Library APIs, code generation | + +{:.table .table-striped} + +## Next steps + +* Follow the [Get started with AI](/ai/get-started) guide to install official + plugins in your editor. +* Learn how to consume and publish [Package skills](/ai/package-skills). diff --git a/sites/docs/src/content/index.md b/sites/docs/src/content/index.md index 26e303a743..30be96ec7e 100644 --- a/sites/docs/src/content/index.md +++ b/sites/docs/src/content/index.md @@ -22,7 +22,7 @@ description: >- View the many videos on the Flutter YouTube channel. - + Learn how to build with and integrate powerful AI tools. diff --git a/sites/docs/src/content/llms.txt b/sites/docs/src/content/llms.txt index a0ab33e79c..00b4ff2bf6 100644 --- a/sites/docs/src/content/llms.txt +++ b/sites/docs/src/content/llms.txt @@ -98,8 +98,8 @@ This file provides a curated list of resources to help Large Language Models und ### AI-assisted development -- [Create with AI](https://docs.flutter.dev/ai/create-with-ai): An overview of how to use AI to supercharge your Flutter development. -- [The Dart and Flutter MCP Server](https://docs.flutter.dev/ai/mcp-server): Technical details on the server that enables AI features in the IDE. +- [Get started with AI](https://docs.flutter.dev/ai/get-started): How to set up and use AI agent plugins for Flutter and Dart. +- [How Flutter AI tools work](https://docs.flutter.dev/ai/tools): Technical details on the skills, MCP server, and tools for AI coding assistants. - [Supercharge your Dart & Flutter development experience with the Dart and Flutter MCP server](https://blog.flutter.dev/supercharge-your-dart-flutter-development-experience-with-the-dart-mcp-server-2edcc8107b49): A blog post explaining the benefits of the MCP server. - [Gemini in Android Studio now speaks fluent Flutter](https://blog.flutter.dev/gemini-in-android-studio-now-speaks-fluent-flutter-915dfec98274): A blog post about Gemini's Flutter capabilities in Android Studio. diff --git a/sites/docs/src/content/packages-and-plugins/developing-packages.md b/sites/docs/src/content/packages-and-plugins/developing-packages.md index 01751451f4..93af492a2d 100644 --- a/sites/docs/src/content/packages-and-plugins/developing-packages.md +++ b/sites/docs/src/content/packages-and-plugins/developing-packages.md @@ -1064,4 +1064,21 @@ file, like any other Dart package. [test your plugin]: #testing-your-plugin [unit tests]: /testing/overview#unit-tests [`url_launcher`]: {{site.pub}}/packages/url_launcher +## Bundle AI package skills + +You can help AI coding assistants use your package effectively by bundling +custom instructions and recipes directly inside your repository. + +To distribute skills with your package: + +1. Create a `skills/` directory in the root of your package repo. +2. Inside `skills/`, create a subdirectory named after your package (for + example, `skills//`). +3. Add a `SKILL.md` file with guidelines and idiomatic code examples. +4. Publish your package to `pub.dev`. + +When developers add your package as a dependency, their assistants can +automatically discover your instructions. To learn more about authoring +guidelines and best practices, check out [Package skills](/ai/package-skills). + [Writing a good plugin]: {{site.flutter-blog}}/writing-a-good-flutter-plugin-1a561b986c9c diff --git a/sites/docs/src/content/packages-and-plugins/using-packages.md b/sites/docs/src/content/packages-and-plugins/using-packages.md index 33e957c21c..622defeee2 100644 --- a/sites/docs/src/content/packages-and-plugins/using-packages.md +++ b/sites/docs/src/content/packages-and-plugins/using-packages.md @@ -501,3 +501,17 @@ To use this plugin: before adding the plugin). Click **Show Flutter homepage**. You should see the default browser open on the device, displaying the homepage for flutter.dev. +## Install AI skills from packages + +Many `pub.dev` packages bundle official **package skills** that teach AI coding +assistants how to use their APIs and follow recommended patterns. + +If your project dependencies include skills, you can discover and install them +into your local workspace with a single command: + +```bash +dart run skills@ get +``` + +To learn more about how skills help coding assistants understand your +dependencies, check out [Package skills](/ai/package-skills). diff --git a/sites/docs/src/content/reference/create-new-app.md b/sites/docs/src/content/reference/create-new-app.md index c99a8ace28..703c09c06b 100644 --- a/sites/docs/src/content/reference/create-new-app.md +++ b/sites/docs/src/content/reference/create-new-app.md @@ -304,7 +304,7 @@ check out the [IntelliJ for Flutter reference][ij-more]. To create a Flutter app with Antigravity, you first need to install and set up Antigravity as described on the -[Antigravity page](/ai/antigravity). +[Get started with AI](/ai/get-started). Then follow these steps: 1.

Open Antigravity and create a Workspace

diff --git a/sites/docs/src/content/resources/faq.md b/sites/docs/src/content/resources/faq.md index caa1f263e3..4b66150dc2 100644 --- a/sites/docs/src/content/resources/faq.md +++ b/sites/docs/src/content/resources/faq.md @@ -170,7 +170,7 @@ of the many editors that support [editing Dart][]. [Android Studio]: {{site.android-dev}}/studio [Android Studio/IntelliJ]: /tools/android-studio -[Antigravity]: /ai/antigravity +[Antigravity]: /ai/get-started [editing Dart]: {{site.dart-site}}/tools [editor configuration]: /tools/editors [IntelliJ IDEA]: https://www.jetbrains.com/idea/ diff --git a/sites/docs/src/content/tools/hot-reload.md b/sites/docs/src/content/tools/hot-reload.md index f99cf55c9c..a56e01ff17 100644 --- a/sites/docs/src/content/tools/hot-reload.md +++ b/sites/docs/src/content/tools/hot-reload.md @@ -18,10 +18,10 @@ A demo of hot reload in DartPad ## How to perform a hot reload -If you are using an AI coding assistant like [Google Antigravity](/ai/antigravity), -you can use Agent mode to automatically hot reload your running application -as soon as you prompt the agent to apply changes. -For details, see [Agentic Hot Reload](/ai/antigravity#agentic-hot-reload). +If you are using an AI coding assistant like Google Antigravity, +the assistant can automatically hot reload your running application after +making changes, or when asked to "Reload the app". +To learn more, check out [Get started with AI](/ai/get-started). To hot reload a Flutter app manually: diff --git a/sites/docs/src/data/sidenav/default.yml b/sites/docs/src/data/sidenav/default.yml index dea04b910c..f3fc4564fe 100644 --- a/sites/docs/src/data/sidenav/default.yml +++ b/sites/docs/src/data/sidenav/default.yml @@ -474,6 +474,8 @@ permalink: /packages-and-plugins/dependency-management - title: Develop packages & plugins permalink: /packages-and-plugins/developing-packages + - title: Package skills + permalink: /ai/package-skills - title: Swift Package Manager permalink: /packages-and-plugins/swift-package-manager children: @@ -641,35 +643,16 @@ - divider - header: AI -- title: Overview - permalink: /ai/create-with-ai - icon: psychology - - title: Develop with AI permalink: /ai/get-started icon: smart_toy children: - title: Get started permalink: /ai/get-started - - title: AI coding assistants - permalink: /ai/coding-assistants - children: - - title: Overview - permalink: /ai/coding-assistants - - title: Antigravity - permalink: /ai/antigravity - - title: Antigravity CLI - permalink: /ai/antigravity-cli - - title: Agent skills - permalink: /ai/agent-skills - - title: Dart and Flutter MCP server - permalink: /ai/mcp-server - - title: AI rules - permalink: /ai/ai-rules - - title: Developer experience - permalink: /ai/best-practices/developer-experience - - title: "AI evaluations (experimental)" - permalink: /ai/evals + - title: How AI tools work + permalink: /ai/tools + - title: Package skills + permalink: /ai/package-skills - title: Build AI-powered apps permalink: /ai/genui