Add Moonshot BYOK support and fix Kimi K2 API key flow

- Add Moonshot API Key field to BYOK panel alongside Anthropic key
- Thread moonshotKey from client through chat route to sandbox service
- Resolve API key early in service for settings.json and .env writes
- Skip usage limits for Kimi K2 BYOK users (same as Anthropic BYOK)
- Fix env file: write ANTHROPIC_AUTH_TOKEN for Claude SDK auth on Moonshot

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: bidah

apps/web/app/(app)/api/chat/route.ts

@@ -34,6 +34,7 @@ export async function POST(req: Request) {
     agentType,
     source,
     anthropicKey,
+    moonshotKey,
   }: {
     messages: UIMessage[]
     projectId: string
@@ -46,6 +47,7 @@ export async function POST(req: Request) {
     agentType?: AgentType
     source?: string
     anthropicKey?: string
+    moonshotKey?: string
   } = await req.json()
 
   // Mobile (remote-control) requests never include userId — they only send projectId + messages
@@ -107,7 +109,8 @@ export async function POST(req: Request) {
   console.log('[Chat Route] lastUserMessageId:', lastUserMessageId)
 
   // Check message usage limits before processing (skip for BYOK users)
-  if (userId && lastUserMessage && !anthropicKey) {
+  const hasByokKey = !!anthropicKey || (agentType === 'kimi-k2' && !!moonshotKey)
+  if (userId && lastUserMessage && !hasByokKey) {
     console.log('[Chat Route] Checking message usage limits for user:', userId)
     const usageCheck = await canUserSendMessage(userId)
 
@@ -242,7 +245,7 @@ export async function POST(req: Request) {
   }
 
   // Check sandbox hours for BYOK users
-  if (anthropicKey && userId) {
+  if (hasByokKey && userId) {
     const sandboxCheck = await canUserCreateSandbox(userId)
     if (!sandboxCheck.canCreate) {
       const sandboxLimitData = {
@@ -298,7 +301,7 @@ export async function POST(req: Request) {
   }
 
   // Increment message usage count before processing (skip for BYOK users)
-  if (!anthropicKey) {
+  if (!hasByokKey) {
     console.log('[Chat Route] Incrementing message usage for user:', userId)
     const usageResult = await incrementMessageUsage(userId)
 
@@ -478,6 +481,7 @@ export async function POST(req: Request) {
                         skills,
                         agentType,
                         anthropicKey,
+                        moonshotKey,
                       },
                       {
                         onMessage: (message: string) => {

apps/web/app/(app)/p/[id]/project-page.tsx

@@ -333,6 +333,9 @@ export function ProjectPageInternal({ opencodeEnabled = false, template: templat
         anthropicKey: typeof window !== 'undefined'
           ? (localStorage.getItem('byok_anthropic_key') || undefined)
           : undefined,
+        moonshotKey: typeof window !== 'undefined'
+          ? (localStorage.getItem('byok_moonshot_key') || undefined)
+          : undefined,
         messages: messageToSend ? [messageToSend] : [],
       }
 

apps/web/components/byok-panel.tsx

@@ -8,42 +8,94 @@ import { Alert, AlertDescription } from '@/components/ui/alert'
 import { CheckCircle2, X, KeyRound } from 'lucide-react'
 
 const STORAGE_KEY = 'byok_anthropic_key'
+const MOONSHOT_STORAGE_KEY = 'byok_moonshot_key'
 
 interface ByokPanelProps {
   onClose: () => void
 }
 
-export function ByokPanel({ onClose }: ByokPanelProps) {
+function KeySection({
+  label,
+  storageKey,
+  placeholder,
+}: {
+  label: string
+  storageKey: string
+  placeholder?: string
+}) {
   const [key, setKey] = useState('')
   const [savedKey, setSavedKey] = useState<string | null>(null)
-  const [usage, setUsage] = useState<{ sessionsUsed: number; sessionLimit: number; hoursUsed: number; hoursLimit: number } | null>(null)
 
   useEffect(() => {
-    const stored = localStorage.getItem(STORAGE_KEY)
+    const stored = localStorage.getItem(storageKey)
     if (stored) setSavedKey(stored)
-  }, [])
-
-  useEffect(() => {
-    if (!savedKey) return
-    fetch('/api/byok/usage')
-      .then(r => r.json())
-      .then(data => setUsage(data))
-      .catch(() => {})
-  }, [savedKey])
+  }, [storageKey])
 
   function handleSave() {
     if (!key.trim()) return
-    localStorage.setItem(STORAGE_KEY, key.trim())
+    localStorage.setItem(storageKey, key.trim())
     setSavedKey(key.trim())
     setKey('')
   }
 
   function handleRemove() {
-    localStorage.removeItem(STORAGE_KEY)
+    localStorage.removeItem(storageKey)
     setSavedKey(null)
-    setUsage(null)
+  }
+
+  if (savedKey) {
+    return (
+      <div className="space-y-2">
+        <Label>{label}</Label>
+        <Alert className="border-green-400/50 bg-green-50 dark:bg-green-900/20 justify-center">
+          <AlertDescription className="text-green-700 dark:text-green-300 items-center flex flex-row">
+            <CheckCircle2 className="h-4 w-4 text-green-600 mr-2 shrink-0" />
+            Key is active
+          </AlertDescription>
+        </Alert>
+        <Button variant="outline" size="sm" onClick={handleRemove} className="w-full">
+          <X className="h-4 w-4 mr-2" />
+          Remove Key
+        </Button>
+      </div>
+    )
   }
 
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={storageKey}>{label}</Label>
+      <Input
+        id={storageKey}
+        type="password"
+        autoComplete="off"
+        placeholder={placeholder}
+        value={key}
+        onChange={e => setKey(e.target.value)}
+        onKeyDown={e => e.key === 'Enter' && handleSave()}
+      />
+      <Button onClick={handleSave} disabled={!key.trim()} size="sm" className="w-full">
+        Save Key
+      </Button>
+    </div>
+  )
+}
+
+export function ByokPanel({ onClose }: ByokPanelProps) {
+  const [usage, setUsage] = useState<{ sessionsUsed: number; sessionLimit: number; hoursUsed: number; hoursLimit: number } | null>(null)
+  const [hasAnthropicKey, setHasAnthropicKey] = useState(false)
+
+  useEffect(() => {
+    setHasAnthropicKey(!!localStorage.getItem(STORAGE_KEY))
+  }, [])
+
+  useEffect(() => {
+    if (!hasAnthropicKey) return
+    fetch('/api/byok/usage')
+      .then(r => r.json())
+      .then(data => setUsage(data))
+      .catch(() => {})
+  }, [hasAnthropicKey])
+
   return (
     <div className="flex flex-col h-full p-4 gap-4">
       <div className="flex items-center gap-2 pt-2">
@@ -52,62 +104,39 @@ export function ByokPanel({ onClose }: ByokPanelProps) {
       </div>
 
       <p className="text-sm text-muted-foreground">
-        Add your Anthropic API key to use the service for free without a subscription.
-      </p>
-      <p className="text-sm text-muted-foreground">
-        Your key is stored locally in your browser. We validate it to check it works and then whenever you send a message it is sent with the API key to the sandbox where the code agent will use it directly. Keys are never stored on database.
+        Add your API keys to use the service without a subscription. Keys are stored locally in your browser and never saved on our servers.
       </p>
 
-      {savedKey ? (
-        <div className="space-y-3">
-          <Alert className="border-green-400/50 bg-green-50 dark:bg-green-900/20 justify-center">
-            <AlertDescription className="text-green-700 dark:text-green-300 items-center flex flex-row">
-            <CheckCircle2 className="h-4 w-4 text-green-600 mr-2" />
-              API key is active. Messages are using your key
-            </AlertDescription>
-          </Alert>
-
-          {usage && (
-            <div className="rounded-lg border p-3 space-y-2">
-              <p className="text-sm font-medium">Free Sandbox Usage</p>
-              <div className="flex justify-between text-sm text-muted-foreground">
-                <span>Sessions used</span>
-                <span>{usage.sessionsUsed} / {usage.sessionLimit}</span>
-              </div>
-              <div className="w-full bg-muted rounded-full h-2">
-                <div
-                  className="bg-primary h-2 rounded-full transition-all"
-                  style={{ width: `${Math.min((usage.sessionsUsed / usage.sessionLimit) * 100, 100)}%` }}
-                />
-              </div>
-              <p className="text-xs text-muted-foreground">
-                {usage.hoursUsed}h / {usage.hoursLimit}h used ({usage.sessionLimit - usage.sessionsUsed} sessions remaining)
-              </p>
-            </div>
-          )}
-
-          <Button variant="outline" onClick={handleRemove} className="w-full">
-            <X className="h-4 w-4 mr-2" />
-            Remove Key
-          </Button>
-        </div>
-      ) : (
-        <div className="space-y-3">
-          <div className="space-y-1">
-            <Label htmlFor="byok-key">Anthropic API Key</Label>
-            <Input
-              id="byok-key"
-              type="password"
-              autoComplete="off"
-              value={key}
-              onChange={e => setKey(e.target.value)}
-              onKeyDown={e => e.key === 'Enter' && handleSave()}
+      <div className="space-y-4">
+        <KeySection
+          label="Anthropic API Key"
+          storageKey={STORAGE_KEY}
+          placeholder="sk-ant-..."
+        />
+
+        <KeySection
+          label="Moonshot API Key (Kimi K2)"
+          storageKey={MOONSHOT_STORAGE_KEY}
+          placeholder="sk-..."
+        />
+      </div>
+
+      {usage && hasAnthropicKey && (
+        <div className="rounded-lg border p-3 space-y-2">
+          <p className="text-sm font-medium">Free Sandbox Usage</p>
+          <div className="flex justify-between text-sm text-muted-foreground">
+            <span>Sessions used</span>
+            <span>{usage.sessionsUsed} / {usage.sessionLimit}</span>
+          </div>
+          <div className="w-full bg-muted rounded-full h-2">
+            <div
+              className="bg-primary h-2 rounded-full transition-all"
+              style={{ width: `${Math.min((usage.sessionsUsed / usage.sessionLimit) * 100, 100)}%` }}
             />
           </div>
-
-          <Button onClick={handleSave} disabled={!key.trim()} className="w-full">
-            Save Key
-          </Button>
+          <p className="text-xs text-muted-foreground">
+            {usage.hoursUsed}h / {usage.hoursLimit}h used ({usage.sessionLimit - usage.sessionsUsed} sessions remaining)
+          </p>
         </div>
       )}
     </div>

apps/web/lib/claude-code-handler.ts

@@ -24,6 +24,7 @@ export interface ClaudeCodeHandlerRequest {
   claudeModel?: string
   skills?: string[]
   anthropicKey?: string
+  moonshotKey?: string
   agentType?: string
 }
 
@@ -208,6 +209,7 @@ export async function handleClaudeCodeGeneration(
         claudeModel: request.claudeModel,
         skills: request.skills,
         anthropicKey: request.anthropicKey,
+        moonshotKey: request.moonshotKey,
         agentType: request.agentType,
       },
       sandbox,

apps/web/lib/claude-code-service.ts

@@ -31,6 +31,7 @@ export interface AppGenerationRequest {
   claudeModel?: string  // Model ID for Claude (e.g., claude-sonnet-4-5-20250929)
   skills?: string[]  // Selected AI skills (e.g., 'anthropic-chat', 'openai-dalle-3')
   anthropicKey?: string  // BYOK: user-provided Anthropic API key
+  moonshotKey?: string  // BYOK: user-provided Moonshot API key (for Kimi K2)
   agentType?: string  // Agent type (claude-code, opencode, kimi-k2)
 }
 
@@ -197,8 +198,12 @@ export class ClaudeCodeService {
           console.error('[Claude Code Service] ❌ Failed to check cloud status:', dbError)
         }
 
-        // Determine if this is a Kimi K2 request (used for settings and env config below)
+        // Determine if this is a Kimi K2 request and resolve the API key early
+        // (used for settings, env file, and sandbox envs below)
         const isKimiK2 = request.agentType === 'kimi-k2'
+        const apiKeyToUse = isKimiK2
+          ? (request.moonshotKey || globalThis.process.env.MOONSHOT_API_KEY || '')
+          : (request.anthropicKey || globalThis.process.env.ANTHROPIC_API_KEY || '')
 
         // Write Claude settings to skip the WebFetch preflight call to claude.ai.
         // Inside an E2B sandbox the preflight request (GET claude.ai/api/web/domain_info)
@@ -211,7 +216,7 @@ export class ClaudeCodeService {
           // For Kimi K2, configure the Claude SDK to use Moonshot's Anthropic-compatible API
           if (isKimiK2) {
             claudeSettings.env = {
-              ANTHROPIC_AUTH_TOKEN: globalThis.process.env.MOONSHOT_API_KEY || '',
+              ANTHROPIC_AUTH_TOKEN: apiKeyToUse,
               ANTHROPIC_BASE_URL: 'https://api.moonshot.ai/anthropic',
             }
           }
@@ -256,11 +261,6 @@ export class ClaudeCodeService {
           console.log('[Claude Code Service] 📝 No image attachments to add')
         }
 
-        // Determine which API key and base URL to use based on agent type
-        const apiKeyToUse = isKimiK2
-          ? (globalThis.process.env.MOONSHOT_API_KEY || '')
-          : (request.anthropicKey || globalThis.process.env.ANTHROPIC_API_KEY || '')
-
         // Write the API key (and optional base URL) to /claude-sdk/.env so the executor's loadEnvFile() picks it up.
         // This is the most reliable way to pass the key since:
         // 1. E2B's envs option may not override existing sandbox env vars