From e3dfa48994ee58c26569c5461120c8ef806f487a Mon Sep 17 00:00:00 2001
From: OpenClaw Assistant <assistant@openclaw>
Date: Sat, 9 May 2026 18:22:16 +0200
Subject: [PATCH] feat(ai): add OpenAI Compatible and Anthropic Compatible
 providers with custom endpoint support

- Add OpenAI Compatible provider (openai-compatible) with custom baseURL + API key
- Add Anthropic Compatible provider (anthropic-compatible) with custom baseURL + API key
- Both support model loading via /models endpoint after API key + URL are set
- Model selector dropdown appears after clicking 'Load Models' button
- Extends AiProviderId type and getActiveProviderId whitelist
- Updates AI_PROVIDERS in TopTabsBar with hasCustomUrl flag
- ProviderSelector now shows all 4 providers with keyId mapping
---
 src/components/TopTabsBar.tsx                | 138 +++++++++++++++++--
 src/components/chat/ProviderSelector.tsx     |   6 +-
 src/lib/ai/index.ts                          |   4 +
 src/lib/ai/providers/anthropic-compatible.ts | 113 +++++++++++++++
 src/lib/ai/providers/openai-compatible.ts    | 115 ++++++++++++++++
 src/lib/ai/settings.ts                       |  66 ++++++++-
 src/lib/ai/types.ts                          |   2 +-
 7 files changed, 432 insertions(+), 12 deletions(-)
 create mode 100644 src/lib/ai/providers/anthropic-compatible.ts
 create mode 100644 src/lib/ai/providers/openai-compatible.ts

diff --git a/src/components/TopTabsBar.tsx b/src/components/TopTabsBar.tsx
index 8f77523..9dc2416 100644
--- a/src/components/TopTabsBar.tsx
+++ b/src/components/TopTabsBar.tsx
@@ -6,11 +6,12 @@ import { useProjectContext } from "../lib/project/ProjectContext";
 import { getActiveProviderId, setActiveProviderId } from "../lib/ai/settings";
 import type { AiProviderId } from "../lib/ai/types";
 
-const AI_PROVIDERS: Array<{ id: string; name: string; providerId?: AiProviderId }> = [
-  { id: "google",    name: "Google Gemini",  providerId: "gemini" },
-  { id: "anthropic", name: "Anthropic Claude", providerId: "anthropic" },
-  { id: "xai",       name: "xAI" },
-  { id: "openai",    name: "OpenAI" },
+const AI_PROVIDERS: Array<{ id: string; name: string; providerId?: AiProviderId; hasCustomUrl?: boolean }> = [
+  { id: "google",               name: "Google Gemini",        providerId: "gemini" },
+  { id: "anthropic",            name: "Anthropic Claude",     providerId: "anthropic" },
+  { id: "xai",                  name: "xAI" },
+  { id: "openai",               name: "OpenAI Compatible",   providerId: "openai",              hasCustomUrl: true },
+  { id: "anthropic-compatible", name: "Anthropic Compatible", providerId: "anthropic-compatible", hasCustomUrl: true },
 ];
 
 const SEARCH_PROVIDERS: Array<{ id: string; name: string; hint: string }> = [
@@ -43,6 +44,8 @@ function ApiKeyModal({ onClose }: { onClose: () => void }) {
   const [visibleId, setVisibleId] = useState<string | null>(null);
   const [expandedId, setExpandedId] = useState<string | null>(null);
   const [activeProvider, setActiveProvider] = useState<AiProviderId>(getActiveProviderId);
+  const [models, setModels] = useState<Record<string, string[]>>({});
+  const [loadingModels, setLoadingModels] = useState<Record<string, boolean>>({});
 
   useEffect(() => {
     function handleClick(e: MouseEvent) {
@@ -58,6 +61,43 @@ function ApiKeyModal({ onClose }: { onClose: () => void }) {
     localStorage.setItem("raincast-api-keys", JSON.stringify(next));
   }
 
+  async function loadModels(providerId: string) {
+    const baseUrl = (keys[`${providerId}-url`] || "").trim();
+    const apiKey = keys[providerId] || "";
+    if (!apiKey || !baseUrl) return;
+
+    setLoadingModels((prev) => ({ ...prev, [providerId]: true }));
+    try {
+      const res = await fetch(`${baseUrl}/models`, {
+        headers: { Authorization: `Bearer ${apiKey}` },
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = await res.json();
+      const modelList: string[] = Array.isArray(data.data)
+        ? data.data.map((m: { id: string }) => m.id)
+        : Array.isArray(data)
+        ? data.map((m: string) => m)
+        : [];
+      setModels((prev) => ({ ...prev, [providerId]: modelList }));
+    } catch (err) {
+      console.warn("[loadModels]", err);
+    } finally {
+      setLoadingModels((prev) => ({ ...prev, [providerId]: false }));
+    }
+  }
+
+  function updateCustomUrl(providerId: string, value: string) {
+    const next = { ...keys, [`${providerId}-url`]: value };
+    setKeys(next);
+    localStorage.setItem("raincast-api-keys", JSON.stringify(next));
+  }
+
+  function updateCustomModel(providerId: string, value: string) {
+    const next = { ...keys, [`${providerId}-model`]: value };
+    setKeys(next);
+    localStorage.setItem("raincast-api-keys", JSON.stringify(next));
+  }
+
   return (
     <div
       ref={ref}
@@ -170,9 +210,7 @@ function ApiKeyModal({ onClose }: { onClose: () => void }) {
               </button>
 
               {isOpen && (
-                <div style={{
-                  padding: "6px 8px 10px 23px",
-                }}>
+                <div style={{ padding: "6px 8px 10px 23px" }}>
                   <label style={{
                     fontSize: 10,
                     fontWeight: 600,
@@ -228,6 +266,90 @@ function ApiKeyModal({ onClose }: { onClose: () => void }) {
                     </button>
                   </div>
 
+                  {p.hasCustomUrl && (
+                    <>
+                      <label style={{
+                        fontSize: 10,
+                        fontWeight: 600,
+                        color: "var(--text-tertiary)",
+                        marginBottom: 4,
+                        marginTop: 8,
+                        display: "block",
+                        letterSpacing: "0.03em",
+                        textTransform: "uppercase",
+                      }}>
+                        Base URL
+                      </label>
+                      <input
+                        type="text"
+                        value={keys[`${p.id}-url`] || ""}
+                        onChange={(e) => updateCustomUrl(p.id, e.target.value)}
+                        placeholder={p.id === "openai" ? "https://api.openai.com/v1" : "https://api.anthropic.com/v1"}
+                        style={{
+                          width: "100%",
+                          padding: "6px 10px",
+                          fontSize: 12,
+                          borderRadius: 8,
+                          border: "1px solid var(--input-border)",
+                          background: "var(--input-bg)",
+                          color: "var(--text-input)",
+                          outline: "none",
+                          boxSizing: "border-box",
+                        }}
+                        onFocus={(e) => { e.currentTarget.style.borderColor = "var(--slider-thumb)"; }}
+                        onBlur={(e) => { e.currentTarget.style.borderColor = "var(--input-border)"; }}
+                      />
+
+                      <button
+                        type="button"
+                        onClick={() => loadModels(p.id)}
+                        disabled={loadingModels[p.id] || !keys[p.id] || !keys[`${p.id}-url`]}
+                        style={{
+                          marginTop: 8,
+                          width: "100%",
+                          padding: "5px 0",
+                          fontSize: 11,
+                          fontWeight: 600,
+                          borderRadius: 6,
+                          border: "1px solid var(--input-border)",
+                          background: "var(--subtle-bg)",
+                          color: "var(--text-primary)",
+                          cursor: "pointer",
+                          opacity: loadingModels[p.id] || !keys[p.id] || !keys[`${p.id}-url`] ? 0.5 : 1,
+                          transition: "background 150ms ease",
+                        }}
+                        onMouseEnter={(e) => { if (!loadingModels[p.id] && keys[p.id] && keys[`${p.id}-url`]) e.currentTarget.style.background = "var(--input-border)"; }}
+                        onMouseLeave={(e) => { e.currentTarget.style.background = "var(--subtle-bg)"; }}
+                      >
+                        {loadingModels[p.id] ? "Loading..." : "Load Models"}
+                      </button>
+
+                      {(models[p.id] || []).length > 0 && (
+                        <select
+                          value={keys[`${p.id}-model`] || ""}
+                          onChange={(e) => updateCustomModel(p.id, e.target.value)}
+                          style={{
+                            marginTop: 6,
+                            width: "100%",
+                            padding: "5px 8px",
+                            fontSize: 12,
+                            borderRadius: 6,
+                            border: "1px solid var(--input-border)",
+                            background: "var(--input-bg)",
+                            color: "var(--text-input)",
+                            outline: "none",
+                            boxSizing: "border-box",
+                          }}
+                        >
+                          <option value="">Select model...</option>
+                          {models[p.id].map((m) => (
+                            <option key={m} value={m}>{m}</option>
+                          ))}
+                        </select>
+                      )}
+                    </>
+                  )}
+
                   {p.providerId && hasKey && !isActive && (
                     <button
                       type="button"
diff --git a/src/components/chat/ProviderSelector.tsx b/src/components/chat/ProviderSelector.tsx
index 12a7847..2933972 100644
--- a/src/components/chat/ProviderSelector.tsx
+++ b/src/components/chat/ProviderSelector.tsx
@@ -3,8 +3,10 @@ import { Popover } from "../common";
 import type { AiProviderId } from "../../lib/ai/types";
 
 const PROVIDERS: Array<{ id: AiProviderId; name: string; keyId: string }> = [
-  { id: "gemini",    name: "Gemini",    keyId: "google" },
-  { id: "anthropic", name: "Anthropic", keyId: "anthropic" },
+  { id: "gemini",              name: "Gemini",               keyId: "google" },
+  { id: "anthropic",          name: "Anthropic",            keyId: "anthropic" },
+  { id: "openai",             name: "OpenAI Compatible",    keyId: "openai-compatible-key" },
+  { id: "anthropic-compatible", name: "Anthropic Compatible", keyId: "anthropic-compatible-key" },
 ];
 
 function hasApiKey(keyId: string): boolean {
diff --git a/src/lib/ai/index.ts b/src/lib/ai/index.ts
index 65a4e61..8bff3f8 100644
--- a/src/lib/ai/index.ts
+++ b/src/lib/ai/index.ts
@@ -5,7 +5,11 @@ export * from "./settings";
 // Register providers on import
 import { geminiProvider } from "./providers/gemini";
 import { anthropicProvider } from "./providers/anthropic";
+import { openaiCompatibleProvider } from "./providers/openai-compatible";
+import { anthropicCompatibleProvider } from "./providers/anthropic-compatible";
 import { registerProvider } from "./registry";
 
 registerProvider(geminiProvider);
 registerProvider(anthropicProvider);
+registerProvider(openaiCompatibleProvider);
+registerProvider(anthropicCompatibleProvider);
diff --git a/src/lib/ai/providers/anthropic-compatible.ts b/src/lib/ai/providers/anthropic-compatible.ts
new file mode 100644
index 0000000..d42e56d
--- /dev/null
+++ b/src/lib/ai/providers/anthropic-compatible.ts
@@ -0,0 +1,113 @@
+import type { ModelAdapter } from "../baseProvider";
+import { createProvider } from "../baseProvider";
+import {
+  getAnthropicCompatibleApiKey,
+  getAnthropicCompatibleBaseUrl,
+  getAnthropicCompatibleModel,
+} from "../settings";
+
+const DEFAULT_BASE_URL = "https://api.anthropic.com/v1";
+const DEFAULT_MODEL_PRO = "claude-sonnet-4-6";
+const DEFAULT_MODEL_FAST = "claude-haiku-4-5-20251001";
+
+function buildClient() {
+  const key = getAnthropicCompatibleApiKey();
+  if (!key) throw new Error("No Anthropic Compatible API key configured. Add it in Settings (key icon in the top bar).");
+  const baseUrl = getAnthropicCompatibleBaseUrl() || DEFAULT_BASE_URL;
+  return { key, baseUrl };
+}
+
+function getModel(tier?: "fast" | "pro"): string {
+  const saved = getAnthropicCompatibleModel();
+  if (saved) return saved;
+  return tier === "fast" ? DEFAULT_MODEL_FAST : DEFAULT_MODEL_PRO;
+}
+
+const adapter: ModelAdapter = {
+  async generate(system, user, opts) {
+    const { key, baseUrl } = buildClient();
+    const model = getModel(opts?.model);
+    const maxTokens = opts?.model === "pro" ? 65536 : 4096;
+
+    const response = await fetch(`${baseUrl}/messages`, {
+      method: "POST",
+      headers: {
+        "x-api-key": key,
+        "anthropic-version": "2023-06-01",
+        "content-type": "application/json",
+      },
+      body: JSON.stringify({
+        model,
+        max_tokens: maxTokens,
+        system,
+        messages: [{ role: "user", content: user }],
+      }),
+    });
+
+    if (!response.ok) {
+      const err = await response.text();
+      throw new Error(`Anthropic Compatible API error ${response.status}: ${err}`);
+    }
+
+    const data = await response.json();
+    return data.content?.[0]?.text ?? "";
+  },
+
+  async generateStream(system, user, onChunk, opts) {
+    const { key, baseUrl } = buildClient();
+    const model = getModel(opts?.model);
+    const maxTokens = opts?.model === "pro" ? 65536 : 4096;
+
+    const response = await fetch(`${baseUrl}/messages`, {
+      method: "POST",
+      headers: {
+        "x-api-key": key,
+        "anthropic-version": "2023-06-01",
+        "content-type": "application/json",
+      },
+      body: JSON.stringify({
+        model,
+        max_tokens: maxTokens,
+        system,
+        messages: [{ role: "user", content: user }],
+        stream: true,
+      }),
+    });
+
+    if (!response.ok) {
+      const err = await response.text();
+      throw new Error(`Anthropic Compatible API error ${response.status}: ${err}`);
+    }
+
+    const reader = response.body?.getReader();
+    if (!reader) throw new Error("No response body");
+
+    const decoder = new TextDecoder();
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      const text = decoder.decode(value, { stream: true });
+      for (const line of text.split("\n")) {
+        if (line.startsWith("data: ")) {
+          const json = line.slice(6).trim();
+          if (json === "[DONE]") return;
+          try {
+            const parsed = JSON.parse(json);
+            if (parsed.type === "content_block_delta") {
+              onChunk(parsed.delta?.text ?? "");
+            }
+          } catch { /* skip malformed lines */ }
+        }
+      }
+    }
+  },
+};
+
+export const anthropicCompatibleProvider = createProvider(
+  "anthropic-compatible",
+  "Anthropic Compatible",
+  false,
+  adapter,
+);
\ No newline at end of file
diff --git a/src/lib/ai/providers/openai-compatible.ts b/src/lib/ai/providers/openai-compatible.ts
new file mode 100644
index 0000000..540dc1e
--- /dev/null
+++ b/src/lib/ai/providers/openai-compatible.ts
@@ -0,0 +1,115 @@
+import type { ModelAdapter } from "../baseProvider";
+import { createProvider } from "../baseProvider";
+import {
+  getOpenAICompatibleApiKey,
+  getOpenAICompatibleBaseUrl,
+  getOpenAICompatibleModel,
+} from "../settings";
+
+const DEFAULT_BASE_URL = "https://api.openai.com/v1";
+const DEFAULT_MODEL_PRO = "gpt-4o";
+const DEFAULT_MODEL_FAST = "gpt-4o-mini";
+
+function buildClient() {
+  const key = getOpenAICompatibleApiKey();
+  if (!key) throw new Error("No OpenAI Compatible API key configured. Add it in Settings (key icon in the top bar).");
+  const baseUrl = getOpenAICompatibleBaseUrl() || DEFAULT_BASE_URL;
+  return { key, baseUrl };
+}
+
+function getModel(tier?: "fast" | "pro"): string {
+  const saved = getOpenAICompatibleModel();
+  if (saved) return saved;
+  return tier === "fast" ? DEFAULT_MODEL_FAST : DEFAULT_MODEL_PRO;
+}
+
+const adapter: ModelAdapter = {
+  async generate(system, user, opts) {
+    const { key, baseUrl } = buildClient();
+    const model = getModel(opts?.model);
+
+    const response = await fetch(`${baseUrl}/chat/completions`, {
+      method: "POST",
+      headers: {
+        "Authorization": `Bearer ${key}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        model,
+        messages: [
+          { role: "system", content: system },
+          { role: "user", content: user },
+        ],
+      }),
+    });
+
+    if (!response.ok) {
+      const err = await response.text();
+      throw new Error(`OpenAI Compatible API error ${response.status}: ${err}`);
+    }
+
+    const data = await response.json();
+    return data.choices?.[0]?.message?.content ?? "";
+  },
+
+  async generateStream(system, user, onChunk, opts) {
+    const { key, baseUrl } = buildClient();
+    const model = getModel(opts?.model);
+
+    const response = await fetch(`${baseUrl}/chat/completions`, {
+      method: "POST",
+      headers: {
+        "Authorization": `Bearer ${key}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        model,
+        messages: [
+          { role: "system", content: system },
+          { role: "user", content: user },
+        ],
+        stream: true,
+      }),
+    });
+
+    if (!response.ok) {
+      const err = await response.text();
+      throw new Error(`OpenAI Compatible API error ${response.status}: ${err}`);
+    }
+
+    const reader = response.body?.getReader();
+    if (!reader) throw new Error("No response body");
+
+    const decoder = new TextDecoder();
+    const wrapper = {
+      onChunk: (text: string) => {},
+      push(chunk: string) { this.onChunk(chunk); },
+    };
+    wrapper.onChunk = onChunk;
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      const text = decoder.decode(value, { stream: true });
+      for (const line of text.split("\n")) {
+        if (line.startsWith("data: ")) {
+          const json = line.slice(6).trim();
+          if (json === "[DONE]") return;
+          try {
+            const parsed = JSON.parse(json);
+            const content = parsed.choices?.[0]?.delta?.content;
+            if (content) wrapper.push(content);
+          } catch { /* skip malformed lines */ }
+        }
+      }
+    }
+  },
+};
+
+export const openaiCompatibleProvider = createProvider(
+  "openai",
+  "OpenAI Compatible",
+  false,
+  adapter,
+);
\ No newline at end of file
diff --git a/src/lib/ai/settings.ts b/src/lib/ai/settings.ts
index 0f63acf..efcb133 100644
--- a/src/lib/ai/settings.ts
+++ b/src/lib/ai/settings.ts
@@ -49,10 +49,74 @@ export function setBraveApiKey(key: string): void {
   setKeys(keys);
 }
 
+// ── OpenAI Compatible ──────────────────────────────────────────────────────────
+
+export function getOpenAICompatibleApiKey(): string | null {
+  return getKeys()["openai-compatible-key"] || null;
+}
+
+export function setOpenAICompatibleApiKey(key: string): void {
+  const keys = getKeys();
+  keys["openai-compatible-key"] = key;
+  setKeys(keys);
+}
+
+export function getOpenAICompatibleBaseUrl(): string | null {
+  return getKeys()["openai-compatible-url"] || null;
+}
+
+export function setOpenAICompatibleBaseUrl(url: string): void {
+  const keys = getKeys();
+  keys["openai-compatible-url"] = url;
+  setKeys(keys);
+}
+
+export function getOpenAICompatibleModel(): string | null {
+  return getKeys()["openai-compatible-model"] || null;
+}
+
+export function setOpenAICompatibleModel(model: string): void {
+  const keys = getKeys();
+  keys["openai-compatible-model"] = model;
+  setKeys(keys);
+}
+
+// ── Anthropic Compatible ───────────────────────────────────────────────────────
+
+export function getAnthropicCompatibleApiKey(): string | null {
+  return getKeys()["anthropic-compatible-key"] || null;
+}
+
+export function setAnthropicCompatibleApiKey(key: string): void {
+  const keys = getKeys();
+  keys["anthropic-compatible-key"] = key;
+  setKeys(keys);
+}
+
+export function getAnthropicCompatibleBaseUrl(): string | null {
+  return getKeys()["anthropic-compatible-url"] || null;
+}
+
+export function setAnthropicCompatibleBaseUrl(url: string): void {
+  const keys = getKeys();
+  keys["anthropic-compatible-url"] = url;
+  setKeys(keys);
+}
+
+export function getAnthropicCompatibleModel(): string | null {
+  return getKeys()["anthropic-compatible-model"] || null;
+}
+
+export function setAnthropicCompatibleModel(model: string): void {
+  const keys = getKeys();
+  keys["anthropic-compatible-model"] = model;
+  setKeys(keys);
+}
+
 export function getActiveProviderId(): AiProviderId {
   try {
     const stored = localStorage.getItem(PROVIDER_KEY);
-    if (stored === "gemini" || stored === "anthropic") return stored;
+    if (stored === "gemini" || stored === "anthropic" || stored === "openai" || stored === "anthropic-compatible") return stored;
   } catch { /* localStorage unavailable */ }
   return "gemini"; // default
 }
diff --git a/src/lib/ai/types.ts b/src/lib/ai/types.ts
index 5f5c483..dadc43d 100644
--- a/src/lib/ai/types.ts
+++ b/src/lib/ai/types.ts
@@ -1,7 +1,7 @@
 import type { ChatMessage } from "../chat/types";
 import type { LayoutArchetype } from "../generation/templates";
 
-export type AiProviderId = "gemini" | "anthropic";
+export type AiProviderId = "gemini" | "anthropic" | "openai" | "anthropic-compatible";
 
 export type QueryIntent = "chat" | "build_app" | "edit_app" | "generate_logo" | "unsupported";