diff --git a/ai/ai-samples/README.md b/ai/ai-samples/README.md
index 4c8de7b80..7325c7f8d 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,55 +18,69 @@ 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
+### 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:
- 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
+```
+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
-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 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.
+1. Set `VITE_APPCHECK_DEBUG_TOKEN=true` in your **.env.local** file
+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
+**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 instructions.
\ No newline at end of file
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