feat(providers): add Fireworks BYOK support and official icon

Author: waleedlatif1

apps/sim/.env.example

@@ -28,7 +28,7 @@ API_ENCRYPTION_KEY=your_api_encryption_key # Use `openssl rand -hex 32` to gener
 # OLLAMA_URL=http://localhost:11434  # URL for local Ollama server - uncomment if using local models
 # VLLM_BASE_URL=http://localhost:8000    # Base URL for your self-hosted vLLM (OpenAI-compatible)
 # VLLM_API_KEY=                          # Optional bearer token if your vLLM instance requires auth
-# FIREWORKS_API_KEY=                     # Optional Fireworks AI API key for dynamic model listing
+# FIREWORKS_API_KEY=                     # Optional Fireworks AI API key for model listing
 
 # Admin API (Optional - for self-hosted GitOps)
 # ADMIN_API_KEY=  # Use `openssl rand -hex 32` to generate. Enables admin API for workflow export/import.

apps/sim/app/api/providers/fireworks/models/route.ts

@@ -1,5 +1,7 @@
 import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
+import { getBYOKKey } from '@/lib/api-key/byok'
+import { getSession } from '@/lib/auth'
 import { env } from '@/lib/core/config/env'
 import { filterBlacklistedModels, isProviderBlacklisted } from '@/providers/utils'
 
@@ -17,15 +19,31 @@ interface FireworksModelsResponse {
   object?: string
 }
 
-export async function GET(_request: NextRequest) {
+export async function GET(request: NextRequest) {
   if (isProviderBlacklisted('fireworks')) {
     logger.info('Fireworks provider is blacklisted, returning empty models')
     return NextResponse.json({ models: [] })
   }
 
-  const apiKey = env.FIREWORKS_API_KEY
+  let apiKey: string | undefined
+
+  const workspaceId = request.nextUrl.searchParams.get('workspaceId')
+  if (workspaceId) {
+    const session = await getSession()
+    if (session?.user?.id) {
+      const byokResult = await getBYOKKey(workspaceId, 'fireworks')
+      if (byokResult) {
+        apiKey = byokResult.apiKey
+      }
+    }
+  }
+
+  if (!apiKey) {
+    apiKey = env.FIREWORKS_API_KEY
+  }
+
   if (!apiKey) {
-    logger.info('No FIREWORKS_API_KEY configured, returning empty models')
+    logger.info('No Fireworks API key available, returning empty models')
     return NextResponse.json({ models: [] })
   }
 

apps/sim/app/api/workspaces/[id]/byok-keys/route.ts

@@ -18,6 +18,7 @@ const VALID_PROVIDERS = [
   'anthropic',
   'google',
   'mistral',
+  'fireworks',
   'firecrawl',
   'exa',
   'serper',

apps/sim/app/workspace/[workspaceId]/providers/provider-models-loader.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect } from 'react'
 import { createLogger } from '@sim/logger'
+import { useParams } from 'next/navigation'
 import { useProviderModels } from '@/hooks/queries/providers'
 import {
   updateFireworksProviderModels,
@@ -13,11 +14,11 @@ import { type ProviderName, useProvidersStore } from '@/stores/providers'
 
 const logger = createLogger('ProviderModelsLoader')
 
-function useSyncProvider(provider: ProviderName) {
+function useSyncProvider(provider: ProviderName, workspaceId?: string) {
   const setProviderModels = useProvidersStore((state) => state.setProviderModels)
   const setProviderLoading = useProvidersStore((state) => state.setProviderLoading)
   const setOpenRouterModelInfo = useProvidersStore((state) => state.setOpenRouterModelInfo)
-  const { data, isLoading, isFetching, error } = useProviderModels(provider)
+  const { data, isLoading, isFetching, error } = useProviderModels(provider, workspaceId)
 
   useEffect(() => {
     setProviderLoading(provider, isLoading || isFetching)
@@ -54,10 +55,13 @@ function useSyncProvider(provider: ProviderName) {
 }
 
 export function ProviderModelsLoader() {
+  const params = useParams()
+  const workspaceId = params?.workspaceId as string | undefined
+
   useSyncProvider('base')
   useSyncProvider('ollama')
   useSyncProvider('vllm')
   useSyncProvider('openrouter')
-  useSyncProvider('fireworks')
+  useSyncProvider('fireworks', workspaceId)
   return null
 }

apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx

@@ -18,6 +18,7 @@ import {
   BrandfetchIcon,
   ExaAIIcon,
   FirecrawlIcon,
+  FireworksIcon,
   GeminiIcon,
   GoogleIcon,
   JinaAIIcon,
@@ -75,6 +76,13 @@ const PROVIDERS: {
     description: 'LLM calls and Knowledge Base OCR',
     placeholder: 'Enter your API key',
   },
+  {
+    id: 'fireworks',
+    name: 'Fireworks',
+    icon: FireworksIcon,
+    description: 'LLM calls',
+    placeholder: 'Enter your Fireworks API key',
+  },
   {
     id: 'firecrawl',
     name: 'Firecrawl',

apps/sim/components/icons.tsx

@@ -3424,13 +3424,17 @@ export function FireworksIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
       {...props}
-      fill='currentColor'
-      height='1em'
-      viewBox='0 0 24 24'
-      width='1em'
+      viewBox='0 0 512 512'
       xmlns='http://www.w3.org/2000/svg'
+      fillRule='evenodd'
+      clipRule='evenodd'
+      strokeLinejoin='round'
+      strokeMiterlimit={2}
     >
-      <path d='M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 7.37l-2.453 4.248a.5.5 0 01-.433.25h-2.516l-1.226 2.124h3.742a.5.5 0 01.433.75l-2.453 4.248a.5.5 0 01-.866 0L9.67 14.742a.5.5 0 01.433-.75h2.516l1.226-2.124H10.1a.5.5 0 01-.433-.75l2.453-4.248a.5.5 0 01.866 0l2.453 4.248a.5.5 0 01-.433.75h-.516l1.97-3.412a.5.5 0 01.866 0l.568.914z' />
+      <path
+        d='M314.333 110.167L255.98 251.729l-58.416-141.562h-37.459l64 154.75c5.23 12.854 17.771 21.312 31.646 21.312s26.417-8.437 31.646-21.27l64.396-154.792h-37.459zm24.917 215.666L446 216.583l-14.562-34.77-116.584 119.562c-9.708 9.958-12.541 24.833-7.146 37.646 5.292 12.73 17.792 21.083 31.584 21.083l.042.063L506 359.75l-14.562-34.77-152.146.853h-.042zM66 216.5l14.563-34.77 116.583 119.562a34.592 34.592 0 017.146 37.646C199 351.667 186.5 360.02 172.708 360.02l-166.666-.375-.042.042 14.563-34.771 152.145.875L66 216.5z'
+        fill='currentColor'
+      />
     </svg>
   )
 }

apps/sim/hooks/queries/providers.ts

@@ -19,14 +19,21 @@ interface ProviderModelsResponse {
 
 export const providerKeys = {
   all: ['provider-models'] as const,
-  models: (provider: string) => [...providerKeys.all, provider] as const,
+  models: (provider: string, workspaceId?: string) =>
+    [...providerKeys.all, provider, workspaceId ?? ''] as const,
 }
 
 async function fetchProviderModels(
   provider: ProviderName,
-  signal?: AbortSignal
+  signal?: AbortSignal,
+  workspaceId?: string
 ): Promise<ProviderModelsResponse> {
-  const response = await fetch(providerEndpoints[provider], { signal })
+  let url = providerEndpoints[provider]
+  if (provider === 'fireworks' && workspaceId) {
+    url = `${url}?workspaceId=${encodeURIComponent(workspaceId)}`
+  }
+
+  const response = await fetch(url, { signal })
 
   if (!response.ok) {
     logger.warn(`Failed to fetch ${provider} models`, {
@@ -46,10 +53,10 @@ async function fetchProviderModels(
   }
 }
 
-export function useProviderModels(provider: ProviderName) {
+export function useProviderModels(provider: ProviderName, workspaceId?: string) {
   return useQuery({
-    queryKey: providerKeys.models(provider),
-    queryFn: ({ signal }) => fetchProviderModels(provider, signal),
+    queryKey: providerKeys.models(provider, workspaceId),
+    queryFn: ({ signal }) => fetchProviderModels(provider, signal, workspaceId),
     staleTime: 5 * 60 * 1000,
   })
 }

apps/sim/lib/api-key/byok.ts

@@ -73,6 +73,26 @@ export async function getApiKeyWithBYOK(
     return { apiKey: userProvidedKey || env.VLLM_API_KEY || 'empty', isBYOK: false }
   }
 
+  const isFireworksModel =
+    provider === 'fireworks' ||
+    useProvidersStore.getState().providers.fireworks.models.includes(model)
+  if (isFireworksModel) {
+    if (workspaceId) {
+      const byokResult = await getBYOKKey(workspaceId, 'fireworks')
+      if (byokResult) {
+        logger.info('Using BYOK key for Fireworks', { model, workspaceId })
+        return byokResult
+      }
+    }
+    if (userProvidedKey) {
+      return { apiKey: userProvidedKey, isBYOK: false }
+    }
+    if (env.FIREWORKS_API_KEY) {
+      return { apiKey: env.FIREWORKS_API_KEY, isBYOK: false }
+    }
+    throw new Error(`API key is required for Fireworks ${model}`)
+  }
+
   const isBedrockModel = provider === 'bedrock' || model.startsWith('bedrock/')
   if (isBedrockModel) {
     return { apiKey: 'bedrock-uses-own-credentials', isBYOK: false }

apps/sim/tools/types.ts

@@ -6,6 +6,7 @@ export type BYOKProviderId =
   | 'anthropic'
   | 'google'
   | 'mistral'
+  | 'fireworks'
   | 'firecrawl'
   | 'exa'
   | 'serper'