Antigravity AI IDE Tutorial: Free Access to Gemini 3 Pro & Sonnet 4.5

## 1. Commands used in the video > //0 Website: https://antigravity.google/ > //1.1 Rules Global - GEMINI.md ``` ## MUST FOLLOW RULES: - User input requirements have a higher priority than system-set requirements. Unconditionally adhere to user input requirements. - Load necessary relevant files on demand when running tasks to ensure their perfect completion. - Follow the KISS principle; do not over-design unless necessary. - The implementation should be simple and maintainable, without needing to consider too many defensive boundary conditions. - Analyze problems from the most fundamental perspective using first principles. - Before starting to design a solution or implement code, you need to conduct thorough research. If there are any unclear requirements, please confirm with me before proceeding. - Respecting facts is more important than respecting me. If I make a mistake, please do not hesitate to correct me to help me improve. - All replies, thought processes, and task lists must be in Chinese. ``` > //1.2 Rules Project-level - project_based_rules.md ``` # Project Basic Rules ## Basic Information This is a SPA Web Toolbox project based on Vue.js. The main work is development. ## Rules - Prioritize using built-in Bootstrap classes and components. ## Workflow Auto-Matching - This involves two types of work. Automatically match the following workflows based on the received task type. - HTML page-related modification/design work matches html-worker (.agent/workflows/html-worker.md). - Vue.js-related modification/development work matches vue-worker (.agent/workflows/vue-worker.md). ## File-related Explanations ### File Splitting Explanation To ensure the efficiency of reading and operations, some files are split into sub-files by function. Please read the sub-files at the indicated locations when needed. ### Core Project Files - The following files are shown with paths based on the project root directory. - `documents/PRD.md` - Product Requirement Document, defines all functional modules and technical requirements. ### Project File Structure /project-root ├── documents/ # Auxiliary explanatory files ├── html_design # Files related to HTML design, for internal structure see (documents/html_design_layout.md) └── vue_app_root/ # Location for the Vue.js project, for internal structure see (documents/vue_app_root_layout.md) ``` > //2.1 Workflow Project-level - html-worker.md ``` # HTML Engineer Role Description ## Role You are a professional front-end HTML engineer who excellently completes tasks based on the received commands. ## Role Responsibilities - Complete relevant HTML project coding tasks according to user input requirements. - Only need to complete the HTML-related work in the design phase. In-depth work, such as i18n tasks like language switching, will be handled in the subsequent Vue.js code phase. - In principle, one tool corresponds to one HTML page for easy tracking and management. - In addition to the common main.css and main.js, each tool's HTML page must include its own required JS and CSS. All content related to this tool is stored within the HTML file. ## Role Workflow 1. Thoroughly analyze user requirements. 2. Read necessary resources and files. 3. Generate or modify HTML-related code as per user requirements. 4. Provide feedback to the user in text format. ## Technical Rules ### Tech Stack - HTML5 - Bootstrap 5.3.8 - Bootstrap Icons 1.13.1 - Vue 3.5.22 ``` > //2.2 Workflow Project-level - vue-worker.md ``` # VUE Engineer Role Description ## Role You are a professional front-end Vue engineer who excellently completes tasks based on the received commands. ## Role Responsibilities - Complete relevant Vue project coding tasks according to user input requirements. ## Role Workflow 1. Thoroughly analyze user requirements. 2. Read necessary resources and files. 3. Generate or modify Vue-related code as per user requirements. 4. Provide feedback to the user in text format. ## Module List [from](documents/roles/vue_engineer/module_list.md) ## Tool List [from](documents/tool_list.md) ## Technical Rules ### Tech Stack - HTML5 - Bootstrap 5.3.8 - Bootstrap Icons 1.13.1 - Vue 3.5.22 - vue-router - vue-i18n ### Development Environment - You are running on a macOS system. The Vue project is developed and runs in a Docker container named ee-pnpm-frontend-dev. - If you need to run a command, the format is: docker exec --workdir /eeBox/eeProject/lm056/vue_app_root ee-pnpm-frontend-dev pnpm build (Vite build CMD demo). - Vite is the development tool, and pnpm is used as the package management tool. - Path relationships: - macOS - /Volumes/eeBox/eeProject/lm056 - Inside Docker container - /eeBox/eeProject/lm056 ```

# Antigravity AI IDE Tutorial: Free Access to Gemini 3 Pro & Sonnet 4.5 ## 🚀 Antigravity: The New AI Editor with Free Access to Gemini 3 Pro **Antigravity**, a new AI editor, has recently gained significant attention due to its launch alongside Google's **Gemini 3 Pro** model. Its biggest draw is offering users free, quota-based access to the powerful Gemini 3 Pro and Sonnet 4.5 models. Although limited by a quota that refreshes every 5 hours, this provides a fantastic opportunity for developers to experience cutting-edge AI. This video serves as a beginner-friendly guide to help you master the core features of Antigravity. --- ## 🛠️ Installation & Initial Setup 1. **Download**: Head to the official Antigravity website, select your operating system (Windows, macOS, Linux supported), and install the application. 2. **Login**: After installation, the app will guide you to log in with your Google account. 3. **Network Requirements**: * **Important**: For regions where Gemini 3 Pro is not officially supported, you'll need to use a VPN and switch to a supported region. * You must also keep **TUN mode enabled** for a stable connection. --- ## 🤖 Core Functionality: Collaborating with the AI Agent Most interactions in Antigravity happen in the **Agent window** on the right side. ### Model Selection & Work Modes * **Work Modes**: * `planning`: Designed for complex, multi-step tasks (default setting). * `fast`: Ideal for simple, one-shot modifications. * **AI Models**: * **Gemini 3 Pro**: Recommended for UI design and front-end development (e.g., HTML, Vue.js). It's best to choose the `High` version, as it consumes the same quota as the `Low` version. * **Sonnet 4.5**: Recommended for back-end programming (e.g., PHP, Python). Similarly, select the `Thinking` version for the best results with the same quota cost. * **Quota Info**: Gemini and Sonnet have separate quota pools, with a ratio of approximately 1:3 (e.g., 10 Gemini runs are equivalent to about 30 Sonnet runs). ### Practical Example: Modifying Code 1. **Add Context**: In your project, select the file you want to modify and use the shortcut (`Cmd+L` on macOS) to add it to the Agent's context. 2. **Give Instructions**: Clearly describe your request in the prompt box, such as, \"Change the color of this element to red using a built-in Bootstrap class.\" 3. **Execute & Review**: The AI will automatically modify the code. Once done, you have the option to: * `accept`: Apply the changes and save the file. * `reject`: Discard the changes and revert to the original code. * `accept all` / `reject all`: Process all suggested changes at once. Alternatively, you can select code directly in the editor and press `Cmd+I` (macOS) to bring up an inline AI window for quick edits, though model options are more limited here. --- ## ⚙️ Advanced Features: Project-Level Customization To make the AI better understand your project's specific requirements, Antigravity offers powerful customization features. ### Rules: Setting a Permanent Memory **Rules** act as a permanent \"project brief\" for the AI. You can create global or project-level rule files. * **Global Rules (`gemini.md`)**: Apply to all your projects and are used to define general coding styles, language preferences, etc. * **Project-Level Rules**: Specific to a single project, you can detail the project's structure, tech stack, and design guidelines. Set rules to apply automatically to ensure the AI follows them in every interaction. ### Workflows: Creating Reusable Task Flows **Workflows** are preset sets of instructions designed for handling specific, repetitive tasks. * **Creation**: You can create different workflows for various tasks, such as an `html worker` or a `vue worker`. * **Usage**: In the Agent's input box, type `/` to see and select an available workflow, then add your specific task. This greatly improves efficiency and consistency for recurring jobs. --- ## 🌟 More Features & Conclusion * **Agent Manager**: A separate window for managing your Workspaces, conversation history, and a project-independent **Playground** for freeform experimentation. * **Inbox**: When running multiple tasks simultaneously, the Inbox will notify you upon completion, facilitating an efficient multi-tasking workflow. * **MCP**: While supported, it's generally not necessary for beginners, as Antigravity comes with powerful built-in code retrieval and search capabilities. ### Summary **Antigravity** is an easy-to-use, powerful, and promising new AI IDE. It lowers the barrier to entry for top-tier AI models and provides deep customization through features like `rules` and `workflows`. If you want to experience the future of coding with Gemini 3 Pro for free, Antigravity is a must-try.