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-toolsLogin
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)**:
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)