firebase · dlarocque · May 22, 2025 · Apr 28, 2025 · May 22, 2025 · May 22, 2025
diff --git a/ai/README.md b/ai/README.md
@@ -0,0 +1,7 @@
+# Firebase AI SDK Quickstart
+
+This directory contains samples for the Firebase AI SDK for Web.
+
+## Table of Contents
+
+1. **Firebase AI Logic Sample App (`ai-react-app/`)**: demonstrates features of the Firebase AI SDK for Web integrated into a web application built with React and TypeScript.
diff --git a/ai/ai-react-app/.prettierrc b/ai/ai-react-app/.prettierrc
@@ -0,0 +1 @@
+{}
diff --git a/ai/ai-react-app/README.md b/ai/ai-react-app/README.md
@@ -0,0 +1,33 @@
+# Firebase AI Logic Sample App
+
+![Photo of the Firebase AI Logic Sample App](images/screenshot.png)
+
+This sample application demonstrates features of the Firebase AI SDK for Web (`firebase/ai`), integrated into a web application built with React and TypeScript.
+
+For more information about the Firebase AI SDK, see the [Firebase AI Logic Docs](https://firebase.google.com/docs/ai-logic).
+
+## Setup Instructions
+
+1. Use the guided workflow in the [Firebase AI Logic page](https://console.firebase.google.com/project/_/ailogic?_gl=1*dps5w8*_ga*NDk4MDUyODg4LjE3NDc4NTIwMDA.*_ga_CW55HF8NVT*czE3NDc5MzE2NzQkbzIkZzEkdDE3NDc5MzE3MjEkajEzJGwwJGgwJGRjVEhnTE1XMmtOQURjUXFPa18zZlRTU2JIblVCY0tTenN3) of the Firebase Console to setup your project (including enabling the required APIs for your chosen Gemini API provider), then register your app with your Firebase project.
+
+1. Update `src/config/firebase-config.ts` with your Firebase configuration.
+
+1. Install dependencies:
+
+   ```bash
+   yarn
+   ```
+
+1. Start the development server:
+
+   ```bash
+   yarn dev
+   ```
+
+## Support
+
+- [Firebase Support](https://firebase.google.com/support/)
+
+## License
+
+© Google, 2025. Licensed under an [Apache-2](../LICENSE)
diff --git a/ai/ai-react-app/eslint.config.js b/ai/ai-react-app/eslint.config.js
@@ -0,0 +1,30 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import eslintConfigPrettier from "eslint-config-prettier/flat"
+
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  },
+  eslintConfigPrettier
+);
diff --git a/ai/ai-react-app/firebase-icon.svg b/ai/ai-react-app/firebase-icon.svg
diff --git a/ai/ai-react-app/images/screenshot.png b/ai/ai-react-app/images/screenshot.png
diff --git a/ai/ai-react-app/index.html b/ai/ai-react-app/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/firebase-icon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Firebase AI Sample App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>