firebase-ai-logic

SKILL.md

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:
1. Select **Build > AI Logic**
2. Click **Get Started**
3. Enable the Gemini API

### Step 3: Install SDK

**Web (JavaScript)**:
```bash
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