diff --git a/app/api/custom-provider/route.ts b/app/api/custom-provider/route.ts
new file mode 100644
index 0000000..ac12fc0
--- /dev/null
+++ b/app/api/custom-provider/route.ts
@@ -0,0 +1,84 @@
+/**
+ * The custom OpenAI-compatible endpoint's connect surface (custom-endpoint
+ * wave). It is ONE provider in the Keys list, connected exactly like the
+ * built-ins are connected by a key — the only extra input is a base URL.
+ *
+ * GET → the resolved non-secret config { baseUrl, models } + whether a key
+ * is present (masked status only; the key is a secret in the auth
+ * store and never enters settings.json).
+ * POST → connect. Body { baseUrl, key? }: validate + normalize the base URL,
+ * PROBE the endpoint's /models (fail fast — a broken URL never
+ * persists), then store the key (empty string clears it, absent
+ * leaves it), persist { baseUrl, models } to the settings record, and
+ * re-register the provider into piModels() with no restart.
+ *
+ * Discovery lives here (not a separate route) because connecting and discovering
+ * are one user action: paste URL + key, get a working provider.
+ */
+import {
+ deleteKey,
+ discoverModels,
+ effectiveSettings,
+ keyValue,
+ readSettingsRecord,
+ saveKey,
+ syncCustomProvider,
+ writeSettingsRecord,
+} from "@/src/server";
+import { CUSTOM_PROVIDER, normalizeBaseUrl } from "@/src/core";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+ const cp = effectiveSettings().customProvider;
+ return Response.json({
+ baseUrl: cp.baseUrl,
+ models: cp.models,
+ keyPresent: keyValue(CUSTOM_PROVIDER.envVar) !== undefined,
+ });
+}
+
+export async function POST(request: Request) {
+ const body = (await request.json().catch(() => null)) as {
+ baseUrl?: unknown;
+ key?: unknown;
+ models?: unknown;
+ } | null;
+ const base = normalizeBaseUrl(typeof body?.baseUrl === "string" ? body.baseUrl : "");
+ if (!base) return Response.json({ error: "Base URL must be a valid http(s) URL" }, { status: 400 });
+
+ // Two intents on one endpoint, told apart by the presence of `models`:
+ // • `models` present → CAPABILITY UPDATE: persist the user's per-model
+ // image toggles (no re-discovery, no key change) and re-register.
+ // • `models` absent → CONNECT: probe /models, store the discovered set.
+ if (Array.isArray(body?.models)) {
+ const record = readSettingsRecord() ?? { version: 1 };
+ const next = writeSettingsRecord({ ...record, customProvider: { baseUrl: base, models: body!.models } });
+ syncCustomProvider(next.customProvider);
+ return Response.json({ ok: true, models: next.customProvider?.models ?? [] });
+ }
+
+ // A provided key is trimmed; an empty string means "clear it", an absent
+ // field means "leave whatever is stored". Only a real key rides the probe.
+ const keyProvided = typeof body?.key === "string";
+ const key = keyProvided ? (body!.key as string).trim() : undefined;
+
+ // Probe first: a URL that doesn't answer with a model list never persists,
+ // so a typo can't leave a half-configured provider behind.
+ const found = await discoverModels(base, key ? key : undefined);
+ if (!found.ok) return Response.json({ error: found.error }, { status: 502 });
+
+ if (keyProvided) {
+ if (key) {
+ const saved = saveKey(CUSTOM_PROVIDER.envVar, key);
+ if (!saved.ok) return Response.json({ error: saved.error }, { status: 400 });
+ } else {
+ deleteKey(CUSTOM_PROVIDER.envVar);
+ }
+ }
+
+ const record = readSettingsRecord() ?? { version: 1 };
+ const next = writeSettingsRecord({ ...record, customProvider: { baseUrl: base, models: found.models } });
+ syncCustomProvider(next.customProvider);
+ return Response.json({ ok: true, models: next.customProvider?.models ?? [] });
+}
diff --git a/app/api/settings/[section]/route.ts b/app/api/settings/[section]/route.ts
index 2c955cf..460b593 100644
--- a/app/api/settings/[section]/route.ts
+++ b/app/api/settings/[section]/route.ts
@@ -128,6 +128,6 @@ export async function PUT(request: Request, ctx: { params: Promise<{ section: st
// Read-modify-write ONE section of the record; everything else rides
// along untouched (other sections, unknown keys — sanitize preserves).
const next = { ...record, [section]: sectionOut };
- writeSettingsRecord(next);
- return Response.json({ settings: next });
+ const saved = writeSettingsRecord(next);
+ return Response.json({ settings: saved });
}
diff --git a/components/settings/keys-section.tsx b/components/settings/keys-section.tsx
index 198e93d..9777756 100644
--- a/components/settings/keys-section.tsx
+++ b/components/settings/keys-section.tsx
@@ -24,7 +24,7 @@
*/
import { useEffect, useRef, useState } from "react";
-import { AUTH_KEYS, type AuthKeyStatus } from "@/src/core";
+import { AUTH_KEYS, CUSTOM_PROVIDER, type AuthKeyStatus, type CustomModel } from "@/src/core";
import { SettingsGroup } from "./controls.tsx";
import { SubscriptionConnections } from "./subscription-connections.tsx";
import { ProviderMenuList } from "./model-menu.tsx";
@@ -83,6 +83,10 @@ export function classifyKeys(
const unknownRows: AuthKeyStatus[] = [];
for (const s of statuses) {
if (isTool(s.id)) continue;
+ // The custom endpoint's key has its OWN home (the Custom endpoint
+ // section), so it never shows here — not as a provider row, not as an
+ // "other stored variable".
+ if (s.id === CUSTOM_PROVIDER.envVar) continue;
if (providerEnv.has(s.id) || (!s.info && providers === undefined)) providerRows.push(s);
else if (!s.info) unknownRows.push(s);
// (pre-interlude catalogs: a curated-but-unclassified status still
@@ -453,6 +457,7 @@ export function KeysSection({
}}
/>
)}
+
{adding && (
{adding.label}
@@ -561,3 +566,180 @@ function AddProviderEditor({
);
}
+
+/** The custom OpenAI-compatible endpoint's row in the provider list — one more
+ * provider, connected by a base URL + (optional) key exactly like the built-ins
+ * are connected by a key (the URL is the one extra field). Its status reads
+ * GET /api/custom-provider; Connect POSTs the connect (validate + discover
+ * models + register) and dispatches the keys signal so the catalog widens with
+ * no restart. Keyless local servers (Ollama / LM Studio) connect with no key. */
+function CustomProviderRow() {
+ const [status, setStatus] = useState<{ baseUrl: string; models: CustomModel[]; keyPresent: boolean } | null>(null);
+ const [expanded, setExpanded] = useState(false);
+ const [baseUrl, setBaseUrl] = useState("");
+ const [key, setKey] = useState("");
+ const [keyTouched, setKeyTouched] = useState(false);
+ const [busy, setBusy] = useState(false);
+ const [error, setError] = useState(null);
+
+ const reload = () =>
+ fetch("/api/custom-provider")
+ .then((r) => r.json())
+ .then((b: { baseUrl?: string; models?: CustomModel[]; keyPresent?: boolean }) =>
+ setStatus({ baseUrl: b.baseUrl ?? "", models: b.models ?? [], keyPresent: Boolean(b.keyPresent) }),
+ )
+ .catch(() => setStatus({ baseUrl: "", models: [], keyPresent: false }));
+ useEffect(() => {
+ void reload();
+ }, []);
+
+ async function save() {
+ if (busy || !baseUrl.trim()) return;
+ setBusy(true);
+ setError(null);
+ const res = await fetch("/api/custom-provider", {
+ method: "POST",
+ headers: { "content-type": "application/json" },
+ body: JSON.stringify({ baseUrl, ...(keyTouched ? { key } : {}) }),
+ }).catch(() => null);
+ setBusy(false);
+ if (!res || !res.ok) {
+ const b = (await res?.json().catch(() => ({}))) as { error?: string } | undefined;
+ setError(res ? (b?.error ?? `Connect failed (${res.status})`) : "Connect failed. Check your connection.");
+ return;
+ }
+ setExpanded(false);
+ setKey("");
+ setKeyTouched(false);
+ await reload();
+ notifySettingsSaved("keys");
+ }
+
+ // Flip one model's image capability and persist it (capability update — no
+ // re-discovery, no key change). Uses the CONNECTED base URL (status.baseUrl),
+ // not the editor's possibly-edited field, so toggles always apply to the
+ // endpoint whose models are listed.
+ async function toggleImage(id: string) {
+ if (!status?.baseUrl || busy) return;
+ const models = status.models.map((m) => (m.id === id ? { ...m, image: !m.image } : m));
+ setBusy(true);
+ setError(null);
+ const res = await fetch("/api/custom-provider", {
+ method: "POST",
+ headers: { "content-type": "application/json" },
+ body: JSON.stringify({ baseUrl: status.baseUrl, models }),
+ }).catch(() => null);
+ setBusy(false);
+ if (!res || !res.ok) {
+ const b = (await res?.json().catch(() => ({}))) as { error?: string } | undefined;
+ setError(res ? (b?.error ?? `Save failed (${res.status})`) : "Save failed. Check your connection.");
+ return;
+ }
+ await reload();
+ notifySettingsSaved("keys");
+ }
+
+ if (expanded) {
+ return (
+
+ );
+}
diff --git a/components/setup-dialog.tsx b/components/setup-dialog.tsx
index 053f3eb..4c1d9ec 100644
--- a/components/setup-dialog.tsx
+++ b/components/setup-dialog.tsx
@@ -40,7 +40,7 @@ import { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { useBackdropDismiss } from "@/components/backdrop-dismiss";
import type React from "react";
-import { type ModelCatalogEntry, type ModelSlotName, type ModelsSettings } from "@/src/core";
+import { type ModelCatalogEntry, type ModelSlotName, type ModelsSettings, CUSTOM_PROVIDER } from "@/src/core";
import { prettyModel } from "@/components/usage-format";
import { ModelMenuList } from "@/components/settings/model-menu";
import { MenuShell } from "@/components/menu-shell";
@@ -65,6 +65,11 @@ const SLOT_META: Record = {
};
const SLOT_ORDER: readonly ModelSlotName[] = ["strong", "cheap", "vision"];
+/** The custom endpoint's synthetic picker entry — one more provider in the
+ * Stage 1 roster, connected by a base URL + optional key (POST
+ * /api/custom-provider). Not part of the /api/keys plain-key roster. */
+const CUSTOM_PICKER: ProviderKeyInfo = { id: CUSTOM_PROVIDER.id, envVar: CUSTOM_PROVIDER.envVar, label: CUSTOM_PROVIDER.label };
+
/** The GET /api/models response fields the flow consumes. */
interface ModelsBody {
models: ModelCatalogEntry[];
@@ -134,6 +139,9 @@ export function SetupKeysBody({
onValue,
onSave,
menuAnchor,
+ isCustom,
+ baseUrl,
+ onBaseUrl,
}: {
/** The full provider roster (GET /api/keys providers) — undefined
* while it loads; the picker renders an honest empty state then. */
@@ -151,6 +159,12 @@ export function SetupKeysBody({
onSave: () => void;
/** The MenuShell anchor — wired by the wrapper (its triggerRef). */
menuAnchor: React.RefObject;
+ /** The chosen provider is the custom endpoint: a base URL field joins the
+ * key field (the key becomes optional — keyless local servers). All three
+ * optional so the plain-key callers (and tests) stay unchanged. */
+ isCustom?: boolean;
+ baseUrl?: string;
+ onBaseUrl?: (v: string) => void;
}) {
return (
@@ -185,30 +199,44 @@ export function SetupKeysBody({
)}