diff --git a/src/app/api/providers/route.ts b/src/app/api/providers/route.ts index 548e516..7d87b17 100644 --- a/src/app/api/providers/route.ts +++ b/src/app/api/providers/route.ts @@ -1,6 +1,6 @@ import { NextRequest, NextResponse } from 'next/server'; import { getAllProviders, createProvider } from '@/lib/db'; -import type { ProvidersResponse, ProviderResponse, ErrorResponse, CreateProviderRequest, ApiProvider } from '@/types'; +import type { ProviderResponse, ErrorResponse, CreateProviderRequest, ApiProvider } from '@/types'; function maskApiKey(provider: ApiProvider): ApiProvider { let maskedKey = provider.api_key; @@ -10,10 +10,35 @@ function maskApiKey(provider: ApiProvider): ApiProvider { return { ...provider, api_key: maskedKey }; } +/** Check which ANTHROPIC_* env vars are set in the server process environment */ +function detectEnvVars(): Record { + const detected: Record = {}; + const envKeys = [ + 'ANTHROPIC_API_KEY', + 'ANTHROPIC_AUTH_TOKEN', + 'ANTHROPIC_BASE_URL', + ]; + for (const key of envKeys) { + const val = process.env[key]; + if (val) { + // Mask secrets, show base_url in full + if (key.includes('URL')) { + detected[key] = val; + } else if (val.length > 8) { + detected[key] = '***' + val.slice(-8); + } else { + detected[key] = '***'; + } + } + } + return detected; +} + export async function GET() { try { const providers = getAllProviders().map(maskApiKey); - return NextResponse.json({ providers }); + const envDetected = detectEnvVars(); + return NextResponse.json({ providers, env_detected: envDetected }); } catch (error) { return NextResponse.json( { error: error instanceof Error ? error.message : 'Failed to get providers' }, diff --git a/src/components/settings/ProviderManager.tsx b/src/components/settings/ProviderManager.tsx index 2706b80..7fece29 100644 --- a/src/components/settings/ProviderManager.tsx +++ b/src/components/settings/ProviderManager.tsx @@ -45,6 +45,7 @@ export function ProviderManager() { const [providers, setProviders] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); + const [envDetected, setEnvDetected] = useState>({}); // Form dialog state const [formOpen, setFormOpen] = useState(false); @@ -68,6 +69,7 @@ export function ProviderManager() { } const data = await res.json(); setProviders(data.providers || []); + setEnvDetected(data.env_detected || {}); } catch (err) { setError(err instanceof Error ? err.message : "Failed to load providers"); } finally { @@ -222,6 +224,27 @@ export function ProviderManager() { )} + {/* Environment variable detection banner */} + {!loading && Object.keys(envDetected).length > 0 && ( +
+

+ Environment variables detected +

+
+ {Object.entries(envDetected).map(([key, value]) => ( +

+ {key}={value} +

+ ))} +
+ {!providers.some(p => p.is_active === 1) && ( +

+ These will be used automatically when no provider is active. +

+ )} +
+ )} + {/* Loading */} {loading && (
@@ -237,7 +260,9 @@ export function ProviderManager() {

No providers configured

- Add a provider to use a custom API endpoint with Claude Code. + {Object.keys(envDetected).length > 0 + ? "Using environment variables. Add a provider below to override." + : "Add a provider to use a custom API endpoint with Claude Code."}

{/* Quick preset buttons */}