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.
+
+ )}
)}