byfirebase· 35 skills
Official skill for integrating Firebase AI Logic (Gemini API) into web applications. Covers setup, multimodal inference, structured output, and security.
$npx -y skills add firebase/agent-skills --skill firebase-ai-logic-basicsInstalls into the current project.
Run `npx skills use "https://github.com/firebase/agent-skills" --skill "firebase/agent-skills/firebase-ai-logic-basics"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.
Use the skills in "https://github.com/firebase/agent-skills" that are relevant to the current task. Run `npx skills add "https://github.com/firebase/agent-skills"` and select the relevant skills, then follow their instructions.
| 1 | # Firebase AI Logic Basics |
| 2 | |
| 3 | ## Overview |
| 4 | |
| 5 | Firebase AI Logic is a product of Firebase that allows developers to add gen AI |
| 6 | to their mobile and web apps using client-side SDKs. You can call Gemini models |
| 7 | directly from your app without managing a dedicated backend. Firebase AI Logic, |
| 8 | which was previously known as "Vertex AI for Firebase", represents the evolution |
| 9 | of Google's AI integration platform for mobile and web developers. |
| 10 | |
| 11 | It supports the two Gemini API providers: |
| 12 | |
| 13 | - **Gemini Developer API**: It has a free tier ideal for prototyping, and |
| 14 | pay-as-you-go for production |
| 15 | - **Vertex AI Gemini API**: Ideal for scale with enterprise-grade production |
| 16 | readiness, requires Blaze plan |
| 17 | |
| 18 | Use the Gemini Developer API as a default, and only Vertex AI Gemini API if the |
| 19 | application requires it. |
| 20 | |
| 21 | ## Setup & Initialization |
| 22 | |
| 23 | ### Prerequisites |
| 24 | |
| 25 | - Before starting, ensure you have **Node.js 16+** and npm installed. Install |
| 26 | them if they aren’t already available. |
| 27 | - Identify the platform the user is interested in building on prior to |
| 28 | starting: Android, iOS, Flutter or Web. |
| 29 | - If their platform is unsupported, Direct the user to Firebase Docs to learn |
| 30 | how to set up AI Logic for their application (share this link with the user |
| 31 | https://firebase.google.com/docs/ai-logic/get-started) |
| 32 | |
| 33 | ### Installation |
| 34 | |
| 35 | The library is part of the standard Firebase Web SDK. |
| 36 | |
| 37 | `npm install -g firebase@latest` |
| 38 | |
| 39 | If you're in a firebase directory (with a firebase.json) the currently selected |
| 40 | project will be marked with "current" using this command: |
| 41 | |
| 42 | `npx -y firebase-tools@latest projects:list` |
| 43 | |
| 44 | Ensure there's at least one app associated with the current project |
| 45 | |
| 46 | `npx -y firebase-tools@latest apps:list` |
| 47 | |
| 48 | Initialize AI logic SDK with the init command |
| 49 | |
| 50 | `npx -y firebase-tools@latest init ailogic` |
| 51 | |
| 52 | This will automatically enable the Gemini Developer API in the Firebase console. |
| 53 | |
| 54 | More info in |
| 55 | [Firebase AI Logic Getting Started](https://firebase.google.com/docs/ai-logic/get-started.md.txt) |
| 56 | |
| 57 | ## Core Capabilities |
| 58 | |
| 59 | > [!WARNING] **CRITICAL: Use current model names:** Always check the |
| 60 | > [Firebase AI Logic Models documentation](https://firebase.google.com/docs/ai-logic/models.md.txt) |
| 61 | > for the currently supported model names. Do NOT use `gemini-2.0-pro` or |
| 62 | > `gemini-2.0-flash` or other older models that are shutdown. |
| 63 | |
| 64 | ### Text-Only Generation |
| 65 | |
| 66 | ### Multimodal (Text + Images/Audio/Video/PDF input) |
| 67 | |
| 68 | Firebase AI Logic allows Gemini models to analyze image files directly from your |
| 69 | app. This enables features like creating captions, answering questions about |
| 70 | images, detecting objects, and categorizing images. Beyond images, Gemini can |
| 71 | analyze other media types like audio, video, and PDFs by passing them as inline |
| 72 | data with their MIME type. For files larger than 20 megabytes (which can cause |
| 73 | HTTP 413 errors as inline data), store them in Cloud Storage for Firebase and |
| 74 | pass their URLs to the Gemini Developer API. |
| 75 | |
| 76 | ### Chat Session (Multi-turn) |
| 77 | |
| 78 | Maintain history automatically using `startChat`. |
| 79 | |
| 80 | ### Streaming Responses |
| 81 | |
| 82 | To improve the user experience by showing partial results as they arrive (like a |
| 83 | typing effect), use `generateContentStream` instead of `generateContent` for |
| 84 | faster display of results. |
| 85 | |
| 86 | ### Generate Images with Nano Banana |
| 87 | |
| 88 | > [!WARNING] **Use current Image model names:** Always check the |
| 89 | > [Firebase AI Logic Models documentation](https://firebase.google.com/docs/ai-logic/models.md.txt) |
| 90 | > for the currently supported image generation (Nano Banana) model names. |
| 91 | |
| 92 | - Requires an upgraded Blaze pay-as-you-go billing plan. |
| 93 | |
| 94 | ### Search Grounding with the built in googleSearch tool |
| 95 | |
| 96 | ## Supported Platforms and Frameworks |
| 97 | |
| 98 | Supported Platforms and Frameworks include Kotlin and Java for Android, Swift |
| 99 | for iOS, JavaScript for web apps, Dart for Flutter, and C Sharp for Unity. |
| 100 | |
| 101 | ## Advanced Features |
| 102 | |
| 103 | ### Structured Output (JSON) |
| 104 | |
| 105 | Enforce a specific JSON schema for the response. |
| 106 | |
| 107 | ### On-Device AI (Hybrid) |
| 108 | |
| 109 | Hybrid on-device inference for web apps, where the Firebase Javascript SDK |
| 110 | automatically checks for Gemini Nano's availability (after installation) and |
| 111 | switches between on-device or cloud-hosted prompt execution. This requires |
| 112 | specific steps to enable model usage in the Chrome browser, more info in the |
| 113 | [hybrid-on-device-inference documentation](https://firebase.google.com/docs/ai-logic/hybrid-on-device-inference.md.txt). |
| 114 | |
| 115 | ## Security & Production |
| 116 | |
| 117 | ### App Check |
| 118 | |
| 119 | > [!WARNING] **Critical Safety Requirement:** In order to use AI Logic safely, |
| 120 | > you MUST set up App Check on your app. This prevents unauthorized clients from |
| 121 | > using your API quota and accessing your backend resources. |
| 122 | |
| 123 | See |
| 124 | [App Check with reCAPTCHA Enterprise](https://firebase.google.com/docs/app-check/web/recaptcha-enterprise-provider.md.txt) |
| 125 | for setup instructions. |
| 126 | |
| 127 | #### App Check Debug Tokens for Local Development & CI/CD |
| 128 | |
| 129 | Because App Check attestation providers (like Play Integrity or DeviceCheck) |
| 130 | reject emulators, simulators, or CI environments, you must use **App Check Debug |
| 131 | Tokens** during development and testing to bypass standard attestation. |
| 132 | |
| 133 | ##### Local Development (Auto-Generated) |
| 134 | |
| 135 | 1. Configure your code's App Check provider to use the debug factory: |
| 136 | * **Web**: Set `self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;` before |
| 137 | initializing App Check. |
| 138 | * **Android**: Install `DebugAppCheckProviderFactory.getInstance()`. |
| 139 | * **iOS**: Set provider factory to `AppCheckDebugProviderFactory()`. |
| 140 | 2. Run your app in the emulator/localhost. |
| 141 | 3. Look at your runtime debugger console / Logcat logs for the generated UUID: |
| 142 | * *Example:* `AppCheck debug token: |
| 143 | "123a4567-b89c-12d3-e456-789012345678"` |
| 144 | 4. Register this token in the Firebase Console under **Security > App Check > |
| 145 | Apps > Manage debug tokens**. |
| 146 | |
| 147 | ##### CI/CD Pipelines (Pre-Provisioned) |
| 148 | |
| 149 | 1. Generate and register a new debug token in the Firebase Console under |
| 150 | **Security > App Check > Apps > Manage debug tokens**. |
| 151 | 2. Add this token string as an encrypted secret in your CI system (e.g. |
| 152 | `APP_CHECK_DEBUG_TOKEN`). |
| 153 | 3. Configure your build to pass this secret as an environment variable to the |
| 154 | SDK during test execution (e.g. `self.FIREBASE_APPCHECK_DEBUG_TOKEN = |
| 155 | process.env.APP_CHECK_DEBUG_TOKEN`). |
| 156 | |
| 157 | ### Remote Config |
| 158 | |
| 159 | Consider that you do not need to hardcode model names (e.g., a specific model |
| 160 | version string). Use Firebase Remote Config to update model versions dynamically |
| 161 | without deploying new client code. See |
| 162 | [Changing model names remotely](https://firebase.google.com/docs/ai-logic/change-model-name-remotely.md.txt) |
| 163 | |
| 164 | > [!WARNING] **CRITICAL: Backend Provisioning Required** For all platforms |
| 165 | > (Flutter, Android, iOS, Web), you MUST run `npx firebase-tools init ailogic` |
| 166 | > to provision the service. `flutterfire configure` ONLY handles client |
| 167 | > configuration and does NOT enable the AI service, leading to |
| 168 | > `PERMISSION_DENIED` errors. |
| 169 | |
| 170 | ## Initialization Code References |
| 171 | |
| 172 | | Language, | Gemini API | Context URL | |
| 173 | : Framework, : provider : : |
| 174 | : Platform : : : |
| 175 | | :---------- | :--------- | :---------------------------------------------- | |
| 176 | | Web Modular | Gemini | firebase://docs/ai-logic/get-started | |
| 177 | : API : Developer : : |
| 178 | : : API : : |
| 179 | : : (Developer : : |
| 180 | : : API) : : |
| 181 | | iOS (Swift) | Gemini | [ios_setup.md](references/ios_setup.md) | |
| 182 | : : Developer : : |
| 183 | : : API : : |
| 184 | | Flutter | Gemini | [flutter_setup.md](references/flutter_setup.md) | |
| 185 | : (Dart) : Developer : : |
| 186 | : : API : : |
| 187 | |
| 188 | > [!WARNING] **CRITICAL: Use current model names:** Always check the |
| 189 | > [Firebase AI Logic Models documentation](https://firebase.google.com/docs/ai-logic/models.md.txt) |
| 190 | > for the currently supported model names. Do NOT use `gemini-2.0-pro` or |
| 191 | > `gemini-2.0-flash` or other older models that are shutdown. |
| 192 | |
| 193 | ## References |
| 194 | |
| 195 | [Web SDK code examples and usage patterns](references/usage_patterns_web.md) |
| 196 | [iOS SDK code examples and usage patterns](references/ios_setup.md) |
| 197 | [Flutter SDK code examples and usage patterns](references/flutter_setup.md) |
| 198 | |
| 199 | [Android (Kotlin) SDK usage patterns](references/usage_patterns_android.md) |