diff --git a/src/authsome/server/credential_service.py b/src/authsome/server/credential_service.py
index 8a62667d..9f8f6363 100644
--- a/src/authsome/server/credential_service.py
+++ b/src/authsome/server/credential_service.py
@@ -5,6 +5,7 @@
 """
 
 import json
+import re
 from dataclasses import dataclass
 from datetime import datetime, timedelta
 from typing import Any, Self
@@ -40,6 +41,7 @@
     CredentialMissingError,
     InvalidProviderSchemaError,
     OperationNotAllowedError,
+    ProviderNotFoundError,
     RefreshFailedError,
     TokenExpiredError,
     UnsupportedFlowError,
@@ -172,6 +174,28 @@ async def register_provider(self, definition: ProviderDefinition, *, force: bool
         )
         logger.info("Registered provider: {}", definition.name)
 
+    async def update_provider(self, provider: str, definition: ProviderDefinition) -> None:
+        """Update an existing custom provider definition."""
+        self._require_admin("update", "update requires an admin principal", provider)
+        if provider != definition.name:
+            raise InvalidProviderSchemaError(
+                f"Provider name '{definition.name}' must match route provider '{provider}'",
+                provider=provider,
+            )
+        if not await self.is_custom_provider(provider):
+            raise ProviderNotFoundError(provider)
+        self._validate_provider(definition)
+        await self._providers.save_custom(definition, force=True)
+        audit.emit_event(
+            "provider.updated",
+            provider=definition.name,
+            identity=self._identity,
+            principal_id=self._principal_id,
+            status="success",
+            auth_type=definition.auth_type.value if definition.auth_type else None,
+        )
+        logger.info("Updated provider: {}", definition.name)
+
     def _require_admin(self, operation: str, message: str, provider: str) -> None:
         """Allow an operation only for admin principals."""
         if self._principal_role == PrincipalRole.ADMIN:
@@ -180,20 +204,85 @@ def _require_admin(self, operation: str, message: str, provider: str) -> None:
 
     def _validate_provider(self, definition: ProviderDefinition) -> None:
         validate_provider_definition(definition)
+        self._validate_api_targets(definition.api_urls(), "api_url", definition.name)
+        self._validate_optional_url(definition.docs_url, "docs_url", definition.name)
         if definition.oauth:
-            for field_name in ("authorization_url", "token_url"):
+            for field_name in (
+                "authorization_url",
+                "token_url",
+                "revocation_url",
+                "device_authorization_url",
+                "base_url",
+            ):
                 url = getattr(definition.oauth, field_name, None)
                 if url:
-                    self._validate_url(url, field_name, definition.name)
+                    self._validate_optional_url(url, field_name, definition.name, allow_base_url_template=True)
+        if definition.registration:
+            self._validate_optional_url(
+                definition.registration.registration_endpoint,
+                "registration.registration_endpoint",
+                definition.name,
+            )
+        if definition.browser:
+            self._validate_optional_url(definition.browser.entry_url, "browser.entry_url", definition.name)
+            self._validate_optional_url(definition.browser.validate_url, "browser.validate_url", definition.name)
 
     @staticmethod
-    def _validate_url(url: str, field_name: str, provider_name: str) -> None:
-        if "{base_url}" in url:
+    def _validate_optional_url(
+        url: str | None,
+        field_name: str,
+        provider_name: str,
+        *,
+        allow_base_url_template: bool = False,
+    ) -> None:
+        if not url:
             return
+        CredentialService._validate_url(url, field_name, provider_name, allow_base_url_template=allow_base_url_template)
+
+    @staticmethod
+    def _validate_url(
+        url: str,
+        field_name: str,
+        provider_name: str,
+        *,
+        allow_base_url_template: bool = False,
+    ) -> None:
+        if allow_base_url_template and "{base_url}" in url:
+            return
+        if "{base_url}" in url:
+            raise InvalidProviderSchemaError(
+                f"Invalid URL for '{field_name}': {url}",
+                provider=provider_name,
+            )
         parsed = urlparse(url)
-        if not parsed.scheme or not parsed.netloc:
+        if parsed.scheme not in {"http", "https"} or not parsed.netloc:
             raise InvalidProviderSchemaError(f"Invalid URL for '{field_name}': {url}", provider=provider_name)
 
+    @staticmethod
+    def _validate_api_targets(targets: tuple[str, ...], field_name: str, provider_name: str) -> None:
+        for target in targets:
+            cleaned = target.strip()
+            if not cleaned or any(char.isspace() for char in cleaned):
+                raise InvalidProviderSchemaError(
+                    f"Invalid API target for '{field_name}': {target}",
+                    provider=provider_name,
+                )
+            if cleaned.startswith("regex:"):
+                try:
+                    re.compile(cleaned.removeprefix("regex:"))
+                except re.error as exc:
+                    raise InvalidProviderSchemaError(
+                        f"Invalid API target for '{field_name}': {target}",
+                        provider=provider_name,
+                    ) from exc
+                continue
+            parsed = urlparse(cleaned if "://" in cleaned else f"https://{cleaned}")
+            if parsed.scheme not in {"http", "https"} or not parsed.netloc:
+                raise InvalidProviderSchemaError(
+                    f"Invalid API target for '{field_name}': {target}",
+                    provider=provider_name,
+                )
+
     # ── Connection operations ─────────────────────────────────────────────
 
     async def list_connections(self) -> list[dict[str, Any]]:
@@ -904,6 +993,13 @@ async def remove(self, provider: str) -> None:
         await self.revoke(provider)
         if await self.is_custom_provider(provider):
             await self._providers.delete_custom(provider)
+            audit.emit_event(
+                "provider.deleted",
+                provider=provider,
+                identity=self._identity,
+                principal_id=self._principal_id,
+                status="success",
+            )
             logger.info("Removed local provider definition: {}", provider)
         else:
             logger.info("Revoked bundled provider: {} (definition kept)", provider)
diff --git a/src/authsome/server/routes/_deps.py b/src/authsome/server/routes/_deps.py
index e4352e42..1fff0247 100644
--- a/src/authsome/server/routes/_deps.py
+++ b/src/authsome/server/routes/_deps.py
@@ -179,14 +179,6 @@ async def get_protected_auth_service(
     return _build_service(request, ownership)
 
 
-async def get_admin_auth_service(
-    auth: CredentialService = Depends(get_protected_auth_service),
-) -> CredentialService:
-    if auth.principal_role != PrincipalRole.ADMIN:
-        raise HTTPException(status_code=status.HTTP_403_FORBIDDEN, detail="Admin role required")
-    return auth
-
-
 async def get_daemon_or_browser_auth_service(request: Request) -> CredentialService:
     """Resolve auth from PoP headers or an existing browser dashboard session."""
     if request.headers.get("Authorization"):
diff --git a/src/authsome/server/routes/providers.py b/src/authsome/server/routes/providers.py
index b99f3f13..1b70dc1d 100644
--- a/src/authsome/server/routes/providers.py
+++ b/src/authsome/server/routes/providers.py
@@ -9,7 +9,6 @@
 from authsome.server.credential_service import CredentialService
 from authsome.server.routes._deps import (
     build_auth_service,
-    get_admin_auth_service,
     get_daemon_or_browser_auth_service,
     get_protected_auth_service,
     get_server_base_url,
@@ -168,12 +167,14 @@ async def update_provider_configuration(
 
 
 @router.post("")
-async def register_provider(body: dict, auth: CredentialService = Depends(get_admin_auth_service)):
+async def register_provider(body: dict, auth: CredentialService = Depends(get_daemon_or_browser_auth_service)):
+    if auth.principal_role != PrincipalRole.ADMIN:
+        raise HTTPException(status_code=status.HTTP_403_FORBIDDEN, detail="Admin role required")
     definition_payload = body.get("definition", body)
     definition = ProviderDefinition.model_validate(definition_payload)
     await auth.register_provider(definition, force=bool(body.get("force", False)))
     capture_event(
-        auth.require_identity(),
+        _actor(auth),
         "provider registered",
         {
             "provider": definition.name,
@@ -184,11 +185,39 @@ async def register_provider(body: dict, auth: CredentialService = Depends(get_ad
     return {"status": "ok", "provider": definition.name}
 
 
+@router.put("/{provider}")
+async def update_provider(
+    provider: str,
+    body: dict,
+    auth: CredentialService = Depends(get_daemon_or_browser_auth_service),
+):
+    if auth.principal_role != PrincipalRole.ADMIN:
+        raise HTTPException(status_code=status.HTTP_403_FORBIDDEN, detail="Admin role required")
+    definition_payload = body.get("definition", body)
+    definition = ProviderDefinition.model_validate(definition_payload)
+    await auth.update_provider(provider, definition)
+    capture_event(
+        _actor(auth),
+        "provider updated",
+        {
+            "provider": definition.name,
+            "auth_type": definition.auth_type.value if definition.auth_type else None,
+            "principal_id": auth.principal_id,
+        },
+    )
+    return {"status": "ok", "provider": definition.name}
+
+
 @router.delete("/{provider}")
-async def delete_provider(provider: str, auth: CredentialService = Depends(get_admin_auth_service)):
+async def delete_provider(
+    provider: str,
+    auth: CredentialService = Depends(get_daemon_or_browser_auth_service),
+):
+    if auth.principal_role != PrincipalRole.ADMIN:
+        raise HTTPException(status_code=status.HTTP_403_FORBIDDEN, detail="Admin role required")
     await auth.remove(provider)
     capture_event(
-        auth.require_identity(),
+        _actor(auth),
         "provider deleted",
         {
             "provider": provider,
diff --git a/tests/server/test_provider_operation_policy.py b/tests/server/test_provider_operation_policy.py
index 55d5ed6a..d39cc1ea 100644
--- a/tests/server/test_provider_operation_policy.py
+++ b/tests/server/test_provider_operation_policy.py
@@ -117,3 +117,119 @@ def test_first_principal_admin_can_register_provider(monkeypatch, tmp_path: Path
 
     assert response.status_code == status.HTTP_200_OK
     assert response.json()["status"] == "ok"
+
+
+def test_browser_session_admin_can_register_provider(monkeypatch, tmp_path: Path) -> None:
+    monkeypatch.setenv("AUTHSOME_HOME", str(tmp_path))
+    payload = {
+        "definition": {
+            "name": "custom-api",
+            "display_name": "Custom API",
+            "auth_type": "api_key",
+            "flow": "api_key",
+            "api_key": {"header_name": "Authorization"},
+        }
+    }
+
+    with create_server_test_client() as client:
+        registered = client.post(
+            "/api/auth/register",
+            data={"email": "admin@example.com", "password": "password-1", "next": "/providers"},
+            follow_redirects=False,
+        )
+        response = client.post("/api/providers", json=payload)
+
+    assert registered.status_code == status.HTTP_303_SEE_OTHER
+    assert response.status_code == status.HTTP_200_OK
+    assert response.json() == {"status": "ok", "provider": "custom-api"}
+
+
+def test_admin_can_update_custom_provider(monkeypatch, tmp_path: Path) -> None:
+    monkeypatch.setenv("AUTHSOME_HOME", str(tmp_path))
+    create_payload = {
+        "definition": {
+            "name": "custom-api",
+            "display_name": "Custom API",
+            "auth_type": "api_key",
+            "flow": "api_key",
+            "api_url": "api.example.com",
+            "api_key": {"header_name": "Authorization", "header_prefix": "Bearer"},
+        }
+    }
+    update_payload = {
+        "definition": {
+            "name": "custom-api",
+            "display_name": "Updated API",
+            "auth_type": "api_key",
+            "flow": "api_key",
+            "api_url": "https://api.example.com/v2",
+            "api_key": {"header_name": "x-api-key", "header_prefix": ""},
+        }
+    }
+    create_body = json.dumps(create_payload, separators=(",", ":"), sort_keys=True).encode("utf-8")
+    update_body = json.dumps(update_payload, separators=(",", ":"), sort_keys=True).encode("utf-8")
+
+    with create_server_test_client() as client:
+        _register_identity(client, tmp_path, "steady-wisely-boldly-0042")
+        created = client.post(
+            "/api/providers",
+            content=create_body,
+            headers={
+                **_auth_header(tmp_path, "POST", "/api/providers", body=create_body),
+                "Content-Type": "application/json",
+            },
+        )
+        response = client.put(
+            "/api/providers/custom-api",
+            content=update_body,
+            headers={
+                **_auth_header(tmp_path, "PUT", "/api/providers/custom-api", body=update_body),
+                "Content-Type": "application/json",
+            },
+        )
+        fetched = client.get(
+            "/api/providers/custom-api",
+            headers=_auth_header(tmp_path, "GET", "/api/providers/custom-api"),
+        )
+
+    assert created.status_code == status.HTTP_200_OK
+    assert response.status_code == status.HTTP_200_OK
+    assert response.json() == {"status": "ok", "provider": "custom-api"}
+    assert fetched.json()["display_name"] == "Updated API"
+    assert fetched.json()["api_key"]["header_name"] == "x-api-key"
+
+
+def test_provider_registration_rejects_invalid_url_fields(monkeypatch, tmp_path: Path) -> None:
+    monkeypatch.setenv("AUTHSOME_HOME", str(tmp_path))
+    payload = {
+        "definition": {
+            "name": "custom-api",
+            "display_name": "Custom API",
+            "auth_type": "api_key",
+            "flow": "api_key",
+            "api_url": "https://api.example.com",
+            "docs_url": "not a url",
+            "api_key": {"header_name": "Authorization"},
+        }
+    }
+    body = json.dumps(payload, separators=(",", ":"), sort_keys=True).encode("utf-8")
+
+    with create_server_test_client() as client:
+        _register_identity(client, tmp_path, "steady-wisely-boldly-0042")
+        response = client.post(
+            "/api/providers",
+            content=body,
+            headers={
+                **_auth_header(tmp_path, "POST", "/api/providers", body=body),
+                "Content-Type": "application/json",
+            },
+        )
+        fetched = client.get(
+            "/api/providers/custom-api",
+            headers=_auth_header(tmp_path, "GET", "/api/providers/custom-api"),
+        )
+
+    assert response.status_code == status.HTTP_400_BAD_REQUEST
+    assert response.json()["error"] == "InvalidProviderSchemaError"
+    assert "docs_url" in response.json()["message"]
+    assert fetched.status_code == status.HTTP_404_NOT_FOUND
diff --git a/ui/src/app/(authenticated)/providers/page.tsx b/ui/src/app/(authenticated)/providers/page.tsx
index 11e40067..91df1e02 100644
--- a/ui/src/app/(authenticated)/providers/page.tsx
+++ b/ui/src/app/(authenticated)/providers/page.tsx
@@ -6,7 +6,13 @@ import { ProvidersView } from "@/components/dashboard/provider-views";
 import { fetchDashboard } from "@/lib/authsome-api";
 
 export default function ProvidersPage() {
-  const { data } = useSWR("authsome-dashboard", fetchDashboard);
+  const { data, mutate } = useSWR("authsome-dashboard", fetchDashboard);
   if (!data) return null;
-  return <ProvidersView providers={data.providers} />;
+  return (
+    <ProvidersView
+      isAdmin={data.account.isAdmin}
+      onRefresh={() => void mutate()}
+      providers={data.providers}
+    />
+  );
 }
diff --git a/ui/src/components/authsome-dashboard.tsx b/ui/src/components/authsome-dashboard.tsx
index b0609b8e..f9ebcd33 100644
--- a/ui/src/components/authsome-dashboard.tsx
+++ b/ui/src/components/authsome-dashboard.tsx
@@ -67,7 +67,9 @@ function ActiveView({
   onRefresh: () => void;
   view: View;
 }) {
-  if (view === "providers") return <ProvidersView providers={data.providers} />;
+  if (view === "providers") {
+    return <ProvidersView isAdmin={data.account.isAdmin} onRefresh={onRefresh} providers={data.providers} />;
+  }
   if (view === "connections") {
     return (
       <ConnectionsView
diff --git a/ui/src/components/dashboard/custom-provider-form.tsx b/ui/src/components/dashboard/custom-provider-form.tsx
new file mode 100644
index 00000000..dc1c2c9c
--- /dev/null
+++ b/ui/src/components/dashboard/custom-provider-form.tsx
@@ -0,0 +1,1214 @@
+"use client";
+
+import { ChevronDown, CircleHelp, Plus, Save, Trash2 } from "lucide-react";
+import { FormEvent, useMemo, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Select } from "@/components/ui/select";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import {
+  ApiError,
+  ProviderDefinitionPayload,
+  ProviderResponse,
+  createCustomProvider,
+  updateCustomProvider,
+} from "@/lib/authsome-api";
+import { cn } from "@/lib/utils";
+
+type AuthType = "oauth2" | "api_key" | "browser";
+type FlowType = "pkce" | "device_code" | "dcr_pkce" | "api_key" | "browser";
+type ProviderType = "app" | "llm" | "mcp" | "browser";
+
+type KeyValueRow = {
+  id: string;
+  key: string;
+  value: string;
+};
+
+type ExtractRow = {
+  id: string;
+  cookie: string;
+  header: string;
+  prefix: string;
+};
+
+type FieldKey =
+  | "name"
+  | "displayName"
+  | "apiTargets"
+  | "docsUrl"
+  | "oauthBaseUrl"
+  | "oauthAuthorizationUrl"
+  | "oauthTokenUrl"
+  | "oauthRevocationUrl"
+  | "oauthDeviceAuthorizationUrl"
+  | "registrationEndpoint"
+  | "browserEntryUrl"
+  | "browserValidateUrl"
+  | "browserTtlHours";
+
+type FieldErrors = Partial<Record<FieldKey, string>>;
+
+type ValidationResult = {
+  field: FieldKey;
+  message: string;
+};
+
+type ProviderFormState = {
+  name: string;
+  displayName: string;
+  logo: string;
+  description: string;
+  providerType: ProviderType;
+  authType: AuthType;
+  flow: FlowType;
+  apiTargets: string[];
+  docsUrl: string;
+  oauth: {
+    authorizationUrl: string;
+    tokenUrl: string;
+    revocationUrl: string;
+    deviceAuthorizationUrl: string;
+    deviceTokenRequest: "oauth2_form" | "json";
+    scopes: string[];
+    authorizationParams: KeyValueRow[];
+    pkce: boolean;
+    supportsDeviceCode: boolean;
+    supportsDcr: boolean;
+    baseUrl: string;
+    authorizationMethod: "body" | "basic";
+  };
+  registrationEndpoint: string;
+  apiKey: {
+    headerName: string;
+    headerPrefixMode: "Bearer" | "Basic" | "Token" | "empty" | "none" | "custom";
+    headerPrefixCustom: string;
+    keyPattern: string;
+    keyPatternHint: string;
+  };
+  browser: {
+    entryUrl: string;
+    domains: string[];
+    authCookies: string[];
+    validateUrl: string;
+    ttlHours: string;
+    ttlFromCookie: string;
+    extraHeaders: KeyValueRow[];
+    extract: ExtractRow[];
+  };
+  exportRows: KeyValueRow[];
+};
+
+const FLOW_OPTIONS: Record<AuthType, Array<{ value: FlowType; label: string }>> = {
+  oauth2: [
+    { value: "pkce", label: "PKCE" },
+    { value: "device_code", label: "Device code" },
+    { value: "dcr_pkce", label: "DCR + PKCE" },
+  ],
+  api_key: [{ value: "api_key", label: "API key" }],
+  browser: [{ value: "browser", label: "Browser session" }],
+};
+
+const AUTH_TYPES: Array<{ value: AuthType; label: string }> = [
+  { value: "oauth2", label: "OAuth 2.0" },
+  { value: "api_key", label: "API key" },
+  { value: "browser", label: "Browser session" },
+];
+
+const PROVIDER_TYPES: Array<{ value: ProviderType; label: string }> = [
+  { value: "app", label: "App" },
+  { value: "llm", label: "LLM" },
+  { value: "mcp", label: "MCP" },
+  { value: "browser", label: "Browser" },
+];
+
+function rowId(): string {
+  return Math.random().toString(36).slice(2);
+}
+
+function kvRows(record: Record<string, string> | undefined): KeyValueRow[] {
+  return Object.entries(record || {}).map(([key, value]) => ({ id: rowId(), key, value }));
+}
+
+function splitList(values: string[] | undefined): string[] {
+  return values?.length ? values : [""];
+}
+
+function headerPrefixState(value: string | null | undefined): ProviderFormState["apiKey"] {
+  const base = {
+    headerName: "Authorization",
+    headerPrefixMode: "Bearer" as const,
+    headerPrefixCustom: "",
+    keyPattern: "",
+    keyPatternHint: "",
+  };
+  if (value === null) return { ...base, headerPrefixMode: "none" };
+  if (value === "") return { ...base, headerPrefixMode: "empty" };
+  if (value === "Bearer" || value === "Basic" || value === "Token") {
+    return { ...base, headerPrefixMode: value };
+  }
+  if (value) return { ...base, headerPrefixMode: "custom", headerPrefixCustom: value };
+  return base;
+}
+
+function initialState(provider?: ProviderResponse | null): ProviderFormState {
+  const authType = (provider?.auth_type as AuthType | undefined) || "oauth2";
+  const defaultFlow = FLOW_OPTIONS[authType][0].value;
+  const apiKeyState = headerPrefixState(provider?.api_key?.header_prefix);
+  const exportRecord = provider?.export && "env" in provider.export ? provider.export.env : provider?.export;
+  return {
+    name: provider?.name || "",
+    displayName: provider?.display_name || "",
+    logo: provider?.logo || "",
+    description: provider?.description || provider?.metadata?.description || "",
+    providerType: (provider?.type as ProviderType | undefined) || "app",
+    authType,
+    flow: (provider?.flow as FlowType | undefined) || defaultFlow,
+    apiTargets: splitList(
+      Array.isArray(provider?.api_url)
+        ? provider?.api_url
+        : provider?.api_url
+          ? [provider.api_url]
+          : undefined,
+    ),
+    docsUrl: provider?.docs_url || "",
+    oauth: {
+      authorizationUrl: provider?.oauth?.authorization_url || "",
+      tokenUrl: provider?.oauth?.token_url || "",
+      revocationUrl: provider?.oauth?.revocation_url || "",
+      deviceAuthorizationUrl: provider?.oauth?.device_authorization_url || "",
+      deviceTokenRequest: provider?.oauth?.device_token_request || "oauth2_form",
+      scopes: splitList(provider?.oauth?.scopes),
+      authorizationParams: kvRows(provider?.oauth?.authorization_params),
+      pkce: provider?.oauth?.pkce ?? true,
+      supportsDeviceCode: provider?.oauth?.supports_device_code ?? false,
+      supportsDcr: provider?.oauth?.supports_dcr ?? false,
+      baseUrl: provider?.oauth?.base_url || "",
+      authorizationMethod: provider?.oauth?.authorization_method || "body",
+    },
+    registrationEndpoint: provider?.registration?.registration_endpoint || "",
+    apiKey: {
+      ...apiKeyState,
+      headerName: provider?.api_key?.header_name || "Authorization",
+      keyPattern: provider?.api_key?.key_pattern || "",
+      keyPatternHint: provider?.api_key?.key_pattern_hint || "",
+    },
+    browser: {
+      entryUrl: provider?.browser?.entry_url || "",
+      domains: splitList(provider?.browser?.domains),
+      authCookies: splitList(provider?.browser?.auth_cookies),
+      validateUrl: provider?.browser?.validate_url || "",
+      ttlHours: String(provider?.browser?.ttl_hours || 24),
+      ttlFromCookie: provider?.browser?.ttl_from_cookie || "",
+      extraHeaders: kvRows(provider?.browser?.extra_headers),
+      extract: (provider?.browser?.extract || []).map((row) => ({
+        id: rowId(),
+        cookie: row.cookie,
+        header: row.header,
+        prefix: row.prefix || "",
+      })),
+    },
+    exportRows: kvRows(exportRecord && !Array.isArray(exportRecord) ? exportRecord as Record<string, string> : {}),
+  };
+}
+
+function cleanList(values: string[]): string[] {
+  return values.map((value) => value.trim()).filter(Boolean);
+}
+
+function cleanRecord(rows: KeyValueRow[]): Record<string, string> {
+  return Object.fromEntries(
+    rows
+      .map((row) => [row.key.trim(), row.value.trim()] as const)
+      .filter(([key]) => Boolean(key)),
+  );
+}
+
+function isHttpUrl(value: string): boolean {
+  try {
+    const parsed = new URL(value);
+    return parsed.protocol === "http:" || parsed.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
+function isTemplateUrl(value: string, baseUrl: string): boolean {
+  return value.includes("{base_url}") && Boolean(baseUrl.trim()) && isHttpUrl(baseUrl.trim());
+}
+
+function isApiTarget(value: string): boolean {
+  const trimmed = value.trim();
+  if (!trimmed || /\s/.test(trimmed)) return false;
+  if (trimmed.startsWith("regex:")) {
+    try {
+      new RegExp(trimmed.slice("regex:".length));
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  return isHttpUrl(trimmed) || isHttpUrl(`https://${trimmed}`);
+}
+
+function optionalUrlError(value: string, label: string, allowTemplate = false, baseUrl = ""): string | null {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  if (allowTemplate && isTemplateUrl(trimmed, baseUrl)) return null;
+  return isHttpUrl(trimmed) ? null : `${label} must be a valid http(s) URL.`;
+}
+
+function validation(field: FieldKey, message: string): ValidationResult {
+  return { field, message };
+}
+
+function validateState(state: ProviderFormState): ValidationResult | null {
+  if (!state.name.trim()) return validation("name", "Provider name is required.");
+  if (!/^[a-zA-Z0-9][a-zA-Z0-9._-]*$/.test(state.name.trim()) || state.name.includes("..")) {
+    return validation("name", "Provider name must be filesystem-safe.");
+  }
+  if (!state.displayName.trim()) return validation("displayName", "Display name is required.");
+  for (const target of cleanList(state.apiTargets)) {
+    if (!isApiTarget(target)) {
+      return validation("apiTargets", "API targets must be http(s) URLs, bare hosts, or regex: patterns.");
+    }
+  }
+  const docsError = optionalUrlError(state.docsUrl, "Docs URL");
+  if (docsError) return validation("docsUrl", docsError);
+  if (state.authType === "oauth2") {
+    if (!state.oauth.authorizationUrl.trim()) {
+      return validation("oauthAuthorizationUrl", "Authorization URL is required for OAuth providers.");
+    }
+    if (!state.oauth.tokenUrl.trim()) return validation("oauthTokenUrl", "Token URL is required for OAuth providers.");
+    for (const [value, label, field] of [
+      [state.oauth.baseUrl, "Base URL", "oauthBaseUrl"],
+      [state.oauth.authorizationUrl, "Authorization URL", "oauthAuthorizationUrl"],
+      [state.oauth.tokenUrl, "Token URL", "oauthTokenUrl"],
+      [state.oauth.revocationUrl, "Revocation URL", "oauthRevocationUrl"],
+      [state.oauth.deviceAuthorizationUrl, "Device authorization URL", "oauthDeviceAuthorizationUrl"],
+    ] as const) {
+      const error = optionalUrlError(value, label, label !== "Base URL", state.oauth.baseUrl);
+      if (error) return validation(field, error);
+    }
+    if (state.flow === "device_code" && !state.oauth.deviceAuthorizationUrl.trim()) {
+      return validation("oauthDeviceAuthorizationUrl", "Device authorization URL is required for device-code providers.");
+    }
+    const registrationError = optionalUrlError(state.registrationEndpoint, "Registration endpoint");
+    if (registrationError) return validation("registrationEndpoint", registrationError);
+  }
+  if (state.authType === "browser") {
+    const entryError = optionalUrlError(state.browser.entryUrl, "Browser entry URL");
+    if (entryError) return validation("browserEntryUrl", entryError);
+    const validateError = optionalUrlError(state.browser.validateUrl, "Browser validate URL");
+    if (validateError) return validation("browserValidateUrl", validateError);
+    if (Number.parseInt(state.browser.ttlHours, 10) <= 0) {
+      return validation("browserTtlHours", "TTL hours must be greater than zero.");
+    }
+  }
+  return null;
+}
+
+function fieldFromServerMessage(message: string): FieldKey | null {
+  const normalized = message.toLowerCase();
+  const entries: Array<[string, FieldKey]> = [
+    ["docs_url", "docsUrl"],
+    ["api_url", "apiTargets"],
+    ["authorization_url", "oauthAuthorizationUrl"],
+    ["token_url", "oauthTokenUrl"],
+    ["revocation_url", "oauthRevocationUrl"],
+    ["device_authorization_url", "oauthDeviceAuthorizationUrl"],
+    ["base_url", "oauthBaseUrl"],
+    ["registration.registration_endpoint", "registrationEndpoint"],
+    ["registration_endpoint", "registrationEndpoint"],
+    ["browser.entry_url", "browserEntryUrl"],
+    ["browser.validate_url", "browserValidateUrl"],
+    ["entry_url", "browserEntryUrl"],
+    ["validate_url", "browserValidateUrl"],
+  ];
+  return entries.find(([needle]) => normalized.includes(needle))?.[1] || null;
+}
+
+function headerPrefixValue(apiKey: ProviderFormState["apiKey"]): string | null {
+  if (apiKey.headerPrefixMode === "none") return null;
+  if (apiKey.headerPrefixMode === "empty") return "";
+  if (apiKey.headerPrefixMode === "custom") return apiKey.headerPrefixCustom.trim();
+  return apiKey.headerPrefixMode;
+}
+
+function buildPayload(state: ProviderFormState): ProviderDefinitionPayload {
+  const apiTargets = cleanList(state.apiTargets);
+  const payload: ProviderDefinitionPayload = {
+    schema_version: 1,
+    name: state.name.trim(),
+    display_name: state.displayName.trim(),
+    auth_type: state.authType,
+    flow: state.flow,
+    type: state.providerType,
+  };
+  if (state.logo.trim()) payload.logo = state.logo.trim();
+  if (state.description.trim()) payload.description = state.description.trim();
+  if (state.docsUrl.trim()) payload.docs_url = state.docsUrl.trim();
+  if (apiTargets.length === 1) payload.api_url = apiTargets[0];
+  if (apiTargets.length > 1) payload.api_url = apiTargets;
+  const exportRows = cleanRecord(state.exportRows);
+  if (Object.keys(exportRows).length) payload.export = exportRows;
+
+  if (state.authType === "oauth2") {
+    payload.oauth = {
+      authorization_url: state.oauth.authorizationUrl.trim(),
+      token_url: state.oauth.tokenUrl.trim(),
+      scopes: cleanList(state.oauth.scopes),
+      authorization_params: cleanRecord(state.oauth.authorizationParams),
+      pkce: state.oauth.pkce,
+      supports_device_code: state.oauth.supportsDeviceCode,
+      supports_dcr: state.oauth.supportsDcr,
+      device_token_request: state.oauth.deviceTokenRequest,
+      authorization_method: state.oauth.authorizationMethod,
+    };
+    if (state.oauth.baseUrl.trim()) payload.oauth.base_url = state.oauth.baseUrl.trim();
+    if (state.oauth.revocationUrl.trim()) payload.oauth.revocation_url = state.oauth.revocationUrl.trim();
+    if (state.oauth.deviceAuthorizationUrl.trim()) {
+      payload.oauth.device_authorization_url = state.oauth.deviceAuthorizationUrl.trim();
+    }
+    if (state.registrationEndpoint.trim()) {
+      payload.registration = { registration_endpoint: state.registrationEndpoint.trim() };
+    }
+  }
+
+  if (state.authType === "api_key") {
+    payload.api_key = {
+      header_name: state.apiKey.headerName.trim() || "Authorization",
+      header_prefix: headerPrefixValue(state.apiKey),
+    };
+    if (state.apiKey.keyPattern.trim()) payload.api_key.key_pattern = state.apiKey.keyPattern.trim();
+    if (state.apiKey.keyPatternHint.trim()) payload.api_key.key_pattern_hint = state.apiKey.keyPatternHint.trim();
+  }
+
+  if (state.authType === "browser") {
+    payload.browser = {
+      entry_url: state.browser.entryUrl.trim(),
+      domains: cleanList(state.browser.domains),
+      auth_cookies: cleanList(state.browser.authCookies),
+      ttl_hours: Number.parseInt(state.browser.ttlHours, 10) || 24,
+      extra_headers: cleanRecord(state.browser.extraHeaders),
+      extract: state.browser.extract
+        .map((row) => ({
+          cookie: row.cookie.trim(),
+          header: row.header.trim(),
+          prefix: row.prefix.trim(),
+        }))
+        .filter((row) => row.cookie && row.header),
+    };
+    if (state.browser.validateUrl.trim()) payload.browser.validate_url = state.browser.validateUrl.trim();
+    if (state.browser.ttlFromCookie.trim()) payload.browser.ttl_from_cookie = state.browser.ttlFromCookie.trim();
+  }
+
+  return payload;
+}
+
+function Field({
+  children,
+  className,
+  error,
+  help,
+  label,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  error?: string;
+  help?: string;
+  label: string;
+}) {
+  return (
+    <label className={cn("grid gap-2 text-sm", className)}>
+      <span className="flex items-center gap-1.5 text-muted-foreground">
+        {label}
+        {help ? <HelpTip text={help} /> : null}
+      </span>
+      {children}
+      {error ? <span className="text-xs text-destructive">{error}</span> : null}
+    </label>
+  );
+}
+
+function HelpTip({ text }: { text: string }) {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        aria-label="Field help"
+        className="inline-flex size-4 items-center justify-center rounded-full text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        type="button"
+      >
+        <CircleHelp className="size-3.5" />
+      </TooltipTrigger>
+      <TooltipContent align="start" className="max-w-72 whitespace-normal leading-relaxed" side="top">
+        {text}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+function AdvancedSection({
+  children,
+  defaultOpen = false,
+  title,
+}: {
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  title: string;
+}) {
+  return (
+    <details className="group rounded-lg border border-border/50 bg-muted/20" open={defaultOpen}>
+      <summary className="flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-3 text-sm font-medium">
+        <span>{title}</span>
+        <ChevronDown className="size-4 transition-transform group-open:rotate-180" />
+      </summary>
+      <div className="grid gap-4 border-t border-border/50 p-4 md:grid-cols-2">{children}</div>
+    </details>
+  );
+}
+
+function TextArea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      className={cn(
+        "min-h-20 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ListEditor({
+  error,
+  help,
+  label,
+  onChange,
+  placeholder,
+  values,
+}: {
+  error?: string;
+  help?: string;
+  label: string;
+  onChange: (values: string[]) => void;
+  placeholder?: string;
+  values: string[];
+}) {
+  return (
+    <div className="grid gap-2">
+      <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+        {label}
+        {help ? <HelpTip text={help} /> : null}
+      </div>
+      <div className="grid gap-2">
+        {values.map((value, index) => (
+          <div className="flex gap-2" key={index}>
+            <Input
+              aria-invalid={Boolean(error)}
+              onChange={(event) => onChange(values.map((item, i) => (i === index ? event.target.value : item)))}
+              placeholder={placeholder}
+              value={value}
+            />
+            <Button
+              aria-label={`Remove ${label}`}
+              onClick={() => onChange(values.filter((_, i) => i !== index))}
+              size="icon"
+              type="button"
+              variant="outline"
+            >
+              <Trash2 />
+            </Button>
+          </div>
+        ))}
+      </div>
+      <Button onClick={() => onChange([...values, ""])} size="sm" type="button" variant="outline">
+        <Plus />
+        Add
+      </Button>
+      {error ? <span className="text-xs text-destructive">{error}</span> : null}
+    </div>
+  );
+}
+
+function KeyValueEditor({
+  help,
+  keyPlaceholder = "Key",
+  label,
+  onChange,
+  rows,
+  valuePlaceholder = "Value",
+}: {
+  help?: string;
+  keyPlaceholder?: string;
+  label: string;
+  onChange: (rows: KeyValueRow[]) => void;
+  rows: KeyValueRow[];
+  valuePlaceholder?: string;
+}) {
+  return (
+    <div className="grid gap-2">
+      <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+        {label}
+        {help ? <HelpTip text={help} /> : null}
+      </div>
+      <div className="grid gap-2">
+        {rows.map((row) => (
+          <div className="grid gap-2 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_2rem]" key={row.id}>
+            <Input
+              onChange={(event) =>
+                onChange(rows.map((item) => (item.id === row.id ? { ...item, key: event.target.value } : item)))
+              }
+              placeholder={keyPlaceholder}
+              value={row.key}
+            />
+            <Input
+              onChange={(event) =>
+                onChange(rows.map((item) => (item.id === row.id ? { ...item, value: event.target.value } : item)))
+              }
+              placeholder={valuePlaceholder}
+              value={row.value}
+            />
+            <Button
+              aria-label={`Remove ${label}`}
+              onClick={() => onChange(rows.filter((item) => item.id !== row.id))}
+              size="icon"
+              type="button"
+              variant="outline"
+            >
+              <Trash2 />
+            </Button>
+          </div>
+        ))}
+      </div>
+      <Button onClick={() => onChange([...rows, { id: rowId(), key: "", value: "" }])} size="sm" type="button" variant="outline">
+        <Plus />
+        Add
+      </Button>
+    </div>
+  );
+}
+
+function ExtractEditor({
+  help,
+  onChange,
+  rows,
+}: {
+  help?: string;
+  onChange: (rows: ExtractRow[]) => void;
+  rows: ExtractRow[];
+}) {
+  return (
+    <div className="grid gap-2">
+      <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+        Cookie extraction
+        {help ? <HelpTip text={help} /> : null}
+      </div>
+      <div className="grid gap-2">
+        {rows.map((row) => (
+          <div className="grid gap-2 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,0.75fr)_2rem]" key={row.id}>
+            <Input
+              onChange={(event) =>
+                onChange(rows.map((item) => (item.id === row.id ? { ...item, cookie: event.target.value } : item)))
+              }
+              placeholder="Cookie"
+              value={row.cookie}
+            />
+            <Input
+              onChange={(event) =>
+                onChange(rows.map((item) => (item.id === row.id ? { ...item, header: event.target.value } : item)))
+              }
+              placeholder="Header"
+              value={row.header}
+            />
+            <Input
+              onChange={(event) =>
+                onChange(rows.map((item) => (item.id === row.id ? { ...item, prefix: event.target.value } : item)))
+              }
+              placeholder="Prefix"
+              value={row.prefix}
+            />
+            <Button
+              aria-label="Remove cookie extraction"
+              onClick={() => onChange(rows.filter((item) => item.id !== row.id))}
+              size="icon"
+              type="button"
+              variant="outline"
+            >
+              <Trash2 />
+            </Button>
+          </div>
+        ))}
+      </div>
+      <Button
+        onClick={() => onChange([...rows, { id: rowId(), cookie: "", header: "", prefix: "" }])}
+        size="sm"
+        type="button"
+        variant="outline"
+      >
+        <Plus />
+        Add
+      </Button>
+    </div>
+  );
+}
+
+function BooleanField({ checked, label, onChange }: { checked: boolean; label: string; onChange: (checked: boolean) => void }) {
+  return (
+    <label className="flex items-center gap-2 text-sm text-muted-foreground">
+      <input checked={checked} onChange={(event) => onChange(event.target.checked)} type="checkbox" />
+      {label}
+    </label>
+  );
+}
+
+export function CustomProviderDialog({
+  mode,
+  onOpenChange,
+  onSaved,
+  open,
+  provider,
+}: {
+  mode: "create" | "edit";
+  onOpenChange: (open: boolean) => void;
+  onSaved: () => void;
+  open: boolean;
+  provider?: ProviderResponse | null;
+}) {
+  const [state, setState] = useState(() => initialState(provider));
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState("");
+  const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
+  const title = mode === "edit" ? "Edit custom provider" : "New custom provider";
+
+  const flowOptions = FLOW_OPTIONS[state.authType];
+  const payloadPreview = useMemo(() => buildPayload(state), [state]);
+
+  function setAuthType(authType: AuthType) {
+    setState((current) => ({ ...current, authType, flow: FLOW_OPTIONS[authType][0].value }));
+  }
+
+  async function save(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setFieldErrors({});
+    const validationError = validateState(state);
+    if (validationError) {
+      setFieldErrors({ [validationError.field]: validationError.message });
+      setMessage(validationError.message);
+      return;
+    }
+    setSaving(true);
+    setMessage("");
+    try {
+      if (mode === "edit") {
+        await updateCustomProvider(provider?.name || state.name, payloadPreview);
+      } else {
+        await createCustomProvider(payloadPreview);
+      }
+      onSaved();
+      onOpenChange(false);
+    } catch (error) {
+      const errorMessage = error instanceof ApiError || error instanceof Error ? error.message : "Provider could not be saved.";
+      const field = fieldFromServerMessage(errorMessage);
+      if (field) {
+        setFieldErrors({ [field]: errorMessage });
+      }
+      setMessage(errorMessage);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <Dialog onOpenChange={onOpenChange} open={open}>
+      <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-4xl">
+        <TooltipProvider>
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+            <DialogDescription>Start with the required setup, then open advanced sections only when the provider needs them.</DialogDescription>
+          </DialogHeader>
+          <form className="grid gap-5" onSubmit={(event) => void save(event)}>
+            <Card className="border-border/50 shadow-none">
+              <CardHeader>
+                <CardTitle>Basics</CardTitle>
+              </CardHeader>
+              <CardContent className="grid gap-4 md:grid-cols-2">
+                <Field
+                  error={fieldErrors.name}
+                  help="Stable provider id used in URLs and storage keys. Use letters, numbers, hyphens, underscores, or dots. Example: github-enterprise."
+                  label="Provider name"
+                >
+                  <Input
+                    aria-invalid={Boolean(fieldErrors.name)}
+                    disabled={mode === "edit"}
+                    onChange={(event) => setState((current) => ({ ...current, name: event.target.value }))}
+                    placeholder="custom-api"
+                    required
+                    value={state.name}
+                  />
+                </Field>
+                <Field
+                  error={fieldErrors.displayName}
+                  help="Human-friendly name shown in the dashboard. Example: GitHub Enterprise."
+                  label="Display name"
+                >
+                  <Input
+                    aria-invalid={Boolean(fieldErrors.displayName)}
+                    onChange={(event) => setState((current) => ({ ...current, displayName: event.target.value }))}
+                    placeholder="Custom API"
+                    required
+                    value={state.displayName}
+                  />
+                </Field>
+                <Field help="Provider category for filtering and display. Apps are normal SaaS providers; LLM is model/API platforms; MCP is Model Context Protocol servers." label="Type">
+                  <Select
+                    onChange={(event) => setState((current) => ({ ...current, providerType: event.target.value as ProviderType }))}
+                    value={state.providerType}
+                  >
+                    {PROVIDER_TYPES.map((option) => (
+                      <option key={option.value} value={option.value}>{option.label}</option>
+                    ))}
+                  </Select>
+                </Field>
+                <Field help="Authentication mechanism this provider uses. This choice controls which setup fields are shown below." label="Auth type">
+                  <Select onChange={(event) => setAuthType(event.target.value as AuthType)} value={state.authType}>
+                    {AUTH_TYPES.map((option) => (
+                      <option key={option.value} value={option.value}>{option.label}</option>
+                    ))}
+                  </Select>
+                </Field>
+                <Field help="Specific login flow. OAuth providers commonly use PKCE; headless providers may use device code; MCP OAuth servers may use DCR + PKCE." label="Flow">
+                  <Select
+                    onChange={(event) => setState((current) => ({ ...current, flow: event.target.value as FlowType }))}
+                    value={state.flow}
+                  >
+                    {flowOptions.map((option) => (
+                      <option key={option.value} value={option.value}>{option.label}</option>
+                    ))}
+                  </Select>
+                </Field>
+                <div className="md:col-span-2">
+                  <ListEditor
+                    error={fieldErrors.apiTargets}
+                    help="Hosts, URLs, or regex patterns Authsome can route credentials to. Examples: api.github.com, https://api.example.com/v1, regex:.*githubusercontent\\.com$."
+                    label="API targets"
+                    onChange={(apiTargets) => setState((current) => ({ ...current, apiTargets }))}
+                    placeholder="api.example.com"
+                    values={state.apiTargets}
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <AdvancedSection title="Display and docs">
+                    <Field help="Optional logo source shown on provider cards. Example: img.logo.dev/name/github." label="Logo">
+                      <Input
+                        onChange={(event) => setState((current) => ({ ...current, logo: event.target.value }))}
+                        placeholder="img.logo.dev/name/example"
+                        value={state.logo}
+                      />
+                    </Field>
+                    <Field error={fieldErrors.docsUrl} help="Optional documentation URL shown with the provider. Must be a full http(s) URL." label="Docs URL">
+                      <Input
+                        aria-invalid={Boolean(fieldErrors.docsUrl)}
+                        onChange={(event) => setState((current) => ({ ...current, docsUrl: event.target.value }))}
+                        placeholder="https://docs.example.com/oauth"
+                        value={state.docsUrl}
+                      />
+                    </Field>
+                    <Field className="md:col-span-2" help="Short description shown on provider cards and detail views." label="Description">
+                      <TextArea
+                        onChange={(event) => setState((current) => ({ ...current, description: event.target.value }))}
+                        value={state.description}
+                      />
+                    </Field>
+                  </AdvancedSection>
+                </div>
+              </CardContent>
+            </Card>
+
+            {state.authType === "oauth2" ? (
+              <OAuthSection fieldErrors={fieldErrors} state={state} setState={setState} />
+            ) : null}
+            {state.authType === "api_key" ? (
+              <ApiKeySection state={state} setState={setState} />
+            ) : null}
+            {state.authType === "browser" ? (
+              <BrowserSection fieldErrors={fieldErrors} state={state} setState={setState} />
+            ) : null}
+
+            <AdvancedSection title="Export mapping">
+              <div className="md:col-span-2">
+                <KeyValueEditor
+                  help="Optional environment variable mapping used when credentials are exported. Example: GITHUB_ACCESS_TOKEN -> ACCESS_TOKEN."
+                  keyPlaceholder="Environment variable"
+                  label="Export mapping"
+                  onChange={(exportRows) => setState((current) => ({ ...current, exportRows }))}
+                  rows={state.exportRows}
+                  valuePlaceholder="Credential field"
+                />
+              </div>
+            </AdvancedSection>
+
+            {message ? <div className="text-sm text-destructive">{message}</div> : null}
+            <DialogFooter>
+              <Button onClick={() => onOpenChange(false)} type="button" variant="outline">
+                Cancel
+              </Button>
+              <Button disabled={saving} type="submit">
+                <Save />
+                {saving ? "Saving" : "Save"}
+              </Button>
+            </DialogFooter>
+          </form>
+        </TooltipProvider>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function OAuthSection({
+  fieldErrors,
+  setState,
+  state,
+}: {
+  fieldErrors: FieldErrors;
+  setState: React.Dispatch<React.SetStateAction<ProviderFormState>>;
+  state: ProviderFormState;
+}) {
+  return (
+    <Card className="border-border/50 shadow-none">
+      <CardHeader>
+        <CardTitle>OAuth required setup</CardTitle>
+      </CardHeader>
+      <CardContent className="grid gap-4 md:grid-cols-2">
+        <Field
+          error={fieldErrors.oauthBaseUrl}
+          help="Optional base used by URL templates. Example: https://github.com lets you use {base_url}/login/oauth/authorize."
+          label="Base URL"
+        >
+          <Input
+            aria-invalid={Boolean(fieldErrors.oauthBaseUrl)}
+            onChange={(event) => setState((current) => ({ ...current, oauth: { ...current.oauth, baseUrl: event.target.value } }))}
+            placeholder="https://github.com"
+            value={state.oauth.baseUrl}
+          />
+        </Field>
+        <Field help="How client credentials are sent to the token endpoint. Most providers use Body; some providers, such as Reddit or Notion, require Basic." label="Authorization method">
+          <Select
+            onChange={(event) =>
+              setState((current) => ({
+                ...current,
+                oauth: { ...current.oauth, authorizationMethod: event.target.value as "body" | "basic" },
+              }))
+            }
+            value={state.oauth.authorizationMethod}
+          >
+            <option value="body">Body</option>
+            <option value="basic">Basic</option>
+          </Select>
+        </Field>
+        <Field
+          error={fieldErrors.oauthAuthorizationUrl}
+          help="OAuth authorize endpoint. Use a full URL or a {base_url} template. Example: {base_url}/login/oauth/authorize."
+          label="Authorization URL"
+        >
+          <Input
+            aria-invalid={Boolean(fieldErrors.oauthAuthorizationUrl)}
+            onChange={(event) => setState((current) => ({ ...current, oauth: { ...current.oauth, authorizationUrl: event.target.value } }))}
+            placeholder="{base_url}/oauth/authorize"
+            required
+            value={state.oauth.authorizationUrl}
+          />
+        </Field>
+        <Field
+          error={fieldErrors.oauthTokenUrl}
+          help="OAuth token endpoint used to exchange authorization codes or device codes. Example: {base_url}/login/oauth/access_token."
+          label="Token URL"
+        >
+          <Input
+            aria-invalid={Boolean(fieldErrors.oauthTokenUrl)}
+            onChange={(event) => setState((current) => ({ ...current, oauth: { ...current.oauth, tokenUrl: event.target.value } }))}
+            placeholder="{base_url}/oauth/token"
+            required
+            value={state.oauth.tokenUrl}
+          />
+        </Field>
+        <div className="md:col-span-2">
+          <ListEditor
+            help="OAuth scopes requested during login. Example: repo, read:user."
+            label="Scopes"
+            onChange={(scopes) => setState((current) => ({ ...current, oauth: { ...current.oauth, scopes } }))}
+            placeholder="repo"
+            values={state.oauth.scopes}
+          />
+        </div>
+        <div className="md:col-span-2">
+          <AdvancedSection title="OAuth advanced">
+            <Field
+              error={fieldErrors.oauthRevocationUrl}
+              help="Optional endpoint used to revoke tokens. Example: https://api.example.com/oauth/revoke."
+              label="Revocation URL"
+            >
+              <Input
+                aria-invalid={Boolean(fieldErrors.oauthRevocationUrl)}
+                onChange={(event) => setState((current) => ({ ...current, oauth: { ...current.oauth, revocationUrl: event.target.value } }))}
+                value={state.oauth.revocationUrl}
+              />
+            </Field>
+            <Field
+              error={fieldErrors.oauthDeviceAuthorizationUrl}
+              help="Required for device-code flow. This endpoint returns the user code and verification URL."
+              label="Device authorization URL"
+            >
+              <Input
+                aria-invalid={Boolean(fieldErrors.oauthDeviceAuthorizationUrl)}
+                onChange={(event) =>
+                  setState((current) => ({ ...current, oauth: { ...current.oauth, deviceAuthorizationUrl: event.target.value } }))
+                }
+                value={state.oauth.deviceAuthorizationUrl}
+              />
+            </Field>
+            <Field help="How Authsome polls the token endpoint during device-code login. Most providers use OAuth2 form; Postiz-style providers use JSON." label="Device token request">
+              <Select
+                onChange={(event) =>
+                  setState((current) => ({
+                    ...current,
+                    oauth: { ...current.oauth, deviceTokenRequest: event.target.value as "oauth2_form" | "json" },
+                  }))
+                }
+                value={state.oauth.deviceTokenRequest}
+              >
+                <option value="oauth2_form">OAuth2 form</option>
+                <option value="json">JSON</option>
+              </Select>
+            </Field>
+            <Field
+              error={fieldErrors.registrationEndpoint}
+              help="Dynamic Client Registration endpoint for DCR + PKCE providers. Example: https://mcp.example.com/register."
+              label="DCR registration endpoint"
+            >
+              <Input
+                aria-invalid={Boolean(fieldErrors.registrationEndpoint)}
+                onChange={(event) => setState((current) => ({ ...current, registrationEndpoint: event.target.value }))}
+                value={state.registrationEndpoint}
+              />
+            </Field>
+            <div className="grid gap-2 md:col-span-2">
+              <div className="flex flex-wrap gap-4">
+                <BooleanField
+                  checked={state.oauth.pkce}
+                  label="PKCE"
+                  onChange={(pkce) => setState((current) => ({ ...current, oauth: { ...current.oauth, pkce } }))}
+                />
+                <BooleanField
+                  checked={state.oauth.supportsDeviceCode}
+                  label="Supports device code"
+                  onChange={(supportsDeviceCode) =>
+                    setState((current) => ({ ...current, oauth: { ...current.oauth, supportsDeviceCode } }))
+                  }
+                />
+                <BooleanField
+                  checked={state.oauth.supportsDcr}
+                  label="Supports DCR"
+                  onChange={(supportsDcr) => setState((current) => ({ ...current, oauth: { ...current.oauth, supportsDcr } }))}
+                />
+              </div>
+            </div>
+            <div className="md:col-span-2">
+              <KeyValueEditor
+                help="Extra query parameters sent to the authorization endpoint. Example: duration -> permanent."
+                label="Authorization params"
+                onChange={(authorizationParams) =>
+                  setState((current) => ({ ...current, oauth: { ...current.oauth, authorizationParams } }))
+                }
+                rows={state.oauth.authorizationParams}
+              />
+            </div>
+          </AdvancedSection>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function ApiKeySection({
+  setState,
+  state,
+}: {
+  setState: React.Dispatch<React.SetStateAction<ProviderFormState>>;
+  state: ProviderFormState;
+}) {
+  return (
+    <Card className="border-border/50 shadow-none">
+      <CardHeader>
+        <CardTitle>API key required setup</CardTitle>
+      </CardHeader>
+      <CardContent className="grid gap-4 md:grid-cols-2">
+        <Field help="HTTP header that carries the API key. Common values: Authorization, x-api-key, api-key." label="Header name">
+          <Input
+            onChange={(event) => setState((current) => ({ ...current, apiKey: { ...current.apiKey, headerName: event.target.value } }))}
+            value={state.apiKey.headerName}
+          />
+        </Field>
+        <Field help="Text placed before the key. Bearer produces Authorization: Bearer <key>; empty string sends the raw key; None omits the prefix." label="Header prefix">
+          <Select
+            onChange={(event) =>
+              setState((current) => ({
+                ...current,
+                apiKey: { ...current.apiKey, headerPrefixMode: event.target.value as ProviderFormState["apiKey"]["headerPrefixMode"] },
+              }))
+            }
+            value={state.apiKey.headerPrefixMode}
+          >
+            <option value="Bearer">Bearer</option>
+            <option value="Basic">Basic</option>
+            <option value="Token">Token</option>
+            <option value="empty">Empty string</option>
+            <option value="none">None</option>
+            <option value="custom">Custom</option>
+          </Select>
+        </Field>
+        {state.apiKey.headerPrefixMode === "custom" ? (
+          <Field help="Custom text placed before the API key. Example: Klaviyo-API-Key." label="Custom header prefix">
+            <Input
+              onChange={(event) =>
+                setState((current) => ({ ...current, apiKey: { ...current.apiKey, headerPrefixCustom: event.target.value } }))
+              }
+              value={state.apiKey.headerPrefixCustom}
+            />
+          </Field>
+        ) : null}
+        <div className="md:col-span-2">
+          <AdvancedSection title="API key advanced">
+            <Field help="Optional regular expression used to validate keys before saving. Example: ^sk-[A-Za-z0-9_-]{20,}$." label="Key pattern">
+              <Input
+                onChange={(event) => setState((current) => ({ ...current, apiKey: { ...current.apiKey, keyPattern: event.target.value } }))}
+                placeholder="^sk-[A-Za-z0-9_-]{20,}$"
+                value={state.apiKey.keyPattern}
+              />
+            </Field>
+            <Field help="Message shown when a key does not match the pattern. Example: Keys start with sk-." label="Key pattern hint">
+              <Input
+                onChange={(event) =>
+                  setState((current) => ({ ...current, apiKey: { ...current.apiKey, keyPatternHint: event.target.value } }))
+                }
+                value={state.apiKey.keyPatternHint}
+              />
+            </Field>
+          </AdvancedSection>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function BrowserSection({
+  fieldErrors,
+  setState,
+  state,
+}: {
+  fieldErrors: FieldErrors;
+  setState: React.Dispatch<React.SetStateAction<ProviderFormState>>;
+  state: ProviderFormState;
+}) {
+  return (
+    <Card className="border-border/50 shadow-none">
+      <CardHeader>
+        <CardTitle>Browser session required setup</CardTitle>
+      </CardHeader>
+      <CardContent className="grid gap-4 md:grid-cols-2">
+        <Field
+          error={fieldErrors.browserEntryUrl}
+          help="Login page Authsome opens when cookies are missing. Example: https://www.linkedin.com/login."
+          label="Entry URL"
+        >
+          <Input
+            aria-invalid={Boolean(fieldErrors.browserEntryUrl)}
+            onChange={(event) => setState((current) => ({ ...current, browser: { ...current.browser, entryUrl: event.target.value } }))}
+            placeholder="https://example.com/login"
+            required
+            value={state.browser.entryUrl}
+          />
+        </Field>
+        <div className="md:col-span-2">
+          <ListEditor
+            help="Cookie domains Authsome reads from Chrome. Include root and dotted domains when needed. Example: .linkedin.com and linkedin.com."
+            label="Cookie domains"
+            onChange={(domains) => setState((current) => ({ ...current, browser: { ...current.browser, domains } }))}
+            placeholder=".example.com"
+            values={state.browser.domains}
+          />
+        </div>
+        <div className="md:col-span-2">
+          <ListEditor
+            help="Cookies that prove the browser session is authenticated. Example: li_at for LinkedIn or auth_token for X."
+            label="Auth cookies"
+            onChange={(authCookies) => setState((current) => ({ ...current, browser: { ...current.browser, authCookies } }))}
+            placeholder="session"
+            values={state.browser.authCookies}
+          />
+        </div>
+        <div className="md:col-span-2">
+          <AdvancedSection title="Browser advanced">
+            <Field
+              error={fieldErrors.browserValidateUrl}
+              help="Optional URL used to validate that captured cookies still work. Must be a full http(s) URL."
+              label="Validate URL"
+            >
+              <Input
+                aria-invalid={Boolean(fieldErrors.browserValidateUrl)}
+                onChange={(event) => setState((current) => ({ ...current, browser: { ...current.browser, validateUrl: event.target.value } }))}
+                value={state.browser.validateUrl}
+              />
+            </Field>
+            <Field
+              error={fieldErrors.browserTtlHours}
+              help="Fallback lifetime for captured cookies when no cookie expiry is available. Example: 24."
+              label="TTL hours"
+            >
+              <Input
+                aria-invalid={Boolean(fieldErrors.browserTtlHours)}
+                min={1}
+                onChange={(event) => setState((current) => ({ ...current, browser: { ...current.browser, ttlHours: event.target.value } }))}
+                type="number"
+                value={state.browser.ttlHours}
+              />
+            </Field>
+            <Field help="Cookie whose browser expiry should be used instead of TTL hours. Example: li_at." label="TTL from cookie">
+              <Input
+                onChange={(event) =>
+                  setState((current) => ({ ...current, browser: { ...current.browser, ttlFromCookie: event.target.value } }))
+                }
+                value={state.browser.ttlFromCookie}
+              />
+            </Field>
+            <div className="md:col-span-2">
+              <KeyValueEditor
+                help="Headers included when using captured browser credentials. Example: x-twitter-active-user -> yes."
+                label="Extra headers"
+                onChange={(extraHeaders) => setState((current) => ({ ...current, browser: { ...current.browser, extraHeaders } }))}
+                rows={state.browser.extraHeaders}
+              />
+            </div>
+            <div className="md:col-span-2">
+              <ExtractEditor
+                help="Map captured cookies to HTTP headers. Example: JSESSIONID -> csrf-token."
+                onChange={(extract) => setState((current) => ({ ...current, browser: { ...current.browser, extract } }))}
+                rows={state.browser.extract}
+              />
+            </div>
+          </AdvancedSection>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/ui/src/components/dashboard/provider-views.tsx b/ui/src/components/dashboard/provider-views.tsx
index f22cafea..16ec1c41 100644
--- a/ui/src/components/dashboard/provider-views.tsx
+++ b/ui/src/components/dashboard/provider-views.tsx
@@ -1,10 +1,11 @@
 "use client";
 
-import { LogIn } from "lucide-react";
+import { LogIn, Pencil, Plus, Trash2 } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { FormEvent, useMemo, useState } from "react";
 
+import { CustomProviderDialog } from "@/components/dashboard/custom-provider-form";
 import {
   INTERACTIVE_CARD_CLASS,
   ProviderLogo,
@@ -27,7 +28,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
-import { ProviderView } from "@/lib/authsome-api";
+import { ProviderView, deleteCustomProvider } from "@/lib/authsome-api";
 import { cn } from "@/lib/utils";
 
 export function ProviderSummary({ provider }: { provider: ProviderView }) {
@@ -48,9 +49,19 @@ export function ProviderSummary({ provider }: { provider: ProviderView }) {
   );
 }
 
-export function ProvidersView({ providers }: { providers: ProviderView[] }) {
+export function ProvidersView({
+  isAdmin = false,
+  onRefresh,
+  providers,
+}: {
+  isAdmin?: boolean;
+  onRefresh?: () => void;
+  providers: ProviderView[];
+}) {
   const [query, setQuery] = useState("");
   const [dialogProvider, setDialogProvider] = useState<NamedConnectionProvider | null>(null);
+  const [formState, setFormState] = useState<{ mode: "create" | "edit"; provider?: ProviderView } | null>(null);
+  const [deleteProvider, setDeleteProvider] = useState<ProviderView | null>(null);
 
   const filteredProviders = useMemo(() => {
     const normalized = query.trim().toLowerCase();
@@ -70,11 +81,26 @@ export function ProvidersView({ providers }: { providers: ProviderView[] }) {
 
   return (
     <div className="grid gap-5">
-      <SectionHeader description="Configure providers and start browser login flows." title="Providers" />
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <SectionHeader description="Configure providers and start browser login flows." title="Providers" />
+        {isAdmin ? (
+          <Button onClick={() => setFormState({ mode: "create" })} type="button">
+            <Plus />
+            New provider
+          </Button>
+        ) : null}
+      </div>
       <SearchInput onChange={setQuery} placeholder="Search providers..." value={query} />
       <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
         {filteredProviders.map((provider) => (
-          <ProviderCard key={provider.name} onNamedLogin={() => setDialogProvider(provider)} provider={provider} />
+          <ProviderCard
+            isAdmin={isAdmin}
+            key={provider.name}
+            onDelete={() => setDeleteProvider(provider)}
+            onEdit={() => setFormState({ mode: "edit", provider })}
+            onNamedLogin={() => setDialogProvider(provider)}
+            provider={provider}
+          />
         ))}
       </div>
       {!filteredProviders.length ? (
@@ -89,6 +115,23 @@ export function ProvidersView({ providers }: { providers: ProviderView[] }) {
         )
       ) : null}
       <NamedConnectionDialog onOpenChange={setDialogProvider} provider={dialogProvider} />
+      <CustomProviderDialog
+        key={`${formState?.mode || "create"}:${formState?.provider?.name || "new"}`}
+        mode={formState?.mode || "create"}
+        onOpenChange={(open) => {
+          if (!open) setFormState(null);
+        }}
+        onSaved={() => onRefresh?.()}
+        open={Boolean(formState)}
+        provider={formState?.provider?.definition || null}
+      />
+      <DeleteCustomProviderDialog
+        onDeleted={() => onRefresh?.()}
+        onOpenChange={(open) => {
+          if (!open) setDeleteProvider(null);
+        }}
+        provider={deleteProvider}
+      />
     </div>
   );
 }
@@ -97,8 +140,21 @@ function providerSortRank(provider: ProviderView): number {
   return provider.status === "available" ? 1 : 0;
 }
 
-function ProviderCard({ onNamedLogin, provider }: { onNamedLogin: () => void; provider: ProviderView }) {
+function ProviderCard({
+  isAdmin,
+  onDelete,
+  onEdit,
+  onNamedLogin,
+  provider,
+}: {
+  isAdmin: boolean;
+  onDelete: () => void;
+  onEdit: () => void;
+  onNamedLogin: () => void;
+  provider: ProviderView;
+}) {
   const router = useRouter();
+  const canManage = isAdmin && provider.source === "custom";
 
   return (
     <Card
@@ -108,7 +164,39 @@ function ProviderCard({ onNamedLogin, provider }: { onNamedLogin: () => void; pr
       <CardHeader className="pb-3">
         <div className="flex items-start justify-between gap-3">
           <ProviderLogo className="size-10 shrink-0" initial={provider.logoInitial} logo={provider.logo} />
-          <StatusBadge status={provider.status} />
+          <div className="flex items-center gap-1.5">
+            {canManage ? (
+              <>
+                <Button
+                  aria-label={`Edit ${provider.displayName}`}
+                  onClick={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onEdit();
+                  }}
+                  size="icon-sm"
+                  type="button"
+                  variant="outline"
+                >
+                  <Pencil />
+                </Button>
+                <Button
+                  aria-label={`Delete ${provider.displayName}`}
+                  onClick={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onDelete();
+                  }}
+                  size="icon-sm"
+                  type="button"
+                  variant="outline"
+                >
+                  <Trash2 />
+                </Button>
+              </>
+            ) : null}
+            <StatusBadge status={provider.status} />
+          </div>
         </div>
         <div className="mt-1">
           <CardTitle className="text-base leading-tight">{provider.displayName}</CardTitle>
@@ -156,6 +244,58 @@ function ProviderCard({ onNamedLogin, provider }: { onNamedLogin: () => void; pr
   );
 }
 
+function DeleteCustomProviderDialog({
+  onDeleted,
+  onOpenChange,
+  provider,
+}: {
+  onDeleted: () => void;
+  onOpenChange: (open: boolean) => void;
+  provider: ProviderView | null;
+}) {
+  const [working, setWorking] = useState(false);
+  const [message, setMessage] = useState("");
+
+  async function deleteProviderDefinition() {
+    if (!provider) return;
+    setWorking(true);
+    setMessage("");
+    try {
+      await deleteCustomProvider(provider.name);
+      onDeleted();
+      onOpenChange(false);
+    } catch (error) {
+      setMessage(error instanceof Error ? error.message : "Provider could not be deleted.");
+    } finally {
+      setWorking(false);
+    }
+  }
+
+  return (
+    <Dialog onOpenChange={onOpenChange} open={Boolean(provider)}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete custom provider</DialogTitle>
+          <DialogDescription>
+            {provider?.connectionCount
+              ? `${provider.displayName} has ${provider.connectionCount} connection${provider.connectionCount === 1 ? "" : "s"}. Deleting it will revoke those credentials first.`
+              : `${provider?.displayName || "This provider"} will be removed from custom providers.`}
+          </DialogDescription>
+        </DialogHeader>
+        {message ? <div className="text-sm text-destructive">{message}</div> : null}
+        <DialogFooter>
+          <Button onClick={() => onOpenChange(false)} type="button" variant="outline">
+            Cancel
+          </Button>
+          <Button disabled={working} onClick={() => void deleteProviderDefinition()} type="button" variant="destructive">
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
 export type NamedConnectionProvider = Pick<ProviderView, "displayName" | "name">;
 
 export function NamedConnectionDialog({
diff --git a/ui/src/components/ui/select.tsx b/ui/src/components/ui/select.tsx
new file mode 100644
index 00000000..65313a84
--- /dev/null
+++ b/ui/src/components/ui/select.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Select({ className, ...props }: React.ComponentProps<"select">) {
+  return (
+    <select
+      data-slot="select"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-background px-2.5 py-1 text-base transition-colors outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Select }
diff --git a/ui/src/lib/authsome-api.ts b/ui/src/lib/authsome-api.ts
index c01ec252..0ee32a18 100644
--- a/ui/src/lib/authsome-api.ts
+++ b/ui/src/lib/authsome-api.ts
@@ -8,6 +8,7 @@ export type DashboardStats = {
 export type ProviderView = {
   name: string;
   displayName: string;
+  definition: ProviderResponse;
   authType: "oauth2" | "api_key" | string;
   authTypeLabel: string;
   apiUrl: string;
@@ -134,17 +135,73 @@ export type ProviderResponse = {
   display_name?: string;
   logo?: string | null;
   description?: string | null;
+  type?: "app" | "llm" | "mcp" | "browser" | string | null;
   auth_type?: string;
+  flow?: string;
   api_url?: string | string[] | null;
   oauth?: {
+    authorization_url?: string;
+    token_url?: string;
+    revocation_url?: string | null;
+    device_authorization_url?: string | null;
+    device_token_request?: "oauth2_form" | "json";
+    scopes?: string[];
+    authorization_params?: Record<string, string>;
+    pkce?: boolean;
+    supports_device_code?: boolean;
+    supports_dcr?: boolean;
     base_url?: string | null;
+    authorization_method?: "body" | "basic";
   } | null;
+  registration?: {
+    registration_endpoint?: string | null;
+  } | null;
+  api_key?: {
+    header_name?: string;
+    header_prefix?: string | null;
+    key_pattern?: string | null;
+    key_pattern_hint?: string | null;
+  } | null;
+  browser?: {
+    entry_url?: string;
+    domains?: string[];
+    auth_cookies?: string[];
+    validate_url?: string | null;
+    extra_headers?: Record<string, string>;
+    ttl_hours?: number;
+    ttl_from_cookie?: string | null;
+    extract?: Array<{
+      cookie: string;
+      header: string;
+      prefix?: string;
+    }>;
+  } | null;
+  export?: Record<string, string> | { env?: Record<string, string> } | null;
   metadata?: {
     description?: string;
   };
   docs_url?: string | null;
 };
 
+export type ProviderDefinitionPayload = {
+  schema_version?: number;
+  name: string;
+  display_name: string;
+  logo?: string | null;
+  description?: string | null;
+  type?: "app" | "llm" | "mcp" | "browser" | null;
+  auth_type: "oauth2" | "api_key" | "browser";
+  flow: "pkce" | "device_code" | "dcr_pkce" | "api_key" | "browser";
+  oauth?: NonNullable<ProviderResponse["oauth"]> | null;
+  registration?: NonNullable<ProviderResponse["registration"]> | null;
+  api_key?: NonNullable<ProviderResponse["api_key"]> | null;
+  browser?: NonNullable<ProviderResponse["browser"]> | null;
+  export?: ProviderResponse["export"];
+  docs_url?: string | null;
+  api_url?: string | string[] | null;
+  metadata?: Record<string, unknown>;
+};
+
 export type ProviderClientDetail = {
   client_id: string | null;
   client_secret: string | null;
@@ -378,6 +435,7 @@ function providerView(
   return {
     name: provider.name,
     displayName,
+    definition: provider,
     authType: provider.auth_type || "provider",
     authTypeLabel: authTypeLabel(provider.auth_type),
     apiUrl: providerApiUrl(provider),
@@ -626,6 +684,32 @@ export async function updateProviderConfiguration(
   });
 }
 
+export async function createCustomProvider(
+  definition: ProviderDefinitionPayload,
+): Promise<{ status: "ok"; provider: string }> {
+  return sendJson("/api/providers", {
+    method: "POST",
+    body: JSON.stringify({ definition }),
+  });
+}
+
+export async function updateCustomProvider(
+  provider: string,
+  definition: ProviderDefinitionPayload,
+): Promise<{ status: "ok"; provider: string }> {
+  return sendJson(`/api/providers/${encodeURIComponent(provider)}`, {
+    method: "PUT",
+    body: JSON.stringify({ definition }),
+  });
+}
+
+export async function deleteCustomProvider(provider: string): Promise<{ status: "ok"; provider: string }> {
+  return sendJson(`/api/providers/${encodeURIComponent(provider)}`, {
+    method: "DELETE",
+    body: "{}",
+  });
+}
+
 export async function fetchConnectionDetail(
   provider: string,
   connection: string,