fix(frontend): Format actions.ts for prettier compliance

feat(frontend): Wire up migration system - usage tracking, safe delete/disable, migration list/revert
- toggleLlmModelAction now sends migration params (migrate_to_slug, reason, custom_credit_cost) - deleteLlmModelAction passes replacement_model_slug query param - fetchLlmModelUsage calls real /llm/models/{slug}/usage endpoint - fetchLlmMigrations calls real /llm/migrations endpoint - revertLlmMigrationAction calls /llm/migrations/{id}/revert - Fix model usage calls to use slug instead of UUID
2026-04-08 03:00:28 -04:00 · 2026-04-07 18:35:51 +01:00 · 2026-04-07 18:35:50 +01:00 · 2026-04-07 18:35:50 +01:00
21 changed files with 3512 additions and 0 deletions
--- a/autogpt_platform/frontend/src/app/(platform)/admin/layout.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/admin/layout.tsx
@@ -1,5 +1,6 @@
 import { Sidebar } from "@/components/__legacy__/Sidebar";
 import { Users, DollarSign, UserSearch, FileText } from "lucide-react";
+import { Gauge, ChatsCircle } from "@phosphor-icons/react/dist/ssr";

 import { IconSliders } from "@/components/__legacy__/ui/icons";

@@ -21,11 +22,21 @@ const sidebarLinkGroups = [
        href: "/admin/impersonation",
        icon: <UserSearch className="h-6 w-6" />,
      },
+      {
+        text: "Rate Limits",
+        href: "/admin/rate-limits",
+        icon: <Gauge className="h-6 w-6" />,
+      },
      {
        text: "Execution Analytics",
        href: "/admin/execution-analytics",
        icon: <FileText className="h-6 w-6" />,
      },
+      {
+        text: "LLM Registry",
+        href: "/admin/llms",
+        icon: <ChatsCircle className="h-6 w-6" />,
+      },
      {
        text: "Admin User Management",
        href: "/admin/settings",
--- a/autogpt_platform/frontend/src/app/(platform)/admin/llms/actions.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/admin/llms/actions.ts
@@ -0,0 +1,404 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import {
+  createRequestHeaders,
+  getServerAuthToken,
+} from "@/lib/autogpt-server-api/helpers";
+import { environment } from "@/services/environment";
+
+const ADMIN_LLM_PATH = "/admin/llms";
+
+// =============================================================================
+// Authenticated Fetch Helper
+// =============================================================================
+
+async function adminFetch(
+  endpoint: string,
+  options: RequestInit = {},
+): Promise<{ status: number; data: any }> {
+  const baseUrl = environment.getAGPTServerBaseUrl();
+  const token = await getServerAuthToken();
+  const headers = createRequestHeaders(
+    token,
+    !!options.body,
+    "application/json",
+  );
+
+  const response = await fetch(`${baseUrl}${endpoint}`, {
+    ...options,
+    headers: {
+      ...headers,
+      ...((options.headers as Record<string, string>) || {}),
+    },
+  });
+
+  let data: any = null;
+  if (response.status !== 204) {
+    const contentType = response.headers.get("content-type");
+    const text = await response.text();
+    if (text && contentType?.includes("application/json")) {
+      try {
+        data = JSON.parse(text);
+      } catch {
+        data = text;
+      }
+    } else {
+      data = text;
+    }
+  }
+
+  if (!response.ok) {
+    const errorMessage =
+      data?.detail || data?.message || `HTTP ${response.status}`;
+    throw new Error(errorMessage);
+  }
+
+  return { status: response.status, data };
+}
+
+// =============================================================================
+// Utilities
+// =============================================================================
+
+function getRequiredFormField(
+  formData: FormData,
+  fieldName: string,
+  displayName?: string,
+): string {
+  const raw = formData.get(fieldName);
+  const value = raw ? String(raw).trim() : "";
+  if (!value) {
+    throw new Error(`${displayName || fieldName} is required`);
+  }
+  return value;
+}
+
+function getRequiredPositiveNumber(
+  formData: FormData,
+  fieldName: string,
+  displayName?: string,
+): number {
+  const raw = formData.get(fieldName);
+  const value = Number(raw);
+  if (raw === null || raw === "" || !Number.isFinite(value) || value <= 0) {
+    throw new Error(`${displayName || fieldName} must be a positive number`);
+  }
+  return value;
+}
+
+function getRequiredNumber(
+  formData: FormData,
+  fieldName: string,
+  displayName?: string,
+): number {
+  const raw = formData.get(fieldName);
+  const value = Number(raw);
+  if (raw === null || raw === "" || !Number.isFinite(value)) {
+    throw new Error(`${displayName || fieldName} is required`);
+  }
+  return value;
+}
+
+// =============================================================================
+// Provider Actions
+// =============================================================================
+
+export async function fetchLlmProviders() {
+  const { data } = await adminFetch("/api/llm/admin/providers");
+  return data;
+}
+
+export async function createLlmProviderAction(formData: FormData) {
+  const payload = {
+    name: String(formData.get("name") || "").trim(),
+    display_name: String(formData.get("display_name") || "").trim(),
+    description: formData.get("description")
+      ? String(formData.get("description"))
+      : undefined,
+    default_credential_provider: formData.get("default_credential_provider")
+      ? String(formData.get("default_credential_provider")).trim()
+      : undefined,
+    default_credential_id: formData.get("default_credential_id")
+      ? String(formData.get("default_credential_id")).trim()
+      : undefined,
+    default_credential_type: formData.get("default_credential_type")
+      ? String(formData.get("default_credential_type")).trim()
+      : "api_key",
+    metadata: {},
+  };
+
+  await adminFetch("/api/llm/providers", {
+    method: "POST",
+    body: JSON.stringify(payload),
+  });
+  revalidatePath(ADMIN_LLM_PATH);
+}
+
+export async function deleteLlmProviderAction(
+  formData: FormData,
+): Promise<void> {
+  const providerName = getRequiredFormField(
+    formData,
+    "provider_id",
+    "Provider",
+  );
+  await adminFetch(`/api/llm/providers/${providerName}`, { method: "DELETE" });
+  revalidatePath(ADMIN_LLM_PATH);
+}
+
+export async function updateLlmProviderAction(formData: FormData) {
+  const providerName = getRequiredFormField(
+    formData,
+    "provider_id",
+    "Provider",
+  );
+
+  const payload = {
+    display_name: String(formData.get("display_name") || "").trim(),
+    description: formData.get("description")
+      ? String(formData.get("description"))
+      : undefined,
+    default_credential_provider: formData.get("default_credential_provider")
+      ? String(formData.get("default_credential_provider")).trim()
+      : undefined,
+    default_credential_id: formData.get("default_credential_id")
+      ? String(formData.get("default_credential_id")).trim()
+      : undefined,
+    default_credential_type: formData.get("default_credential_type")
+      ? String(formData.get("default_credential_type")).trim()
+      : "api_key",
+    metadata: {},
+  };
+
+  await adminFetch(`/api/llm/providers/${providerName}`, {
+    method: "PATCH",
+    body: JSON.stringify(payload),
+  });
+  revalidatePath(ADMIN_LLM_PATH);
+}
+
+// =============================================================================
+// Model Actions
+// =============================================================================
+
+export async function fetchLlmModels(page?: number, pageSize?: number) {
+  const params = new URLSearchParams();
+  if (page) params.set("page", String(page));
+  if (pageSize) params.set("page_size", String(pageSize));
+  params.set("enabled_only", "false");
+  const query = params.toString() ? `?${params.toString()}` : "";
+  const { data } = await adminFetch(`/api/llm/admin/models${query}`);
+  return data;
+}
+
+export async function createLlmModelAction(formData: FormData) {
+  const creditCost = getRequiredNumber(formData, "credit_cost", "Credit cost");
+
+  const payload = {
+    slug: String(formData.get("slug") || "").trim(),
+    display_name: String(formData.get("display_name") || "").trim(),
+    description: formData.get("description")
+      ? String(formData.get("description"))
+      : undefined,
+    provider_id: getRequiredFormField(formData, "provider_id", "Provider"),
+    creator_id: formData.get("creator_id")
+      ? String(formData.get("creator_id"))
+      : undefined,
+    context_window: getRequiredPositiveNumber(
+      formData,
+      "context_window",
+      "Context window",
+    ),
+    max_output_tokens: formData.get("max_output_tokens")
+      ? Number(formData.get("max_output_tokens"))
+      : undefined,
+    price_tier: Number(formData.get("price_tier") || 1),
+    is_enabled: formData.getAll("is_enabled").includes("on"),
+    capabilities: {},
+    metadata: {},
+    costs: [
+      {
+        unit: String(formData.get("unit") || "RUN"),
+        credit_cost: creditCost,
+        metadata: {},
+      },
+    ],
+  };
+
+  await adminFetch("/api/llm/models", {
+    method: "POST",
+    body: JSON.stringify(payload),
+  });
+  revalidatePath(ADMIN_LLM_PATH);
+}
+
+export async function updateLlmModelAction(formData: FormData) {
+  const modelSlug = getRequiredFormField(formData, "model_id", "Model");
+
+  const payload: Record<string, any> = {};
+
+  if (formData.get("display_name"))
+    payload.display_name = String(formData.get("display_name"));
+  if (formData.get("description"))
+    payload.description = String(formData.get("description"));
+  if (formData.get("provider_id"))
+    payload.provider_id = String(formData.get("provider_id"));
+  if (formData.get("creator_id"))
+    payload.creator_id = String(formData.get("creator_id"));
+  if (formData.get("context_window"))
+    payload.context_window = Number(formData.get("context_window"));
+  if (formData.get("max_output_tokens"))
+    payload.max_output_tokens = Number(formData.get("max_output_tokens"));
+  if (formData.has("is_enabled"))
+    payload.is_enabled = formData.getAll("is_enabled").includes("on");
+
+  await adminFetch(`/api/llm/models/${modelSlug}`, {
+    method: "PATCH",
+    body: JSON.stringify(payload),
+  });
+  revalidatePath(ADMIN_LLM_PATH);
+}
+
+export async function toggleLlmModelAction(formData: FormData): Promise<void> {
+  const modelSlug = getRequiredFormField(formData, "model_id", "Model");
+  const shouldEnable = formData.get("is_enabled") === "true";
+
+  const payload: Record<string, any> = { is_enabled: shouldEnable };
+
+  // Migration params (only when disabling)
+  if (!shouldEnable) {
+    const migrateToSlug = formData.get("migrate_to_slug");
+    if (migrateToSlug) payload.migrate_to_slug = String(migrateToSlug);
+    const reason = formData.get("migration_reason");
+    if (reason) payload.migration_reason = String(reason);
+    const customCost = formData.get("custom_credit_cost");
+    if (customCost) payload.custom_credit_cost = Number(customCost);
+  }
+
+  await adminFetch(`/api/llm/models/${modelSlug}/toggle`, {
+    method: "POST",
+    body: JSON.stringify(payload),
+  });
+  revalidatePath(ADMIN_LLM_PATH);
+}
+
+export async function deleteLlmModelAction(formData: FormData): Promise<void> {
+  const modelSlug = getRequiredFormField(formData, "model_id", "Model");
+  const replacementSlug = formData.get("replacement_model_slug");
+  const params = new URLSearchParams();
+  if (replacementSlug)
+    params.set("replacement_model_slug", String(replacementSlug));
+  const query = params.toString() ? `?${params.toString()}` : "";
+  await adminFetch(`/api/llm/models/${modelSlug}${query}`, {
+    method: "DELETE",
+  });
+  revalidatePath(ADMIN_LLM_PATH);
+}
+
+export async function fetchLlmModelUsage(modelSlug: string) {
+  const { data } = await adminFetch(`/api/llm/models/${modelSlug}/usage`);
+  return data;
+}
+
+// =============================================================================
+// Migration Actions
+// =============================================================================
+
+export async function fetchLlmMigrations(includeReverted: boolean = false) {
+  const params = new URLSearchParams();
+  if (includeReverted) params.set("include_reverted", "true");
+  const query = params.toString() ? `?${params.toString()}` : "";
+  const { data } = await adminFetch(`/api/llm/migrations${query}`);
+  return data;
+}
+
+export async function revertLlmMigrationAction(
+  formData: FormData,
+): Promise<void> {
+  const migrationId = getRequiredFormField(
+    formData,
+    "migration_id",
+    "Migration",
+  );
+  await adminFetch(`/api/llm/migrations/${migrationId}/revert`, {
+    method: "POST",
+  });
+  revalidatePath(ADMIN_LLM_PATH);
+}
+
+// =============================================================================
+// Creator Actions
+// =============================================================================
+
+export async function fetchLlmCreators() {
+  const { data } = await adminFetch(`/api/llm/creators`);
+  return data;
+}
+
+export async function createLlmCreatorAction(
+  formData: FormData,
+): Promise<void> {
+  const payload = {
+    name: String(formData.get("name") || "").trim(),
+    display_name: String(formData.get("display_name") || "").trim(),
+    description: formData.get("description")
+      ? String(formData.get("description"))
+      : undefined,
+    website_url: formData.get("website_url")
+      ? String(formData.get("website_url"))
+      : undefined,
+    metadata: {},
+  };
+
+  await adminFetch("/api/llm/creators", {
+    method: "POST",
+    body: JSON.stringify(payload),
+  });
+  revalidatePath(ADMIN_LLM_PATH);
+}
+
+export async function updateLlmCreatorAction(
+  formData: FormData,
+): Promise<void> {
+  const creatorName = getRequiredFormField(formData, "creator_id", "Creator");
+
+  const payload: Record<string, any> = {};
+  if (formData.get("display_name"))
+    payload.display_name = String(formData.get("display_name"));
+  if (formData.get("description"))
+    payload.description = String(formData.get("description"));
+  if (formData.get("website_url"))
+    payload.website_url = String(formData.get("website_url"));
+
+  await adminFetch(`/api/llm/creators/${creatorName}`, {
+    method: "PATCH",
+    body: JSON.stringify(payload),
+  });
+  revalidatePath(ADMIN_LLM_PATH);
+}
+
+export async function deleteLlmCreatorAction(
+  formData: FormData,
+): Promise<void> {
+  const creatorName = getRequiredFormField(formData, "creator_id", "Creator");
+  await adminFetch(`/api/llm/creators/${creatorName}`, { method: "DELETE" });
+  revalidatePath(ADMIN_LLM_PATH);
+}
+
+// =============================================================================
+// Recommended Model Actions
+// =============================================================================
+
+export async function setRecommendedModelAction(
+  formData: FormData,
+): Promise<void> {
+  const modelSlug = getRequiredFormField(formData, "model_id", "Model");
+
+  // Set recommended by updating the model
+  await adminFetch(`/api/llm/models/${modelSlug}`, {
+    method: "PATCH",
+    body: JSON.stringify({ is_recommended: true }),
+  });
+  revalidatePath(ADMIN_LLM_PATH);
+}
--- a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/AddCreatorModal.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/AddCreatorModal.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import { useState } from "react";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import { Button } from "@/components/atoms/Button/Button";
+import { createLlmCreatorAction } from "../actions";
+import { useRouter } from "next/navigation";
+
+export function AddCreatorModal() {
+  const [open, setOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  async function handleSubmit(formData: FormData) {
+    setIsSubmitting(true);
+    setError(null);
+    try {
+      await createLlmCreatorAction(formData);
+      setOpen(false);
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create creator");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <Dialog
+      title="Add Creator"
+      controlled={{ isOpen: open, set: setOpen }}
+      styling={{ maxWidth: "512px" }}
+    >
+      <Dialog.Trigger>
+        <Button variant="primary" size="small">
+          Add Creator
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <div className="mb-4 text-sm text-muted-foreground">
+          Add a new model creator (the organization that made/trained the
+          model).
+        </div>
+
+        <form action={handleSubmit} className="space-y-4">
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="space-y-2">
+              <label
+                htmlFor="name"
+                className="text-sm font-medium text-foreground"
+              >
+                Name (slug) <span className="text-destructive">*</span>
+              </label>
+              <input
+                id="name"
+                required
+                name="name"
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                placeholder="openai"
+              />
+              <p className="text-xs text-muted-foreground">
+                Lowercase identifier (e.g., openai, meta, anthropic)
+              </p>
+            </div>
+            <div className="space-y-2">
+              <label
+                htmlFor="display_name"
+                className="text-sm font-medium text-foreground"
+              >
+                Display Name <span className="text-destructive">*</span>
+              </label>
+              <input
+                id="display_name"
+                required
+                name="display_name"
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                placeholder="OpenAI"
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <label
+              htmlFor="description"
+              className="text-sm font-medium text-foreground"
+            >
+              Description
+            </label>
+            <textarea
+              id="description"
+              name="description"
+              rows={2}
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+              placeholder="Creator of GPT models..."
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label
+              htmlFor="website_url"
+              className="text-sm font-medium text-foreground"
+            >
+              Website URL
+            </label>
+            <input
+              id="website_url"
+              name="website_url"
+              type="url"
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+              placeholder="https://openai.com"
+            />
+          </div>
+
+          {error && (
+            <div className="rounded-lg border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
+              {error}
+            </div>
+          )}
+
+          <Dialog.Footer>
+            <Button
+              variant="ghost"
+              size="small"
+              type="button"
+              onClick={() => {
+                setOpen(false);
+                setError(null);
+              }}
+              disabled={isSubmitting}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="primary"
+              size="small"
+              type="submit"
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? "Creating..." : "Add Creator"}
+            </Button>
+          </Dialog.Footer>
+        </form>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/AddModelModal.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/AddModelModal.tsx
@@ -0,0 +1,314 @@
+"use client";
+
+import { useState } from "react";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import { Button } from "@/components/atoms/Button/Button";
+import type { LlmProvider } from "../types";
+import type { LlmModelCreator } from "../types";
+import { createLlmModelAction } from "../actions";
+import { useRouter } from "next/navigation";
+
+interface Props {
+  providers: LlmProvider[];
+  creators: LlmModelCreator[];
+}
+
+export function AddModelModal({ providers, creators }: Props) {
+  const [open, setOpen] = useState(false);
+  const [selectedCreatorId, setSelectedCreatorId] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  async function handleSubmit(formData: FormData) {
+    setIsSubmitting(true);
+    setError(null);
+    try {
+      await createLlmModelAction(formData);
+      setOpen(false);
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create model");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  // When provider changes, auto-select matching creator if one exists
+  function handleProviderChange(providerName: string) {
+    const provider = providers.find((p) => p.name === providerName);
+    if (provider) {
+      // Find creator with same name as provider (e.g., "openai" -> "openai")
+      const matchingCreator = creators.find((c) => c.name === provider.name);
+      if (matchingCreator) {
+        setSelectedCreatorId(matchingCreator.id);
+      } else {
+        // No matching creator (e.g., OpenRouter hosts other creators' models)
+        setSelectedCreatorId("");
+      }
+    }
+  }
+
+  return (
+    <Dialog
+      title="Add Model"
+      controlled={{ isOpen: open, set: setOpen }}
+      styling={{ maxWidth: "768px", maxHeight: "90vh", overflowY: "auto" }}
+    >
+      <Dialog.Trigger>
+        <Button variant="primary" size="small">
+          Add Model
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <div className="mb-4 text-sm text-muted-foreground">
+          Register a new model slug, metadata, and pricing.
+        </div>
+
+        <form action={handleSubmit} className="space-y-6">
+          {/* Basic Information */}
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <h3 className="text-sm font-semibold text-foreground">
+                Basic Information
+              </h3>
+              <p className="text-xs text-muted-foreground">
+                Core model details
+              </p>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <label
+                  htmlFor="slug"
+                  className="text-sm font-medium text-foreground"
+                >
+                  Model Slug <span className="text-destructive">*</span>
+                </label>
+                <input
+                  id="slug"
+                  required
+                  name="slug"
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                  placeholder="gpt-4.1-mini-2025-04-14"
+                />
+              </div>
+              <div className="space-y-2">
+                <label
+                  htmlFor="display_name"
+                  className="text-sm font-medium text-foreground"
+                >
+                  Display Name <span className="text-destructive">*</span>
+                </label>
+                <input
+                  id="display_name"
+                  required
+                  name="display_name"
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                  placeholder="GPT 4.1 Mini"
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <label
+                htmlFor="description"
+                className="text-sm font-medium text-foreground"
+              >
+                Description
+              </label>
+              <textarea
+                id="description"
+                name="description"
+                rows={3}
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                placeholder="Optional description..."
+              />
+            </div>
+          </div>
+
+          {/* Model Configuration */}
+          <div className="space-y-4 border-t border-border pt-6">
+            <div className="space-y-1">
+              <h3 className="text-sm font-semibold text-foreground">
+                Model Configuration
+              </h3>
+              <p className="text-xs text-muted-foreground">
+                Model capabilities and limits
+              </p>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <label
+                  htmlFor="provider_id"
+                  className="text-sm font-medium text-foreground"
+                >
+                  Provider <span className="text-destructive">*</span>
+                </label>
+                <select
+                  id="provider_id"
+                  required
+                  name="provider_id"
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                  defaultValue=""
+                  onChange={(e) => handleProviderChange(e.target.value)}
+                >
+                  <option value="" disabled>
+                    Select provider
+                  </option>
+                  {providers.map((provider) => (
+                    <option key={provider.name} value={provider.name}>
+                      {provider.display_name} ({provider.name})
+                    </option>
+                  ))}
+                </select>
+                <p className="text-xs text-muted-foreground">
+                  Who hosts/serves the model
+                </p>
+              </div>
+              <div className="space-y-2">
+                <label
+                  htmlFor="creator_id"
+                  className="text-sm font-medium text-foreground"
+                >
+                  Creator
+                </label>
+                <select
+                  id="creator_id"
+                  name="creator_id"
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                  value={selectedCreatorId}
+                  onChange={(e) => setSelectedCreatorId(e.target.value)}
+                >
+                  <option value="">No creator selected</option>
+                  {creators.map((creator) => (
+                    <option key={creator.id} value={creator.id}>
+                      {creator.display_name} ({creator.name})
+                    </option>
+                  ))}
+                </select>
+                <p className="text-xs text-muted-foreground">
+                  Who made/trained the model (e.g., OpenAI, Meta)
+                </p>
+              </div>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <label
+                  htmlFor="context_window"
+                  className="text-sm font-medium text-foreground"
+                >
+                  Context Window <span className="text-destructive">*</span>
+                </label>
+                <input
+                  id="context_window"
+                  required
+                  type="number"
+                  name="context_window"
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                  placeholder="128000"
+                  min={1}
+                />
+              </div>
+              <div className="space-y-2">
+                <label
+                  htmlFor="max_output_tokens"
+                  className="text-sm font-medium text-foreground"
+                >
+                  Max Output Tokens
+                </label>
+                <input
+                  id="max_output_tokens"
+                  type="number"
+                  name="max_output_tokens"
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                  placeholder="16384"
+                  min={1}
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Pricing */}
+          <div className="space-y-4 border-t border-border pt-6">
+            <div className="space-y-1">
+              <h3 className="text-sm font-semibold text-foreground">Pricing</h3>
+              <p className="text-xs text-muted-foreground">
+                Credit cost per run (credentials are managed via the provider)
+              </p>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-1">
+              <div className="space-y-2">
+                <label
+                  htmlFor="credit_cost"
+                  className="text-sm font-medium text-foreground"
+                >
+                  Credit Cost <span className="text-destructive">*</span>
+                </label>
+                <input
+                  id="credit_cost"
+                  required
+                  type="number"
+                  name="credit_cost"
+                  step="1"
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                  placeholder="5"
+                  min={0}
+                />
+              </div>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Credit cost is always in platform credits. Credentials are
+              inherited from the selected provider.
+            </p>
+          </div>
+
+          {/* Enabled Toggle */}
+          <div className="flex items-center gap-3 border-t border-border pt-6">
+            <input type="hidden" name="is_enabled" value="off" />
+            <input
+              id="is_enabled"
+              type="checkbox"
+              name="is_enabled"
+              defaultChecked
+              className="h-4 w-4 rounded border-input"
+            />
+            <label
+              htmlFor="is_enabled"
+              className="text-sm font-medium text-foreground"
+            >
+              Enabled by default
+            </label>
+          </div>
+
+          {error && (
+            <div className="rounded-lg border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
+              {error}
+            </div>
+          )}
+
+          <Dialog.Footer>
+            <Button
+              variant="ghost"
+              size="small"
+              type="button"
+              onClick={() => {
+                setOpen(false);
+                setError(null);
+              }}
+              disabled={isSubmitting}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="primary"
+              size="small"
+              type="submit"
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? "Creating..." : "Save Model"}
+            </Button>
+          </Dialog.Footer>
+        </form>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/AddProviderModal.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/AddProviderModal.tsx
@@ -0,0 +1,268 @@
+"use client";
+
+import { useState } from "react";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import { Button } from "@/components/atoms/Button/Button";
+import { createLlmProviderAction } from "../actions";
+import { useRouter } from "next/navigation";
+
+export function AddProviderModal() {
+  const [open, setOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  async function handleSubmit(formData: FormData) {
+    setIsSubmitting(true);
+    setError(null);
+    try {
+      await createLlmProviderAction(formData);
+      setOpen(false);
+      router.refresh();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to create provider",
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <Dialog
+      title="Add Provider"
+      controlled={{ isOpen: open, set: setOpen }}
+      styling={{ maxWidth: "768px", maxHeight: "90vh", overflowY: "auto" }}
+    >
+      <Dialog.Trigger>
+        <Button variant="primary" size="small">
+          Add Provider
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <div className="mb-4 text-sm text-muted-foreground">
+          Define a new upstream provider and default credential information.
+        </div>
+
+        {/* Setup Instructions */}
+        <div className="mb-6 rounded-lg border border-primary/30 bg-primary/5 p-4">
+          <div className="space-y-2">
+            <h4 className="text-sm font-semibold text-foreground">
+              Before Adding a Provider
+            </h4>
+            <p className="text-xs text-muted-foreground">
+              To use a new provider, you must first configure its credentials in
+              the backend:
+            </p>
+            <ol className="list-inside list-decimal space-y-1 text-xs text-muted-foreground">
+              <li>
+                Add the credential to{" "}
+                <code className="rounded bg-muted px-1 py-0.5 font-mono">
+                  backend/integrations/credentials_store.py
+                </code>{" "}
+                with a UUID, provider name, and settings secret reference
+              </li>
+              <li>
+                Add it to the{" "}
+                <code className="rounded bg-muted px-1 py-0.5 font-mono">
+                  PROVIDER_CREDENTIALS
+                </code>{" "}
+                dictionary in{" "}
+                <code className="rounded bg-muted px-1 py-0.5 font-mono">
+                  backend/data/block_cost_config.py
+                </code>
+              </li>
+              <li>
+                Use the <strong>same provider name</strong> in the
+                &quot;Credential Provider&quot; field below that matches the key
+                in{" "}
+                <code className="rounded bg-muted px-1 py-0.5 font-mono">
+                  PROVIDER_CREDENTIALS
+                </code>
+              </li>
+            </ol>
+          </div>
+        </div>
+
+        <form action={handleSubmit} className="space-y-6">
+          {/* Basic Information */}
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <h3 className="text-sm font-semibold text-foreground">
+                Basic Information
+              </h3>
+              <p className="text-xs text-muted-foreground">
+                Core provider details
+              </p>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <label
+                  htmlFor="name"
+                  className="text-sm font-medium text-foreground"
+                >
+                  Provider Slug <span className="text-destructive">*</span>
+                </label>
+                <input
+                  id="name"
+                  required
+                  name="name"
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                  placeholder="e.g. openai"
+                />
+              </div>
+              <div className="space-y-2">
+                <label
+                  htmlFor="display_name"
+                  className="text-sm font-medium text-foreground"
+                >
+                  Display Name <span className="text-destructive">*</span>
+                </label>
+                <input
+                  id="display_name"
+                  required
+                  name="display_name"
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                  placeholder="OpenAI"
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <label
+                htmlFor="description"
+                className="text-sm font-medium text-foreground"
+              >
+                Description
+              </label>
+              <textarea
+                id="description"
+                name="description"
+                rows={3}
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                placeholder="Optional description..."
+              />
+            </div>
+          </div>
+
+          {/* Default Credentials */}
+          <div className="space-y-4 border-t border-border pt-6">
+            <div className="space-y-1">
+              <h3 className="text-sm font-semibold text-foreground">
+                Default Credentials
+              </h3>
+              <p className="text-xs text-muted-foreground">
+                Credential provider name that matches the key in{" "}
+                <code className="rounded bg-muted px-1 py-0.5 font-mono text-xs">
+                  PROVIDER_CREDENTIALS
+                </code>
+              </p>
+            </div>
+            <div className="space-y-2">
+              <label
+                htmlFor="default_credential_provider"
+                className="text-sm font-medium text-foreground"
+              >
+                Credential Provider <span className="text-destructive">*</span>
+              </label>
+              <input
+                id="default_credential_provider"
+                name="default_credential_provider"
+                required
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                placeholder="openai"
+              />
+              <p className="text-xs text-muted-foreground">
+                <strong>Important:</strong> This must exactly match the key in
+                the{" "}
+                <code className="rounded bg-muted px-1 py-0.5 font-mono text-xs">
+                  PROVIDER_CREDENTIALS
+                </code>{" "}
+                dictionary in{" "}
+                <code className="rounded bg-muted px-1 py-0.5 font-mono text-xs">
+                  block_cost_config.py
+                </code>
+                . Common values: &quot;openai&quot;, &quot;anthropic&quot;,
+                &quot;groq&quot;, &quot;open_router&quot;, etc.
+              </p>
+            </div>
+          </div>
+
+          {/* Capabilities */}
+          <div className="space-y-4 border-t border-border pt-6">
+            <div className="space-y-1">
+              <h3 className="text-sm font-semibold text-foreground">
+                Capabilities
+              </h3>
+              <p className="text-xs text-muted-foreground">
+                Provider feature flags
+              </p>
+            </div>
+            <div className="grid gap-3 sm:grid-cols-2">
+              {[
+                { name: "supports_tools", label: "Supports tools" },
+                { name: "supports_json_output", label: "Supports JSON output" },
+                { name: "supports_reasoning", label: "Supports reasoning" },
+                {
+                  name: "supports_parallel_tool",
+                  label: "Supports parallel tool calls",
+                },
+              ].map(({ name, label }) => (
+                <div
+                  key={name}
+                  className="flex items-center gap-3 rounded-md border border-border bg-muted/30 px-4 py-3 transition-colors hover:bg-muted/50"
+                >
+                  <input type="hidden" name={name} value="off" />
+                  <input
+                    id={name}
+                    type="checkbox"
+                    name={name}
+                    defaultChecked={
+                      name !== "supports_reasoning" &&
+                      name !== "supports_parallel_tool"
+                    }
+                    className="h-4 w-4 rounded border-input"
+                  />
+                  <label
+                    htmlFor={name}
+                    className="text-sm font-medium text-foreground"
+                  >
+                    {label}
+                  </label>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {error && (
+            <div className="rounded-lg border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
+              {error}
+            </div>
+          )}
+
+          <Dialog.Footer>
+            <Button
+              variant="ghost"
+              size="small"
+              type="button"
+              onClick={() => {
+                setOpen(false);
+                setError(null);
+              }}
+              disabled={isSubmitting}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="primary"
+              size="small"
+              type="submit"
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? "Creating..." : "Save Provider"}
+            </Button>
+          </Dialog.Footer>
+        </form>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/CreatorsTable.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/CreatorsTable.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import { useState } from "react";
+import type { LlmModelCreator } from "../types";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/atoms/Table/Table";
+import { Button } from "@/components/atoms/Button/Button";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import { updateLlmCreatorAction } from "../actions";
+import { useRouter } from "next/navigation";
+import { DeleteCreatorModal } from "./DeleteCreatorModal";
+
+export function CreatorsTable({ creators }: { creators: LlmModelCreator[] }) {
+  if (!creators.length) {
+    return (
+      <div className="rounded-lg border border-dashed border-border p-6 text-center text-sm text-muted-foreground">
+        No creators registered yet.
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-lg border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Creator</TableHead>
+            <TableHead>Description</TableHead>
+            <TableHead>Website</TableHead>
+            <TableHead>Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {creators.map((creator) => (
+            <TableRow key={creator.id}>
+              <TableCell>
+                <div className="font-medium">{creator.display_name}</div>
+                <div className="text-xs text-muted-foreground">
+                  {creator.name}
+                </div>
+              </TableCell>
+              <TableCell>
+                <span className="text-sm text-muted-foreground">
+                  {creator.description || "—"}
+                </span>
+              </TableCell>
+              <TableCell>
+                {creator.website_url ? (
+                  <a
+                    href={creator.website_url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-sm text-primary hover:underline"
+                  >
+                    {(() => {
+                      try {
+                        return new URL(creator.website_url).hostname;
+                      } catch {
+                        return creator.website_url;
+                      }
+                    })()}
+                  </a>
+                ) : (
+                  <span className="text-muted-foreground">—</span>
+                )}
+              </TableCell>
+              <TableCell>
+                <div className="flex items-center justify-end gap-2">
+                  <EditCreatorModal creator={creator} />
+                  <DeleteCreatorModal creator={creator} />
+                </div>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+function EditCreatorModal({ creator }: { creator: LlmModelCreator }) {
+  const [open, setOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  async function handleSubmit(formData: FormData) {
+    setIsSubmitting(true);
+    setError(null);
+    try {
+      await updateLlmCreatorAction(formData);
+      setOpen(false);
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to update creator");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <Dialog
+      title="Edit Creator"
+      controlled={{ isOpen: open, set: setOpen }}
+      styling={{ maxWidth: "512px" }}
+    >
+      <Dialog.Trigger>
+        <Button variant="outline" size="small" className="min-w-0">
+          Edit
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <form action={handleSubmit} className="space-y-4">
+          <input type="hidden" name="creator_id" value={creator.name} />
+
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Name (slug)</label>
+              <input
+                required
+                name="name"
+                defaultValue={creator.name}
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Display Name</label>
+              <input
+                required
+                name="display_name"
+                defaultValue={creator.display_name}
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Description</label>
+            <textarea
+              name="description"
+              rows={2}
+              defaultValue={creator.description ?? ""}
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Website URL</label>
+            <input
+              name="website_url"
+              type="url"
+              defaultValue={creator.website_url ?? ""}
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+            />
+          </div>
+
+          {error && (
+            <div className="rounded-lg border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
+              {error}
+            </div>
+          )}
+
+          <Dialog.Footer>
+            <Button
+              variant="ghost"
+              size="small"
+              type="button"
+              onClick={() => {
+                setOpen(false);
+                setError(null);
+              }}
+              disabled={isSubmitting}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="primary"
+              size="small"
+              type="submit"
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? "Updating..." : "Update"}
+            </Button>
+          </Dialog.Footer>
+        </form>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/DeleteCreatorModal.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/DeleteCreatorModal.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import { Button } from "@/components/atoms/Button/Button";
+import type { LlmModelCreator } from "../types";
+import { deleteLlmCreatorAction } from "../actions";
+
+export function DeleteCreatorModal({ creator }: { creator: LlmModelCreator }) {
+  const [open, setOpen] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  async function handleDelete(formData: FormData) {
+    setIsDeleting(true);
+    setError(null);
+    try {
+      await deleteLlmCreatorAction(formData);
+      setOpen(false);
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete creator");
+    } finally {
+      setIsDeleting(false);
+    }
+  }
+
+  return (
+    <Dialog
+      title="Delete Creator"
+      controlled={{ isOpen: open, set: setOpen }}
+      styling={{ maxWidth: "480px" }}
+    >
+      <Dialog.Trigger>
+        <Button
+          type="button"
+          variant="outline"
+          size="small"
+          className="min-w-0 text-destructive hover:bg-destructive/10"
+        >
+          Delete
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <div className="space-y-4">
+          <div className="rounded-lg border border-amber-500/30 bg-amber-500/10 p-4 dark:border-amber-400/30 dark:bg-amber-400/10">
+            <div className="flex items-start gap-3">
+              <div className="flex-shrink-0 text-amber-600 dark:text-amber-400">
+                ⚠️
+              </div>
+              <div className="text-sm text-foreground">
+                <p className="font-semibold">You are about to delete:</p>
+                <p className="mt-1">
+                  <span className="font-medium">{creator.display_name}</span>{" "}
+                  <span className="text-muted-foreground">
+                    ({creator.name})
+                  </span>
+                </p>
+                <p className="mt-2 text-muted-foreground">
+                  Models using this creator will have their creator field
+                  cleared. This is safe and won&apos;t affect model
+                  functionality.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <form action={handleDelete} className="space-y-4">
+            <input type="hidden" name="creator_id" value={creator.name} />
+
+            {error && (
+              <div className="rounded-lg border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
+                {error}
+              </div>
+            )}
+
+            <Dialog.Footer>
+              <Button
+                variant="ghost"
+                size="small"
+                onClick={() => {
+                  setOpen(false);
+                  setError(null);
+                }}
+                disabled={isDeleting}
+                type="button"
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                variant="primary"
+                size="small"
+                disabled={isDeleting}
+                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              >
+                {isDeleting ? "Deleting..." : "Delete Creator"}
+              </Button>
+            </Dialog.Footer>
+          </form>
+        </div>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/DeleteModelModal.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/DeleteModelModal.tsx
@@ -0,0 +1,224 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import { Button } from "@/components/atoms/Button/Button";
+import type { LlmModel } from "../types";
+import { deleteLlmModelAction, fetchLlmModelUsage } from "../actions";
+
+export function DeleteModelModal({
+  model,
+  availableModels,
+}: {
+  model: LlmModel;
+  availableModels: LlmModel[];
+}) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [selectedReplacement, setSelectedReplacement] = useState<string>("");
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [usageCount, setUsageCount] = useState<number | null>(null);
+  const [usageLoading, setUsageLoading] = useState(false);
+  const [usageError, setUsageError] = useState<string | null>(null);
+
+  // Filter out the current model and disabled models from replacement options
+  const replacementOptions = availableModels.filter(
+    (m) => m.id !== model.id && m.is_enabled,
+  );
+
+  // Check if migration is required (has blocks using this model)
+  const requiresMigration = usageCount !== null && usageCount > 0;
+
+  async function fetchUsage() {
+    setUsageLoading(true);
+    setUsageError(null);
+    try {
+      const usage = await fetchLlmModelUsage(model.slug);
+      setUsageCount(usage.usage_count);
+    } catch (err) {
+      console.error("Failed to fetch model usage:", err);
+      setUsageError("Failed to load usage count");
+      setUsageCount(null);
+    } finally {
+      setUsageLoading(false);
+    }
+  }
+
+  async function handleDelete(formData: FormData) {
+    setIsDeleting(true);
+    setError(null);
+    try {
+      await deleteLlmModelAction(formData);
+      setOpen(false);
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete model");
+    } finally {
+      setIsDeleting(false);
+    }
+  }
+
+  // Determine if delete button should be enabled
+  const canDelete =
+    !isDeleting &&
+    !usageLoading &&
+    usageCount !== null &&
+    (requiresMigration
+      ? selectedReplacement && replacementOptions.length > 0
+      : true);
+
+  return (
+    <Dialog
+      title="Delete Model"
+      controlled={{
+        isOpen: open,
+        set: async (isOpen) => {
+          setOpen(isOpen);
+          if (isOpen) {
+            setUsageCount(null);
+            setUsageError(null);
+            setError(null);
+            setSelectedReplacement("");
+            await fetchUsage();
+          }
+        },
+      }}
+      styling={{ maxWidth: "600px" }}
+    >
+      <Dialog.Trigger>
+        <Button
+          type="button"
+          variant="outline"
+          size="small"
+          className="min-w-0 text-destructive hover:bg-destructive/10"
+        >
+          Delete
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <div className="mb-4 text-sm text-muted-foreground">
+          {requiresMigration
+            ? "This action cannot be undone. All workflows using this model will be migrated to the replacement model you select."
+            : "This action cannot be undone."}
+        </div>
+
+        <div className="space-y-4">
+          <div className="rounded-lg border border-amber-500/30 bg-amber-500/10 p-4 dark:border-amber-400/30 dark:bg-amber-400/10">
+            <div className="flex items-start gap-3">
+              <div className="flex-shrink-0 text-amber-600 dark:text-amber-400">
+                ⚠️
+              </div>
+              <div className="text-sm text-foreground">
+                <p className="font-semibold">You are about to delete:</p>
+                <p className="mt-1">
+                  <span className="font-medium">{model.display_name}</span>{" "}
+                  <span className="text-muted-foreground">({model.slug})</span>
+                </p>
+                {usageLoading && (
+                  <p className="mt-2 text-muted-foreground">
+                    Loading usage count...
+                  </p>
+                )}
+                {usageError && (
+                  <p className="mt-2 text-destructive">{usageError}</p>
+                )}
+                {!usageLoading && !usageError && usageCount !== null && (
+                  <p className="mt-2 font-semibold">
+                    Impact: {usageCount} block{usageCount !== 1 ? "s" : ""}{" "}
+                    currently use this model
+                  </p>
+                )}
+                {requiresMigration && (
+                  <p className="mt-2 text-muted-foreground">
+                    All workflows currently using this model will be
+                    automatically updated to use the replacement model you
+                    choose below.
+                  </p>
+                )}
+                {!usageLoading && usageCount === 0 && (
+                  <p className="mt-2 text-muted-foreground">
+                    No workflows are using this model. It can be safely deleted.
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <form action={handleDelete} className="space-y-4">
+            <input type="hidden" name="model_id" value={model.slug} />
+            <input
+              type="hidden"
+              name="replacement_model_slug"
+              value={selectedReplacement}
+            />
+
+            {requiresMigration && (
+              <label className="text-sm font-medium">
+                <span className="mb-2 block">
+                  Select Replacement Model{" "}
+                  <span className="text-destructive">*</span>
+                </span>
+                <select
+                  required
+                  value={selectedReplacement}
+                  onChange={(e) => setSelectedReplacement(e.target.value)}
+                  className="w-full rounded border border-input bg-background p-2 text-sm"
+                >
+                  <option value="">-- Choose a replacement model --</option>
+                  {replacementOptions.map((m) => (
+                    <option key={m.id} value={m.slug}>
+                      {m.display_name} ({m.slug})
+                    </option>
+                  ))}
+                </select>
+                {replacementOptions.length === 0 && (
+                  <p className="mt-2 text-xs text-destructive">
+                    No replacement models available. You must have at least one
+                    other enabled model before deleting this one.
+                  </p>
+                )}
+              </label>
+            )}
+
+            {error && (
+              <div className="rounded-lg border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
+                {error}
+              </div>
+            )}
+
+            <Dialog.Footer>
+              <Button
+                variant="ghost"
+                size="small"
+                type="button"
+                onClick={() => {
+                  setOpen(false);
+                  setSelectedReplacement("");
+                  setError(null);
+                }}
+                disabled={isDeleting}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                variant="primary"
+                size="small"
+                disabled={!canDelete}
+                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              >
+                {isDeleting
+                  ? "Deleting..."
+                  : requiresMigration
+                    ? "Delete and Migrate"
+                    : "Delete"}
+              </Button>
+            </Dialog.Footer>
+          </form>
+        </div>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/DeleteProviderModal.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/DeleteProviderModal.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import { Button } from "@/components/atoms/Button/Button";
+import type { LlmProvider } from "../types";
+import { deleteLlmProviderAction } from "../actions";
+
+export function DeleteProviderModal({ provider }: { provider: LlmProvider }) {
+  const [open, setOpen] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  const modelCount = provider.models?.length ?? 0;
+  const hasModels = modelCount > 0;
+
+  async function handleDelete(formData: FormData) {
+    setIsDeleting(true);
+    setError(null);
+    try {
+      await deleteLlmProviderAction(formData);
+      setOpen(false);
+      router.refresh();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to delete provider",
+      );
+    } finally {
+      setIsDeleting(false);
+    }
+  }
+
+  return (
+    <Dialog
+      title="Delete Provider"
+      controlled={{ isOpen: open, set: setOpen }}
+      styling={{ maxWidth: "480px" }}
+    >
+      <Dialog.Trigger>
+        <Button
+          type="button"
+          variant="outline"
+          size="small"
+          className="min-w-0 text-destructive hover:bg-destructive/10"
+        >
+          Delete
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <div className="space-y-4">
+          <div
+            className={`rounded-lg border p-4 ${
+              hasModels
+                ? "border-destructive/30 bg-destructive/10"
+                : "border-amber-500/30 bg-amber-500/10 dark:border-amber-400/30 dark:bg-amber-400/10"
+            }`}
+          >
+            <div className="flex items-start gap-3">
+              <div
+                className={`flex-shrink-0 ${
+                  hasModels
+                    ? "text-destructive"
+                    : "text-amber-600 dark:text-amber-400"
+                }`}
+              >
+                {hasModels ? "🚫" : "⚠️"}
+              </div>
+              <div className="text-sm text-foreground">
+                <p className="font-semibold">You are about to delete:</p>
+                <p className="mt-1">
+                  <span className="font-medium">{provider.display_name}</span>{" "}
+                  <span className="text-muted-foreground">
+                    ({provider.name})
+                  </span>
+                </p>
+                {hasModels ? (
+                  <p className="mt-2 text-destructive">
+                    This provider has {modelCount} model(s). You must delete all
+                    models before you can delete this provider.
+                  </p>
+                ) : (
+                  <p className="mt-2 text-muted-foreground">
+                    This provider has no models and can be safely deleted.
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <form action={handleDelete} className="space-y-4">
+            <input type="hidden" name="provider_id" value={provider.name} />
+
+            {error && (
+              <div className="rounded-lg border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
+                {error}
+              </div>
+            )}
+
+            <Dialog.Footer>
+              <Button
+                variant="ghost"
+                size="small"
+                onClick={() => {
+                  setOpen(false);
+                  setError(null);
+                }}
+                disabled={isDeleting}
+                type="button"
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                variant="primary"
+                size="small"
+                disabled={isDeleting || hasModels}
+                className="bg-destructive text-destructive-foreground hover:bg-destructive/90 disabled:opacity-50"
+              >
+                {isDeleting ? "Deleting..." : "Delete Provider"}
+              </Button>
+            </Dialog.Footer>
+          </form>
+        </div>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/DisableModelModal.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/DisableModelModal.tsx
@@ -0,0 +1,291 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import { Button } from "@/components/atoms/Button/Button";
+import type { LlmModel } from "../types";
+import { toggleLlmModelAction, fetchLlmModelUsage } from "../actions";
+
+export function DisableModelModal({
+  model,
+  availableModels,
+}: {
+  model: LlmModel;
+  availableModels: LlmModel[];
+}) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [isDisabling, setIsDisabling] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [usageCount, setUsageCount] = useState<number | null>(null);
+  const [selectedMigration, setSelectedMigration] = useState<string>("");
+  const [wantsMigration, setWantsMigration] = useState(false);
+  const [migrationReason, setMigrationReason] = useState("");
+  const [customCreditCost, setCustomCreditCost] = useState<string>("");
+
+  // Filter out the current model and disabled models from replacement options
+  const migrationOptions = availableModels.filter(
+    (m) => m.id !== model.id && m.is_enabled,
+  );
+
+  async function fetchUsage() {
+    try {
+      const usage = await fetchLlmModelUsage(model.slug);
+      setUsageCount(usage.usage_count);
+    } catch {
+      setUsageCount(null);
+    }
+  }
+
+  async function handleDisable(formData: FormData) {
+    setIsDisabling(true);
+    setError(null);
+    try {
+      await toggleLlmModelAction(formData);
+      setOpen(false);
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to disable model");
+    } finally {
+      setIsDisabling(false);
+    }
+  }
+
+  function resetState() {
+    setError(null);
+    setSelectedMigration("");
+    setWantsMigration(false);
+    setMigrationReason("");
+    setCustomCreditCost("");
+  }
+
+  const hasUsage = usageCount !== null && usageCount > 0;
+
+  return (
+    <Dialog
+      title="Disable Model"
+      controlled={{
+        isOpen: open,
+        set: async (isOpen) => {
+          setOpen(isOpen);
+          if (isOpen) {
+            setUsageCount(null);
+            resetState();
+            await fetchUsage();
+          }
+        },
+      }}
+      styling={{ maxWidth: "600px" }}
+    >
+      <Dialog.Trigger>
+        <Button
+          type="button"
+          variant="outline"
+          size="small"
+          className="min-w-0"
+        >
+          Disable
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <div className="mb-4 text-sm text-muted-foreground">
+          Disabling a model will hide it from users when creating new workflows.
+        </div>
+
+        <div className="space-y-4">
+          <div className="rounded-lg border border-amber-500/30 bg-amber-500/10 p-4 dark:border-amber-400/30 dark:bg-amber-400/10">
+            <div className="flex items-start gap-3">
+              <div className="flex-shrink-0 text-amber-600 dark:text-amber-400">
+                ⚠️
+              </div>
+              <div className="text-sm text-foreground">
+                <p className="font-semibold">You are about to disable:</p>
+                <p className="mt-1">
+                  <span className="font-medium">{model.display_name}</span>{" "}
+                  <span className="text-muted-foreground">({model.slug})</span>
+                </p>
+                {usageCount === null ? (
+                  <p className="mt-2 text-muted-foreground">
+                    Loading usage data...
+                  </p>
+                ) : usageCount > 0 ? (
+                  <p className="mt-2 font-semibold">
+                    Impact: {usageCount} block{usageCount !== 1 ? "s" : ""}{" "}
+                    currently use this model
+                  </p>
+                ) : (
+                  <p className="mt-2 text-muted-foreground">
+                    No workflows are currently using this model.
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {hasUsage && (
+            <div className="space-y-4 rounded-lg border border-border bg-muted/50 p-4">
+              <label className="flex items-start gap-3">
+                <input
+                  type="checkbox"
+                  checked={wantsMigration}
+                  onChange={(e) => {
+                    setWantsMigration(e.target.checked);
+                    if (!e.target.checked) {
+                      setSelectedMigration("");
+                    }
+                  }}
+                  className="mt-1"
+                />
+                <div className="text-sm">
+                  <span className="font-medium">
+                    Migrate existing workflows to another model
+                  </span>
+                  <p className="mt-1 text-muted-foreground">
+                    Creates a revertible migration record. If unchecked,
+                    existing workflows will use automatic fallback to an enabled
+                    model from the same provider.
+                  </p>
+                </div>
+              </label>
+
+              {wantsMigration && (
+                <div className="space-y-4 border-t border-border pt-4">
+                  <label className="block text-sm font-medium">
+                    <span className="mb-2 block">
+                      Replacement Model{" "}
+                      <span className="text-destructive">*</span>
+                    </span>
+                    <select
+                      required
+                      value={selectedMigration}
+                      onChange={(e) => setSelectedMigration(e.target.value)}
+                      className="w-full rounded border border-input bg-background p-2 text-sm"
+                    >
+                      <option value="">-- Choose a replacement model --</option>
+                      {migrationOptions.map((m) => (
+                        <option key={m.id} value={m.slug}>
+                          {m.display_name} ({m.slug})
+                        </option>
+                      ))}
+                    </select>
+                    {migrationOptions.length === 0 && (
+                      <p className="mt-2 text-xs text-destructive">
+                        No other enabled models available for migration.
+                      </p>
+                    )}
+                  </label>
+
+                  <label className="block text-sm font-medium">
+                    <span className="mb-2 block">
+                      Migration Reason{" "}
+                      <span className="font-normal text-muted-foreground">
+                        (optional)
+                      </span>
+                    </span>
+                    <input
+                      type="text"
+                      value={migrationReason}
+                      onChange={(e) => setMigrationReason(e.target.value)}
+                      placeholder="e.g., Provider outage, Cost reduction"
+                      className="w-full rounded border border-input bg-background p-2 text-sm"
+                    />
+                    <p className="mt-1 text-xs text-muted-foreground">
+                      Helps track why the migration was made
+                    </p>
+                  </label>
+
+                  <label className="block text-sm font-medium">
+                    <span className="mb-2 block">
+                      Custom Credit Cost{" "}
+                      <span className="font-normal text-muted-foreground">
+                        (optional)
+                      </span>
+                    </span>
+                    <input
+                      type="number"
+                      min="0"
+                      value={customCreditCost}
+                      onChange={(e) => setCustomCreditCost(e.target.value)}
+                      placeholder="Leave blank to use target model's cost"
+                      className="w-full rounded border border-input bg-background p-2 text-sm"
+                    />
+                    <p className="mt-1 text-xs text-muted-foreground">
+                      Override pricing for migrated workflows. When set, billing
+                      will use this cost instead of the target model&apos;s
+                      cost.
+                    </p>
+                  </label>
+                </div>
+              )}
+            </div>
+          )}
+
+          <form action={handleDisable} className="space-y-4">
+            <input type="hidden" name="model_id" value={model.slug} />
+            <input type="hidden" name="is_enabled" value="false" />
+            {wantsMigration && selectedMigration && (
+              <>
+                <input
+                  type="hidden"
+                  name="migrate_to_slug"
+                  value={selectedMigration}
+                />
+                {migrationReason && (
+                  <input
+                    type="hidden"
+                    name="migration_reason"
+                    value={migrationReason}
+                  />
+                )}
+                {customCreditCost && (
+                  <input
+                    type="hidden"
+                    name="custom_credit_cost"
+                    value={customCreditCost}
+                  />
+                )}
+              </>
+            )}
+
+            {error && (
+              <div className="rounded-lg border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
+                {error}
+              </div>
+            )}
+
+            <Dialog.Footer>
+              <Button
+                variant="ghost"
+                size="small"
+                onClick={() => {
+                  setOpen(false);
+                  resetState();
+                }}
+                disabled={isDisabling}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                variant="primary"
+                size="small"
+                disabled={
+                  isDisabling ||
+                  (wantsMigration && !selectedMigration) ||
+                  usageCount === null
+                }
+              >
+                {isDisabling
+                  ? "Disabling..."
+                  : wantsMigration && selectedMigration
+                    ? "Disable & Migrate"
+                    : "Disable Model"}
+              </Button>
+            </Dialog.Footer>
+          </form>
+        </div>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/EditModelModal.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/EditModelModal.tsx
@@ -0,0 +1,223 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import { Button } from "@/components/atoms/Button/Button";
+import type { LlmModel } from "../types";
+import type { LlmModelCreator } from "../types";
+import type { LlmProvider } from "../types";
+import { updateLlmModelAction } from "../actions";
+
+export function EditModelModal({
+  model,
+  providers,
+  creators,
+}: {
+  model: LlmModel;
+  providers: LlmProvider[];
+  creators: LlmModelCreator[];
+}) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const cost = model.costs?.[0];
+  const provider = providers.find((p) => p.id === model.provider_id);
+
+  async function handleSubmit(formData: FormData) {
+    setIsSubmitting(true);
+    setError(null);
+    try {
+      await updateLlmModelAction(formData);
+      setOpen(false);
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to update model");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <Dialog
+      title="Edit Model"
+      controlled={{ isOpen: open, set: setOpen }}
+      styling={{ maxWidth: "768px", maxHeight: "90vh", overflowY: "auto" }}
+    >
+      <Dialog.Trigger>
+        <Button variant="outline" size="small" className="min-w-0">
+          Edit
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <div className="mb-4 text-sm text-muted-foreground">
+          Update model metadata and pricing information.
+        </div>
+        {error && (
+          <div className="mb-4 rounded-lg border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
+            {error}
+          </div>
+        )}
+        <form action={handleSubmit} className="space-y-4">
+          <input type="hidden" name="model_id" value={model.slug} />
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <label className="text-sm font-medium">
+              Display Name
+              <input
+                required
+                name="display_name"
+                defaultValue={model.display_name}
+                className="mt-1 w-full rounded border border-input bg-background p-2 text-sm"
+              />
+            </label>
+            <label className="text-sm font-medium">
+              Provider
+              <select
+                required
+                name="provider_id"
+                className="mt-1 w-full rounded border border-input bg-background p-2 text-sm"
+                defaultValue={model.provider_id}
+              >
+                {providers.map((p) => (
+                  <option key={p.id} value={p.id}>
+                    {p.display_name} ({p.name})
+                  </option>
+                ))}
+              </select>
+              <span className="text-xs text-muted-foreground">
+                Who hosts/serves the model
+              </span>
+            </label>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <label className="text-sm font-medium">
+              Creator
+              <select
+                name="creator_id"
+                className="mt-1 w-full rounded border border-input bg-background p-2 text-sm"
+                defaultValue={model.creator_id ?? ""}
+              >
+                <option value="">No creator selected</option>
+                {creators.map((c) => (
+                  <option key={c.id} value={c.id}>
+                    {c.display_name} ({c.name})
+                  </option>
+                ))}
+              </select>
+              <span className="text-xs text-muted-foreground">
+                Who made/trained the model (e.g., OpenAI, Meta)
+              </span>
+            </label>
+          </div>
+
+          <label className="text-sm font-medium">
+            Description
+            <textarea
+              name="description"
+              rows={2}
+              defaultValue={model.description ?? ""}
+              className="mt-1 w-full rounded border border-input bg-background p-2 text-sm"
+              placeholder="Optional description..."
+            />
+          </label>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <label className="text-sm font-medium">
+              Context Window
+              <input
+                required
+                type="number"
+                name="context_window"
+                defaultValue={model.context_window}
+                className="mt-1 w-full rounded border border-input bg-background p-2 text-sm"
+                min={1}
+              />
+            </label>
+            <label className="text-sm font-medium">
+              Max Output Tokens
+              <input
+                type="number"
+                name="max_output_tokens"
+                defaultValue={model.max_output_tokens ?? undefined}
+                className="mt-1 w-full rounded border border-input bg-background p-2 text-sm"
+                min={1}
+              />
+            </label>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <label className="text-sm font-medium">
+              Credit Cost
+              <input
+                required
+                type="number"
+                name="credit_cost"
+                defaultValue={cost?.credit_cost ?? 0}
+                className="mt-1 w-full rounded border border-input bg-background p-2 text-sm"
+                min={0}
+              />
+              <span className="text-xs text-muted-foreground">
+                Credits charged per run
+              </span>
+            </label>
+            <label className="text-sm font-medium">
+              Credential Provider
+              <select
+                required
+                name="credential_provider"
+                defaultValue={cost?.credential_provider ?? provider?.name ?? ""}
+                className="mt-1 w-full rounded border border-input bg-background p-2 text-sm"
+              >
+                <option value="" disabled>
+                  Select provider
+                </option>
+                {providers.map((p) => (
+                  <option key={p.id} value={p.name}>
+                    {p.display_name} ({p.name})
+                  </option>
+                ))}
+              </select>
+              <span className="text-xs text-muted-foreground">
+                Must match a key in PROVIDER_CREDENTIALS
+              </span>
+            </label>
+          </div>
+          {/* Hidden defaults for credential_type and unit */}
+          <input
+            type="hidden"
+            name="credential_type"
+            value={
+              cost?.credential_type ??
+              provider?.default_credential_type ??
+              "api_key"
+            }
+          />
+          <input type="hidden" name="unit" value={cost?.unit ?? "RUN"} />
+
+          <Dialog.Footer>
+            <Button
+              type="button"
+              variant="ghost"
+              size="small"
+              onClick={() => setOpen(false)}
+              disabled={isSubmitting}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="primary"
+              size="small"
+              type="submit"
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? "Updating..." : "Update Model"}
+            </Button>
+          </Dialog.Footer>
+        </form>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/EditProviderModal.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/EditProviderModal.tsx
@@ -0,0 +1,263 @@
+"use client";
+
+import { useState } from "react";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import { Button } from "@/components/atoms/Button/Button";
+import { updateLlmProviderAction } from "../actions";
+import { useRouter } from "next/navigation";
+import type { LlmProvider } from "../types";
+
+export function EditProviderModal({ provider }: { provider: LlmProvider }) {
+  const [open, setOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  async function handleSubmit(formData: FormData) {
+    setIsSubmitting(true);
+    setError(null);
+    try {
+      await updateLlmProviderAction(formData);
+      setOpen(false);
+      router.refresh();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to update provider",
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <Dialog
+      title="Edit Provider"
+      controlled={{ isOpen: open, set: setOpen }}
+      styling={{ maxWidth: "768px", maxHeight: "90vh", overflowY: "auto" }}
+    >
+      <Dialog.Trigger>
+        <Button variant="outline" size="small">
+          Edit
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <div className="mb-4 text-sm text-muted-foreground">
+          Update provider configuration and capabilities.
+        </div>
+
+        <form action={handleSubmit} className="space-y-6">
+          <input type="hidden" name="provider_id" value={provider.name} />
+
+          {/* Basic Information */}
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <h3 className="text-sm font-semibold text-foreground">
+                Basic Information
+              </h3>
+              <p className="text-xs text-muted-foreground">
+                Core provider details
+              </p>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <label
+                  htmlFor="name"
+                  className="text-sm font-medium text-foreground"
+                >
+                  Provider Slug <span className="text-destructive">*</span>
+                </label>
+                <input
+                  id="name"
+                  required
+                  name="name"
+                  defaultValue={provider.name}
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                  placeholder="e.g. openai"
+                />
+              </div>
+              <div className="space-y-2">
+                <label
+                  htmlFor="display_name"
+                  className="text-sm font-medium text-foreground"
+                >
+                  Display Name <span className="text-destructive">*</span>
+                </label>
+                <input
+                  id="display_name"
+                  required
+                  name="display_name"
+                  defaultValue={provider.display_name}
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                  placeholder="OpenAI"
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <label
+                htmlFor="description"
+                className="text-sm font-medium text-foreground"
+              >
+                Description
+              </label>
+              <textarea
+                id="description"
+                name="description"
+                rows={3}
+                defaultValue={provider.description ?? ""}
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                placeholder="Optional description..."
+              />
+            </div>
+          </div>
+
+          {/* Default Credentials */}
+          <div className="space-y-4 border-t border-border pt-6">
+            <div className="space-y-1">
+              <h3 className="text-sm font-semibold text-foreground">
+                Default Credentials
+              </h3>
+              <p className="text-xs text-muted-foreground">
+                Credential provider name that matches the key in{" "}
+                <code className="rounded bg-muted px-1 py-0.5 font-mono text-xs">
+                  PROVIDER_CREDENTIALS
+                </code>
+              </p>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <label
+                  htmlFor="default_credential_provider"
+                  className="text-sm font-medium text-foreground"
+                >
+                  Credential Provider
+                </label>
+                <input
+                  id="default_credential_provider"
+                  name="default_credential_provider"
+                  defaultValue={provider.default_credential_provider ?? ""}
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                  placeholder="openai"
+                />
+              </div>
+              <div className="space-y-2">
+                <label
+                  htmlFor="default_credential_id"
+                  className="text-sm font-medium text-foreground"
+                >
+                  Credential ID
+                </label>
+                <input
+                  id="default_credential_id"
+                  name="default_credential_id"
+                  defaultValue={provider.default_credential_id ?? ""}
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                  placeholder="Optional credential ID"
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <label
+                htmlFor="default_credential_type"
+                className="text-sm font-medium text-foreground"
+              >
+                Credential Type
+              </label>
+              <input
+                id="default_credential_type"
+                name="default_credential_type"
+                defaultValue={provider.default_credential_type ?? "api_key"}
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                placeholder="api_key"
+              />
+            </div>
+          </div>
+
+          {/* Capabilities */}
+          <div className="space-y-4 border-t border-border pt-6">
+            <div className="space-y-1">
+              <h3 className="text-sm font-semibold text-foreground">
+                Capabilities
+              </h3>
+              <p className="text-xs text-muted-foreground">
+                Provider feature flags
+              </p>
+            </div>
+            <div className="grid gap-3 sm:grid-cols-2">
+              {[
+                {
+                  name: "supports_tools",
+                  label: "Supports tools",
+                  checked: provider.supports_tools,
+                },
+                {
+                  name: "supports_json_output",
+                  label: "Supports JSON output",
+                  checked: provider.supports_json_output,
+                },
+                {
+                  name: "supports_reasoning",
+                  label: "Supports reasoning",
+                  checked: provider.supports_reasoning,
+                },
+                {
+                  name: "supports_parallel_tool",
+                  label: "Supports parallel tool calls",
+                  checked: provider.supports_parallel_tool,
+                },
+              ].map(({ name, label, checked }) => (
+                <div
+                  key={name}
+                  className="flex items-center gap-3 rounded-md border border-border bg-muted/30 px-4 py-3 transition-colors hover:bg-muted/50"
+                >
+                  <input type="hidden" name={name} value="off" />
+                  <input
+                    id={name}
+                    type="checkbox"
+                    name={name}
+                    defaultChecked={checked}
+                    className="h-4 w-4 rounded border-input"
+                  />
+                  <label
+                    htmlFor={name}
+                    className="text-sm font-medium text-foreground"
+                  >
+                    {label}
+                  </label>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {error && (
+            <div className="rounded-lg border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
+              {error}
+            </div>
+          )}
+
+          <Dialog.Footer>
+            <Button
+              variant="ghost"
+              size="small"
+              type="button"
+              onClick={() => {
+                setOpen(false);
+                setError(null);
+              }}
+              disabled={isSubmitting}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="primary"
+              size="small"
+              type="submit"
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? "Saving..." : "Save Changes"}
+            </Button>
+          </Dialog.Footer>
+        </form>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/LlmRegistryDashboard.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/LlmRegistryDashboard.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import type { LlmModel } from "../types";
+import type { LlmModelCreator } from "../types";
+import type { LlmModelMigration } from "../types";
+import type { LlmProvider } from "../types";
+import { ErrorBoundary } from "@/components/molecules/ErrorBoundary/ErrorBoundary";
+import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard";
+import { AddProviderModal } from "./AddProviderModal";
+import { AddModelModal } from "./AddModelModal";
+import { AddCreatorModal } from "./AddCreatorModal";
+import { ProviderList } from "./ProviderList";
+import { ModelsTable } from "./ModelsTable";
+import { MigrationsTable } from "./MigrationsTable";
+import { CreatorsTable } from "./CreatorsTable";
+import { RecommendedModelSelector } from "./RecommendedModelSelector";
+
+interface Props {
+  providers: LlmProvider[];
+  models: LlmModel[];
+  migrations: LlmModelMigration[];
+  creators: LlmModelCreator[];
+}
+
+function AdminErrorFallback() {
+  return (
+    <div className="mx-auto max-w-xl p-6">
+      <ErrorCard
+        responseError={{
+          message:
+            "An error occurred while loading the LLM Registry. Please refresh the page.",
+        }}
+        context="llm-registry"
+        onRetry={() => window.location.reload()}
+      />
+    </div>
+  );
+}
+
+export function LlmRegistryDashboard({
+  providers,
+  models,
+  migrations,
+  creators,
+}: Props) {
+  return (
+    <ErrorBoundary fallback={<AdminErrorFallback />} context="llm-registry">
+      <div className="mx-auto p-6">
+        <div className="flex flex-col gap-6">
+          {/* Header */}
+          <div>
+            <h1 className="text-3xl font-bold">LLM Registry</h1>
+            <p className="text-muted-foreground">
+              Manage providers, creators, models, and credit pricing
+            </p>
+          </div>
+
+          {/* Active Migrations Section - Only show if there are migrations */}
+          {migrations.length > 0 && (
+            <div className="rounded-lg border border-primary/30 bg-primary/5 p-6 shadow-sm">
+              <div className="mb-4">
+                <h2 className="text-xl font-semibold">Active Migrations</h2>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  These migrations can be reverted to restore workflows to their
+                  original model
+                </p>
+              </div>
+              <MigrationsTable migrations={migrations} />
+            </div>
+          )}
+
+          {/* Providers & Creators Section - Side by Side */}
+          <div className="grid gap-6 lg:grid-cols-2">
+            {/* Providers */}
+            <div className="rounded-lg border bg-card p-6 shadow-sm">
+              <div className="mb-4 flex items-center justify-between">
+                <div>
+                  <h2 className="text-xl font-semibold">Providers</h2>
+                  <p className="mt-1 text-sm text-muted-foreground">
+                    Who hosts/serves the models
+                  </p>
+                </div>
+                <AddProviderModal />
+              </div>
+              <ProviderList providers={providers} />
+            </div>
+
+            {/* Creators */}
+            <div className="rounded-lg border bg-card p-6 shadow-sm">
+              <div className="mb-4 flex items-center justify-between">
+                <div>
+                  <h2 className="text-xl font-semibold">Creators</h2>
+                  <p className="mt-1 text-sm text-muted-foreground">
+                    Who made/trained the models
+                  </p>
+                </div>
+                <AddCreatorModal />
+              </div>
+              <CreatorsTable creators={creators} />
+            </div>
+          </div>
+
+          {/* Models Section */}
+          <div className="rounded-lg border bg-card p-6 shadow-sm">
+            <div className="mb-4 flex items-center justify-between">
+              <div>
+                <h2 className="text-xl font-semibold">Models</h2>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  Toggle availability, adjust context windows, and update credit
+                  pricing
+                </p>
+              </div>
+              <AddModelModal providers={providers} creators={creators} />
+            </div>
+
+            {/* Recommended Model Selector */}
+            <div className="mb-6">
+              <RecommendedModelSelector models={models} />
+            </div>
+
+            <ModelsTable
+              models={models}
+              providers={providers}
+              creators={creators}
+            />
+          </div>
+        </div>
+      </div>
+    </ErrorBoundary>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/MigrationsTable.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/MigrationsTable.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import { useState } from "react";
+import type { LlmModelMigration } from "../types";
+import { Button } from "@/components/atoms/Button/Button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/atoms/Table/Table";
+import { revertLlmMigrationAction } from "../actions";
+
+export function MigrationsTable({
+  migrations,
+}: {
+  migrations: LlmModelMigration[];
+}) {
+  if (!migrations.length) {
+    return (
+      <div className="rounded-lg border border-dashed border-border p-6 text-center text-sm text-muted-foreground">
+        No active migrations. Migrations are created when you disable a model
+        with the &quot;Migrate existing workflows&quot; option.
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-lg border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Migration</TableHead>
+            <TableHead>Reason</TableHead>
+            <TableHead>Nodes Affected</TableHead>
+            <TableHead>Custom Cost</TableHead>
+            <TableHead>Created</TableHead>
+            <TableHead className="text-right">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {migrations.map((migration) => (
+            <MigrationRow key={migration.id} migration={migration} />
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+function MigrationRow({ migration }: { migration: LlmModelMigration }) {
+  const [isReverting, setIsReverting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleRevert(formData: FormData) {
+    setIsReverting(true);
+    setError(null);
+    try {
+      await revertLlmMigrationAction(formData);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to revert migration",
+      );
+    } finally {
+      setIsReverting(false);
+    }
+  }
+
+  const createdDate = new Date(migration.created_at);
+
+  return (
+    <>
+      <TableRow>
+        <TableCell>
+          <div className="text-sm">
+            <span className="font-medium">{migration.source_model_slug}</span>
+            <span className="mx-2 text-muted-foreground">→</span>
+            <span className="font-medium">{migration.target_model_slug}</span>
+          </div>
+        </TableCell>
+        <TableCell>
+          <div className="text-sm text-muted-foreground">
+            {migration.reason || "—"}
+          </div>
+        </TableCell>
+        <TableCell>
+          <div className="text-sm">{migration.node_count}</div>
+        </TableCell>
+        <TableCell>
+          <div className="text-sm">
+            {migration.custom_credit_cost !== null &&
+            migration.custom_credit_cost !== undefined
+              ? `${migration.custom_credit_cost} credits`
+              : "—"}
+          </div>
+        </TableCell>
+        <TableCell>
+          <div className="text-sm text-muted-foreground">
+            {createdDate.toLocaleDateString()}{" "}
+            {createdDate.toLocaleTimeString([], {
+              hour: "2-digit",
+              minute: "2-digit",
+            })}
+          </div>
+        </TableCell>
+        <TableCell className="text-right">
+          <form action={handleRevert} className="inline">
+            <input type="hidden" name="migration_id" value={migration.id} />
+            <Button
+              type="submit"
+              variant="outline"
+              size="small"
+              disabled={isReverting}
+            >
+              {isReverting ? "Reverting..." : "Revert"}
+            </Button>
+          </form>
+        </TableCell>
+      </TableRow>
+      {error && (
+        <TableRow>
+          <TableCell colSpan={6}>
+            <div className="rounded border border-destructive/30 bg-destructive/10 p-2 text-sm text-destructive">
+              {error}
+            </div>
+          </TableCell>
+        </TableRow>
+      )}
+    </>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/ModelsTable.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/ModelsTable.tsx
@@ -0,0 +1,254 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import type { LlmModel } from "../types";
+import type { LlmModelCreator } from "../types";
+import type { LlmProvider } from "../types";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/atoms/Table/Table";
+import { Button } from "@/components/atoms/Button/Button";
+import { toggleLlmModelAction, fetchLlmModels } from "../actions";
+import { DeleteModelModal } from "./DeleteModelModal";
+import { DisableModelModal } from "./DisableModelModal";
+import { EditModelModal } from "./EditModelModal";
+import { Star, Spinner } from "@phosphor-icons/react";
+
+const PAGE_SIZE = 50;
+
+export function ModelsTable({
+  models: initialModels,
+  providers,
+  creators,
+}: {
+  models: LlmModel[];
+  providers: LlmProvider[];
+  creators: LlmModelCreator[];
+}) {
+  const [models, setModels] = useState<LlmModel[]>(initialModels);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [hasMore, setHasMore] = useState(initialModels.length === PAGE_SIZE);
+  const [isLoading, setIsLoading] = useState(false);
+  const loadedPagesRef = useRef(1);
+
+  // Sync with parent when initialModels changes (e.g., after enable/disable)
+  // Re-fetch all loaded pages to preserve expanded state
+  useEffect(() => {
+    async function refetchAllPages() {
+      const pagesToLoad = loadedPagesRef.current;
+
+      if (pagesToLoad === 1) {
+        // Only first page loaded, just use initialModels
+        setModels(initialModels);
+        setHasMore(initialModels.length === PAGE_SIZE);
+        return;
+      }
+
+      // Re-fetch all pages we had loaded
+      const allModels: LlmModel[] = [...initialModels];
+      let lastPageHadFullResults = initialModels.length === PAGE_SIZE;
+
+      for (let page = 2; page <= pagesToLoad; page++) {
+        try {
+          const response = await fetchLlmModels(page, PAGE_SIZE);
+          allModels.push(...response.models);
+          lastPageHadFullResults = response.models.length === PAGE_SIZE;
+        } catch (err) {
+          console.error(`Error refetching page ${page}:`, err);
+          break;
+        }
+      }
+
+      setModels(allModels);
+      setHasMore(lastPageHadFullResults);
+    }
+
+    refetchAllPages();
+  }, [initialModels]);
+
+  async function loadMore() {
+    if (isLoading) return;
+    setIsLoading(true);
+
+    try {
+      const nextPage = currentPage + 1;
+      const response = await fetchLlmModels(nextPage, PAGE_SIZE);
+
+      setModels((prev) => [...prev, ...response.models]);
+      setCurrentPage(nextPage);
+      loadedPagesRef.current = nextPage;
+      setHasMore(response.models.length === PAGE_SIZE);
+    } catch (err) {
+      console.error("Error loading more models:", err);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+  if (!models.length) {
+    return (
+      <div className="rounded-lg border border-dashed border-border p-6 text-center text-sm text-muted-foreground">
+        No models registered yet.
+      </div>
+    );
+  }
+
+  const providerLookup = new Map(
+    providers.map((provider) => [provider.id, provider]),
+  );
+
+  return (
+    <div>
+      <div className="rounded-lg border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Model</TableHead>
+              <TableHead>Provider</TableHead>
+              <TableHead>Creator</TableHead>
+              <TableHead>Context Window</TableHead>
+              <TableHead>Max Output</TableHead>
+              <TableHead>Cost</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {models.map((model) => {
+              const cost = model.costs?.[0];
+              const provider = providerLookup.get(model.provider_id);
+              return (
+                <TableRow
+                  key={model.id}
+                  className={model.is_enabled ? "" : "opacity-60"}
+                >
+                  <TableCell>
+                    <div className="font-medium">{model.display_name}</div>
+                    <div className="text-xs text-muted-foreground">
+                      {model.slug}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    {provider ? (
+                      <>
+                        <div>{provider.display_name}</div>
+                        <div className="text-xs text-muted-foreground">
+                          {provider.name}
+                        </div>
+                      </>
+                    ) : (
+                      model.provider_id
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    {model.creator ? (
+                      <>
+                        <div>{model.creator.display_name}</div>
+                        <div className="text-xs text-muted-foreground">
+                          {model.creator.name}
+                        </div>
+                      </>
+                    ) : (
+                      <span className="text-muted-foreground">—</span>
+                    )}
+                  </TableCell>
+                  <TableCell>{model.context_window.toLocaleString()}</TableCell>
+                  <TableCell>
+                    {model.max_output_tokens
+                      ? model.max_output_tokens.toLocaleString()
+                      : "—"}
+                  </TableCell>
+                  <TableCell>
+                    {cost ? (
+                      <>
+                        <div className="font-medium">
+                          {cost.credit_cost} credits
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                          {cost.credential_provider}
+                        </div>
+                      </>
+                    ) : (
+                      "—"
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex flex-col gap-1">
+                      <span
+                        className={`inline-flex rounded-full px-2.5 py-1 text-xs font-semibold ${
+                          model.is_enabled
+                            ? "bg-primary/10 text-primary"
+                            : "bg-muted text-muted-foreground"
+                        }`}
+                      >
+                        {model.is_enabled ? "Enabled" : "Disabled"}
+                      </span>
+                      {model.is_recommended && (
+                        <span className="inline-flex items-center gap-1 rounded-full bg-amber-500/10 px-2.5 py-1 text-xs font-semibold text-amber-600 dark:text-amber-400">
+                          <Star size={12} weight="fill" />
+                          Recommended
+                        </span>
+                      )}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center justify-end gap-2">
+                      {model.is_enabled ? (
+                        <DisableModelModal
+                          model={model}
+                          availableModels={models}
+                        />
+                      ) : (
+                        <EnableModelButton modelId={model.slug} />
+                      )}
+                      <EditModelModal
+                        model={model}
+                        providers={providers}
+                        creators={creators}
+                      />
+                      <DeleteModelModal
+                        model={model}
+                        availableModels={models}
+                      />
+                    </div>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
+
+      {hasMore && (
+        <div className="mt-4 flex justify-center">
+          <Button onClick={loadMore} disabled={isLoading} variant="outline">
+            {isLoading ? (
+              <>
+                <Spinner className="mr-2 h-4 w-4 animate-spin" />
+                Loading...
+              </>
+            ) : (
+              "Load More"
+            )}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function EnableModelButton({ modelId }: { modelId: string }) {
+  return (
+    <form action={toggleLlmModelAction} className="inline">
+      <input type="hidden" name="model_id" value={modelId} />
+      <input type="hidden" name="is_enabled" value="true" />
+      <Button type="submit" variant="outline" size="small" className="min-w-0">
+        Enable
+      </Button>
+    </form>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/ProviderList.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/ProviderList.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/atoms/Table/Table";
+import type { LlmProvider } from "../types";
+import { DeleteProviderModal } from "./DeleteProviderModal";
+import { EditProviderModal } from "./EditProviderModal";
+
+export function ProviderList({ providers }: { providers: LlmProvider[] }) {
+  if (!providers.length) {
+    return (
+      <div className="rounded-lg border border-dashed border-border p-6 text-center text-sm text-muted-foreground">
+        No providers configured yet.
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-lg border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Display Name</TableHead>
+            <TableHead>Default Credential</TableHead>
+            <TableHead>Capabilities</TableHead>
+            <TableHead>Models</TableHead>
+            <TableHead className="w-[100px]">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {providers.map((provider) => (
+            <TableRow key={provider.id}>
+              <TableCell className="font-medium">{provider.name}</TableCell>
+              <TableCell>{provider.display_name}</TableCell>
+              <TableCell>
+                {provider.default_credential_provider
+                  ? `${provider.default_credential_provider} (${provider.default_credential_id ?? "id?"})`
+                  : "—"}
+              </TableCell>
+              <TableCell className="text-sm text-muted-foreground">
+                <div className="flex flex-wrap gap-2">
+                  {provider.supports_tools && (
+                    <span className="rounded bg-muted px-2 py-0.5 text-xs">
+                      Tools
+                    </span>
+                  )}
+                  {provider.supports_json_output && (
+                    <span className="rounded bg-muted px-2 py-0.5 text-xs">
+                      JSON
+                    </span>
+                  )}
+                  {provider.supports_reasoning && (
+                    <span className="rounded bg-muted px-2 py-0.5 text-xs">
+                      Reasoning
+                    </span>
+                  )}
+                  {provider.supports_parallel_tool && (
+                    <span className="rounded bg-muted px-2 py-0.5 text-xs">
+                      Parallel Tools
+                    </span>
+                  )}
+                </div>
+              </TableCell>
+              <TableCell className="text-sm">
+                <span
+                  className={
+                    (provider.models?.length ?? 0) > 0
+                      ? "text-foreground"
+                      : "text-muted-foreground"
+                  }
+                >
+                  {provider.models?.length ?? 0}
+                </span>
+              </TableCell>
+              <TableCell>
+                <div className="flex gap-2">
+                  <EditProviderModal provider={provider} />
+                  <DeleteProviderModal provider={provider} />
+                </div>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/RecommendedModelSelector.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/RecommendedModelSelector.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import type { LlmModel } from "../types";
+import { Button } from "@/components/atoms/Button/Button";
+import { setRecommendedModelAction } from "../actions";
+import { Star } from "@phosphor-icons/react";
+
+export function RecommendedModelSelector({ models }: { models: LlmModel[] }) {
+  const router = useRouter();
+  const enabledModels = models.filter((m) => m.is_enabled);
+  const currentRecommended = models.find((m) => m.is_recommended);
+
+  const [selectedModelSlug, setSelectedModelSlug] = useState<string>(
+    currentRecommended?.slug || "",
+  );
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const hasChanges = selectedModelSlug !== (currentRecommended?.slug || "");
+
+  async function handleSave() {
+    if (!selectedModelSlug) return;
+
+    setIsSaving(true);
+    setError(null);
+    try {
+      const formData = new FormData();
+      formData.set("model_id", selectedModelSlug);
+      await setRecommendedModelAction(formData);
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to save");
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-4">
+      <div className="mb-3 flex items-center gap-2">
+        <Star size={20} weight="fill" className="text-amber-500" />
+        <h3 className="text-sm font-semibold">Recommended Model</h3>
+      </div>
+      <p className="mb-3 text-xs text-muted-foreground">
+        The recommended model is shown as the default suggestion in model
+        selection dropdowns throughout the platform.
+      </p>
+
+      <div className="flex items-center gap-3">
+        <select
+          value={selectedModelSlug}
+          onChange={(e) => setSelectedModelSlug(e.target.value)}
+          className="flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm"
+          disabled={isSaving}
+        >
+          <option value="">-- Select a model --</option>
+          {enabledModels.map((model) => (
+            <option key={model.slug} value={model.slug}>
+              {model.display_name} ({model.slug})
+            </option>
+          ))}
+        </select>
+
+        <Button
+          type="button"
+          variant="primary"
+          size="small"
+          onClick={handleSave}
+          disabled={!hasChanges || !selectedModelSlug || isSaving}
+        >
+          {isSaving ? "Saving..." : "Save"}
+        </Button>
+      </div>
+
+      {error && <p className="mt-2 text-xs text-destructive">{error}</p>}
+
+      {currentRecommended && !hasChanges && (
+        <p className="mt-2 text-xs text-muted-foreground">
+          Currently set to:{" "}
+          <span className="font-medium">{currentRecommended.display_name}</span>
+        </p>
+      )}
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/admin/llms/getLlmRegistryPage.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/admin/llms/getLlmRegistryPage.ts
@@ -0,0 +1,24 @@
+import {
+  fetchLlmProviders,
+  fetchLlmModels,
+  fetchLlmCreators,
+  fetchLlmMigrations,
+} from "./actions";
+
+export async function getLlmRegistryPageData() {
+  // Fetch all data in parallel
+  const [providersData, modelsData, creatorsData, migrationsData] =
+    await Promise.all([
+      fetchLlmProviders(),
+      fetchLlmModels(),
+      fetchLlmCreators(),
+      fetchLlmMigrations(),
+    ]);
+
+  return {
+    providers: providersData.providers || [],
+    models: modelsData.models || [],
+    creators: creatorsData.creators || [],
+    migrations: migrationsData.migrations || [],
+  };
+}
--- a/autogpt_platform/frontend/src/app/(platform)/admin/llms/page.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/admin/llms/page.tsx
@@ -0,0 +1,14 @@
+import { withRoleAccess } from "@/lib/withRoleAccess";
+import { getLlmRegistryPageData } from "./getLlmRegistryPage";
+import { LlmRegistryDashboard } from "./components/LlmRegistryDashboard";
+
+async function LlmRegistryPage() {
+  const data = await getLlmRegistryPageData();
+  return <LlmRegistryDashboard {...data} />;
+}
+
+export default async function AdminLlmRegistryPage() {
+  const withAdminAccess = await withRoleAccess(["admin"]);
+  const ProtectedLlmRegistryPage = await withAdminAccess(LlmRegistryPage);
+  return <ProtectedLlmRegistryPage />;
+}
--- a/autogpt_platform/frontend/src/app/(platform)/admin/llms/types.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/admin/llms/types.ts
@@ -0,0 +1,76 @@
+// Type definitions for LLM registry admin UI
+// These match the API response formats from our admin endpoints
+
+export interface LlmProvider {
+  id: string;
+  name: string;
+  display_name: string;
+  description: string | null;
+  default_credential_provider: string | null;
+  default_credential_id: string | null;
+  default_credential_type: string | null;
+  metadata: Record<string, any>;
+  created_at: string | null;
+  updated_at: string | null;
+  models?: LlmModel[];
+  supports_tools?: boolean;
+  supports_json_output?: boolean;
+  supports_reasoning?: boolean;
+  supports_parallel_tool?: boolean;
+}
+
+export interface LlmModelCost {
+  unit: string;
+  credit_cost: number;
+  credential_provider: string;
+  credential_type?: string;
+  metadata: Record<string, any>;
+}
+
+export interface LlmModel {
+  id: string;
+  slug: string;
+  display_name: string;
+  description: string | null;
+  provider_id: string;
+  creator_id: string | null;
+  creator?: LlmModelCreator;
+  context_window: number;
+  max_output_tokens: number | null;
+  price_tier: number;
+  is_enabled: boolean;
+  is_recommended: boolean;
+  supports_tools: boolean;
+  supports_json_output: boolean;
+  supports_reasoning: boolean;
+  supports_parallel_tool_calls: boolean;
+  capabilities: Record<string, any>;
+  metadata: Record<string, any>;
+  costs?: LlmModelCost[];
+  created_at: string | null;
+  updated_at: string | null;
+}
+
+export interface LlmModelCreator {
+  id: string;
+  name: string;
+  display_name: string;
+  description: string | null;
+  website_url: string | null;
+  logo_url: string | null;
+  metadata: Record<string, any>;
+}
+
+export interface LlmModelMigration {
+  id: string;
+  source_model_slug: string;
+  target_model_slug: string;
+  reason: string | null;
+  migrated_node_ids: any[];
+  node_count: number;
+  custom_credit_cost: number | null;
+  is_reverted: boolean;
+  reverted_at: string | null;
+  created_at: string;
+  updated_at: string;
+}
--- a/autogpt_platform/frontend/src/components/atoms/Table/Table.tsx
+++ b/autogpt_platform/frontend/src/components/atoms/Table/Table.tsx
@@ -0,0 +1,123 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-neutral-100/50 font-medium dark:bg-neutral-800/50 [&>tr]:last:border-b-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors data-[state=selected]:bg-neutral-100 hover:bg-neutral-100/50 dark:data-[state=selected]:bg-neutral-800 dark:hover:bg-neutral-800/50",
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-neutral-500 dark:text-neutral-400 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className,
+    )}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn(
+      "mt-4 text-sm text-neutral-500 dark:text-neutral-400",
+      className,
+    )}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};