MythEclipse/9router
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(xai): add xAI Grok provider with OAuth + API key auth + image

Browse Source 
Adapted from PR #1286 (mugnimaestra/feat/xai-grok-provider) to match
existing app architecture. Includes:

- OAuth 2.0 with PKCE on loopback port 56121 (Grok Build)
- API key auth path (console.x.ai)
- Token refresh wiring (open-sse + sse tokenRefresh)
- Dashboard OAuth modal with fixed-port flow + manual code fallback
- Provider registry entries (OAuth + API key)
- xAI image generation via OpenAI-compatible adapter
  (grok-2-image-1212 model, no size/quality/style params)

Excludes (intentionally, to match app patterns):
- Custom xAI Responses executor (DefaultExecutor handles /chat/completions)
- xAI-specific translators (app uses OpenAI as intermediate format)
- Image edits (not supported by current imageGenerationCore)
- Video endpoints (app has no video subsystem yet)
- CLI xai-login command

Refs decolua#1286

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Muhammad Mugni Hadi
2026-05-21 11:33:18 +07:00
committed by decolua
co-authored by Cursor
parent 0654d7bb35
commit d976f4cc87
21 changed files with 1058 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(dashboard)/dashboard/providers/[id]/AddApiKeyModal.js
+7 -1
View File
@@ -11,10 +11,11 @@ export default function AddApiKeyModal({ isOpen, provider, providerName, isCompa
const NONE_PROXY_POOL_VALUE = "__none__";
const isOllamaLocal = provider === "ollama-local";
const isCookie = authType === "cookie";
const isXaiApiKey = provider === "xai" && !isCookie;
const credentialLabel = isCookie ? "Cookie Value" : "API Key";
const credentialPlaceholder = isCookie
? (provider === "grok-web" ? "sso=xxxxx... or just the raw value" : "eyJhbGciOi...")
: "";
: (isXaiApiKey ? "xai-..." : "");
const isAzure = provider === "azure";
const isCloudflareAi = provider === "cloudflare-ai";
@@ -228,6 +229,11 @@ export default function AddApiKeyModal({ isOpen, provider, providerName, isCompa
</div>
</div>
)}
{isXaiApiKey && (
<p className="text-xs text-text-muted">
Use a direct xAI API key from console.x.ai. This is separate from Grok Build OAuth.
</p>
)}
{isCookie && authHint && (
<p className="text-xs text-text-muted">
{authHint}
src/app/(dashboard)/dashboard/providers/[id]/ConnectionRow.js
+11 -4
View File
@@ -65,10 +65,15 @@ export default function ConnectionRow({ connection, proxyPools, isOAuth, isFirst
}
};
const rowAuthType = connection.authType || (isOAuth ? "oauth" : "apikey");
const isOAuthConnection = rowAuthType === "oauth";
const isCookieConnection = rowAuthType === "cookie";
const authIcon = isCookieConnection ? "cookie" : isOAuthConnection ? "lock" : "key";
const authLabel = isOAuthConnection ? "OAuth" : isCookieConnection ? "Cookie" : "API Key";
const isEmail = (v) => typeof v === "string" && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
const displayName = isOAuth
const displayName = isOAuthConnection
? (isEmail(connection.email) ? connection.email : (isEmail(connection.name) ? connection.name : (connection.name || connection.email || connection.displayName || "OAuth Account")))
: connection.name;
: (connection.name || connection.email || connection.displayName || "API Key");
// Use useState + useEffect for impure Date.now() to avoid calling during render
const [isCooldown, setIsCooldown] = useState(false);
@@ -130,7 +135,7 @@ export default function ConnectionRow({ connection, proxyPools, isOAuth, isFirst
</button>
</div>
<span className="material-symbols-outlined shrink-0 text-base text-text-muted">
{isOAuth ? "lock" : "key"}
{authIcon}
</span>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium truncate">{displayName}</p>
@@ -138,6 +143,9 @@ export default function ConnectionRow({ connection, proxyPools, isOAuth, isFirst
<Badge variant={getStatusVariant()} size="sm" dot>
{connection.isActive === false ? "disabled" : (effectiveStatus || "Unknown")}
</Badge>
<Badge variant="default" size="sm">
{authLabel}
</Badge>
{hasAnyProxy && (
<Badge variant={proxyBadgeVariant} size="sm">
Proxy
@@ -259,4 +267,3 @@ ConnectionRow.propTypes = {
onEdit: PropTypes.func.isRequired,
onDelete: PropTypes.func.isRequired,
};
src/app/(dashboard)/dashboard/providers/[id]/page.js
+89 -26
View File
@@ -54,7 +54,11 @@ export default function ProviderDetailPage() {
const AG_RISK_STORAGE_KEY = "ag_risk_confirmed";
const triggerAddConnection = () => {
const openOAuthConnection = () => {
setShowOAuthModal(true);
};
const triggerOAuthConnection = () => {
if (providerId === "antigravity" && typeof window !== "undefined") {
const confirmed = window.localStorage.getItem(AG_RISK_STORAGE_KEY) === "true";
if (!confirmed) {
@@ -63,24 +67,36 @@ export default function ProviderDetailPage() {
}
}
if (isOAuth) {
setShowOAuthModal(true);
openOAuthConnection();
return;
}
setAddConnectionError("");
setShowAddApiKeyModal(true);
};
const triggerApiKeyConnection = () => {
setAddConnectionError("");
setShowAddApiKeyModal(true);
};
const triggerAddConnection = () => {
if (isOAuth) {
triggerOAuthConnection();
return;
}
triggerApiKeyConnection();
};
const handleAgRiskConfirm = () => {
if (typeof window !== "undefined") {
window.localStorage.setItem(AG_RISK_STORAGE_KEY, "true");
}
setShowAgRiskModal(false);
if (isOAuth) {
setShowOAuthModal(true);
openOAuthConnection();
return;
}
setAddConnectionError("");
setShowAddApiKeyModal(true);
triggerApiKeyConnection();
};
const providerInfo = providerNode
@@ -94,7 +110,9 @@ export default function ProviderDetailPage() {
type: providerNode.type,
}
: (OAUTH_PROVIDERS[providerId] || APIKEY_PROVIDERS[providerId] || FREE_PROVIDERS[providerId] || FREE_TIER_PROVIDERS[providerId] || WEB_COOKIE_PROVIDERS[providerId]);
const isOAuth = !!OAUTH_PROVIDERS[providerId] || !!FREE_PROVIDERS[providerId];
const authModes = providerInfo?.authModes || [];
const isOAuth = !!OAUTH_PROVIDERS[providerId] || !!FREE_PROVIDERS[providerId] || authModes.includes("oauth");
const supportsApiKeyAuth = !!APIKEY_PROVIDERS[providerId] || authModes.includes("apikey");
const isFreeNoAuth = !!FREE_PROVIDERS[providerId]?.noAuth;
const models = getModelsByProviderId(providerId);
const providerAlias = getProviderAlias(providerId);
@@ -102,6 +120,9 @@ export default function ProviderDetailPage() {
const isOpenAICompatible = isOpenAICompatibleProvider(providerId);
const isAnthropicCompatible = isAnthropicCompatibleProvider(providerId);
const isCompatible = isOpenAICompatible || isAnthropicCompatible;
const hasDualAuthModes = !isCompatible && isOAuth && supportsApiKeyAuth;
const oauthConnectionLabel = providerId === "xai" ? "Grok Build OAuth" : "OAuth";
const apiKeyConnectionLabel = providerId === "xai" ? "xAI API Key" : "API Key";
const thinkingConfig = AI_PROVIDERS[providerId]?.thinkingConfig || THINKING_CONFIG.extended;
const providerStorageAlias = isCompatible ? providerId : providerAlias;
@@ -1087,21 +1108,41 @@ export default function ProviderDetailPage() {
<div className="inline-flex items-center justify-center w-9 h-9 rounded-full bg-primary/10 text-primary shrink-0">
<span className="material-symbols-outlined text-[18px]">{isOAuth ? "lock" : "key"}</span>
</div>
<p className="text-sm text-text-muted">No connections yet</p>
<div className="min-w-0">
<p className="text-sm text-text-muted">No connections yet</p>
{hasDualAuthModes && (
<p className="text-xs text-text-muted">
Choose {oauthConnectionLabel} or {apiKeyConnectionLabel}.
</p>
)}
</div>
</div>
<div className="flex gap-2">
{!isCompatible && providerId === "iflow" && (
<Button size="sm" icon="cookie" variant="secondary" onClick={() => setShowIFlowCookieModal(true)}>
Cookie
</Button>
{hasDualAuthModes ? (
<>
<Button size="sm" icon="lock" variant="secondary" onClick={triggerOAuthConnection}>
{oauthConnectionLabel}
</Button>
<Button size="sm" icon="key" onClick={triggerApiKeyConnection}>
{apiKeyConnectionLabel}
</Button>
</>
) : (
<>
{!isCompatible && providerId === "iflow" && (
<Button size="sm" icon="cookie" variant="secondary" onClick={() => setShowIFlowCookieModal(true)}>
Cookie
</Button>
)}
<Button
size="sm"
icon="add"
onClick={triggerAddConnection}
>
{isCompatible ? "Add API Key" : (providerId === "iflow" ? "OAuth" : "Add Connection")}
</Button>
</>
)}
<Button
size="sm"
icon="add"
onClick={triggerAddConnection}
>
{isCompatible ? "Add API Key" : (providerId === "iflow" ? "OAuth" : "Add Connection")}
</Button>
</div>
</div>
) : (
@@ -1121,14 +1162,36 @@ export default function ProviderDetailPage() {
Cookie
</Button>
)}
<Button
size="sm"
icon="add"
onClick={triggerAddConnection}
className="w-full sm:w-auto"
>
Add
</Button>
{hasDualAuthModes ? (
<>
<Button
size="sm"
icon="lock"
variant="secondary"
onClick={triggerOAuthConnection}
className="w-full sm:w-auto"
>
{oauthConnectionLabel}
</Button>
<Button
size="sm"
icon="key"
onClick={triggerApiKeyConnection}
className="w-full sm:w-auto"
>
{apiKeyConnectionLabel}
</Button>
</>
) : (
<Button
size="sm"
icon="add"
onClick={triggerAddConnection}
className="w-full sm:w-auto"
>
Add
</Button>
)}
</div>
)}
</>