Building Smart Web Applications with AI
Connecting Large Language Models (LLMs) to custom web applications has become a standard requirement for modern SaaS platforms. However, poor integration can result in slow page loads, high token costs, and security issues. Here are the best practices.
---
1. Securing Your API Keys
Never request LLM APIs directly from the browser frontend. This exposes your keys and allows anyone to hijack your account. Always route requests through a secure server endpoint:
``typescript
// Server-side route (e.g. Next.js Route Handler)
import { NextRequest, NextResponse } from 'next/server';
export async function POST(req: NextRequest) {
const { prompt } = await req.json();
const res = await fetch('https://api.openai.com/v1/chat/completions', {
method: 'POST',
headers: {
'Authorization': Bearer ${process.env.OPENAI_API_KEY},``
'Content-Type': 'application/json'
},
body: JSON.stringify({ model: 'gpt-4', messages: [{ role: 'user', content: prompt }] })
});
return NextResponse.json(await res.json());
}
---
2. Implementing Streaming Responses
LLM APIs can take seconds to complete requests. To keep interfaces feeling fast, use Streaming Responses to render text on the screen word-by-word as it is generated, instead of waiting for the full payload.
Using these patterns keeps your AI integrations secure, fast, and highly interactive.