Agent skill
firebase-ai-logic
Integrate Firebase AI Logic (Gemini in Firebase) for intelligent app features. Use when adding AI capabilities to Firebase apps, implementing generative AI features, or setting up Firebase AI SDK. Handles Firebase AI SDK setup, prompt engineering, and AI-powered features.
Stars
232
Forks
15
Install this agent skill to your Project
npx add-skill https://github.com/aiskillstore/marketplace/tree/main/skills/supercent-io/firebase-ai-logic
Metadata
Additional technical details for this skill
- tags
- firebase, ai, gemini, generative-ai, sdk
- platforms
- Claude, ChatGPT, Gemini
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
bash
# Install Firebase CLI
npm install -g firebase-tools
# Login
firebase login
# Initialize project
firebase init
Step 2: Enable AI Logic
In Firebase Console:
- Select Build > AI Logic
- Click Get Started
- Enable the Gemini API
Step 3: Install SDK
Web (JavaScript):
bash
npm install firebase @anthropic-ai/sdk
Initialization code:
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: Implement AI Features
Text generation:
typescript
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:
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);
}
}
Multimodal (image + 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: Configure Security Rules
Firebase Security Rules:
javascript
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
Metadata
- Version: 1.0.0
- Last updated: 2025-01-05
- Supported platforms: Claude, ChatGPT, Gemini
Examples
Example 1: Basic usage
Example 2: Advanced usage
Didn't find tool you were looking for?