fix: Update Gemini AI to use server-side API key and gemini-flash-latest model

- Use process.env.GEMINI_API_KEY from server instead of client-side input
- Update model to gemini-flash-latest for both chat and transcribe routes
- Remove API key input UI from frontend
- Enable immediate user input without requiring API key entry

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

app/api/gemini/chat/route.ts

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server'
 
-const GEMINI_API_URL = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent'
+const GEMINI_API_URL = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-flash-latest:generateContent'
 const GEMINI_API_KEY = process.env.GEMINI_API_KEY
 
 export async function POST(request: NextRequest) {

app/api/gemini/transcribe/route.ts

@@ -3,16 +3,17 @@ import { NextRequest, NextResponse } from 'next/server'
 // Note: For audio transcription, we'll use Gemini's multimodal capabilities
 // In production, you might want to use Google Cloud Speech-to-Text API for better accuracy
 
+const GEMINI_API_KEY = process.env.GEMINI_API_KEY
+
 export async function POST(request: NextRequest) {
   try {
     const formData = await request.formData()
     const audioFile = formData.get('audio') as File
-    const apiKey = formData.get('apiKey') as string
 
-    if (!apiKey) {
+    if (!GEMINI_API_KEY) {
       return NextResponse.json(
-        { error: 'API key is required' },
-        { status: 400 }
+        { error: 'Gemini API key not configured on server. Please set GEMINI_API_KEY environment variable.' },
+        { status: 500 }
       )
     }
 
@@ -30,7 +31,7 @@ export async function POST(request: NextRequest) {
 
     // Use Gemini API to transcribe
     // Note: Gemini 1.5 Pro supports audio, but Flash might have limitations
-    const GEMINI_API_URL = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent'
+    const GEMINI_API_URL = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-flash-latest:generateContent'
 
     const requestBody = {
       contents: [{
@@ -55,7 +56,7 @@ export async function POST(request: NextRequest) {
       }
     }
 
-    const response = await fetch(`${GEMINI_API_URL}?key=${apiKey}`, {
+    const response = await fetch(`${GEMINI_API_URL}?key=${GEMINI_API_KEY}`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',

app/gemini/page.tsx

@@ -19,8 +19,6 @@ export default function GeminiAIApp() {
   const [isRecording, setIsRecording] = useState(false)
   const [selectedImage, setSelectedImage] = useState<string | null>(null)
   const [activeTab, setActiveTab] = useState<'chat' | 'transcribe' | 'image'>('chat')
-  const [apiKey, setApiKey] = useState('')
-  const [showApiKeyInput, setShowApiKeyInput] = useState(true)
 
   const fileInputRef = useRef<HTMLInputElement>(null)
   const audioInputRef = useRef<HTMLInputElement>(null)
@@ -28,26 +26,10 @@ export default function GeminiAIApp() {
   const mediaRecorderRef = useRef<MediaRecorder | null>(null)
   const audioChunksRef = useRef<Blob[]>([])
 
-  useEffect(() => {
-    // Check for stored API key
-    const storedKey = localStorage.getItem('gemini_api_key')
-    if (storedKey) {
-      setApiKey(storedKey)
-      setShowApiKeyInput(false)
-    }
-  }, [])
-
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
   }, [messages])
 
-  const saveApiKey = () => {
-    if (apiKey.trim()) {
-      localStorage.setItem('gemini_api_key', apiKey)
-      setShowApiKeyInput(false)
-    }
-  }
-
   const handleSendMessage = async () => {
     if (!inputText.trim() && !selectedImage) return
 
@@ -72,7 +54,6 @@ export default function GeminiAIApp() {
         body: JSON.stringify({
           message: inputText,
           imageUrl: selectedImage,
-          apiKey: apiKey,
           history: messages.slice(-10) // Send last 10 messages for context
         })
       })
@@ -154,7 +135,6 @@ export default function GeminiAIApp() {
     setIsLoading(true)
     const formData = new FormData()
     formData.append('audio', audioBlob, 'recording.wav')
-    formData.append('apiKey', apiKey)
 
     try {
       const response = await fetch('/api/gemini/transcribe', {
@@ -194,30 +174,6 @@ export default function GeminiAIApp() {
             <p className="text-blue-100">Chat, Transcribe, and Analyze Images with AI</p>
           </div>
 
-          {/* API Key Input */}
-          {showApiKeyInput && (
-            <div className="p-4 bg-yellow-50 border-b border-yellow-200">
-              <div className="flex gap-2">
-                <input
-                  type="password"
-                  placeholder="Enter your Gemini API Key"
-                  value={apiKey}
-                  onChange={(e) => setApiKey(e.target.value)}
-                  className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                />
-                <button
-                  onClick={saveApiKey}
-                  className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
-                >
-                  Save Key
-                </button>
-              </div>
-              <p className="text-sm text-gray-600 mt-2">
-                Get your API key from <a href="https://makersuite.google.com/app/apikey" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">Google AI Studio</a>
-              </p>
-            </div>
-          )}
-
           {/* Tabs */}
           <div className="flex border-b border-gray-200">
             <button