AI Integration Patterns for Web Developers: A Practical Guide

After building several AI-powered tools — a chat playground, sentiment analyzer, prompt library, and recommendation engine — I've identified patterns that work and pitfalls to avoid.

Pattern 1: Streaming Responses

Users hate waiting. Always stream AI responses to the UI.

const response = await fetch('/api/chat', {
  method: 'POST',
  body: JSON.stringify({ messages, model }),
});

const reader = response.body!.getReader();
const decoder = new TextDecoder();

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  appendToUI(decoder.decode(value));
}

Pattern 2: Structured Output

Don't parse raw text. Use structured output formats (JSON mode, function calling) to get reliable, typed responses.

const result = await generateObject({
  model: openai('gpt-4o'),
  schema: z.object({
    sentiment: z.enum(['positive', 'negative', 'neutral']),
    confidence: z.number(),
    keywords: z.array(z.string()),
  }),
  prompt: `Analyze: "${userInput}"`,
});

Pattern 3: Prompt Caching

Cache common prompts and their responses. Many AI providers offer prompt caching that reduces latency and cost by 50-90%.

Pattern 4: Fallback Chains

AI services go down. Build fallback chains:

Primary model (GPT-4o)
Secondary model (Claude)
Cached response
Graceful degradation message

Pattern 5: Cost Controls

Set hard limits on token usage per request and per user. Nothing kills a side project faster than an unexpected AI bill.

Real-World Example: Sentiment Analyzer

My sentiment analyzer combines patterns 1-5:

Streams analysis results as they're generated
Uses structured output for consistent sentiment scores
Caches common text analyses
Falls back to a local model if the API is down
Enforces per-user daily limits

Tools I Recommend

Vercel AI SDK — Best TypeScript AI integration library
OpenRouter — Access multiple models through one API
LangSmith — Debug and monitor AI pipelines
Helicone — AI-specific observability

The Golden Rule

AI should amplify user capability, not replace it. The best AI features make users feel more powerful, not dependent.

Start small. Pick one pattern, apply it to a real project, and iterate. The AI landscape moves fast, but solid engineering patterns endure.