feat(cli-tools): add Grok Build setup

Add Grok Build to Dashboard → CLI Tools. Apply writes a [model.9router]
custom model to ~/.grok/config.toml and sets [models].default, routing
the xAI Grok TUI through 9Router. Reset removes the slot and restores
the previous default.

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Features
 - **Perplexity**: add Agent API provider (#2492)
 - **Grok CLI**: add Grok CLI / Grok Build provider with OAuth device-code flow (#2502)
+- **CLI tools**: add Grok Build setup — writes `[model.9router]` custom model to `~/.grok/config.toml`
 - **Featherless**: add OpenAI-compatible provider presets
 - **SearXNG**: configure endpoint via SEARXNG_URL env (#2499)
 - **Providers**: add max thinking level for gpt-5.6-sol (#2500)

src/app/(dashboard)/dashboard/cli-tools/[toolId]/ToolDetailClient.js

@@ -9,7 +9,7 @@ import {
   ClaudeToolCard, CodexToolCard, DroidToolCard, OpenClawToolCard,
   HermesToolCard, DefaultToolCard, OpenCodeToolCard, CoworkToolCard,
   CopilotToolCard, ClineToolCard, KiloToolCard, DeepSeekTuiToolCard,
-  JcodeToolCard,
+  JcodeToolCard, GrokBuildToolCard,
 } from "../components";
 
 const CLOUD_URL = process.env.NEXT_PUBLIC_CLOUD_URL;
@@ -139,6 +139,8 @@ export default function ToolDetailClient({ toolId, machineId }) {
         return <DeepSeekTuiToolCard {...commonProps} activeProviders={getActiveProviders()} hasActiveProviders={hasActiveProviders} cloudEnabled={cloudEnabled} />;
       case "jcode":
         return <JcodeToolCard {...commonProps} activeProviders={getActiveProviders()} hasActiveProviders={hasActiveProviders} cloudEnabled={cloudEnabled} />;
+      case "grok-build":
+        return <GrokBuildToolCard {...commonProps} activeProviders={getActiveProviders()} hasActiveProviders={hasActiveProviders} cloudEnabled={cloudEnabled} />;
       default:
         return <DefaultToolCard toolId={toolId} {...commonProps} activeProviders={getActiveProviders()} cloudEnabled={cloudEnabled} tunnelEnabled={tunnelEnabled} />;
     }

src/app/(dashboard)/dashboard/cli-tools/components/GrokBuildToolCard.js

@@ -0,0 +1,387 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { Card, Button, ModelSelectModal, ManualConfigModal } from "@/shared/components";
+import Image from "next/image";
+import BaseUrlSelect from "./BaseUrlSelect";
+import ApiKeySelect from "./ApiKeySelect";
+import { matchKnownEndpoint } from "./cliEndpointMatch";
+
+const ENDPOINT = "/api/cli-tools/grok-build-settings";
+const MODEL_SLOT = "9router";
+
+export default function GrokBuildToolCard({
+  tool,
+  isExpanded,
+  onToggle,
+  baseUrl,
+  hasActiveProviders,
+  apiKeys,
+  activeProviders,
+  cloudEnabled,
+  initialStatus,
+  tunnelEnabled,
+  tunnelPublicUrl,
+  tailscaleEnabled,
+  tailscaleUrl,
+}) {
+  const [grokStatus, setGrokStatus] = useState(initialStatus || null);
+  const [checking, setChecking] = useState(false);
+  const [applying, setApplying] = useState(false);
+  const [restoring, setRestoring] = useState(false);
+  const [message, setMessage] = useState(null);
+  const [selectedApiKey, setSelectedApiKey] = useState("");
+  const [selectedModel, setSelectedModel] = useState("");
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modelAliases, setModelAliases] = useState({});
+  const [showManualConfigModal, setShowManualConfigModal] = useState(false);
+  const [customBaseUrl, setCustomBaseUrl] = useState("");
+  const hasInitializedModel = useRef(false);
+
+  const getConfigStatus = () => {
+    if (!grokStatus?.installed) return null;
+    const cfg = grokStatus.settings?.model;
+    if (!cfg?.base_url) return "not_configured";
+    if (matchKnownEndpoint(cfg.base_url, { tunnelPublicUrl, tailscaleUrl })) return "configured";
+    return "other";
+  };
+
+  const configStatus = getConfigStatus();
+
+  useEffect(() => {
+    if (apiKeys?.length > 0 && !selectedApiKey) {
+      setSelectedApiKey(apiKeys[0].key);
+    }
+  }, [apiKeys, selectedApiKey]);
+
+  useEffect(() => {
+    if (initialStatus) setGrokStatus(initialStatus);
+  }, [initialStatus]);
+
+  useEffect(() => {
+    if (isExpanded && !grokStatus) {
+      checkStatus();
+      fetchModelAliases();
+    }
+    if (isExpanded) fetchModelAliases();
+  }, [isExpanded]);
+
+  const fetchModelAliases = async () => {
+    try {
+      const res = await fetch("/api/models/alias");
+      const data = await res.json();
+      if (res.ok) setModelAliases(data.aliases || {});
+    } catch (error) {
+      console.log("Error fetching model aliases:", error);
+    }
+  };
+
+  useEffect(() => {
+    if (grokStatus?.installed && !hasInitializedModel.current) {
+      hasInitializedModel.current = true;
+      const cfg = grokStatus.settings?.model;
+      if (cfg?.model) setSelectedModel(cfg.model);
+    }
+  }, [grokStatus]);
+
+  const checkStatus = async () => {
+    setChecking(true);
+    try {
+      const res = await fetch(ENDPOINT);
+      const data = await res.json();
+      setGrokStatus(data);
+    } catch (error) {
+      setGrokStatus({ installed: false, error: error.message });
+    } finally {
+      setChecking(false);
+    }
+  };
+
+  const normalizeLocalhost = (url) => url.replace("://localhost", "://127.0.0.1");
+
+  const getLocalBaseUrl = () => {
+    if (typeof window !== "undefined") {
+      return normalizeLocalhost(window.location.origin);
+    }
+    return "http://127.0.0.1:20128";
+  };
+
+  const getEffectiveBaseUrl = () => {
+    const url = customBaseUrl || getLocalBaseUrl();
+    return url.endsWith("/v1") ? url : `${url}/v1`;
+  };
+
+  const handleApply = async () => {
+    setApplying(true);
+    setMessage(null);
+    try {
+      const keyToUse = selectedApiKey?.trim()
+        || (apiKeys?.length > 0 ? apiKeys[0].key : null)
+        || (!cloudEnabled ? "sk_9router" : null);
+
+      const res = await fetch(ENDPOINT, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          baseUrl: getEffectiveBaseUrl(),
+          apiKey: keyToUse,
+          model: selectedModel,
+        }),
+      });
+      const data = await res.json();
+      if (res.ok) {
+        setMessage({ type: "success", text: "Settings applied successfully!" });
+        checkStatus();
+      } else {
+        setMessage({ type: "error", text: data.error || "Failed to apply settings" });
+      }
+    } catch (error) {
+      setMessage({ type: "error", text: error.message });
+    } finally {
+      setApplying(false);
+    }
+  };
+
+  const handleReset = async () => {
+    setRestoring(true);
+    setMessage(null);
+    try {
+      const res = await fetch(ENDPOINT, { method: "DELETE" });
+      const data = await res.json();
+      if (res.ok) {
+        setMessage({ type: "success", text: "Settings reset successfully!" });
+        setSelectedModel("");
+        checkStatus();
+      } else {
+        setMessage({ type: "error", text: data.error || "Failed to reset settings" });
+      }
+    } catch (error) {
+      setMessage({ type: "error", text: error.message });
+    } finally {
+      setRestoring(false);
+    }
+  };
+
+  const handleModelSelect = (model) => {
+    setSelectedModel(model.value);
+    setModalOpen(false);
+  };
+
+  const getManualConfigs = () => {
+    const keyToUse = (selectedApiKey && selectedApiKey.trim())
+      ? selectedApiKey
+      : (!cloudEnabled ? "sk_9router" : "<API_KEY_FROM_DASHBOARD>");
+
+    const modelId = selectedModel || "provider/model-id";
+    const tomlContent = `[models]
+default = "${MODEL_SLOT}"
+
+[model.${MODEL_SLOT}]
+model = "${modelId}"
+base_url = "${getEffectiveBaseUrl()}"
+name = "9Router"
+description = "Routed via 9Router gateway"
+api_backend = "chat_completions"
+api_key = "${keyToUse}"
+`;
+
+    return [
+      { filename: "~/.grok/config.toml", content: tomlContent },
+    ];
+  };
+
+  return (
+    <Card padding="xs" className="overflow-hidden">
+      <div className="flex items-start justify-between gap-3 hover:cursor-pointer sm:items-center" onClick={onToggle}>
+        <div className="flex min-w-0 items-center gap-3">
+          <div className="size-8 flex items-center justify-center shrink-0">
+            <Image
+              src={tool.image || "/providers/grok-cli.png"}
+              alt={tool.name}
+              width={32}
+              height={32}
+              className="size-8 object-contain rounded-lg"
+              sizes="32px"
+              onError={(e) => { e.target.style.display = "none"; }}
+            />
+          </div>
+          <div className="min-w-0">
+            <div className="flex min-w-0 flex-wrap items-center gap-2">
+              <h3 className="font-medium text-sm">{tool.name}</h3>
+              {configStatus === "configured" && <span className="px-1.5 py-0.5 text-[10px] font-medium bg-green-500/10 text-green-600 dark:text-green-400 rounded-full">Connected</span>}
+              {configStatus === "not_configured" && <span className="px-1.5 py-0.5 text-[10px] font-medium bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 rounded-full">Not configured</span>}
+              {configStatus === "other" && <span className="px-1.5 py-0.5 text-[10px] font-medium bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded-full">Other</span>}
+            </div>
+            <p className="text-xs text-text-muted truncate">{tool.description}</p>
+          </div>
+        </div>
+        <span className={`material-symbols-outlined text-text-muted text-[20px] transition-transform ${isExpanded ? "rotate-180" : ""}`}>expand_more</span>
+      </div>
+
+      {isExpanded && (
+        <div className="mt-4 pt-4 border-t border-border flex flex-col gap-4">
+          {checking && (
+            <div className="flex items-center gap-2 text-text-muted">
+              <span className="material-symbols-outlined animate-spin">progress_activity</span>
+              <span>Checking Grok Build...</span>
+            </div>
+          )}
+
+          {!checking && grokStatus && !grokStatus.installed && (
+            <div className="flex flex-col gap-4">
+              <div className="flex flex-col gap-3 p-4 bg-yellow-500/10 border border-yellow-500/30 rounded-lg">
+                <div className="flex items-start gap-3">
+                  <span className="material-symbols-outlined text-yellow-500">warning</span>
+                  <div className="flex-1">
+                    <p className="font-medium text-yellow-600 dark:text-yellow-400">Grok Build not detected locally</p>
+                    <p className="text-sm text-text-muted mt-1">Install:</p>
+                    <code className="block mt-2 p-2 bg-black/20 rounded text-xs font-mono">curl -fsSL https://x.ai/cli/install.sh | bash</code>
+                    <p className="text-sm text-text-muted mt-2">Manual configuration is still available if 9router is deployed on a remote server.</p>
+                  </div>
+                </div>
+                <div className="flex flex-col sm:flex-row sm:items-center gap-2 pl-0 sm:pl-9">
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={() => setShowManualConfigModal(true)}
+                    className="w-full sm:w-auto !bg-yellow-500/20 !border-yellow-500/40 !text-yellow-700 dark:!text-yellow-300 hover:!bg-yellow-500/30"
+                  >
+                    <span className="material-symbols-outlined text-[18px] mr-1">content_copy</span>
+                    Manual Config
+                  </Button>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {!checking && grokStatus?.installed && (
+            <>
+              <div className="flex flex-col gap-2">
+                {tool.notes && tool.notes.length > 0 && (
+                  <div className="flex flex-col gap-2 mb-2">
+                    {tool.notes.map((note, idx) => (
+                      <div
+                        key={idx}
+                        className={`flex items-start gap-2 p-2 rounded text-xs ${
+                          note.type === "warning" ? "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400" :
+                          note.type === "error" ? "bg-red-500/10 text-red-600 dark:text-red-400" :
+                          "bg-blue-500/10 text-blue-600 dark:text-blue-400"
+                        }`}
+                      >
+                        <span className="material-symbols-outlined text-[14px] mt-0.5">
+                          {note.type === "warning" ? "warning" : note.type === "error" ? "error" : "info"}
+                        </span>
+                        <span>{note.text}</span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr] sm:items-center sm:gap-2">
+                  <span className="text-xs font-semibold text-text-main sm:text-right sm:text-sm">Select Endpoint</span>
+                  <span className="material-symbols-outlined hidden text-text-muted text-[14px] sm:inline">arrow_forward</span>
+                  <BaseUrlSelect
+                    value={customBaseUrl || getEffectiveBaseUrl()}
+                    onChange={setCustomBaseUrl}
+                    requiresExternalUrl={tool.requiresExternalUrl}
+                    tunnelEnabled={tunnelEnabled}
+                    tunnelPublicUrl={tunnelPublicUrl}
+                    tailscaleEnabled={tailscaleEnabled}
+                    tailscaleUrl={tailscaleUrl}
+                  />
+                </div>
+
+                {grokStatus?.settings?.model?.base_url && (
+                  <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr_auto] sm:items-center sm:gap-2">
+                    <span className="text-xs font-semibold text-text-main sm:text-right sm:text-sm">Current</span>
+                    <span className="material-symbols-outlined hidden text-text-muted text-[14px] sm:inline">arrow_forward</span>
+                    <span className="min-w-0 truncate rounded bg-surface/40 px-2 py-2 text-xs text-text-muted sm:py-1.5">
+                      {grokStatus.settings.model.base_url}
+                      {grokStatus.settings.model.model ? ` · ${grokStatus.settings.model.model}` : ""}
+                    </span>
+                  </div>
+                )}
+
+                <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr_auto] sm:items-center sm:gap-2">
+                  <span className="text-xs font-semibold text-text-main sm:text-right sm:text-sm">API Key</span>
+                  <span className="material-symbols-outlined hidden text-text-muted text-[14px] sm:inline">arrow_forward</span>
+                  <ApiKeySelect value={selectedApiKey} onChange={setSelectedApiKey} apiKeys={apiKeys} cloudEnabled={cloudEnabled} />
+                </div>
+
+                <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr_auto] sm:items-center sm:gap-2">
+                  <span className="text-xs font-semibold text-text-main sm:text-right sm:text-sm">Default Model</span>
+                  <span className="material-symbols-outlined hidden text-text-muted text-[14px] sm:inline">arrow_forward</span>
+                  <div className="relative w-full min-w-0">
+                    <input
+                      type="text"
+                      value={selectedModel}
+                      onChange={(e) => setSelectedModel(e.target.value)}
+                      placeholder="provider/model-id"
+                      className="w-full min-w-0 pl-2 pr-7 py-2 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 sm:py-1.5"
+                    />
+                    {selectedModel && (
+                      <button
+                        onClick={() => setSelectedModel("")}
+                        className="absolute right-1 top-1/2 -translate-y-1/2 p-0.5 text-text-muted hover:text-red-500 rounded transition-colors"
+                        title="Clear"
+                      >
+                        <span className="material-symbols-outlined text-[14px]">close</span>
+                      </button>
+                    )}
+                  </div>
+                  <button
+                    onClick={() => setModalOpen(true)}
+                    disabled={!hasActiveProviders}
+                    className={`w-full sm:w-auto rounded border px-2 py-2 text-xs transition-colors sm:py-1.5 whitespace-nowrap sm:shrink-0 ${
+                      hasActiveProviders
+                        ? "bg-surface border-border text-text-main hover:border-primary cursor-pointer"
+                        : "opacity-50 cursor-not-allowed border-border"
+                    }`}
+                  >
+                    Select
+                  </button>
+                </div>
+              </div>
+
+              {message && (
+                <div className={`flex items-center gap-2 px-2 py-1.5 rounded text-xs ${message.type === "success" ? "bg-green-500/10 text-green-600" : "bg-red-500/10 text-red-600"}`}>
+                  <span className="material-symbols-outlined text-[14px]">{message.type === "success" ? "check_circle" : "error"}</span>
+                  <span>{message.text}</span>
+                </div>
+              )}
+
+              <div className="flex flex-col sm:flex-row sm:items-center gap-2">
+                <Button variant="primary" size="sm" onClick={handleApply} disabled={!selectedModel} loading={applying} className="w-full sm:w-auto">
+                  <span className="material-symbols-outlined text-[14px] mr-1">save</span>Apply
+                </Button>
+                <Button variant="outline" size="sm" onClick={handleReset} disabled={!grokStatus?.has9Router} loading={restoring} className="w-full sm:w-auto">
+                  <span className="material-symbols-outlined text-[14px] mr-1">restore</span>Reset
+                </Button>
+                <Button variant="ghost" size="sm" onClick={() => setShowManualConfigModal(true)} className="w-full sm:w-auto">
+                  <span className="material-symbols-outlined text-[14px] mr-1">content_copy</span>Manual Config
+                </Button>
+              </div>
+            </>
+          )}
+        </div>
+      )}
+
+      <ModelSelectModal
+        isOpen={modalOpen}
+        onClose={() => setModalOpen(false)}
+        onSelect={handleModelSelect}
+        selectedModel={selectedModel}
+        activeProviders={activeProviders}
+        modelAliases={modelAliases}
+        title="Select Model for Grok Build"
+      />
+
+      <ManualConfigModal
+        isOpen={showManualConfigModal}
+        onClose={() => setShowManualConfigModal(false)}
+        title="Grok Build - Manual Configuration"
+        configs={getManualConfigs()}
+      />
+    </Card>
+  );
+}

src/app/(dashboard)/dashboard/cli-tools/components/index.js

@@ -12,6 +12,7 @@ export { default as ClineToolCard } from "./ClineToolCard";
 export { default as KiloToolCard } from "./KiloToolCard";
 export { default as DeepSeekTuiToolCard } from "./DeepSeekTuiToolCard";
 export { default as JcodeToolCard } from "./JcodeToolCard";
+export { default as GrokBuildToolCard } from "./GrokBuildToolCard";
 export { default as MitmServerCard } from "./MitmServerCard";
 export { default as MitmToolCard } from "./MitmToolCard";
 export { default as MitmLinkCard } from "./MitmLinkCard";

src/app/api/cli-tools/all-statuses/route.js

@@ -13,6 +13,7 @@ import { GET as clineGet } from "../cline-settings/route";
 import { GET as kiloGet } from "../kilo-settings/route";
 import { GET as deepseekTuiGet } from "../deepseek-tui-settings/route";
 import { GET as jcodeGet } from "../jcode-settings/route";
+import { GET as grokBuildGet } from "../grok-build-settings/route";
 
 const STATUS_GETTERS = {
   claude: claudeGet,
@@ -27,6 +28,7 @@ const STATUS_GETTERS = {
   kilo: kiloGet,
   "deepseek-tui": deepseekTuiGet,
   jcode: jcodeGet,
+  "grok-build": grokBuildGet,
 };
 
 // Batch endpoint: gather all CLI tool statuses in one round-trip

src/app/api/cli-tools/grok-build-settings/route.js

@@ -0,0 +1,242 @@
+"use server";
+
+import { NextResponse } from "next/server";
+import { exec } from "child_process";
+import { promisify } from "util";
+import fs from "fs/promises";
+import path from "path";
+import os from "os";
+
+const execAsync = promisify(exec);
+
+const PROVIDER_NAME = "9router";
+const MODEL_SLOT = "9router";
+const BUILTIN_DEFAULT = "grok-build";
+
+// [model.9router] ... until next [section] header or EOF
+const MODEL_SECTION_RE = new RegExp(
+  `^\\[model\\.${MODEL_SLOT}\\][ \\t]*\\r?\\n(?:(?!\\[)[^\\r\\n]*\\r?\\n?)*`,
+  "m"
+);
+
+const MODELS_SECTION_RE = /^\[models\][ \t]*\r?\n((?:(?!\[)[^\r\n]*\r?\n?)*)/m;
+
+// Marker written on Apply so Reset can restore the previous [models].default
+const PREV_DEFAULT_RE = /^# 9router-prev-default = "([^"]*)"[ \t]*\r?\n?/m;
+
+const getGrokDir = () => path.join(os.homedir(), ".grok");
+const getGrokConfigPath = () => path.join(getGrokDir(), "config.toml");
+const getGrokBinPath = () => path.join(getGrokDir(), "bin", "grok");
+
+const checkGrokInstalled = async () => {
+  try {
+    const isWindows = os.platform() === "win32";
+    const command = isWindows ? "where grok" : "which grok";
+    await execAsync(command, { windowsHide: true });
+    return true;
+  } catch {
+    try {
+      await fs.access(getGrokBinPath());
+      return true;
+    } catch {
+      try {
+        await fs.access(getGrokConfigPath());
+        return true;
+      } catch {
+        return false;
+      }
+    }
+  }
+};
+
+const readConfigToml = async () => {
+  try {
+    return await fs.readFile(getGrokConfigPath(), "utf-8");
+  } catch (error) {
+    if (error.code === "ENOENT") return "";
+    throw error;
+  }
+};
+
+const getTomlField = (body, key) => {
+  const m = body.match(new RegExp(`^[ \\t]*${key}[ \\t]*=[ \\t]*"([^"]*)"`, "m"));
+  return m ? m[1] : null;
+};
+
+const parseModelSection = (toml) => {
+  const match = toml.match(MODEL_SECTION_RE);
+  if (!match) return null;
+  const body = match[0].replace(/^\[model\.[^\]]+\][ \t]*\r?\n/, "");
+  return {
+    model: getTomlField(body, "model"),
+    base_url: getTomlField(body, "base_url"),
+    name: getTomlField(body, "name"),
+    api_key: getTomlField(body, "api_key"),
+    api_backend: getTomlField(body, "api_backend"),
+  };
+};
+
+const parseModelsDefault = (toml) => {
+  const match = toml.match(MODELS_SECTION_RE);
+  if (!match) return null;
+  return getTomlField(match[1] || "", "default");
+};
+
+const buildModelSection = (model, baseUrl, apiKey) => {
+  const lines = [
+    `[model.${MODEL_SLOT}]`,
+    `model = "${model}"`,
+    `base_url = "${baseUrl}"`,
+    `name = "9Router"`,
+    `description = "Routed via 9Router gateway"`,
+    `api_backend = "chat_completions"`,
+  ];
+  if (apiKey) lines.push(`api_key = "${apiKey}"`);
+  return `${lines.join("\n")}\n`;
+};
+
+const upsertModelSection = (toml, section) => {
+  if (MODEL_SECTION_RE.test(toml)) return toml.replace(MODEL_SECTION_RE, section);
+  const needsNl = toml.length > 0 && !toml.endsWith("\n");
+  return `${toml}${needsNl ? "\n" : ""}\n${section}`;
+};
+
+const removeModelSection = (toml) =>
+  toml.replace(MODEL_SECTION_RE, "").replace(/\n{3,}/g, "\n\n");
+
+// Set or insert default = "..." inside existing [models], or create the section
+const setModelsDefault = (toml, value) => {
+  const match = toml.match(MODELS_SECTION_RE);
+  if (match) {
+    const body = match[1] || "";
+    let newBody;
+    if (/^[ \t]*default[ \t]*=/m.test(body)) {
+      newBody = body.replace(/^[ \t]*default[ \t]*=[ \t]*"[^"]*"/m, `default = "${value}"`);
+    } else {
+      newBody = `default = "${value}"\n${body}`;
+    }
+    return toml.replace(match[0], `[models]\n${newBody}`);
+  }
+  const block = `[models]\ndefault = "${value}"\n\n`;
+  return toml.length > 0 ? block + toml : block;
+};
+
+// Remember the previous default once (so re-Apply does not overwrite it with "9router")
+const rememberPrevDefault = (toml) => {
+  if (PREV_DEFAULT_RE.test(toml)) return toml;
+  const current = parseModelsDefault(toml);
+  if (!current || current === MODEL_SLOT) return toml;
+  const marker = `# 9router-prev-default = "${current}"\n`;
+  // Prefer placing the marker just above [model.9router] if present, else at EOF
+  if (MODEL_SECTION_RE.test(toml)) {
+    return toml.replace(MODEL_SECTION_RE, (section) => marker + section);
+  }
+  const needsNl = toml.length > 0 && !toml.endsWith("\n");
+  return `${toml}${needsNl ? "\n" : ""}${marker}`;
+};
+
+// If default points at our slot, restore previous (or built-in) default and drop marker
+const clearModelsDefaultIfOurs = (toml) => {
+  const prevMatch = toml.match(PREV_DEFAULT_RE);
+  const restoreTo = prevMatch?.[1] || BUILTIN_DEFAULT;
+  let next = toml.replace(PREV_DEFAULT_RE, "");
+  const current = parseModelsDefault(next);
+  if (current === MODEL_SLOT) {
+    next = setModelsDefault(next, restoreTo);
+  }
+  return next;
+};
+
+const has9RouterConfig = (modelCfg) => {
+  if (!modelCfg?.base_url) return false;
+  return true;
+};
+
+export async function GET() {
+  try {
+    const installed = await checkGrokInstalled();
+    if (!installed) {
+      return NextResponse.json({
+        installed: false,
+        settings: null,
+        message: "Grok Build is not installed",
+      });
+    }
+
+    const toml = await readConfigToml();
+    const model = parseModelSection(toml);
+    const defaultModel = parseModelsDefault(toml);
+
+    return NextResponse.json({
+      installed: true,
+      settings: {
+        model,
+        default: defaultModel,
+      },
+      has9Router: has9RouterConfig(model),
+      configPath: getGrokConfigPath(),
+    });
+  } catch (error) {
+    console.log("Error checking grok-build settings:", error);
+    return NextResponse.json({ error: "Failed to check grok-build settings" }, { status: 500 });
+  }
+}
+
+export async function POST(request) {
+  try {
+    const { baseUrl, apiKey, model } = await request.json();
+    if (!baseUrl || !model) {
+      return NextResponse.json({ error: "baseUrl and model are required" }, { status: 400 });
+    }
+
+    const dir = getGrokDir();
+    await fs.mkdir(dir, { recursive: true });
+
+    const normalizedBaseUrl = baseUrl.endsWith("/v1") ? baseUrl : `${baseUrl}/v1`;
+    const keyToWrite = apiKey || "sk_9router";
+
+    let toml = await readConfigToml();
+    toml = rememberPrevDefault(toml);
+    toml = upsertModelSection(toml, buildModelSection(model, normalizedBaseUrl, keyToWrite));
+    toml = setModelsDefault(toml, MODEL_SLOT);
+
+    await fs.writeFile(getGrokConfigPath(), toml);
+
+    return NextResponse.json({
+      success: true,
+      message: "Grok Build settings applied successfully!",
+      configPath: getGrokConfigPath(),
+      modelSlot: MODEL_SLOT,
+    });
+  } catch (error) {
+    console.log("Error updating grok-build settings:", error);
+    return NextResponse.json({ error: "Failed to update grok-build settings" }, { status: 500 });
+  }
+}
+
+export async function DELETE() {
+  try {
+    const configPath = getGrokConfigPath();
+    let toml = "";
+    try {
+      toml = await fs.readFile(configPath, "utf-8");
+    } catch (error) {
+      if (error.code === "ENOENT") {
+        return NextResponse.json({ success: true, message: "No config file to reset" });
+      }
+      throw error;
+    }
+
+    toml = removeModelSection(toml);
+    toml = clearModelsDefaultIfOurs(toml);
+    await fs.writeFile(configPath, toml);
+
+    return NextResponse.json({
+      success: true,
+      message: `${PROVIDER_NAME} model slot removed from Grok Build`,
+    });
+  } catch (error) {
+    console.log("Error resetting grok-build settings:", error);
+    return NextResponse.json({ error: "Failed to reset grok-build settings" }, { status: 500 });
+  }
+}

src/shared/constants/cliTools.js

@@ -363,6 +363,30 @@ amp --model "{{model}}"
       { id: "gemini-3.1-pro", name: "Gemini 3.1 Pro", alias: "gemini", defaultValue: "gemini/gemini-3.1-pro" },
     ],
   },
+  "grok-build": {
+    id: "grok-build",
+    name: "Grok Build",
+    image: "/providers/grok-cli.png",
+    color: "#1DA1F2",
+    description: "xAI Grok Build TUI coding agent",
+    configType: "custom",
+    docsUrl: "https://x.ai/cli",
+    defaultCommand: "grok",
+    notes: [
+      {
+        type: "info",
+        text: "Grok Build uses ~/.grok/config.toml. 9Router writes a [model.9router] custom model and sets it as the default.",
+      },
+      {
+        type: "info",
+        text: "After Apply, run grok (or /model 9router) to use the routed model. Switch back anytime with /model grok-build.",
+      },
+      {
+        type: "warning",
+        text: "Config path: Linux/macOS ~/.grok/config.toml • Windows %USERPROFILE%\\.grok\\config.toml",
+      },
+    ],
+  },
   // HIDDEN: gemini-cli
   // "gemini-cli": {
   //   id: "gemini-cli",