Integrating AI Into Your Web App: A Practical Guide Using the Vercel AI SDK

AI Features That Actually Provide Value

Before writing a line of code, it is worth asking: what AI feature will users actually pay for or return for? The most successful AI integrations we have built share a pattern — they automate something genuinely tedious, not something users enjoy doing.

High-value AI features in web apps:

• Summarizing long documents or conversations
• Drafting structured content from unstructured input (e.g., turning bullet points into a professional email)
• Classifying or tagging content automatically
• Answering questions about a specific knowledge base (RAG)
• Extracting structured data from free text

The Vercel AI SDK

The Vercel AI SDK (ai package) is our recommended starting point for adding AI to Next.js apps. It provides:

• A unified interface for OpenAI, Anthropic, Google, and other providers
• Streaming responses out of the box
• React hooks (useChat, useCompletion) for common UI patterns
• Tool calling (function calling) abstractions

// app/api/chat/route.ts
import { streamText } from "ai";
import { openai } from "@ai-sdk/openai";

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai("gpt-4o-mini"),
    system: "You are a helpful assistant for our SaaS product.",
    messages,
  });

  return result.toDataStreamResponse();
}

// components/Chat.tsx
"use client";
import { useChat } from "ai/react";

export function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>{m.role}: {m.content}</div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

Managing Costs

AI API costs can surprise you in production. Key strategies:

• Choose the right model: GPT-4o mini and Claude Haiku are 10–50x cheaper than frontier models and sufficient for most tasks. Reserve GPT-4o or Claude Sonnet for tasks requiring deep reasoning.
• Cache responses: For deterministic inputs (e.g., summarizing the same document), cache the AI response. Redis or a database cache with a hash of the input as the key works well.
• Limit context window: Long conversations cost more. Truncate history or summarize older messages.
• Rate limit per user: Implement per-user daily or monthly AI usage limits, especially on free tiers.

Streaming for UX

Always stream AI responses to the user. Waiting 5–10 seconds for a full response kills the experience. Streaming lets users start reading immediately and perceive the app as fast even when generation takes time.

Prompt Engineering Tips

• Be specific about output format. If you need JSON, say "Respond only with valid JSON, no markdown." Then parse carefully.
• Use system prompts to constrain behavior and establish context.
• Include examples in the prompt (few-shot prompting) for consistent formatting.
• Validate and sanitize AI output before displaying or storing it — treat it like untrusted user input.

Error Handling

AI APIs are probabilistic and occasionally fail or return unexpected output. Always wrap AI calls in try-catch, handle rate limit errors with exponential backoff, and provide graceful fallbacks. Never let an AI API error crash your app.