Web Text Summarizer with Firebase AI Logic

Check out the codelab: Click Here

A minimal web demo using Vite and the Firebase JS SDK to call Firebase AI getGenerativeModel and summarize text.

Prerequisites

• Node.js 18+
• Firebase project (for Hosting) and the Web app config values
• Firebase CLI (npm i -g firebase-tools) if you plan to deploy

Install

npm install

Configure Firebase

Update src/app.js with your Firebase web app config:

const firebaseConfig = {
  apiKey: "<YOUR_API_KEY>",
  authDomain: "<YOUR_PROJECT>.firebaseapp.com",
  projectId: "<YOUR_PROJECT>",
  storageBucket: "<YOUR_PROJECT>.firebasestorage.app",
  messagingSenderId: "<SENDER_ID>",
  appId: "<APP_ID>",
  measurementId: "<MEASUREMENT_ID>"
};

Develop

Runs the Vite dev server at http://localhost:5173 by default.

npm run dev

Build

Outputs production assets to dist/ (configured via vite.config.js).

npm run build

Preview (local)

npm run preview

Deploy to Firebase Hosting

1. Initialize (first time only):

firebase login
firebase init hosting
# choose: Use an existing project or create new
# public directory: dist
# configure as single-page app: y

2. Build and deploy:

npm run deploy

(or npm run build && firebase deploy --only hosting)

Project Structure

/ (root)
├─ src/
│  ├─ index.html
│  ├─ app.js
│  └─ styles.css
├─ vite.config.js
├─ package.json
└─ README.md

Notes

• The example uses model gemini-2.5-flash with a simple system instruction.
• Ensure billing/API access is enabled as required for Firebase AI features.