firebase-ai-logic

firebase-ai-logic

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

Weekly Installs10.2KRepositorysupercent-io/sk…templateGitHub Stars58First SeenJan 24, 2026Security AuditsGen Agent Trust HubPassSocketPassSnykPassInstalled oncodex10.2Kgemini-cli10.2Kopencode10.1Kgithub-copilot10.1Kcursor10.1Kamp10.1K