Building with AI: Phase 02 — AI Integration

My product: [describe in 2-3 sentences]

My AI feature specifically does: [e.g. "generates product descriptions from a title and 5 bullet points"]

My requirements:
- Expected calls per day: [number]
- Max acceptable latency: [e.g. "2 seconds"]
- Budget per 1,000 AI calls: [$X]
- Input size: [e.g. "~500 tokens per call"]
- Output size: [e.g. "~300 tokens per call"]

Compare Anthropic Claude Haiku, OpenAI gpt-4o-mini, and Gemini Flash for this use case.
Show a cost estimate per 1,000 calls for each. Recommend one with a clear reason.

# AI Provider Keys - server-side only, never NEXT_PUBLIC_
ANTHROPIC_API_KEY=sk-ant-...
OPENAI_API_KEY=sk-...

# Model config - change without code deploy
AI_MODEL=claude-haiku-4-5-20251001
AI_MAX_TOKENS=1024

# Rate limiting
AI_RATE_LIMIT_PER_USER_PER_HOUR=20

// Centralised prompt registry - all prompts live here, not scattered in routes
export const prompts = {
  productDescription: (ctx: {
    productName: string
    bulletPoints: string[]
    tone: 'professional' | 'playful' | 'luxury'
  }) => `You are a product copywriter specialising in e-commerce listings.
Tone: ${ctx.tone}. Output format: 2-3 sentences, no bullet points, no markdown.
Hard limit: 80 words. Never invent specifications not in the bullet points.`,

  documentSummary: (ctx: { maxWords: number; audience: string }) =>
    `You are a document analyst.
Summarise the provided document in plain language for ${ctx.audience}.
Maximum ${ctx.maxWords} words. Use present tense. Output only the summary - no preamble.`,

  chatAssistant: (ctx: { userName: string; planTier: string }) =>
    `You are a helpful assistant for [Product Name].
The user's name is ${ctx.userName} and they are on the ${ctx.planTier} plan.
Answer concisely. If you don't know something, say so - never fabricate.
Never discuss competitors. Escalate billing questions to support@example.com.`,
}

I need a system prompt for an AI feature in my app.

Feature description: [what the AI does in one sentence]
Output format: [e.g. JSON, plain text, markdown, specific structure]
Tone: [e.g. professional, friendly, concise]
Hard constraints: [things the AI must never do]
User context available: [e.g. user's name, subscription tier, document they uploaded]

Write a system prompt following this structure:
1. Role definition (one sentence)
2. Behaviour rules (bullet list)
3. Output format specification (exact format with example)
4. Hard constraints (things it must never do)

Keep it under 200 words. Be specific, not vague.

import Anthropic from '@anthropic-ai/sdk'
import { NextRequest } from 'next/server'
import { prompts } from '@/lib/prompts'
import { rateLimit } from '@/lib/rate-limit'
import { getServerSession } from 'next-auth'

const client = new Anthropic()

export async function POST(req: NextRequest) {
  const session = await getServerSession()
  if (!session) return new Response('Unauthorized', { status: 401 })

  const limited = await rateLimit(session.user.id)
  if (limited) return new Response('Rate limit exceeded', { status: 429 })

  const { userMessage } = await req.json()
  if (!userMessage || typeof userMessage !== 'string') {
    return new Response('Invalid input', { status: 400 })
  }

  const systemPrompt = prompts.chatAssistant({
    userName: session.user.name,
    planTier: session.user.plan,
  })

  const stream = new ReadableStream({
    async start(controller) {
      try {
        const response = await client.messages.stream({
          model: process.env.AI_MODEL!,
          max_tokens: parseInt(process.env.AI_MAX_TOKENS || '1024'),
          system: systemPrompt,
          messages: [{ role: 'user', content: userMessage }],
        })

        for await (const chunk of response) {
          if (chunk.type === 'content_block_delta' && chunk.delta.type === 'text_delta') {
            controller.enqueue(new TextEncoder().encode(chunk.delta.text))
          }
        }
        controller.close()
      } catch (error) {
        controller.error(error)
      }
    },
  })

  return new Response(stream, {
    headers: {
      'Content-Type': 'text/plain; charset=utf-8',
      'Transfer-Encoding': 'chunked',
      'X-Content-Type-Options': 'nosniff',
    },
  })
}

'use client'
import { useState } from 'react'

export function useAIStream() {
  const [output, setOutput] = useState('')
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const generate = async (userMessage: string) => {
    setOutput('')
    setLoading(true)
    setError(null)

    try {
      const res = await fetch('/api/ai/generate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ userMessage }),
      })

      if (!res.ok) throw new Error(await res.text())

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

      while (true) {
        const { done, value } = await reader.read()
        if (done) break
        setOutput(prev => prev + decoder.decode(value, { stream: true }))
      }
    } catch (err) {
      setError('Something went wrong. Please try again.')
    } finally {
      setLoading(false)
    }
  }

  return { output, loading, error, generate }
}

export function classifyAIError(error: unknown): {
  userMessage: string
  shouldRetry: boolean
  retryAfterMs: number
} {
  if (error instanceof Anthropic.APIError) {
    switch (error.status) {
      case 429:
        return {
          userMessage: 'Our AI is busy right now. Retrying...',
          shouldRetry: true,
          retryAfterMs: parseInt(error.headers?.['retry-after'] || '2') * 1000,
        }
      case 529:
        return {
          userMessage: 'High demand right now. Please try again in a moment.',
          shouldRetry: true,
          retryAfterMs: 5000,
        }
      default:
        return {
          userMessage: 'Something went wrong with the AI. Please try again.',
          shouldRetry: false,
          retryAfterMs: 0,
        }
    }
  }
  return {
    userMessage: 'An unexpected error occurred. Please try again.',
    shouldRetry: false,
    retryAfterMs: 0,
  }
}

interface AICallLog {
  userId: string
  feature: string
  model: string
  inputTokens: number
  outputTokens: number
  durationMs: number
  success: boolean
  errorCode?: string
}

export async function logAICall(log: AICallLog) {
  await db.aiUsage.create({ data: { ...log, timestamp: new Date() } })

  const totalTokens = log.inputTokens + log.outputTokens
  if (totalTokens > 4000) {
    console.warn(`High token usage: ${totalTokens} tokens for user ${log.userId}`)
  }
}

export function estimateCostUSD(model: string, input: number, output: number): number {
  const rates: Record<string, { in: number; out: number }> = {
    'claude-haiku-4-5-20251001': { in: 0.80, out: 4.00 },
    'claude-sonnet-4-5': { in: 3.00, out: 15.00 },
    'gpt-4o-mini': { in: 0.15, out: 0.60 },
  }
  const r = rates[model] || { in: 0, out: 0 }
  return (input * r.in + output * r.out) / 1_000_000
}

Here is my AI feature's system prompt and API route code:

[SYSTEM PROMPT]
---
[paste your system prompt]
---

[API ROUTE CODE]
---
[paste your route.ts]
---

Act as a security engineer. Identify:
1. Prompt injection vectors - how could a user override my system prompt?
2. Data leakage risks - what sensitive data could appear in outputs?
3. Cost abuse vectors - how could a user trigger unusually expensive calls?
4. Missing input validation - what inputs are not being checked?
5. Missing output validation - what unexpected output formats could break my app?

For each issue found, suggest a specific fix in TypeScript.