Firebase AI Logic Integration

When to use this skill

• Add AI features: integrate generative AI features into your app

• Firebase projects: add AI to Firebase-based apps

• Text generation: content generation, summarization, translation

• Image analysis: image-based AI processing

Instructions

Step 1: Firebase Project Setup

Install Firebase CLI

npm install -g firebase-tools

Login

firebase login

Initialize project

firebase init

Step 2: Enable AI Logic

In Firebase Console:

• Select Build > AI Logic

• Click Get Started

• Enable the Gemini API

Step 3: Install SDK

Web (JavaScript):

npm install firebase @anthropic-ai/sdk

Initialization code:

import { initializeApp } from 'firebase/app'; import { getAI, getGenerativeModel } from 'firebase/ai';

const firebaseConfig = { apiKey: "YOUR_API_KEY", authDomain: "YOUR_PROJECT.firebaseapp.com", projectId: "YOUR_PROJECT_ID", };

const app = initializeApp(firebaseConfig); const ai = getAI(app); const model = getGenerativeModel(ai, { model: "gemini-2.0-flash" });

Step 4: Implement AI Features

Text generation:

async function generateContent(prompt: string) { const result = await model.generateContent(prompt); return result.response.text(); }

// Example usage const response = await generateContent("Explain the key features of Firebase."); console.log(response);

Streaming response:

async function streamContent(prompt: string) { const result = await model.generateContentStream(prompt);

for await (const chunk of result.stream) { const text = chunk.text(); console.log(text); } }

Multimodal (image + text):

async function analyzeImage(imageUrl: string, prompt: string) { const imagePart = { inlineData: { data: await fetchImageAsBase64(imageUrl), mimeType: "image/jpeg" } };

const result = await model.generateContent([prompt, imagePart]); return result.response.text(); }

Step 5: Configure Security Rules

Firebase Security Rules:

rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { // Protect AI request logs match /ai_logs/{logId} { allow read: if request.auth != null && request.auth.uid == resource.data.userId; allow create: if request.auth != null; } } }

Output format

Project structure

project/ ├── src/ │ ├── ai/ │ │ ├── client.ts # Initialize AI client │ │ ├── prompts.ts # Prompt templates │ │ └── handlers.ts # AI handlers │ └── firebase/ │ └── config.ts # Firebase config ├── firebase.json └── .env.local # API key (gitignored)

Best practices

• Prompt optimization: write clear, specific prompts

• Error handling: implement a fallback when AI responses fail

• Rate Limiting: limit usage and manage costs

• Caching: cache responses for repeated requests

• Security: manage API keys via environment variables

Constraints

Required Rules (MUST)

• Do not hardcode API keys in code

• Validate user input

• Implement error handling

Prohibited (MUST NOT)

• Do not send sensitive data to the AI

• Do not allow unlimited API calls

References

• Firebase AI Logic Docs

• Gemini API

• Firebase SDK

Metadata

• Version: 1.0.0

• Last updated: 2025-01-05

• Supported platforms: Claude, ChatGPT, Gemini

Examples

Example 1: Basic usage

Example 2: Advanced usage