Adding AI Features to Your App
Go beyond building WITH AI to building AI INTO your product: calling model APIs from your backend, streaming responses, controlling costs, and using open models from Hugging Face.
Key takeaways
- Model calls go through your backend — never expose API keys to the browser
- Start with the cheapest model that works; upgrade only when quality demands it
- Stream responses so users see progress instead of a spinner
- Set spending limits before launch, not after the surprise bill
The shape of every AI feature
Chatbots, summarizers, image describers, smart search — under the hood they're all the same three steps: your server receives user input, sends it to a model API with instructions (the system prompt), and returns the result. Your agent can scaffold this in minutes. The design work is deciding what instructions, what model, and what to do when output is wrong — because sometimes it will be.
Keys stay server-side, always
AI API keys are money. A key shipped in frontend code will be extracted and abused — automated scanners find them within hours. The pattern that keeps you safe: the browser calls your own API route, your server (where the key lives in an environment variable) calls the model provider, and your server enforces who can call it and how often.
import Anthropic from "@anthropic-ai/sdk";
const anthropic = new Anthropic(); // reads ANTHROPIC_API_KEY env var
export async function POST(req: Request) {
const { question } = await req.json();
const msg = await anthropic.messages.create({
model: "claude-sonnet-5",
max_tokens: 1024,
messages: [{ role: "user", content: question }],
});
return Response.json({ answer: msg.content });
}Pick models by job, not by hype
Providers ship model families at different price points: small fast models (great for classification, extraction, autocomplete), mid-tier models (most chat and summarization), and frontier models (complex reasoning and coding). Costs differ by 10–50x between tiers. Start every feature on the cheapest tier and move up only when you can point at outputs that aren't good enough — most features are surprisingly happy on small models.
Open models and Hugging Face
Hugging Face hosts hundreds of thousands of open models you can run without per-token API pricing — via its Inference Providers, dedicated endpoints, or your own GPU. Open-weight models are the budget play for high-volume, well-defined tasks (embeddings, moderation, transcription) and the only play when data can't leave your infrastructure. Browsing trending models and Spaces is also the fastest way to see what's newly possible — demos usually appear there first.
Costs, limits, and not going viral into bankruptcy
Per-token pricing means your bill scales with usage — including malicious usage. Before launch: set a monthly spending cap in your provider's console, rate-limit your AI endpoints per user, cap input length (someone will paste a novel), and log usage per user so you can spot abuse. Caching identical requests and trimming bloated prompts routinely cuts bills in half.