jeffemmett
/
canvas-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: auto-configure FAL API key for Drawfast tool 

- 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 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2025-12-24 11:07:57 -05:00
parent 6cff29e164
commit 4f4555b414
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/hooks/useLiveImage.tsx
View File

@ -7,6 +7,7 @@
import React, { createContext, useContext, useEffect, useRef, useCallback, useState } from 'react' import React, { createContext, useContext, useEffect, useRef, useCallback, useState } from 'react'
import { Editor, TLShapeId, Box, exportToBlob } from 'tldraw' import { Editor, TLShapeId, Box, exportToBlob } from 'tldraw'
import { fal } from '@fal-ai/client' import { fal } from '@fal-ai/client'
import { getFalConfig } from '@/lib/clientConfig'
// Fal.ai model endpoints // Fal.ai model endpoints
const FAL_MODEL_LCM = 'fal-ai/lcm-sd15-i2i' // Fast, real-time (~150ms) 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 * Provider component that manages Fal.ai connection
*/ */
export function LiveImageProvider({ children, apiKey: initialApiKey }: LiveImageProviderProps) { 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<string | null>( const [apiKey, setApiKeyState] = useState<string | null>(
initialApiKey || import.meta.env.VITE_FAL_API_KEY || null initialApiKey || import.meta.env.VITE_FAL_API_KEY || defaultApiKey
) )
const [isConnected, setIsConnected] = useState(false) const [isConnected, setIsConnected] = useState(false)
@ -39,7 +44,7 @@ export function LiveImageProvider({ children, apiKey: initialApiKey }: LiveImage
if (apiKey) { if (apiKey) {
fal.config({ credentials: apiKey }) fal.config({ credentials: apiKey })
setIsConnected(true) setIsConnected(true)
console.log('LiveImage: Fal.ai client configured') console.log('LiveImage: Fal.ai client configured with default key')
} else { } else {
setIsConnected(false) setIsConnected(false)
} }
@ -51,15 +56,18 @@ export function LiveImageProvider({ children, apiKey: initialApiKey }: LiveImage
localStorage.setItem('fal_api_key', key) 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(() => { useEffect(() => {
if (!apiKey) { if (!apiKey) {
const storedKey = localStorage.getItem('fal_api_key') const storedKey = localStorage.getItem('fal_api_key')
if (storedKey) { if (storedKey) {
setApiKeyState(storedKey) setApiKeyState(storedKey)
} else if (defaultApiKey) {
// Use default key from config
setApiKeyState(defaultApiKey)
} }
} }
}, []) }, [defaultApiKey])
return ( return (
<LiveImageContext.Provider value={{ isConnected, apiKey, setApiKey }}> <LiveImageContext.Provider value={{ isConnected, apiKey, setApiKey }}>