Server-side AI without leaking keys

Problem

A portfolio assistant needs an LLM, but putting the API key in the browser would expose it to every visitor.

Approach

Route chat through a Next.js Route Handler. The browser only sees a streaming text response. Groq is called with a server env key. Input length and rate limits reduce abuse cost.

Code

// POST /api/assistant (server)
const upstream = await streamChatCompletion(messages);
return new Response(textStream, {
  headers: { "Content-Type": "text/plain; charset=utf-8" },
});

Result

Implemented on this portfolio: streaming assistant at /assistant with GROQ_API_KEY server-only.

What I learned

Grounding + hard system prompts matter as much as the provider. Without a knowledge base, the model invents experience.