Firebase AI Logic Integration

When to use this skill

• AI 기능 추가: 앱에 생성형 AI 기능 통합
• Firebase 프로젝트: Firebase 기반 앱에 AI 추가
• 텍스트 생성: 콘텐츠 생성, 요약, 번역
• 이미지 분석: 이미지 기반 AI 처리

Instructions

Step 1: Firebase 프로젝트 설정

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

# 로그인
firebase login

# 프로젝트 초기화
firebase init

Step 2: AI Logic 활성화

Firebase Console에서:

1. Build > AI Logic 선택
2. Get Started 클릭
3. Gemini API 활성화

Step 3: SDK 설치

Web (JavaScript):

npm install firebase @anthropic-ai/sdk

초기화 코드:

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: AI 기능 구현

텍스트 생성:

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

// 사용 예시
const response = await generateContent("Firebase의 주요 기능을 설명해주세요.");
console.log(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);
  }
}

멀티모달 (이미지 + 텍스트):

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: 보안 규칙 설정

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/
├── src/
│   ├── ai/
│   │   ├── client.ts        # AI 클라이언트 초기화
│   │   ├── prompts.ts       # 프롬프트 템플릿
│   │   └── handlers.ts      # AI 핸들러
│   └── firebase/
│       └── config.ts        # Firebase 설정
├── firebase.json
└── .env.local               # API 키 (gitignore)

Best practices

1. 프롬프트 최적화: 명확하고 구체적인 프롬프트 작성
2. 에러 처리: AI 응답 실패 시 폴백 구현
3. Rate Limiting: 사용량 제한 및 비용 관리
4. 캐싱: 반복 요청에 대한 응답 캐싱
5. 보안: API 키는 환경변수로 관리

Constraints

필수 규칙 (MUST)

1. API 키를 코드에 하드코딩하지 않음
2. 사용자 입력 검증 수행
3. 에러 핸들링 구현

금지 사항 (MUST NOT)

1. 민감한 데이터를 AI에 전송하지 않음
2. 무제한 API 호출 허용하지 않음

References

• Firebase AI Logic Docs
• Gemini API
• Firebase SDK

Metadata

• 버전: 1.0.0
• 최종 업데이트: 2025-01-05
• 호환 플랫폼: Claude, ChatGPT, Gemini

Examples

Example 1: Basic usage

Example 2: Advanced usage