diff --git a/src/components/FloatingActionBar.tsx b/src/components/FloatingActionBar.tsx
index 5371dcd7..f51d1c34 100644
--- a/src/components/FloatingActionBar.tsx
+++ b/src/components/FloatingActionBar.tsx
@@ -2,7 +2,7 @@
import { useRef, useState, useEffect, useMemo } from "react";
import { useWorkflowStore } from "@/store/workflowStore";
-import { NodeType } from "@/types";
+import { NodeType, ProviderType } from "@/types";
import { useReactFlow } from "@xyflow/react";
// Get the center of the React Flow pane in screen coordinates
@@ -141,6 +141,28 @@ function GenerateComboButton() {
);
}
+function ProviderIconButton({ provider, onClick }: { provider: ProviderType; onClick: () => void }) {
+ return (
+
+ );
+}
+
export function FloatingActionBar() {
const {
nodes,
@@ -151,6 +173,9 @@ export function FloatingActionBar() {
validateWorkflow,
edgeStyle,
setEdgeStyle,
+ providerSettings,
+ setModelSearchOpen,
+ modelSearchOpen,
} = useWorkflowStore();
const [runMenuOpen, setRunMenuOpen] = useState(false);
const runMenuRef = useRef(null);
@@ -215,6 +240,22 @@ export function FloatingActionBar() {
+ {/* Provider model browser icons */}
+
+
+ {/* Replicate icon - only show if API key is configured */}
+ {providerSettings.providers.replicate?.apiKey && (
+ setModelSearchOpen(true, "replicate")}
+ />
+ )}
+ {/* fal.ai icon - always show (works without key but rate limited) */}
+ setModelSearchOpen(true, "fal")}
+ />
+