Update Home.tsx

Home.tsx

@@ -7,13 +7,33 @@ import {ContentUnion, GoogleGenAI, Modality} from '@google/genai';
 import {LoaderCircle, SendHorizontal, Trash2, X, Eraser} from 'lucide-react'; // Added Eraser
 import {useEffect, useRef, useState} from 'react';
 
-const API_KEY = process.env.API_KEY;
-let ai: GoogleGenAI | null = null;
-if (API_KEY) {
-  ai = new GoogleGenAI({apiKey: API_KEY});
-} else {
-  console.error("API_KEY is not set. Please ensure it's configured in your environment.");
-}
+function Home() {
+  const [apiKey, setApiKey] = useState<string | null>(null);
+  const [ai, setAi] = useState<GoogleGenAI | null>(null);
+  const [keyError, setKeyError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchKey() {
+      try {
+        const response = await fetch('/api/get-api-key'); // Assuming Nginx proxies this
+        if (!response.ok) {
+          throw new Error(`Failed to fetch API key: ${response.statusText}`);
+        }
+        const data = await response.json();
+        if (data.apiKey) {
+          setApiKey(data.apiKey);
+          setAi(new GoogleGenAI({ apiKey: data.apiKey }));
+        } else {
+          throw new Error(data.error || "API Key not returned from backend");
+        }
+      } catch (error: any) {
+        console.error("Error fetching API key:", error);
+        setKeyError(error.message);
+        // Show error to user
+      }
+    }
+    fetchKey();
+  }, []);
 
 function parseError(error: string) {
   try {