AI in Web Development: The Complete Guide for 2025

Artificial Intelligence has transformed from a futuristic concept to an essential component of modern web applications. From intelligent chatbots to personalized recommendations, AI integration has become increasingly accessible and powerful for web developers.

This comprehensive guide will walk you through everything you need to know about implementing AI in your web applications, from understanding the landscape to building production-ready features.

The AI Landscape for Web Developers

Types of AI Applications

1. Natural Language Processing (NLP)

Chatbots and virtual assistants
Sentiment analysis
Text generation and summarization
Language translation

2. Computer Vision

Image recognition and classification
Object detection
Face recognition
OCR (Optical Character Recognition)

3. Machine Learning

Predictive analytics
Recommendation engines
Anomaly detection
Personalization systems

4. Generative AI

Content creation (text, images, code)
Design assistance
Automated testing
Code generation

Popular AI Services and APIs

Service	Best For	Pricing
OpenAI GPT-4	Text generation, chatbots, code	Pay per 1K tokens
Anthropic Claude	Analysis, long-context tasks	Pay per 1K tokens
Google AI Platform	Vision, speech, translation	Pay per API call
AWS AI Services	Enterprise ML, IoT	Hourly pricing
Azure AI Services	Microsoft ecosystem integration	Pay per use
Hugging Face	Custom models, open-source	Mixed pricing
Replicate	Diffusion models, video	Pay per second

Building an AI-Powered Chatbot

Architecture Overview

┌─────────────┐
│   Frontend  │
│  (React)    │
└──────┬──────┘
       │ HTTP/WebSocket
       │
┌──────▼──────┐
│  API Layer   │
│  (Next.js)   │
└──────┬──────┘
       │
       ├─────────────────┐
       │                 │
┌──────▼──────┐  ┌────▼──────┐
│   OpenAI     │  │  Database  │
│   API        │  │  (Chat     │
│              │  │  History)  │
└─────────────┘  └───────────┘

Backend Implementation with OpenAI

// lib/openai.ts
import OpenAI from 'openai'

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
})

export interface ChatMessage {
  role: 'user' | 'assistant' | 'system'
  content: string
}

export async function generateChatResponse(
  messages: ChatMessage[],
  options?: {
    model?: string
    temperature?: number
    maxTokens?: number
  }
) {
  const response = await openai.chat.completions.create({
    model: options?.model || 'gpt-4-turbo-preview',
    messages: messages.map((msg) => ({
      role: msg.role,
      content: msg.content,
    })),
    temperature: options?.temperature || 0.7,
    max_tokens: options?.maxTokens || 2000,
  })

  return {
    message: response.choices[0].message,
    usage: response.usage,
  }
}

export async function streamChatResponse(
  messages: ChatMessage[],
  onChunk: (chunk: string) => void,
  options?: {
    model?: string
    temperature?: number
  }
) {
  const stream = await openai.chat.completions.create({
    model: options?.model || 'gpt-4-turbo-preview',
    messages: messages.map((msg) => ({
      role: msg.role,
      content: msg.content,
    })),
    temperature: options?.temperature || 0.7,
    stream: true,
  })

  for await (const chunk of stream) {
    const content = chunk.choices[0]?.delta?.content
    if (content) {
      onChunk(content)
    }
  }
}

API Endpoint with Next.js

// app/api/chat/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { generateChatResponse, streamChatResponse } from '@/lib/openai'
import { saveChatMessage } from '@/lib/chat-history'

export async function POST(req: NextRequest) {
  try {
    const body = await req.json()
    const { messages, conversationId, stream = false } = body

    if (!messages || !Array.isArray(messages)) {
      return NextResponse.json(
        { error: 'Invalid messages format' },
        { status: 400 }
      )
    }

    // Save user message
    if (conversationId) {
      const userMessage = messages[messages.length - 1]
      await saveChatMessage(conversationId, userMessage)
    }

    // Streaming response
    if (stream) {
      const encoder = new TextEncoder()

      const streamResponse = new ReadableStream({
        async start(controller) {
          let fullResponse = ''

          try {
            await streamChatResponse(
              messages,
              (chunk) => {
                fullResponse += chunk
                controller.enqueue(
                  encoder.encode(`data: ${JSON.stringify({ chunk })}\n\n`)
                )
              }
            )

            // Save assistant message
            if (conversationId) {
              await saveChatMessage(conversationId, {
                role: 'assistant',
                content: fullResponse,
              })
            }

            controller.enqueue(encoder.encode('data: [DONE]\n\n'))
          } catch (error) {
            controller.error(error)
          } finally {
            controller.close()
          }
        },
      })

      return new Response(streamResponse, {
        headers: {
          'Content-Type': 'text/event-stream',
          'Cache-Control': 'no-cache',
          Connection: 'keep-alive',
        },
      })
    }

    // Non-streaming response
    const { message, usage } = await generateChatResponse(messages)

    // Save assistant message
    if (conversationId) {
      await saveChatMessage(conversationId, message as ChatMessage)
    }

    return NextResponse.json({
      message,
      usage,
    })
  } catch (error) {
    console.error('Chat API error:', error)
    return NextResponse.json(
      { error: 'Failed to generate response' },
      { status: 500 }
    )
  }
}

Frontend Chat Interface

// components/ChatBot.tsx
'use client'

import { useState, useRef, useEffect } from 'react'

interface Message {
  role: 'user' | 'assistant' | 'system'
  content: string
  timestamp: Date
}

export default function ChatBot() {
  const [messages, setMessages] = useState<Message[]>([
    {
      role: 'assistant',
      content: 'Hello! How can I help you today?',
      timestamp: new Date(),
    },
  ])
  const [input, setInput] = useState('')
  const [isLoading, setIsLoading] = useState(false)
  const [isStreaming, setIsStreaming] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)

  // Auto-scroll to bottom
  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
  }

  useEffect(() => {
    scrollToBottom()
  }, [messages])

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    if (!input.trim() || isLoading) return

    const userMessage: Message = {
      role: 'user',
      content: input.trim(),
      timestamp: new Date(),
    }

    setMessages((prev) => [...prev, userMessage])
    setInput('')
    setIsLoading(true)
    setIsStreaming(true)

    try {
      const response = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          messages: messages.map((msg) => ({
            role: msg.role,
            content: msg.content,
          })),
          stream: true,
        }),
      })

      if (!response.ok) throw new Error('Failed to get response')

      // Create placeholder for assistant message
      const assistantIndex = messages.length + 1
      setMessages((prev) => [
        ...prev,
        { role: 'assistant', content: '', timestamp: new Date() },
      ])

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

      if (!reader) throw new Error('No response body')

      while (true) {
        const { done, value } = await reader.read()

        if (done) break

        const chunk = decoder.decode(value)
        const lines = chunk.split('\n')

        for (const line of lines) {
          if (line.startsWith('data: ')) {
            const data = line.slice(6)

            if (data === '[DONE]') {
              setIsStreaming(false)
              break
            }

            try {
              const json = JSON.parse(data)
              if (json.chunk) {
                setMessages((prev) => {
                  const newMessages = [...prev]
                  const lastMessage = newMessages[newMessages.length - 1]
                  if (lastMessage.role === 'assistant') {
                    lastMessage.content += json.chunk
                  }
                  return newMessages
                })
              }
            } catch (e) {
              console.error('Failed to parse chunk:', e)
            }
          }
        }
      }
    } catch (error) {
      console.error('Chat error:', error)
      setMessages((prev) => [
        ...prev,
        {
          role: 'assistant',
          content: 'Sorry, I encountered an error. Please try again.',
          timestamp: new Date(),
        },
      ])
    } finally {
      setIsLoading(false)
      setIsStreaming(false)
    }
  }

  return (
    <div className="flex h-screen flex-col">
      {/* Header */}
      <div className="border-b bg-gray-50 p-4">
        <h1 className="text-xl font-semibold">AI Chatbot</h1>
      </div>

      {/* Messages */}
      <div className="flex-1 overflow-y-auto p-4">
        <div className="mx-auto max-w-3xl space-y-4">
          {messages.map((message, index) => (
            <div
              key={index}
              className={`flex ${
                message.role === 'user' ? 'justify-end' : 'justify-start'
              }`}
            >
              <div
                className={`max-w-[80%] rounded-lg px-4 py-2 ${
                  message.role === 'user'
                    ? 'bg-blue-600 text-white'
                    : 'bg-gray-200 text-gray-800'
                }`}
              >
                <p className="whitespace-pre-wrap">{message.content}</p>
                <p className="mt-1 text-xs opacity-70">
                  {message.timestamp.toLocaleTimeString()}
                </p>
              </div>
            </div>
          ))}
          <div ref={messagesEndRef} />
        </div>
      </div>

      {/* Input */}
      <div className="border-t bg-gray-50 p-4">
        <form onSubmit={handleSubmit} className="mx-auto max-w-3xl">
          <div className="flex gap-2">
            <input
              type="text"
              value={input}
              onChange={(e) => setInput(e.target.value)}
              placeholder="Type your message..."
              disabled={isLoading}
              className="flex-1 rounded-md border border-gray-300 px-4 py-2 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:opacity-50"
            />
            <button
              type="submit"
              disabled={isLoading || !input.trim()}
              className="rounded-md bg-blue-600 px-6 py-2 text-white hover:bg-blue-700 disabled:opacity-50"
            >
              {isLoading ? 'Sending...' : 'Send'}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}

Implementing Content Recommendations

Collaborative Filtering with Vector Database

// lib/vector-store.ts
import { OpenAIEmbeddings } from '@langchain/openai'
import { PineconeClient } from '@pinecone-database/pinecone'

const embeddings = new OpenAIEmbeddings({
  openAIApiKey: process.env.OPENAI_API_KEY,
})

const pinecone = new PineconeClient()
await pinecone.init({
  apiKey: process.env.PINECONE_API_KEY!,
  environment: process.env.PINECONE_ENVIRONMENT!,
})

const index = pinecone.Index(process.env.PINECONE_INDEX!)

export async function addDocument(
  id: string,
  text: string,
  metadata?: Record<string, any>
) {
  const embedding = await embeddings.embedQuery(text)

  await index.upsert({
    vectors: [
      {
        id,
        values: embedding,
        metadata: { text, ...metadata },
      },
    ],
  })
}

export async function searchSimilar(
  query: string,
  topK: number = 5,
  filter?: Record<string, any>
) {
  const queryEmbedding = await embeddings.embedQuery(query)

  const results = await index.query({
    vector: queryEmbedding,
    topK,
    filter,
    includeMetadata: true,
  })

  return results.matches
}

export async function getRecommendations(
  userId: string,
  contentId: string,
  topK: number = 10
) {
  // Find similar content
  const similar = await searchSimilar(contentId, topK)

  // Filter out user's own content and previously viewed
  const recommendations = similar.filter((item) => {
    const metadata = item.metadata
    return (
      metadata.userId !== userId &&
      metadata.viewedBy?.includes(userId) === false
    )
  })

  return recommendations
}

Recommendation API Endpoint

// app/api/recommendations/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { getRecommendations } from '@/lib/vector-store'
import { getUserHistory } from '@/lib/user-history'

export async function GET(req: NextRequest) {
  try {
    const { searchParams } = new URL(req.url)
    const userId = searchParams.get('userId')
    const contentId = searchParams.get('contentId')
    const limit = parseInt(searchParams.get('limit') || '10')

    if (!userId || !contentId) {
      return NextResponse.json(
        { error: 'userId and contentId are required' },
        { status: 400 }
      )
    }

    // Get AI-powered recommendations
    const aiRecommendations = await getRecommendations(
      userId,
      contentId,
      limit
    )

    // Get user's browsing history for personalization
    const userHistory = await getUserHistory(userId)

    // Combine and rank recommendations
    const rankedRecommendations = rankRecommendations(
      aiRecommendations,
      userHistory
    )

    return NextResponse.json({
      recommendations: rankedRecommendations,
    })
  } catch (error) {
    console.error('Recommendation error:', error)
    return NextResponse.json(
      { error: 'Failed to get recommendations' },
      { status: 500 }
    )
  }
}

function rankRecommendations(
  aiRecommendations: any[],
  userHistory: string[]
) {
  // Simple ranking algorithm
  return aiRecommendations
    .map((rec) => ({
      ...rec,
      score: calculateRelevanceScore(rec, userHistory),
    }))
    .sort((a, b) => b.score - a.score)
}

function calculateRelevanceScore(
  recommendation: any,
  userHistory: string[]
): number {
  let score = recommendation.score || 0

  // Boost score for content matching user interests
  const userInterests = extractInterests(userHistory)
  const contentTags = recommendation.metadata.tags || []

  const matchingInterests = contentTags.filter((tag: string) =>
    userInterests.includes(tag)
  )

  score += matchingInterests.length * 0.1

  return score
}

function extractInterests(history: string[]): string[] {
  // Simple interest extraction - in production, use ML model
  const keywords = history.join(' ').toLowerCase()
  const interestPatterns = [
    'javascript',
    'react',
    'python',
    'machine learning',
    'ai',
    'web development',
    // ... more patterns
  ]

  return interestPatterns.filter((pattern) => keywords.includes(pattern))
}

AI-Powered Search

Semantic Search with Embeddings

// lib/semantic-search.ts
import { OpenAIEmbeddings } from '@langchain/openai'
import { RecursiveCharacterTextSplitter } from 'langchain/text_splitter'

const embeddings = new OpenAIEmbeddings({
  openAIApiKey: process.env.OPENAI_API_KEY,
})

const textSplitter = new RecursiveCharacterTextSplitter({
  chunkSize: 1000,
  chunkOverlap: 200,
})

export async function indexContent(content: {
  id: string
  title: string
  body: string
  tags: string[]
}) {
  // Split content into chunks
  const chunks = await textSplitter.createDocuments([
    `${content.title}\n\n${content.body}`,
  ])

  // Create embeddings for each chunk
  const embeddingsData = await Promise.all(
    chunks.map(async (chunk, index) => ({
      id: `${content.id}_${index}`,
      text: chunk.pageContent,
      metadata: {
        contentId: content.id,
        title: content.title,
        tags: content.tags,
        chunkIndex: index,
      },
      embedding: await embeddings.embedQuery(chunk.pageContent),
    }))
  )

  // Store in vector database
  await storeEmbeddings(embeddingsData)
}

export async function semanticSearch(
  query: string,
  options?: {
    limit?: number
    filters?: Record<string, any>
  }
) {
  const queryEmbedding = await embeddings.embedQuery(query)

  // Search vector database
  const results = await searchVectorDatabase({
    vector: queryEmbedding,
    topK: options?.limit || 10,
    filter: options?.filters,
  })

  // Group results by content
  const groupedResults = groupResultsByContent(results)

  return groupedResults
}

async function storeEmbeddings(data: any[]) {
  // Implement vector database storage
  // This depends on your chosen database (Pinecone, Weaviate, etc.)
}

async function searchVectorDatabase(query: {
  vector: number[]
  topK: number
  filter?: Record<string, any>
}) {
  // Implement vector database search
  return []
}

function groupResultsByContent(results: any[]) {
  const grouped = new Map<string, any[]>()

  for (const result of results) {
    const contentId = result.metadata.contentId
    if (!grouped.has(contentId)) {
      grouped.set(contentId, [])
    }
    grouped.get(contentId)!.push(result)
  }

  // Sort by relevance and return
  return Array.from(grouped.entries())
    .map(([contentId, results]) => ({
      contentId,
      relevance: Math.max(...results.map((r) => r.score)),
      chunks: results,
    }))
    .sort((a, b) => b.relevance - a.relevance)
}

Search API with AI Enhancement

// app/api/search/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { semanticSearch } from '@/lib/semantic-search'

export async function GET(req: NextRequest) {
  try {
    const { searchParams } = new URL(req.url)
    const query = searchParams.get('q')
    const limit = parseInt(searchParams.get('limit') || '10')
    const filters = JSON.parse(searchParams.get('filters') || '{}')

    if (!query) {
      return NextResponse.json(
        { error: 'Query parameter is required' },
        { status: 400 }
      )
    }

    // Semantic search
    const semanticResults = await semanticSearch(query, {
      limit,
      filters,
    })

    // Optional: Combine with traditional search
    const traditionalResults = await traditionalSearch(query, limit)

    // Merge and deduplicate results
    const mergedResults = mergeSearchResults(
      semanticResults,
      traditionalResults,
      limit
    )

    return NextResponse.json({
      query,
      results: mergedResults,
      total: mergedResults.length,
    })
  } catch (error) {
    console.error('Search error:', error)
    return NextResponse.json(
      { error: 'Search failed' },
      { status: 500 }
    )
  }
}

async function traditionalSearch(query: string, limit: number) {
  // Implement traditional keyword search
  // This could use full-text search from your database
  return []
}

function mergeSearchResults(
  semantic: any[],
  traditional: any[],
  limit: number
) {
  // Merge results from both search methods
  const seen = new Set()

  const merged = [...semantic, ...traditional]
    .filter((result) => {
      if (seen.has(result.contentId)) {
        return false
      }
      seen.add(result.contentId)
      return true
    })
    .slice(0, limit)

  return merged
}

AI Image Generation

Generate Images with DALL-E

// lib/image-generation.ts
import OpenAI from 'openai'

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
})

export async function generateImage(prompt: string, options?: {
  size?: '256x256' | '512x512' | '1024x1024' | '1792x1024' | '1024x1792'
  quality?: 'standard' | 'hd'
  style?: 'vivid' | 'natural'
  n?: number
}) {
  const response = await openai.images.generate({
    model: 'dall-e-3',
    prompt,
    size: options?.size || '1024x1024',
    quality: options?.quality || 'standard',
    style: options?.style || 'vivid',
    n: options?.n || 1,
  })

  return {
    images: response.data.map((img) => ({
      url: img.url,
      revisedPrompt: img.revised_prompt,
    })),
    created: response.created,
  }
}

export async function editImage(
  originalImageUrl: string,
  prompt: string,
  maskImageUrl?: string
) {
  const response = await openai.images.edit({
    image: originalImageUrl,
    mask: maskImageUrl,
    prompt,
    n: 1,
    size: '1024x1024',
  })

  return {
    images: response.data.map((img) => img.url),
  }
}

export async function createImageVariation(imageUrl: string) {
  const response = await openai.images.createVariation({
    image: imageUrl,
    n: 2,
    size: '1024x1024',
  })

  return {
    images: response.data.map((img) => img.url),
  }
}

Image Generation API

// app/api/images/generate/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { generateImage } from '@/lib/image-generation'
import { saveGeneratedImage } from '@/lib/image-storage'

export async function POST(req: NextRequest) {
  try {
    const body = await req.json()
    const { prompt, size, quality, style } = body

    if (!prompt) {
      return NextResponse.json(
        { error: 'Prompt is required' },
        { status: 400 }
      )
    }

    // Validate prompt length
    if (prompt.length > 4000) {
      return NextResponse.json(
        { error: 'Prompt is too long (max 4000 characters)' },
        { status: 400 }
      )
    }

    // Generate image
    const result = await generateImage(prompt, { size, quality, style })

    // Save image to storage
    const savedImages = await Promise.all(
      result.images.map(async (img, index) => {
        // Download image from URL
        const imageResponse = await fetch(img.url)
        const imageBuffer = await imageResponse.arrayBuffer()

        // Save to storage (S3, Cloudinary, etc.)
        const savedUrl = await saveGeneratedImage(
          Buffer.from(imageBuffer),
          `generated_${Date.now()}_${index}.png`
        )

        return {
          url: savedUrl,
          revisedPrompt: img.revisedPrompt,
        }
      })
    )

    return NextResponse.json({
      images: savedImages,
      created: result.created,
    })
  } catch (error) {
    console.error('Image generation error:', error)
    return NextResponse.json(
      { error: 'Failed to generate image' },
      { status: 500 }
    )
  }
}

AI-Powered Content Moderation

// lib/content-moderation.ts
import OpenAI from 'openai'

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
})

export interface ModerationResult {
  flagged: boolean
  categories: {
    sexual: boolean
    hate: boolean
    harassment: boolean
    selfHarm: boolean
    violence: boolean
    sexualMinors: boolean
    selfHarmIntent: boolean
    selfHarmInstructions: boolean
    sexualViolence: boolean
    sexualViolenceNonconsensual: boolean
    hateThreatening: boolean
    harassmentThreatening: boolean
  }
  scores: {
    sexual: number
    hate: number
    harassment: number
    selfHarm: number
    violence: number
  }
}

export async function moderateContent(
  text: string
): Promise<ModerationResult> {
  const response = await openai.moderations.create({
    input: text,
  })

  const result = response.results[0]

  return {
    flagged: result.flagged,
    categories: result.categories,
    scores: result.category_scores,
  }
}

export async function moderateImage(imageUrl: string): Promise<ModerationResult> {
  // Use OpenAI's moderation API with image content
  // Note: This may require OCR or specialized models
  const response = await openai.moderations.create({
    input: imageUrl,
    model: 'omni-moderation-latest',
  })

  const result = response.results[0]

  return {
    flagged: result.flagged,
    categories: result.categories,
    scores: result.category_scores,
  }
}

Content Moderation Middleware

// middleware.ts
import { NextResponse } from 'next/server'
import { moderateContent } from '@/lib/content-moderation'
import type { NextRequest } from 'next/server'

export async function middleware(req: NextRequest) {
  // Only moderate POST requests with JSON body
  if (req.method !== 'POST') {
    return NextResponse.next()
  }

  try {
    const body = await req.json()

    // Moderate text content
    if (body.content) {
      const moderation = await moderateContent(body.content)

      if (moderation.flagged) {
        return NextResponse.json(
          {
            error: 'Content flagged for policy violation',
            categories: moderation.categories,
          },
          { status: 403 }
        )
      }
    }

    // Moderate multiple text fields
    const textFields = ['message', 'comment', 'title', 'description']
    for (const field of textFields) {
      if (body[field]) {
        const moderation = await moderateContent(body[field])

        if (moderation.flagged) {
          return NextResponse.json(
            {
              error: `${field} flagged for policy violation`,
              categories: moderation.categories,
            },
            { status: 403 }
          )
        }
      }
    }

    return NextResponse.next()
  } catch (error) {
    console.error('Moderation error:', error)
    // In production, you might want to be more lenient on errors
    return NextResponse.next()
  }
}

export const config = {
  matcher: ['/api/:path*', '/posts/:path*', '/comments/:path*'],
}

Cost Optimization Strategies

Token Usage Monitoring

// lib/token-usage.ts
interface TokenUsage {
  timestamp: Date
  model: string
  tokens: {
    prompt: number
    completion: number
    total: number
  }
  cost: number
}

class TokenUsageTracker {
  private usage: TokenUsage[] = []

  async trackUsage(model: string, usage: any) {
    const cost = this.calculateCost(model, usage)

    const entry: TokenUsage = {
      timestamp: new Date(),
      model,
      tokens: {
        prompt: usage.prompt_tokens,
        completion: usage.completion_tokens,
        total: usage.total_tokens,
      },
      cost,
    }

    this.usage.push(entry)

    // Persist to database
    await this.saveUsage(entry)

    // Check for rate limiting
    await this.checkRateLimit()
  }

  private calculateCost(model: string, usage: any): number {
    const prices: Record<string, { prompt: number; completion: number }> = {
      'gpt-4-turbo-preview': { prompt: 0.01, completion: 0.03 },
      'gpt-4': { prompt: 0.03, completion: 0.06 },
      'gpt-3.5-turbo': { prompt: 0.0015, completion: 0.002 },
    }

    const price = prices[model] || prices['gpt-4-turbo-preview']

    return (
      (usage.prompt_tokens / 1000) * price.prompt +
      (usage.completion_tokens / 1000) * price.completion
    )
  }

  private async saveUsage(entry: TokenUsage) {
    // Save to database for analytics and billing
  }

  private async checkRateLimit() {
    // Check hourly/daily limits
    // Implement rate limiting logic
  }

  getDailyUsage(): number {
    const today = new Date()
    today.setHours(0, 0, 0, 0)

    const dailyUsage = this.usage.filter(
      (entry) => entry.timestamp >= today
    )

    return dailyUsage.reduce((total, entry) => total + entry.cost, 0)
  }
}

export const tokenUsageTracker = new TokenUsageTracker()

Caching AI Responses

// lib/ai-cache.ts
import { LRUCache } from 'lru-cache'

const cache = new LRUCache<string, any>({
  max: 500, // Maximum number of entries
  ttl: 1000 * 60 * 60, // Cache for 1 hour
})

export async function getCachedResponse(
  key: string
): Promise<any | null> {
  const cached = cache.get(key)
  if (cached) {
    console.log('Cache hit:', key)
    return cached
  }
  return null
}

export async function setCachedResponse(
  key: string,
  response: any
): Promise<void> {
  cache.set(key, response)
  console.log('Cache set:', key)
}

export function generateCacheKey(
  model: string,
  messages: any[],
  options: any
): string {
  const hash = JSON.stringify({ model, messages, options })
  // In production, use a proper hash function
  return `${model}:${hash.substring(0, 100)}`
}

Optimized API Response with Caching

// app/api/chat/route.ts
import { generateChatResponse } from '@/lib/openai'
import { getCachedResponse, setCachedResponse, generateCacheKey } from '@/lib/ai-cache'
import { tokenUsageTracker } from '@/lib/token-usage'

export async function POST(req: NextRequest) {
  try {
    const body = await req.json()
    const { messages, options } = body

    // Generate cache key
    const cacheKey = generateCacheKey(
      options?.model || 'gpt-4-turbo-preview',
      messages,
      options
    )

    // Check cache
    const cached = await getCachedResponse(cacheKey)
    if (cached) {
      return NextResponse.json(cached)
    }

    // Generate response
    const response = await generateChatResponse(messages, options)

    // Track usage
    await tokenUsageTracker.trackUsage(
      options?.model || 'gpt-4-turbo-preview',
      response.usage
    )

    // Cache response
    await setCachedResponse(cacheKey, response)

    return NextResponse.json(response)
  } catch (error) {
    console.error('Chat API error:', error)
    return NextResponse.json(
      { error: 'Failed to generate response' },
      { status: 500 }
    )
  }
}

Security and Privacy

API Key Management

// lib/api-security.ts
import { headers } from 'next/headers'

export async function validateApiKey(req: Request): Promise<boolean> {
  const headersList = await headers()
  const apiKey = headersList.get('x-api-key')

  if (!apiKey) {
    return false
  }

  // Validate against database
  const isValid = await validateApiKeyInDatabase(apiKey)
  return isValid
}

export async function checkRateLimit(
  apiKey: string
): Promise<{ allowed: boolean; remaining?: number }> {
  // Implement rate limiting logic
  // This could use Redis for distributed rate limiting
  return { allowed: true, remaining: 1000 }
}

export async function logApiUsage(
  apiKey: string,
  endpoint: string,
  tokensUsed: number
): Promise<void> {
  // Log usage for analytics and billing
}

Data Privacy Controls

// lib/privacy.ts
export function sanitizePrompt(prompt: string): string {
  // Remove PII (Personally Identifiable Information)
  let sanitized = prompt

  // Simple PII patterns - in production, use more sophisticated detection
  const patterns = [
    { pattern: /\b\d{3}-\d{2}-\d{4}\b/g, replacement: '[SSN]' },
    { pattern: /\b\d{10}\b/g, replacement: '[PHONE]' },
    { pattern: /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g, replacement: '[EMAIL]' },
  ]

  for (const { pattern, replacement } of patterns) {
    sanitized = sanitized.replace(pattern, replacement)
  }

  return sanitized
}

export function anonymizeUserId(userId: string): string {
  // Create anonymous ID for AI requests
  const hash = crypto
    .createHash('sha256')
    .update(userId + process.env.ANONYMIZATION_SALT)
    .digest('hex')
    .substring(0, 16)

  return `anon_${hash}`
}

Monitoring and Analytics

// lib/ai-analytics.ts
interface AnalyticsEvent {
  type: 'request' | 'error' | 'completion'
  timestamp: Date
  model: string
  userId?: string
  metadata?: Record<string, any>
}

class AIAnalytics {
  private events: AnalyticsEvent[] = []

  trackRequest(model: string, userId?: string) {
    this.events.push({
      type: 'request',
      timestamp: new Date(),
      model,
      userId,
    })
  }

  trackCompletion(model: string, userId?: string, metadata?: any) {
    this.events.push({
      type: 'completion',
      timestamp: new Date(),
      model,
      userId,
      metadata,
    })
  }

  trackError(model: string, error: Error, userId?: string) {
    this.events.push({
      type: 'error',
      timestamp: new Date(),
      model,
      userId,
      metadata: {
        message: error.message,
        stack: error.stack,
      },
    })
  }

  getMetrics(timeRange?: { start: Date; end: Date }) {
    let events = this.events

    if (timeRange) {
      events = events.filter(
        (e) =>
          e.timestamp >= timeRange.start && e.timestamp <= timeRange.end
      )
    }

    const metrics = {
      totalRequests: events.filter((e) => e.type === 'request').length,
      totalCompletions: events.filter((e) => e.type === 'completion').length,
      totalErrors: events.filter((e) => e.type === 'error').length,
      averageLatency: 0, // Calculate if you track latency
      modelUsage: this.getModelUsage(events),
    }

    return metrics
  }

  private getModelUsage(events: AnalyticsEvent[]) {
    const usage: Record<string, number> = {}

    for (const event of events) {
      usage[event.model] = (usage[event.model] || 0) + 1
    }

    return usage
  }
}

export const aiAnalytics = new AIAnalytics()

Conclusion

AI integration in web applications has evolved from experimental to essential. By leveraging modern AI APIs and following best practices, you can create powerful, intelligent features that enhance user experience and differentiate your application.

Key Takeaways

Start with clear use cases - Don't implement AI for its own sake
Choose the right tools - Balance cost, performance, and features
Implement caching - Reduce API costs and improve response times
Monitor usage - Track tokens, costs, and performance
Prioritize security - Protect API keys and user data
Test thoroughly - AI responses can be unpredictable
Plan for scaling - Consider edge cases and high traffic

Next Steps

Identify use cases in your application
Select appropriate AI services
Implement MVP features with proper error handling
Add monitoring and analytics
Iterate based on user feedback
Scale and optimize as needed

The future of web development is AI-augmented. Start small, learn continuously, and build intelligent applications that delight your users.

Ready to integrate AI into your web application? Start with a simple chatbot or recommendation system and iterate from there. The possibilities are endless!