feat: Store API key locally in browser instead of build-time

- Add apiKeyService for localStorage-based API key management
- Add ApiKeyModal component for entering/updating API key
- Update geminiService to use dynamic API key
- Remove .env.example as API key is now user-provided
- Update to gemini-2.0-flash model

The API key is now stored only in the user's browser localStorage,
making the app more secure and easier to deploy.

https://claude.ai/code/session_01DBAyjuKW8Qtzixc64qn9KP

.env.example

@@ -1,3 +0,0 @@
-# Google Gemini API Key (erforderlich)
-# Holen Sie sich einen Key unter: https://aistudio.google.com/apikey
-GEMINI_API_KEY=your_gemini_api_key_here

App.tsx

@@ -2,9 +2,11 @@ import React, { useState, useEffect } from 'react';
 import { AppStatus, FileData, FormResponse } from './types';
 import { FileUpload } from './components/FileUpload';
 import { ReviewPanel } from './components/ReviewPanel';
+import { ApiKeyModal } from './components/ApiKeyModal';
 import { processDocuments } from './services/geminiService';
 import { getPdfFields, PdfFieldInfo } from './services/pdfService';
-import { Bot, Sparkles, ArrowRight, FileCheck2, ScanText, Loader2, AlertTriangle, FileText, Check } from 'lucide-react';
+import { getApiKey, setApiKey, hasApiKey } from './services/apiKeyService';
+import { Bot, Sparkles, ArrowRight, FileCheck2, ScanText, Loader2, AlertTriangle, FileText, Check, Settings } from 'lucide-react';
 
 const App: React.FC = () => {
   const [status, setStatus] = useState<AppStatus>(AppStatus.IDLE);
@@ -13,6 +15,12 @@ const App: React.FC = () => {
   const [pdfFields, setPdfFields] = useState<PdfFieldInfo[]>([]);
   const [responseData, setResponseData] = useState<FormResponse | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [showApiKeyModal, setShowApiKeyModal] = useState(!hasApiKey());
+
+  const handleSaveApiKey = (key: string) => {
+    setApiKey(key);
+    setShowApiKeyModal(false);
+  };
 
   useEffect(() => {
     const analyzePdf = async () => {
@@ -55,14 +63,27 @@ const App: React.FC = () => {
   if (status === AppStatus.REVIEW && responseData && formFile && sourceFile) {
     return (
       <div className="min-h-screen bg-slate-50">
+        <ApiKeyModal
+          isOpen={showApiKeyModal}
+          onSave={handleSaveApiKey}
+          onClose={() => setShowApiKeyModal(false)}
+          currentKey={getApiKey() || ''}
+        />
         <header className="bg-white border-b border-slate-200 sticky top-0 z-50">
-          <div className="max-w-7xl mx-auto px-4 h-16 flex items-center">
+          <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
             <div className="flex items-center space-x-2">
               <div className="bg-indigo-600 p-1.5 rounded-lg">
                 <Bot className="w-5 h-5 text-white" />
               </div>
               <span className="font-bold text-lg text-slate-900">AutoForm AI</span>
             </div>
+            <button
+              onClick={() => setShowApiKeyModal(true)}
+              className="p-2 text-slate-500 hover:text-slate-700 hover:bg-slate-100 rounded-lg transition-colors"
+              title="API Key Einstellungen"
+            >
+              <Settings className="w-5 h-5" />
+            </button>
           </div>
         </header>
         <ReviewPanel 
@@ -79,6 +100,12 @@ const App: React.FC = () => {
 
   return (
     <div className="min-h-screen bg-slate-50 flex flex-col">
+      <ApiKeyModal
+        isOpen={showApiKeyModal}
+        onSave={handleSaveApiKey}
+        onClose={hasApiKey() ? () => setShowApiKeyModal(false) : undefined}
+        currentKey={getApiKey() || ''}
+      />
       {/* Header */}
       <header className="bg-white border-b border-slate-200">
         <div className="max-w-7xl mx-auto px-4 h-20 flex items-center justify-between">
@@ -91,10 +118,19 @@ const App: React.FC = () => {
               <p className="text-xs text-slate-500 font-medium">Intelligent Document Processing</p>
             </div>
           </div>
-          <div className="hidden md:flex items-center space-x-6 text-sm font-medium text-slate-600">
+          <div className="flex items-center space-x-4">
-            <span className="flex items-center"><ScanText className="w-4 h-4 mr-2" />1. Scan</span>
+            <div className="hidden md:flex items-center space-x-6 text-sm font-medium text-slate-600">
-            <span className="flex items-center"><Sparkles className="w-4 h-4 mr-2" />2. Extract</span>
+              <span className="flex items-center"><ScanText className="w-4 h-4 mr-2" />1. Scan</span>
-            <span className="flex items-center"><FileCheck2 className="w-4 h-4 mr-2" />3. Review</span>
+              <span className="flex items-center"><Sparkles className="w-4 h-4 mr-2" />2. Extract</span>
+              <span className="flex items-center"><FileCheck2 className="w-4 h-4 mr-2" />3. Review</span>
+            </div>
+            <button
+              onClick={() => setShowApiKeyModal(true)}
+              className="p-2 text-slate-500 hover:text-slate-700 hover:bg-slate-100 rounded-lg transition-colors"
+              title="API Key Einstellungen"
+            >
+              <Settings className="w-5 h-5" />
+            </button>
           </div>
         </div>
       </header>

components/ApiKeyModal.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { Key, ExternalLink, X } from 'lucide-react';
+
+interface ApiKeyModalProps {
+  isOpen: boolean;
+  onSave: (key: string) => void;
+  onClose?: () => void;
+  currentKey?: string;
+}
+
+export const ApiKeyModal: React.FC<ApiKeyModalProps> = ({ isOpen, onSave, onClose, currentKey }) => {
+  const [apiKey, setApiKey] = useState(currentKey || '');
+  const [error, setError] = useState('');
+
+  if (!isOpen) return null;
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!apiKey.trim()) {
+      setError('Bitte gib einen API Key ein');
+      return;
+    }
+    if (!apiKey.startsWith('AI')) {
+      setError('Der Key sollte mit "AI" beginnen');
+      return;
+    }
+    onSave(apiKey.trim());
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-2xl shadow-2xl max-w-md w-full overflow-hidden">
+        <div className="bg-indigo-600 px-6 py-4 flex items-center justify-between">
+          <div className="flex items-center space-x-3">
+            <Key className="w-5 h-5 text-white" />
+            <h2 className="text-lg font-bold text-white">Gemini API Key</h2>
+          </div>
+          {onClose && (
+            <button onClick={onClose} className="text-white/80 hover:text-white">
+              <X className="w-5 h-5" />
+            </button>
+          )}
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-6 space-y-4">
+          <p className="text-slate-600 text-sm">
+            Dein API Key wird nur lokal in deinem Browser gespeichert und nie an unsere Server gesendet.
+          </p>
+
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-2">
+              API Key
+            </label>
+            <input
+              type="password"
+              value={apiKey}
+              onChange={(e) => { setApiKey(e.target.value); setError(''); }}
+              placeholder="AIza..."
+              className="w-full px-4 py-3 border border-slate-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all"
+              autoFocus
+            />
+            {error && <p className="text-red-500 text-sm mt-1">{error}</p>}
+          </div>
+
+          <a
+            href="https://aistudio.google.com/apikey"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center text-sm text-indigo-600 hover:text-indigo-700"
+          >
+            <ExternalLink className="w-4 h-4 mr-1" />
+            API Key bei Google AI Studio holen
+          </a>
+
+          <button
+            type="submit"
+            className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-xl transition-colors"
+          >
+            Speichern
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};

services/apiKeyService.ts

@@ -0,0 +1,18 @@
+const STORAGE_KEY = 'gemini_api_key';
+
+export const getApiKey = (): string | null => {
+  return localStorage.getItem(STORAGE_KEY);
+};
+
+export const setApiKey = (key: string): void => {
+  localStorage.setItem(STORAGE_KEY, key);
+};
+
+export const clearApiKey = (): void => {
+  localStorage.removeItem(STORAGE_KEY);
+};
+
+export const hasApiKey = (): boolean => {
+  const key = getApiKey();
+  return key !== null && key.length > 0;
+};

services/geminiService.ts

@@ -1,8 +1,15 @@
 import { GoogleGenAI, Type, Schema } from "@google/genai";
 import { FileData, FormResponse } from "../types";
 import { PdfFieldInfo } from "./pdfService";
+import { getApiKey } from "./apiKeyService";
 
-const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
+const getAI = () => {
+  const apiKey = getApiKey();
+  if (!apiKey) {
+    throw new Error("Kein API Key gesetzt. Bitte gib deinen Gemini API Key ein.");
+  }
+  return new GoogleGenAI({ apiKey });
+};
 
 const responseSchema: Schema = {
   type: Type.OBJECT,
@@ -130,7 +137,8 @@ export const processDocuments = async (
   `;
 
   try {
-    const modelId = "gemini-3-flash-preview";
+    const ai = getAI();
+    const modelId = "gemini-2.0-flash";
 
     const response = await ai.models.generateContent({
       model: modelId,