Building Production-Grade AI Features in Next.js 16

import { openai } from '@ai-sdk/openai';
import { streamText, type CoreMessage } from 'ai';
import { NextRequest } from 'next/server';
import { checkRateLimit } from '@/lib/rate-limit';
import { checkBudget, trackCost, estimateCost } from '@/lib/cost-tracker';

// Vercel 2026 limits: Hobby 10s/60s max, Pro 15s/300s max, Edge 25s
export const runtime = 'nodejs';
export const maxDuration = 60;
export const dynamic = 'force-dynamic';

export async function POST(req: NextRequest) {
  const { messages }: { messages: CoreMessage[] } = await req.json();

  if (!messages?.length) {
    return Response.json({ error: 'messages required' }, { status: 400 });
  }

  const userId = req.headers.get('x-user-id') ?? 'anonymous';

  // Budget check BEFORE calling provider
  const budget = await checkBudget(userId);
  if (!budget.allowed) {
    return Response.json({ error: budget.reason }, { status: 402 });
  }

  const rateLimit = await checkRateLimit(userId);
  if (!rateLimit.allowed) {
    return Response.json(
      { error: 'Rate limit exceeded', retryAfter: rateLimit.retryAfter },
      { status: 429, headers: { 'Retry-After': String(rateLimit.retryAfter) } }
    );
  }

  // Pre-flight cost estimation
  const estPromptTokens = Math.ceil(JSON.stringify(messages).length / 4);
  if (estimateCost('gpt-4o', estPromptTokens, 2048) > 0.05) {
    return Response.json({ error: 'Request exceeds cost cap' }, { status: 402 });
  }

  const result = streamText({
    model: openai('gpt-4o'),
    messages,
    maxTokens: 2048,
    temperature: 0.7,
    onFinish: async (event) => {
      await trackCost({
        userId,
        model: 'gpt-4o',
        promptTokens: event.usage?.promptTokens ?? 0,
        completionTokens: event.usage?.completionTokens ?? 0,
      });
    },
  });

  return result.toDataStreamResponse();
}

'use client';

import { useChat } from '@ai-sdk/react';
import { useState } from 'react';

export function ChatInterface() {
  const [status, setStatus] = useState<'connected'|'reconnecting'|'disconnected'>('connected');
  const { messages, input, handleInputChange, handleSubmit, isLoading, error, reload, stop } = useChat({
    api: '/api/chat',
    onError: (err) => {
      if (err.message.includes('timeout')) {
        setStatus('reconnecting');
        setTimeout(() => reload(), 2000);
      } else {
        setStatus('disconnected');
      }
    },
    onFinish: () => setStatus('connected'),
  });

  return (
    <div className="flex flex-col h-full">
      {status !== 'connected' && (
        <div className="bg-yellow-500/10 px-4 py-2 text-sm">{status}...</div>
      )}
      <div className="flex-1 overflow-y-auto p-4">
        {messages.map(m => <div key={m.id}>{m.content}</div>)}
        {isLoading && <div className="animate-pulse">Thinking...</div>}
      </div>
      {error && <button onClick={() => reload()}>Retry</button>}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} disabled={isLoading} />
        <button type="submit">Send</button>
        {isLoading && <button type="button" onClick={stop}>Stop</button>}
      </form>
    </div>
  );
}

export type ErrorCategory = 'retryable' | 'user_actionable' | 'permanent';

export function classifyAIError(error: any) {
  const status = error.statusCode ?? error.cause?.statusCode ?? 500;
  const code = error.cause?.error?.code ?? '';
  const retryAfter = Number(error.responseHeaders?.['retry-after']) || 60;

  if (status === 429) return { category: 'retryable', retryAfter, userMessage: 'Busy, retrying...' };
  if (code === 'content_policy_violation') return { category: 'user_actionable', userMessage: 'Blocked by safety filter' };
  if (status >= 500) return { category: 'retryable', retryAfter: 5, userMessage: 'Server error, retrying' };
  return { category: 'permanent', userMessage: 'Configuration error' };
}

import { Redis } from '@upstash/redis';
const redis = new Redis({ url: process.env.UPSTASH_REDIS_REST_URL!, token: process.env.UPSTASH_REDIS_REST_TOKEN! });

const PRICING = { 'gpt-4o': { p: 0.0025/1000, c: 0.01/1000 }, 'gpt-4o-mini': { p: 0.00015/1000, c: 0.0006/1000 } };
const USER_BUDGET = 5; const GLOBAL_BUDGET = 50;
const today = () => new Date().toISOString().split('T')[0];

export async function trackCost({userId, model, promptTokens, completionTokens}: any) {
  const price = PRICING[model as keyof typeof PRICING] ?? {p:0.01/1000,c:0.03/1000};
  const cost = promptTokens*price.p + completionTokens*price.c;
  await redis.incrbyfloat(`ai:cost:user:${userId}:${today()}`, cost);
  await redis.incrbyfloat(`ai:cost:global:${today()}`, cost);
}

export async function checkBudget(userId: string) {
  const user = Number(await redis.get(`ai:cost:user:${userId}:${today()}`) || 0);
  const global = Number(await redis.get(`ai:cost:global:${today()}`) || 0);
  if (global >= GLOBAL_BUDGET) return { allowed: false, reason: `Daily budget $${GLOBAL_BUDGET} exceeded` };
  if (user >= USER_BUDGET) return { allowed: false, reason: `User budget $${USER_BUDGET} reached` };
  return { allowed: true };
}

export const estimateCost = (m:string, p:number, c:number) => {
  const price = PRICING[m as keyof typeof PRICING] ?? {p:0.01/1000,c:0.03/1000};
  return p*price.p + c*price.c;
}

import { Ratelimit } from '@upstash/ratelimit';
import { Redis } from '@upstash/redis';
const redis = new Redis({ url: process.env.UPSTASH_REDIS_REST_URL!, token: process.env.UPSTASH_REDIS_REST_TOKEN! });
export const chatLimiter = new Ratelimit({ redis, limiter: Ratelimit.slidingWindow(10, '1 m') });
export const checkRateLimit = async (id:string) => {
  const r = await chatLimiter.limit(id);
  return { allowed: r.success, retryAfter: Math.ceil((r.reset - Date.now())/1000) };
};

import { streamText, tool } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';
export const maxDuration = 60;

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: openai('gpt-4o'),
    messages,
    maxSteps: 5,
    tools: {
      search: tool({
        description: 'Search KB',
        parameters: z.object({ query: z.string().max(500) }),
        execute: async ({ query }) => {
          const timeout = new Promise((_,r)=>setTimeout(()=>r('timeout'),5000));
          try { return await Promise.race([searchDB(query), timeout]); }
          catch { return { error: 'timeout' }; }
        }
      })
    }
  });
  return result.toDataStreamResponse();
}
async function searchDB(q:string){ return [] }

import { openai } from '@ai-sdk/openai';
import { anthropic } from '@ai-sdk/anthropic';
import { streamText } from 'ai';

export async function streamWithFallback(messages:any, complexity:'simple'|'standard'|'complex'='standard'){
  const config = {
    simple: { primary: openai('gpt-4o-mini'), fallback: anthropic('claude-3-5-haiku-20241022'), max:1024 },
    standard: { primary: openai('gpt-4o'), fallback: anthropic('claude-3-5-sonnet-20241022'), max:2048 },
    complex: { primary: anthropic('claude-3-5-sonnet-20241022'), fallback: openai('gpt-4o'), max:4096 }
  }[complexity];
  try {
    return streamText({ model: config.primary, messages, maxTokens: config.max });
  } catch(e:any){
    const status = e.statusCode ?? 500;
    const retryAfter = Number(e.responseHeaders?.['retry-after']) || 60;
    if(status===429 || status>=500){
      await new Promise(r=>setTimeout(r, Math.min(retryAfter,5)*1000));
      return streamText({ model: config.fallback, messages, maxTokens: config.max });
    }
    throw e;
  }
}

import { describe, it, expect, vi } from 'vitest';
vi.mock('ai', () => ({ streamText: vi.fn(() => ({ toDataStreamResponse: () => new Response('ok') })) }));
import { POST } from '@/app/api/chat/route';

describe('chat', () => {
  it('rejects empty', async () => {
    const r = await POST(new Request('http://test', {method:'POST', body: JSON.stringify({messages:[]})}) as any);
    expect(r.status).toBe(400);
  });
});