diff --git a/auto-claude-ui/src/renderer/components/onboarding/GraphitiStep.tsx b/auto-claude-ui/src/renderer/components/onboarding/GraphitiStep.tsx index 107b5edc..98a6f629 100644 --- a/auto-claude-ui/src/renderer/components/onboarding/GraphitiStep.tsx +++ b/auto-claude-ui/src/renderer/components/onboarding/GraphitiStep.tsx @@ -48,6 +48,17 @@ const PROVIDER_INFO: Record): string { + switch (provider) { + case 'openai': return (settings.globalOpenAIApiKey as string) || ''; + case 'anthropic': return (settings.globalAnthropicApiKey as string) || ''; + case 'google': return (settings.globalGoogleApiKey as string) || ''; + case 'groq': return (settings.globalGroqApiKey as string) || ''; + default: return ''; + } +} + interface ValidationStatus { falkordb: { tested: boolean; success: boolean; message: string } | null; llm: { tested: boolean; success: boolean; message: string } | null; @@ -60,11 +71,13 @@ interface ValidationStatus { */ export function GraphitiStep({ onNext, onBack, onSkip }: GraphitiStepProps) { const { settings, updateSettings } = useSettingsStore(); + // Load saved provider preference, defaulting to 'openai' + const savedProvider = ((settings as Record).graphitiLlmProvider as GraphitiProviderType) || 'openai'; const [config, setConfig] = useState({ enabled: false, falkorDbUri: 'bolt://localhost:6379', // Standard FalkorDB port, will be auto-detected from Docker - llmProvider: 'openai', - apiKey: settings.globalOpenAIApiKey || '' + llmProvider: savedProvider, + apiKey: getApiKeyForProvider(savedProvider, settings as Record) }); const [showApiKey, setShowApiKey] = useState(false); const [isSaving, setIsSaving] = useState(false); @@ -115,7 +128,9 @@ export function GraphitiStep({ onNext, onBack, onSkip }: GraphitiStepProps) { }; const handleProviderChange = (provider: GraphitiProviderType) => { - setConfig(prev => ({ ...prev, llmProvider: provider, apiKey: '' })); + // Load saved API key for the selected provider + const savedKey = getApiKeyForProvider(provider, settings as Record); + setConfig(prev => ({ ...prev, llmProvider: provider, apiKey: savedKey })); setValidationStatus(prev => ({ ...prev, llm: null })); setError(null); }; @@ -211,10 +226,18 @@ export function GraphitiStep({ onNext, onBack, onSkip }: GraphitiStepProps) { const result = await window.electronAPI.saveSettings(settingsUpdate); if (result?.success) { - // Update local settings store + // Update local settings store for all providers + const storeUpdate: Record = {}; if (config.llmProvider === 'openai') { - updateSettings({ globalOpenAIApiKey: config.apiKey.trim() }); + storeUpdate.globalOpenAIApiKey = config.apiKey.trim(); + } else if (config.llmProvider === 'anthropic') { + storeUpdate.globalAnthropicApiKey = config.apiKey.trim(); + } else if (config.llmProvider === 'google') { + storeUpdate.globalGoogleApiKey = config.apiKey.trim(); + } else if (config.llmProvider === 'groq') { + storeUpdate.globalGroqApiKey = config.apiKey.trim(); } + updateSettings(storeUpdate); // Proceed to next step immediately after successful save onNext(); } else { @@ -548,6 +571,11 @@ export function GraphitiStep({ onNext, onBack, onSkip }: GraphitiStepProps) { All connections validated successfully!

)} + {config.llmProvider !== 'openai' && ( +

+ Note: API key validation currently only fully supports OpenAI. Your {PROVIDER_INFO[config.llmProvider].name} key will be saved and used at runtime. +

+ )} )}