firebase-ai-logic

Firebase AI Logic Integration

When to use this skill

• Add AI features: Integrate generative AI features into the app
• Firebase project: Add AI to Firebase-based apps
• Text generation: Content creation, summarization, translation
• Image analysis: Image-based AI processing

Instructions

Step 1: Set up Firebase project

# Firebase CLI 설치
npm install -g firebase-tools

Sign in

firebase login

Initialize project

firebase init

### Step 2: AI Logic 활성화

Firebase Console에서:
1. **Build > AI Logic** 선택
2. **Get Started** 클릭
3. Gemini API 활성화

### Step 3: 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();
}

// 사용 예시
const response = await generateContent("Firebase의 주요 기능을 설명해주세요.");
console.log(response);

Streaming responses:

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: Set up security rules

Firebase Security Rules:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // AI 요청 로그 보호
    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        # AI 클라이언트 초기화
│   │   ├── prompts.ts       # 프롬프트 템플릿
│   │   └── handlers.ts      # AI 핸들러
│   └── firebase/
│       └── config.ts        # Firebase 설정
├── firebase.json
└── .env.local               # API 키 (gitignore)

Best practices

1. Prompt optimization: Write clear and specific prompts
2. Error handling: Implement fallback when AI responses fail
3. Rate Limiting: Usage limits and cost management
4. Caching: Cache responses for repeated requests
5. Security: Manage API keys via environment variables

Constraints

Required rules (MUST)

1. Do not hardcode API keys in code
2. Validate user input
3. Implement error handling

Prohibited (MUST NOT)

1. Do not send sensitive data to AI
2. 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
• Compatible platforms: Claude, ChatGPT, Gemini

Examples

Example 1: Basic usage

Example 2: Advanced usage