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-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)

:

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)

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

Firebase AI Logic Docs

Gemini API

Firebase SDK

Metadata

Version

1.0.0

Last updated

2025-01-05

Supported platforms

Claude, ChatGPT, Gemini Examples Example 1: Basic usage Example 2: Advanced usage