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 ; - 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 (