feat(ai): Paperclip-style env-var provider presets + zero-config local default
Two product decisions from tonight: 1. Public AI providers can now be published by an admin as named presets (lib/ai/types.ts's PublicAiPreset: name/baseUrl/model/apiKeyEnvVar). The admin names an env var, never a secret value - the actual key is whatever ops has set in the server's real environment, same custody model as the existing AI_SERVER_BASE_URL var. A new server route (app/api/ai/public/chat) resolves it and makes the call itself, which also sidesteps the CORS/wrong-base-URL failure class chatPublic hit earlier tonight. Users pick a preset from a dropdown in Settings - Answer with - no key field at all; personal BYOK (paste your own key) stays available as a secondary "Add your own key" option, not removed. Admin UI: new "Public - org-managed presets" card in the AI policy tab. 2. AI now defaults ON instead of requiring setup (lib/ai/auto-provision.ts): on first load, if no provider is chosen yet, probe OpenCode (this app auto-spawns `opencode serve` itself, so it's the one local option with zero external install step) then Ollama via the existing auto-discovery, and adopt whichever answers. Never overrides an explicit choice - only fires while provider is still null. Wired into both AI entry points (the Ask button and the Settings pane) so it resolves before either renders its "not configured" state. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Bernd Rodler
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
1aa0a4686b
commit
f121678e2a
@@ -1,8 +1,8 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Save, Loader2, X, ArrowRight } from 'lucide-react';
|
||||
import type { AiConsoleConfig, AiClass } from '@/lib/ai/types';
|
||||
import { Save, Loader2, X, ArrowRight, Plus, Trash2 } from 'lucide-react';
|
||||
import type { AiConsoleConfig, AiClass, PublicAiPreset } from '@/lib/ai/types';
|
||||
import { DEFAULT_AI_CONSOLE_CONFIG } from '@/lib/ai/types';
|
||||
import type { AiEntitlementState, MeteringEntry } from '@/lib/ai/entitlement';
|
||||
import { apiFetch } from '@/lib/browser-navigation';
|
||||
@@ -73,6 +73,85 @@ function AllowlistEditor({
|
||||
);
|
||||
}
|
||||
|
||||
function newPresetId(): string {
|
||||
return `preset-${Math.random().toString(36).slice(2, 10)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* The Paperclip-style env-var-key picker (decision 2026-08-07): an admin
|
||||
* names a preset and an env var; the actual secret value is never entered
|
||||
* here — it's whatever ops has set in the server's real environment. This is
|
||||
* what lets a user in Settings pick a provider from a dropdown instead of
|
||||
* pasting a key.
|
||||
*/
|
||||
function PublicPresetsEditor({
|
||||
presets, onChange,
|
||||
}: { presets: PublicAiPreset[]; onChange: (next: PublicAiPreset[]) => void }) {
|
||||
const [name, setName] = useState('');
|
||||
const [baseUrl, setBaseUrl] = useState('https://api.deepseek.com');
|
||||
const [model, setModel] = useState('');
|
||||
const [envVar, setEnvVar] = useState('');
|
||||
|
||||
const canAdd = name.trim() && baseUrl.trim() && model.trim() && envVar.trim();
|
||||
|
||||
function addPreset() {
|
||||
if (!canAdd) return;
|
||||
onChange([...presets, { id: newPresetId(), name: name.trim(), baseUrl: baseUrl.trim(), model: model.trim(), apiKeyEnvVar: envVar.trim() }]);
|
||||
setName('');
|
||||
setBaseUrl('https://api.deepseek.com');
|
||||
setModel('');
|
||||
setEnvVar('');
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{presets.length > 0 && (
|
||||
<div className="divide-y divide-border">
|
||||
{presets.map((p) => (
|
||||
<div key={p.id} className="px-4 py-2.5 flex items-center justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<span className="text-sm font-medium">{p.name}</span>
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
{p.model} · {p.baseUrl} · reads <code className="text-[11px]">{p.apiKeyEnvVar}</code>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => onChange(presets.filter((x) => x.id !== p.id))}
|
||||
className="shrink-0 text-muted-foreground hover:text-destructive"
|
||||
aria-label={`Remove ${p.name}`}
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="px-4 py-3 flex flex-col gap-2 border-t border-border">
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<input value={name} onChange={(e) => setName(e.target.value)} placeholder="Name, e.g. DeepSeek (org)"
|
||||
className="flex-1 min-w-[160px] h-8 rounded border border-input bg-background px-2.5 text-xs" />
|
||||
<input value={model} onChange={(e) => setModel(e.target.value)} placeholder="Model, e.g. deepseek-chat"
|
||||
className="flex-1 min-w-[160px] h-8 rounded border border-input bg-background px-2.5 text-xs" />
|
||||
</div>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<input value={baseUrl} onChange={(e) => setBaseUrl(e.target.value)} placeholder="API base URL"
|
||||
className="flex-1 min-w-[200px] h-8 rounded border border-input bg-background px-2.5 text-xs" />
|
||||
<input value={envVar} onChange={(e) => setEnvVar(e.target.value)} placeholder="Env var, e.g. DEEPSEEK_API_KEY"
|
||||
className="flex-1 min-w-[200px] h-8 rounded border border-input bg-background px-2.5 text-xs" />
|
||||
<button onClick={addPreset} disabled={!canAdd}
|
||||
className="h-8 px-3 rounded border border-border bg-muted text-xs font-medium hover:bg-muted/70 disabled:opacity-50 inline-flex items-center gap-1.5">
|
||||
<Plus className="w-3 h-3" /> Add
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Only the env var <em>name</em> is stored here — provision the actual key as a real environment variable on
|
||||
the server (k8s secret, .env, Electron packaging). This app never sees or stores the value.
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function AiPolicyTab() {
|
||||
const setActiveTab = useAdminTabStore((s) => s.setActiveTab);
|
||||
const [config, setConfig] = useState<AiConsoleConfig>({ ...DEFAULT_AI_CONSOLE_CONFIG });
|
||||
@@ -247,6 +326,17 @@ export function AiPolicyTab() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="border border-border rounded-lg">
|
||||
<div className="px-4 py-3 border-b border-border bg-muted/30">
|
||||
<h2 className="text-sm font-medium text-foreground">Public — org-managed presets</h2>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
Paperclip-style: publish a provider by name instead of making every user paste their own key. Users pick
|
||||
one of these in Settings with no key field at all — the server resolves the named env var at request time.
|
||||
</p>
|
||||
</div>
|
||||
<PublicPresetsEditor presets={config.publicPresets} onChange={(v) => update({ publicPresets: v })} />
|
||||
</div>
|
||||
|
||||
<div className="border border-border rounded-lg">
|
||||
<div className="px-4 py-3 border-b border-border bg-muted/30">
|
||||
<h2 className="text-sm font-medium text-foreground">Entitlement & seats</h2>
|
||||
|
||||
@@ -48,6 +48,24 @@ function validate(body: Partial<AiConsoleConfig>): string | null {
|
||||
return 'publicProviderAllowlist must be an array of strings or null';
|
||||
}
|
||||
}
|
||||
if (body.publicPresets !== undefined) {
|
||||
if (!Array.isArray(body.publicPresets)) return 'publicPresets must be an array';
|
||||
const ids = new Set<string>();
|
||||
for (const preset of body.publicPresets) {
|
||||
if (
|
||||
typeof preset !== 'object' || preset === null ||
|
||||
typeof preset.id !== 'string' || !preset.id ||
|
||||
typeof preset.name !== 'string' || !preset.name ||
|
||||
typeof preset.baseUrl !== 'string' || !preset.baseUrl ||
|
||||
typeof preset.model !== 'string' || !preset.model ||
|
||||
typeof preset.apiKeyEnvVar !== 'string' || !preset.apiKeyEnvVar
|
||||
) {
|
||||
return 'each publicPresets entry needs non-empty id, name, baseUrl, model, apiKeyEnvVar';
|
||||
}
|
||||
if (ids.has(preset.id)) return `duplicate publicPresets id "${preset.id}"`;
|
||||
ids.add(preset.id);
|
||||
}
|
||||
}
|
||||
if (body.retrievalEnabled !== undefined && typeof body.retrievalEnabled !== 'boolean') {
|
||||
return 'retrievalEnabled must be a boolean';
|
||||
}
|
||||
@@ -83,6 +101,7 @@ export async function PUT(request: NextRequest) {
|
||||
consentVersion: next.consent?.version ?? null,
|
||||
serverModelAllowlistCount: next.serverModelAllowlist?.length ?? null,
|
||||
publicProviderAllowlistCount: next.publicProviderAllowlist?.length ?? null,
|
||||
publicPresetsCount: next.publicPresets.length,
|
||||
}, ip);
|
||||
return NextResponse.json(next);
|
||||
} catch (error) {
|
||||
|
||||
@@ -43,6 +43,11 @@ export async function GET() {
|
||||
retrievalEnabled: consoleConfig.retrievalEnabled,
|
||||
consent: consoleConfig.consent,
|
||||
publicProviderAllowlist: consoleConfig.publicProviderAllowlist,
|
||||
// Sanitized: {id,name,model} only. baseUrl/apiKeyEnvVar stay server-side —
|
||||
// the client only ever refers to a preset by id (app/api/ai/public/chat
|
||||
// resolves the rest), so there's no reason to hand a browser tab even
|
||||
// an internal env var *name*, let alone a provider base URL.
|
||||
publicPresets: consoleConfig.publicPresets.map((p) => ({ id: p.id, name: p.name, model: p.model })),
|
||||
};
|
||||
|
||||
return NextResponse.json(aiPolicy, {
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { getStalwartCredentials } from '@/lib/stalwart/credentials';
|
||||
import { configManager } from '@/lib/admin/config-manager';
|
||||
import { logger } from '@/lib/logger';
|
||||
|
||||
export const runtime = 'nodejs';
|
||||
|
||||
const MAX_BODY_BYTES = 200 * 1024;
|
||||
|
||||
interface ChatMessage {
|
||||
role: 'system' | 'user' | 'assistant';
|
||||
content: string;
|
||||
}
|
||||
|
||||
interface OpenAiChatResponse {
|
||||
choices?: Array<{ message?: { content?: string } }>;
|
||||
}
|
||||
|
||||
/**
|
||||
* POST /api/ai/public/chat — the Paperclip-style, admin-managed alternative
|
||||
* to the personal-key `chatPublic` path (lib/ai/local-client.ts): the client
|
||||
* sends a `presetId`, never a key. The preset (name/baseUrl/model/
|
||||
* apiKeyEnvVar) lives in admin config (lib/ai/types.ts's PublicAiPreset);
|
||||
* the actual secret value is read from THIS PROCESS's real environment at
|
||||
* request time and never leaves this route — same custody model as
|
||||
* AI_SERVER_BASE_URL, just admin-nameable per preset instead of one fixed var.
|
||||
*
|
||||
* Deliberately NOT entitlement-metered, same reasoning as `local`/`opencode`
|
||||
* (lib/ai/entitlement.ts's header): this is still the `public` class, just
|
||||
* with the org supplying the key instead of the user — no centrally-borne
|
||||
* inference cost this app is billing for.
|
||||
*/
|
||||
export async function POST(request: NextRequest) {
|
||||
const auth = await getStalwartCredentials(request);
|
||||
if (!auth) {
|
||||
return NextResponse.json({ error: 'not authenticated' }, { status: 401 });
|
||||
}
|
||||
|
||||
await configManager.ensureLoaded();
|
||||
const consoleConfig = configManager.getAiConsoleConfig();
|
||||
if (consoleConfig.classesEnabled.public === false) {
|
||||
return NextResponse.json({ error: 'the Public AI class is disabled by admin policy' }, { status: 403 });
|
||||
}
|
||||
|
||||
const rawBody = await request.text();
|
||||
if (rawBody.length > MAX_BODY_BYTES) {
|
||||
return NextResponse.json({ error: 'request too large' }, { status: 413 });
|
||||
}
|
||||
|
||||
let body: { presetId?: unknown; messages?: unknown };
|
||||
try {
|
||||
body = JSON.parse(rawBody);
|
||||
} catch {
|
||||
return NextResponse.json({ error: 'invalid JSON body' }, { status: 400 });
|
||||
}
|
||||
|
||||
const presetId = typeof body.presetId === 'string' ? body.presetId : '';
|
||||
const messages = Array.isArray(body.messages) ? (body.messages as ChatMessage[]) : null;
|
||||
if (!presetId || !messages || messages.length === 0) {
|
||||
return NextResponse.json({ error: 'presetId and messages are required' }, { status: 400 });
|
||||
}
|
||||
|
||||
const preset = consoleConfig.publicPresets.find((p) => p.id === presetId);
|
||||
if (!preset) {
|
||||
return NextResponse.json({ error: `No such preset "${presetId}" — it may have been removed by an admin.` }, { status: 404 });
|
||||
}
|
||||
|
||||
const apiKey = process.env[preset.apiKeyEnvVar];
|
||||
if (!apiKey) {
|
||||
return NextResponse.json(
|
||||
{ error: `Env var "${preset.apiKeyEnvVar}" is not set on the server for preset "${preset.name}" — ask an admin to provision it.` },
|
||||
{ status: 503 },
|
||||
);
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch(`${preset.baseUrl.replace(/\/+$/, '')}/chat/completions`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${apiKey}` },
|
||||
body: JSON.stringify({ model: preset.model, messages }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
return NextResponse.json({ error: `Provider returned ${res.status}` }, { status: 502 });
|
||||
}
|
||||
const data = (await res.json()) as OpenAiChatResponse;
|
||||
const content = data.choices?.[0]?.message?.content;
|
||||
if (!content) {
|
||||
return NextResponse.json({ error: 'Provider returned no message content' }, { status: 502 });
|
||||
}
|
||||
return NextResponse.json({ answer: content });
|
||||
} catch (cause) {
|
||||
logger.error('public ai preset chat failed', {
|
||||
presetId, error: cause instanceof Error ? cause.message : String(cause),
|
||||
});
|
||||
return NextResponse.json({ error: `Could not reach ${preset.baseUrl}` }, { status: 502 });
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user