From 2033f825b18894d5cba6f2cc74703a8cae877735 Mon Sep 17 00:00:00 2001 From: sedanah-m Date: Fri, 17 Jul 2026 14:40:35 -0700 Subject: [PATCH 1/5] fixed readme indentation --- ai/ai-samples/README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/ai/ai-samples/README.md b/ai/ai-samples/README.md index 4c8de7b80..9ec3abdbf 100644 --- a/ai/ai-samples/README.md +++ b/ai/ai-samples/README.md @@ -19,8 +19,9 @@ This repository demonstrates the following capabilities: To connect this sample app to your Firebase project, register a new Web App in your Firebase Console to generate your Firebase configuration object. 1. Navigate to this directory and install dependencies: - ```bash - npm install +```bash +npm install +``` 2. Add your Firebase config From 221a3a204c5102196921f180bda30435c10c5afb Mon Sep 17 00:00:00 2001 From: sedanah-m Date: Fri, 17 Jul 2026 16:01:10 -0700 Subject: [PATCH 2/5] cleanup README indentation issues --- ai/ai-samples/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ai/ai-samples/README.md b/ai/ai-samples/README.md index 9ec3abdbf..8ff341875 100644 --- a/ai/ai-samples/README.md +++ b/ai/ai-samples/README.md @@ -32,7 +32,7 @@ Copy the example config file and fill in your project values. Open src/config/fi 3. Running the samples For a full app experience to browse all features: - npm run dev +npm run dev To run indivual features in isolated mode, run the single feature directly without the app shell using one of these scripts: From d8e847661c7d9bb5af153202c5cf07e46fc66c9d Mon Sep 17 00:00:00 2001 From: sedanah-m Date: Mon, 20 Jul 2026 14:10:53 -0700 Subject: [PATCH 3/5] fix README syntax issues; remove unecessary window check in firebaseAIServices. --- ai/ai-samples/README.md | 42 ++++++++++--------- .../src/services/firebaseAIService.ts | 4 -- 2 files changed, 22 insertions(+), 24 deletions(-) diff --git a/ai/ai-samples/README.md b/ai/ai-samples/README.md index 8ff341875..0e70da56e 100644 --- a/ai/ai-samples/README.md +++ b/ai/ai-samples/README.md @@ -1,12 +1,12 @@ # Firebase AI Samples -A modular migration of the Firebase AI logic, demonstrating different capabilities: +This directory contains samples for the Firebase AI SDK for Web. ## Samples -You can open this sample as a Node/React project and run it in your local browser. When doing so, you need to add this sample app to a Firebase project on the Firebase console. You can add multiple sample apps to the same Firebase project; no need to create separate projects for each app. +You can open a sample as a Node/React project and run it in your local browser. When doing so, you need to add this sample app to a Firebase project on the Firebase console. You can add multiple sample apps to the same Firebase project; no need to create separate projects for each app. -This repository demonstrates the following capabilities: +This repository contains the following samples: * Text Generation * Chat * Multimodal @@ -18,56 +18,58 @@ This repository demonstrates the following capabilities: To connect this sample app to your Firebase project, register a new Web App in your Firebase Console to generate your Firebase configuration object. -1. Navigate to this directory and install dependencies: +### 1. Navigate to this directory and install dependencies: ```bash npm install ``` -2. Add your Firebase config +### 2. Add your Firebase config: -Go to console.firebase.google.com and follow the Firebase AI Logic guided setup to enable the API and choose your gemini API provider. -Copy the example config file and fill in your project values. Open src/config/firebase-config.ts and replace the placeholder values with your firebase project config (found in Project Settings -> your apps) +Go to https://console.firebase.google.com and follow the Firebase AI Logic guided setup to enable the API and choose your gemini API provider. +Copy the example config file and fill in your project values. Open `src/config/firebase-config.ts` and replace the placeholder values with your firebase project config (found in **Project Settings** -> **your apps**) -3. Running the samples +### 3. Running the samples: For a full app experience to browse all features: +```bash npm run dev +``` To run indivual features in isolated mode, run the single feature directly without the app shell using one of these scripts: - +```bash npm run dev:text #Text Generation npm run dev:chat #Chat npm run dev:multimodal #Multimodal npm run dev:structured #Structured Output npm run dev:function #Function Calling npm run dev:image #Image Generation - +``` After running any of the above commands, open your browser to https://localhost:*** (provided in the console) ## Copy service.ts for platform agnostic use -All AI logic is decoupled from the React UI. If you want to use these features in your own project, navigate to any src/features/*/service.ts file. These files are framework-agnostic and can be safely copy-pasted into any JavaScript or TypeScript web project. +All AI logic is decoupled from the React UI. If you want to use these features in your own project, navigate to any `src/features/*/service.ts file`. These files are framework-agnostic and can be safely copy-pasted into any JavaScript or TypeScript web project. ## App Check -App check protects your API Key from unauthorized use. It is not required to run the samples locally but highly recommended before deployig to production. +App check protects your API Key from unauthorized use. It is not required to run the samples locally but highly recommended before deploying to production. -Debug token: -firebaseAIService.ts includes App Check intilization for local development. To enable it: +### Debug token: +`firebaseAIService.ts` includes App Check intilization for local development. To enable it: -1. Set VITE_APPCHECK_DEBUG_TOKEN=true in your .env.local file +1. Set `VITE_APPCHECK_DEBUG_TOKEN=true` in your **.env.local** file 2. On the first run, a deug token will be printed in the browser console. 3. Copy that token and register it in the Firebase Console under -App Check -> Apps -> your apps -> Debug Token +**App Check -> Apps -> your apps -> Debug Token** -Production setup: +### Production setup: For production, use reCAPTCHA v3 as the App Check provider: -1. Go to the Firebase Console -> App Check -> Register your app +1. Go to the **Firebase Console -> App Check -> Register your app** 2. Choose reCaptcha v3 and follow the setup steps -3. Add your reCaptcha site key to firebase-config.ts +3. Add your reCaptcha site key to **firebase-config.ts** -See the [App Check Docs](https://firebase.google.com/docs/app-check/web/recaptcha-provider) for full instruction. \ No newline at end of file +See the [App Check Documentation](https://firebase.google.com/docs/app-check/web/recaptcha-provider) for full instruction. \ No newline at end of file diff --git a/ai/ai-samples/src/services/firebaseAIService.ts b/ai/ai-samples/src/services/firebaseAIService.ts index 8d01471e7..5105d63df 100644 --- a/ai/ai-samples/src/services/firebaseAIService.ts +++ b/ai/ai-samples/src/services/firebaseAIService.ts @@ -17,9 +17,7 @@ const firebaseConfig = import.meta.env.VITE_FIREBASE_CONFIG const app = initializeApp(firebaseConfig); // initialize app check with debug token -if (typeof window !== 'undefined') { (window as any).FIREBASE_APPCHECK_DEBUG_TOKEN = true; - initializeAppCheck(app, { // The string here doesn't matter in this specific case, as setting // FIREBASE_APPCHECK_DEBUG_TOKEN above means it will be ignored. @@ -27,10 +25,8 @@ if (typeof window !== 'undefined') { provider: new ReCaptchaEnterpriseProvider('YOUR_RECAPTCHA_SITE_KEY'), isTokenAutoRefreshEnabled: true }); -} const ai = getAI(app); export const getAiModel = (modelName: string = 'gemini-3.5-flash', additionalConfig: Record = {}) => { return getGenerativeModel(ai, { model: modelName, ...additionalConfig }); -}; \ No newline at end of file From 52219b28751cbc233fbb962a0661da192b1a8272 Mon Sep 17 00:00:00 2001 From: sedanah-m Date: Mon, 20 Jul 2026 14:18:20 -0700 Subject: [PATCH 4/5] fix typos and format --- ai/ai-samples/README.md | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/ai/ai-samples/README.md b/ai/ai-samples/README.md index 0e70da56e..7325c7f8d 100644 --- a/ai/ai-samples/README.md +++ b/ai/ai-samples/README.md @@ -36,15 +36,26 @@ For a full app experience to browse all features: npm run dev ``` -To run indivual features in isolated mode, run the single feature directly without the app shell using one of these scripts: +To run individual features in isolated mode, run the single feature directly without the app shell using one of these scripts: ```bash npm run dev:text #Text Generation +``` +```bash npm run dev:chat #Chat +``` +```bash npm run dev:multimodal #Multimodal +``` +```bash npm run dev:structured #Structured Output +``` +```bash npm run dev:function #Function Calling +``` +```bash npm run dev:image #Image Generation ``` + After running any of the above commands, open your browser to https://localhost:*** (provided in the console) ## Copy service.ts for platform agnostic use @@ -58,10 +69,10 @@ All AI logic is decoupled from the React UI. If you want to use these features i App check protects your API Key from unauthorized use. It is not required to run the samples locally but highly recommended before deploying to production. ### Debug token: -`firebaseAIService.ts` includes App Check intilization for local development. To enable it: +`firebaseAIService.ts` includes App Check initialization for local development. To enable it: 1. Set `VITE_APPCHECK_DEBUG_TOKEN=true` in your **.env.local** file -2. On the first run, a deug token will be printed in the browser console. +2. On the first run, a debug token will be printed in the browser console. 3. Copy that token and register it in the Firebase Console under **App Check -> Apps -> your apps -> Debug Token** @@ -72,4 +83,4 @@ For production, use reCAPTCHA v3 as the App Check provider: 2. Choose reCaptcha v3 and follow the setup steps 3. Add your reCaptcha site key to **firebase-config.ts** -See the [App Check Documentation](https://firebase.google.com/docs/app-check/web/recaptcha-provider) for full instruction. \ No newline at end of file +See the [App Check Documentation](https://firebase.google.com/docs/app-check/web/recaptcha-provider) for full instructions. \ No newline at end of file From 703a1716d3e7e5a5365b5f295a0a23fb8f90f028 Mon Sep 17 00:00:00 2001 From: sedanah-m Date: Tue, 21 Jul 2026 11:31:22 -0700 Subject: [PATCH 5/5] fix: remove redundant code for bypassing shell, fix minor issues in index.tsx to disable input and send chat function until the chat session is correctly initialized; adds comments to firebaseAIService for user's awarness --- ai/ai-samples/package.json | 1 - ai/ai-samples/src/App.tsx | 20 +------------------ ai/ai-samples/src/features/chat/index.tsx | 4 ++-- .../src/services/firebaseAIService.ts | 10 ++++++++-- 4 files changed, 11 insertions(+), 24 deletions(-) diff --git a/ai/ai-samples/package.json b/ai/ai-samples/package.json index 763ce999e..36d35540f 100644 --- a/ai/ai-samples/package.json +++ b/ai/ai-samples/package.json @@ -25,7 +25,6 @@ "devDependencies": { "@types/react": "^19.0.10", "@types/react-dom": "^19.0.4", - "@types/react-router-dom": "^5.3.3", "@vitejs/plugin-react": "^4.3.4", "typescript": "~5.7.2", "vite": "^6.3.1" diff --git a/ai/ai-samples/src/App.tsx b/ai/ai-samples/src/App.tsx index 91e8df651..d4227eb5a 100644 --- a/ai/ai-samples/src/App.tsx +++ b/ai/ai-samples/src/App.tsx @@ -1,10 +1,5 @@ import { Link, Outlet, useLocation } from 'react-router-dom'; -import TextGenerationView from './features/text-generation'; -import ChatView from './features/chat'; -import MultimodalView from './features/multimodal'; -import StructuredOutputView from './features/structured-output'; -import FunctionCallingView from './features/function-calling'; -import ImageGenerationView from './features/image-generation'; + const NAV_ITEMS = [ { path: '/text-generation', label: 'Text Generation' }, @@ -17,20 +12,7 @@ const NAV_ITEMS = [ export default function App() { const { pathname } = useLocation(); - const isolatedFeature = import.meta.env.VITE_ISOLATED_FEATURE; - // If running an isolated script, bypass the shell entirely - if (isolatedFeature) { - switch (isolatedFeature) { - case 'text-generation': return ; - case 'chat': return ; - case 'multimodal': return ; - case 'structured-output': return ; - case 'function-calling': return ; - case 'image-generation': return ; - } - } - // Otherwise, return the multi-feature app shell layout return (