api key dialog

app/api/api-keys/check/route.ts

@@ -0,0 +1,78 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getUserApiKey } from '@/lib/api-keys/user-keys'
+
+type Provider = 'openai' | 'gemini' | 'cursor' | 'anthropic' | 'aigateway'
+
+// Map agents to their required providers
+const AGENT_PROVIDER_MAP: Record<string, Provider> = {
+  claude: 'anthropic',
+  codex: 'aigateway', // Codex uses Vercel AI Gateway
+  cursor: 'cursor',
+  gemini: 'gemini',
+  opencode: 'openai', // OpenCode can use OpenAI or Anthropic, but primarily OpenAI
+}
+
+// Check if a model is an Anthropic model
+function isAnthropicModel(model: string): boolean {
+  const anthropicPatterns = ['claude', 'sonnet', 'opus']
+  const lowerModel = model.toLowerCase()
+  return anthropicPatterns.some((pattern) => lowerModel.includes(pattern))
+}
+
+// Check if a model is an OpenAI model
+function isOpenAIModel(model: string): boolean {
+  const openaiPatterns = ['gpt', 'openai']
+  const lowerModel = model.toLowerCase()
+  return openaiPatterns.some((pattern) => lowerModel.includes(pattern))
+}
+
+// Check if a model is a Gemini model
+function isGeminiModel(model: string): boolean {
+  const geminiPatterns = ['gemini']
+  const lowerModel = model.toLowerCase()
+  return geminiPatterns.some((pattern) => lowerModel.includes(pattern))
+}
+
+export async function GET(req: NextRequest) {
+  try {
+    const { searchParams } = new URL(req.url)
+    const agent = searchParams.get('agent')
+    const model = searchParams.get('model')
+
+    if (!agent) {
+      return NextResponse.json({ error: 'Agent parameter is required' }, { status: 400 })
+    }
+
+    let provider = AGENT_PROVIDER_MAP[agent]
+    if (!provider) {
+      return NextResponse.json({ error: 'Invalid agent' }, { status: 400 })
+    }
+
+    // Override provider based on model for multi-provider agents
+    if (model && (agent === 'cursor' || agent === 'opencode')) {
+      if (isAnthropicModel(model)) {
+        provider = 'anthropic'
+      } else if (isGeminiModel(model)) {
+        provider = 'gemini'
+      } else if (isOpenAIModel(model)) {
+        // For OpenAI models, prefer AI Gateway if available, otherwise use OpenAI
+        provider = 'aigateway'
+      }
+      // For cursor with no recognizable pattern, keep the default 'cursor' provider
+    }
+
+    // Check if API key is available (either user's or system)
+    const apiKey = await getUserApiKey(provider)
+    const hasKey = !!apiKey
+
+    return NextResponse.json({
+      success: true,
+      hasKey,
+      provider,
+      agentName: agent.charAt(0).toUpperCase() + agent.slice(1),
+    })
+  } catch (error) {
+    console.error('Error checking API key:', error)
+    return NextResponse.json({ error: 'Failed to check API key' }, { status: 500 })
+  }
+}

components/task-form.tsx

@@ -21,6 +21,8 @@ import { Claude, Codex, Cursor, Gemini, OpenCode } from '@/components/logos'
 import { setInstallDependencies, setMaxDuration } from '@/lib/utils/cookies'
 import { useConnectors } from '@/components/connectors-provider'
 import { ConnectorDialog } from '@/components/connectors/manage-connectors'
+import { ApiKeysDialog } from '@/components/api-keys-dialog'
+import { toast } from 'sonner'
 
 interface GitHubRepo {
   name: string
@@ -122,6 +124,7 @@ export function TaskForm({
   const [maxDuration, setMaxDurationState] = useState(initialMaxDuration)
   const [showOptionsDialog, setShowOptionsDialog] = useState(false)
   const [showMcpServersDialog, setShowMcpServersDialog] = useState(false)
+  const [showApiKeysDialog, setShowApiKeysDialog] = useState(false)
 
   // Connectors state
   const { connectors } = useConnectors()
@@ -262,9 +265,40 @@ export function TaskForm({
     fetchRepos()
   }, [selectedOwner])
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     if (prompt.trim() && selectedOwner && selectedRepo) {
+      // Check if API key is required and available for the selected agent and model
+      try {
+        const response = await fetch(`/api/api-keys/check?agent=${selectedAgent}&model=${selectedModel}`)
+        const data = await response.json()
+
+        if (!data.hasKey) {
+          // Show error message with provider name
+          const providerNames: Record<string, string> = {
+            anthropic: 'Anthropic',
+            openai: 'OpenAI',
+            cursor: 'Cursor',
+            gemini: 'Gemini',
+            aigateway: 'AI Gateway',
+          }
+          const providerName = providerNames[data.provider] || data.provider
+
+          toast.error(`${providerName} API key required`, {
+            description: `Please add your ${providerName} API key to use the ${data.agentName} agent with this model.`,
+            action: {
+              label: 'Add API Key',
+              onClick: () => setShowApiKeysDialog(true),
+            },
+          })
+          return
+        }
+      } catch (error) {
+        console.error('Error checking API key:', error)
+        toast.error('Failed to validate API key availability')
+        return
+      }
+
       const selectedRepoData = repos.find((repo) => repo.name === selectedRepo)
       if (selectedRepoData) {
         // Clear the saved prompt since we're submitting it
@@ -529,6 +563,7 @@ export function TaskForm({
       </form>
 
       <ConnectorDialog open={showMcpServersDialog} onOpenChange={setShowMcpServersDialog} />
+      <ApiKeysDialog open={showApiKeysDialog} onOpenChange={setShowApiKeysDialog} />
     </div>
   )
 }