From 4f4555b414a093ef4fd846339bc1605fe4679285 Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Wed, 24 Dec 2025 11:07:57 -0500 Subject: [PATCH] feat: auto-configure FAL API key for Drawfast tool MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Updated LiveImageProvider to use getFalConfig() from clientConfig - Drawfast now automatically uses the default FAL API key - Users no longer need to manually enter API key to use the tool 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- src/hooks/useLiveImage.tsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/hooks/useLiveImage.tsx b/src/hooks/useLiveImage.tsx index 22e0544..9171ff5 100644 --- a/src/hooks/useLiveImage.tsx +++ b/src/hooks/useLiveImage.tsx @@ -7,6 +7,7 @@ import React, { createContext, useContext, useEffect, useRef, useCallback, useState } from 'react' import { Editor, TLShapeId, Box, exportToBlob } from 'tldraw' import { fal } from '@fal-ai/client' +import { getFalConfig } from '@/lib/clientConfig' // Fal.ai model endpoints const FAL_MODEL_LCM = 'fal-ai/lcm-sd15-i2i' // Fast, real-time (~150ms) @@ -29,8 +30,12 @@ interface LiveImageProviderProps { * Provider component that manages Fal.ai connection */ export function LiveImageProvider({ children, apiKey: initialApiKey }: LiveImageProviderProps) { + // Get default FAL key from clientConfig (includes the hardcoded default) + const falConfig = getFalConfig() + const defaultApiKey = falConfig?.apiKey || null + const [apiKey, setApiKeyState] = useState( - initialApiKey || import.meta.env.VITE_FAL_API_KEY || null + initialApiKey || import.meta.env.VITE_FAL_API_KEY || defaultApiKey ) const [isConnected, setIsConnected] = useState(false) @@ -39,7 +44,7 @@ export function LiveImageProvider({ children, apiKey: initialApiKey }: LiveImage if (apiKey) { fal.config({ credentials: apiKey }) setIsConnected(true) - console.log('LiveImage: Fal.ai client configured') + console.log('LiveImage: Fal.ai client configured with default key') } else { setIsConnected(false) } @@ -51,15 +56,18 @@ export function LiveImageProvider({ children, apiKey: initialApiKey }: LiveImage localStorage.setItem('fal_api_key', key) }, []) - // Try to load API key from localStorage on mount + // Try to load API key from localStorage on mount (but only if no default key) useEffect(() => { if (!apiKey) { const storedKey = localStorage.getItem('fal_api_key') if (storedKey) { setApiKeyState(storedKey) + } else if (defaultApiKey) { + // Use default key from config + setApiKeyState(defaultApiKey) } } - }, []) + }, [defaultApiKey]) return (