feat: add icons to model providers

apiclient/types/model.go

@@ -23,6 +23,7 @@ type ModelStatus struct {
 }
 
 type ModelProviderStatus struct {
+	Icon                            string   `json:"icon,omitempty"`
 	Configured                      bool     `json:"configured"`
 	RequiredConfigurationParameters []string `json:"requiredConfigurationParameters,omitempty"`
 	MissingConfigurationParameters  []string `json:"missingConfigurationParameters,omitempty"`

pkg/api/handlers/model.go

@@ -188,25 +188,31 @@ func convertModel(ctx context.Context, c kclient.Client, gClient *gptscript.GPTS
 func convertModelProviderToolRef(ctx context.Context, gptscript *gptscript.GPTScript, toolRef v1.ToolReference) (*types.ModelProviderStatus, error) {
 	var (
 		requiredEnvVars, missingEnvVars []string
+		icon                            string
 	)
-	if toolRef.Status.Tool != nil && toolRef.Status.Tool.Metadata["envVars"] != "" {
-		cred, err := gptscript.RevealCredential(ctx, []string{string(toolRef.UID)}, toolRef.Name)
-		if err != nil && !strings.HasSuffix(err.Error(), "credential not found") {
-			return nil, fmt.Errorf("failed to reveal credential for model provider %q: %w", toolRef.Name, err)
-		}
-
+	if toolRef.Status.Tool != nil {
 		if toolRef.Status.Tool.Metadata["envVars"] != "" {
-			requiredEnvVars = strings.Split(toolRef.Status.Tool.Metadata["envVars"], ",")
-		}
+			cred, err := gptscript.RevealCredential(ctx, []string{string(toolRef.UID)}, toolRef.Name)
+			if err != nil && !strings.HasSuffix(err.Error(), "credential not found") {
+				return nil, fmt.Errorf("failed to reveal credential for model provider %q: %w", toolRef.Name, err)
+			}
 
-		for _, envVar := range requiredEnvVars {
-			if cred.Env[envVar] == "" {
-				missingEnvVars = append(missingEnvVars, envVar)
+			if toolRef.Status.Tool.Metadata["envVars"] != "" {
+				requiredEnvVars = strings.Split(toolRef.Status.Tool.Metadata["envVars"], ",")
+			}
+
+			for _, envVar := range requiredEnvVars {
+				if cred.Env[envVar] == "" {
+					missingEnvVars = append(missingEnvVars, envVar)
+				}
 			}
 		}
+
+		icon = toolRef.Status.Tool.Metadata["icon"]
 	}
 
 	return &types.ModelProviderStatus{
+		Icon:                            icon,
 		Configured:                      toolRef.Status.Tool != nil && len(missingEnvVars) == 0,
 		RequiredConfigurationParameters: requiredEnvVars,
 		MissingConfigurationParameters:  missingEnvVars,

ui/admin/app/components/model-providers/ModelProviderLists.tsx

@@ -2,6 +2,7 @@ import { BoxesIcon, CircleCheckIcon, CircleSlashIcon } from "lucide-react";
 import useSWR from "swr";
 
 import { ModelProviderApiService } from "~/lib/service/api/modelProviderApiService";
+import { cn } from "~/lib/utils";
 
 import { ModelProviderConfigure } from "~/components/model-providers/ModelProviderConfigure";
 import { Card, CardContent, CardHeader } from "~/components/ui/card";
@@ -25,7 +26,19 @@ export function ModelProviderList() {
                         </CardHeader>
                         <CardContent className="flex flex-col items-center gap-4">
                             <div className="w-16 h-16">
-                                <BoxesIcon className="w-16 h-16 color-primary" />
+                                {modelProvider.icon ? (
+                                    <img
+                                        src={modelProvider.icon}
+                                        alt={modelProvider.name}
+                                        className={cn("w-16 h-16", {
+                                            "dark:invert":
+                                                modelProvider.name !==
+                                                "Azure OpenAI",
+                                        })}
+                                    />
+                                ) : (
+                                    <BoxesIcon className="w-16 h-16 color-primary" />
+                                )}
                             </div>
                             <div className="text-lg font-semibold">
                                 {modelProvider.name}

ui/admin/app/lib/model/modelProviders.ts

@@ -2,6 +2,7 @@ import { EntityMeta } from "~/lib/model/primitives";
 
 export type ModelProviderStatus = {
     configured: boolean;
+    icon?: string;
     requiredConfigurationParameters?: string[];
     missingConfigurationParameters?: string[];
 };