58 lines
2.6 KiB
TypeScript
58 lines
2.6 KiB
TypeScript
// app/(app)/providers/page.tsx
|
|
import { Cloud, CheckCircle, XCircle, AlertCircle } from 'lucide-react'
|
|
|
|
const PROVIDERS = [
|
|
{ id: 'ollama', name: 'Ollama', icon: '🦙', color: '#4A9EFF', endpoint: 'http://localhost:11434' },
|
|
{ id: 'openai', name: 'OpenAI', icon: '🤖', color: '#10A37F', endpoint: 'https://api.openai.com/v1' },
|
|
{ id: 'anthropic', name: 'Anthropic', icon: '🔷', color: '#8B5CF6', endpoint: 'https://api.anthropic.com' },
|
|
{ id: 'gemini', name: 'Gemini', icon: '✨', color: '#F5A623', endpoint: 'https://generativelanguage.googleapis.com' },
|
|
{ id: 'deepseek', name: 'DeepSeek', icon: '🌊', color: '#FF1D6C', endpoint: 'https://api.deepseek.com' },
|
|
{ id: 'groq', name: 'Groq', icon: '⚡', color: '#F97316', endpoint: 'https://api.groq.com/openai' },
|
|
{ id: 'mistral', name: 'Mistral', icon: '🌫️', color: '#6366F1', endpoint: 'https://api.mistral.ai' },
|
|
]
|
|
|
|
async function getGatewayProviders() {
|
|
try {
|
|
const res = await fetch('http://127.0.0.1:8787/v1/providers', { next: { revalidate: 30 } })
|
|
if (!res.ok) return null
|
|
return await res.json()
|
|
} catch { return null }
|
|
}
|
|
|
|
export default async function ProvidersPage() {
|
|
const data = await getGatewayProviders()
|
|
return (
|
|
<div className="p-8 max-w-5xl">
|
|
<h1 className="text-3xl font-bold mb-2">AI Providers</h1>
|
|
<p className="text-muted-foreground mb-8">
|
|
7 providers connected through the BlackRoad tokenless gateway
|
|
</p>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{PROVIDERS.map(p => (
|
|
<div key={p.id} className="rounded-xl border p-5 flex flex-col gap-3">
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-3xl">{p.icon}</span>
|
|
<div>
|
|
<div className="font-semibold text-lg">{p.name}</div>
|
|
<div className="text-xs text-muted-foreground font-mono">{p.id}</div>
|
|
</div>
|
|
</div>
|
|
<div className="text-xs text-muted-foreground font-mono truncate">{p.endpoint}</div>
|
|
{data && (
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<CheckCircle className="w-3 h-3 text-green-500" />
|
|
<span className="text-green-600">Registered in gateway</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
{!data && (
|
|
<p className="mt-4 text-sm text-muted-foreground">
|
|
💡 Start the gateway to see live provider status: <code className="font-mono text-xs">br gateway start</code>
|
|
</p>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|