Back to Details

firebase-ai-logic

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Firebase AI Logic Integration

Firebase AI Logic 集成

When to use this skill

何时使用此技能

  • AI 기능 추가: 앱에 생성형 AI 기능 통합
  • Firebase 프로젝트: Firebase 기반 앱에 AI 추가
  • 텍스트 생성: 콘텐츠 생성, 요약, 번역
  • 이미지 분석: 이미지 기반 AI 처리
  • 添加AI功能：在应用中集成生成式AI功能
  • Firebase项目：为基于Firebase的应用添加AI
  • 文本生成：内容生成、摘要、翻译
  • 图像分析：基于图像的AI处理

Instructions

操作步骤

Step 1: Firebase 프로젝트 설정

步骤1：Firebase项目设置

bash
undefined
bash
undefined

Firebase CLI 설치

Firebase CLI 설치

npm install -g firebase-tools
npm install -g firebase-tools

로그인

로그인

firebase login
firebase login

프로젝트 초기화

프로젝트 초기화

firebase init
undefined
firebase init
undefined

Step 2: AI Logic 활성화

步骤2：启用AI Logic

Firebase Console에서:
  1. Build > AI Logic 선택
  2. Get Started 클릭
  3. Gemini API 활성화
在Firebase控制台中：
  1. 选择 Build > AI Logic
  2. 点击 Get Started
  3. 启用Gemini API

Step 3: SDK 설치

步骤3：安装SDK

Web (JavaScript):
bash
npm install firebase @anthropic-ai/sdk
초기화 코드:
typescript
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" });
Web（JavaScript）:
bash
npm install firebase @anthropic-ai/sdk
初始化代码:
typescript
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 기능 구현

步骤4：实现AI功能

텍스트 생성:
typescript
async function generateContent(prompt: string) {
  const result = await model.generateContent(prompt);
  return result.response.text();
}

// 사용 예시
const response = await generateContent("Firebase의 주요 기능을 설명해주세요.");
console.log(response);
스트리밍 응답:
typescript
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);
  }
}
멀티모달 (이미지 + 텍스트):
typescript
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();
}
文本生成:
typescript
async function generateContent(prompt: string) {
  const result = await model.generateContent(prompt);
  return result.response.text();
}

// 使用示例
const response = await generateContent("Firebase의 주요 기능을 설명해주세요.");
console.log(response);
流式响应:
typescript
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);
  }
}
多模态（图像+文本）:
typescript
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: 보안 규칙 설정

步骤5：设置安全规则

Firebase Security Rules:
javascript
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;
    }
  }
}
Firebase Security Rules:
javascript
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)
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 키는 환경변수로 관리
  1. 提示词优化：编写清晰具体的提示词
  2. 错误处理：AI响应失败时实现回退机制
  3. Rate Limiting：限制使用量并管理成本
  4. 缓存：缓存重复请求的响应
  5. 安全：通过环境变量管理API密钥

Constraints

约束条件

필수 규칙 (MUST)

必须遵守的规则（MUST）

  1. API 키를 코드에 하드코딩하지 않음
  2. 사용자 입력 검증 수행
  3. 에러 핸들링 구현
  1. 不要在代码中硬编码API密钥
  2. 执行用户输入验证
  3. 实现错误处理

금지 사항 (MUST NOT)

禁止事项（MUST NOT）

  1. 민감한 데이터를 AI에 전송하지 않음
  2. 무제한 API 호출 허용하지 않음
  1. 不要向AI传输敏感数据
  2. 不允许无限制的API调用

References

参考资料

Metadata

元数据

  • 버전: 1.0.0
  • 최종 업데이트: 2025-01-05
  • 호환 플랫폼: Claude, ChatGPT, Gemini
  • 版本：1.0.0
  • 最后更新：2025-01-05
  • 兼容平台：Claude, ChatGPT, Gemini

Examples

示例

Example 1: Basic usage

示例1：基础用法

<!-- Add example content here -->
<!-- Add example content here -->

Example 2: Advanced usage

示例2：高级用法

<!-- Add advanced example content here -->
<!-- Add advanced example content here -->