Build an AI API Wrapper Business with OpenAI and Vercel: The Complete Step-by-Step Guide

npx create-next-app@latest ai-wrapper --typescript --tailwind --eslint --app --src-dir
cd ai-wrapper
npx supabase init
npm install @supabase/supabase-js stripe @stripe/stripe-js openai zod react-hook-form
npm install @upstash/redis @upstash/ratelimit
npm install lucide-react class-variance-authority clsx tailwind-merge

# AI Providers
OPENAI_API_KEY=sk-...
ANTHROPIC_API_KEY=sk-ant-...
GROQ_API_KEY=gsk_...

# Database
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
SUPABASE_SERVICE_ROLE_KEY=eyJ...

# Redis
UPSTASH_REDIS_REST_URL=https://...
UPSTASH_REDIS_REST_TOKEN=...

# Stripe
STRIPE_SECRET_KEY=sk_live_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...

# App
NEXT_PUBLIC_APP_URL=https://your-wrapper.com

-- Users table (managed by Supabase Auth)
create table profiles (
  id uuid references auth.users primary key,
  email text not null,
  full_name text,
  plan text not null default 'free',
  stripe_customer_id text,
  created_at timestamptz default now()
);

-- Usage tracking
create table api_usage (
  id uuid default gen_random_uuid() primary key,
  user_id uuid references profiles not null,
  model text not null,
  input_tokens integer not null,
  output_tokens integer not null,
  cost_cents integer not null,
  latency_ms integer not null,
  quality_score integer check (quality_score between 1 and 10),
  created_at timestamptz default now()
);

-- Saved outputs
create table outputs (
  id uuid default gen_random_uuid() primary key,
  user_id uuid references profiles not null,
  input_data jsonb not null,
  output_data jsonb not null,
  model text not null,
  rating integer check (rating between 1 and 5),
  created_at timestamptz default now()
);

-- Index for usage queries
create index idx_api_usage_user_date on api_usage(user_id, created_at desc);
create index idx_outputs_user_date on outputs(user_id, created_at desc);

// src/lib/ai-router.ts

import OpenAI from 'openai';
import Anthropic from '@anthropic-ai/sdk';

type ModelProvider = 'openai' | 'anthropic' | 'groq';
type TaskComplexity = 'simple' | 'medium' | 'complex';

interface AIRequest {
  systemPrompt: string;
  userPrompt: string;
  maxTokens?: number;
  temperature?: number;
  complexity?: TaskComplexity;
}

interface AIResponse {
  content: string;
  model: string;
  inputTokens: number;
  outputTokens: number;
  latencyMs: number;
  costCents: number;
}

const openai = new OpenAI();
const anthropic = new Anthropic();

// Model selection based on task complexity and cost optimization
const MODEL_MAP: Record<TaskComplexity, { primary: string; fallback: string }> = {
  simple: { primary: 'gpt-4o-mini', fallback: 'claude-3-haiku-20240307' },
  medium: { primary: 'gpt-4o', fallback: 'claude-3-5-sonnet-20241022' },
  complex: { primary: 'gpt-4o', fallback: 'claude-3-5-sonnet-20241022' },
};

// Cost per million tokens (input/output)
const COST_MAP: Record<string, { input: number; output: number }> = {
  'gpt-4o-mini': { input: 0.15, output: 0.60 },
  'gpt-4o': { input: 2.50, output: 10.00 },
  'claude-3-haiku-20240307': { input: 0.25, output: 1.25 },
  'claude-3-5-sonnet-20241022': { input: 3.00, output: 15.00 },
};

export async function routeAIRequest(request: AIRequest): Promise<AIResponse> {
  const complexity = request.complexity || 'medium';
  const models = MODEL_MAP[complexity];
  
  try {
    return await callModel(models.primary, request);
  } catch (primaryError) {
    console.error(`Primary model ${models.primary} failed:`, primaryError);
    try {
      return await callModel(models.fallback, request);
    } catch (fallbackError) {
      console.error(`Fallback model ${models.fallback} failed:`, fallbackError);
      throw new Error('All AI providers failed. Please try again.');
    }
  }
}

async function callModel(model: string, request: AIRequest): Promise<AIResponse> {
  const startTime = Date.now();
  let content: string;
  let inputTokens: number;
  let outputTokens: number;

  if (model.startsWith('gpt')) {
    const response = await openai.chat.completions.create({
      model,
      messages: [
        { role: 'system', content: request.systemPrompt },
        { role: 'user', content: request.userPrompt },
      ],
      max_tokens: request.maxTokens || 2000,
      temperature: request.temperature || 0.7,
    });
    content = response.choices[0]?.message?.content || '';
    inputTokens = response.usage?.prompt_tokens || 0;
    outputTokens = response.usage?.completion_tokens || 0;
  } else if (model.startsWith('claude')) {
    const response = await anthropic.messages.create({
      model,
      system: request.systemPrompt,
      messages: [{ role: 'user', content: request.userPrompt }],
      max_tokens: request.maxTokens || 2000,
      temperature: request.temperature || 0.7,
    });
    content = response.content[0]?.type === 'text' ? response.content[0].text : '';
    inputTokens = response.usage.input_tokens;
    outputTokens = response.usage.output_tokens;
  } else {
    throw new Error(`Unknown model: ${model}`);
  }

  const latencyMs = Date.now() - startTime;
  const costCents = calculateCost(model, inputTokens, outputTokens);

  return { content, model, inputTokens, outputTokens, latencyMs, costCents };
}

function calculateCost(model: string, inputTokens: number, outputTokens: number): number {
  const costs = COST_MAP[model];
  if (!costs) return 0;
  const inputCost = (inputTokens / 1_000_000) * costs.input;
  const outputCost = (outputTokens / 1_000_000) * costs.output;
  return Math.round((inputCost + outputCost) * 100); // Return cents
}

// src/lib/semantic-cache.ts

import { Redis } from '@upstash/redis';
import OpenAI from 'openai';

const redis = Redis.fromEnv();
const openai = new OpenAI();

const CACHE_TTL = 3600; // 1 hour
const SIMILARITY_THRESHOLD = 0.95;

async function getEmbedding(text: string): Promise<number[]> {
  const response = await openai.embeddings.create({
    model: 'text-embedding-3-small',
    input: text.substring(0, 8000),
  });
  return response.data[0].embedding;
}

function cosineSimilarity(a: number[], b: number[]): number {
  let dot = 0, normA = 0, normB = 0;
  for (let i = 0; i < a.length; i++) {
    dot += a[i] * b[i];
    normA += a[i] * a[i];
    normB += b[i] * b[i];
  }
  return dot / (Math.sqrt(normA) * Math.sqrt(normB));
}

export async function getCached(input: string, systemPrompt: string): Promise<string | null> {
  const inputEmbedding = await getEmbedding(input + systemPrompt);
  const keys = await redis.keys('cache:*');
  
  for (const key of keys) {
    const cached = await redis.get<{ embedding: number[]; output: string }>(key);
    if (!cached) continue;
    
    const similarity = cosineSimilarity(inputEmbedding, cached.embedding);
    if (similarity >= SIMILARITY_THRESHOLD) {
      // Cache hit — extend TTL
      await redis.expire(key, CACHE_TTL);
      return cached.output;
    }
  }
  
  return null;
}

export async function setCache(input: string, systemPrompt: string, output: string): Promise<void> {
  const embedding = await getEmbedding(input + systemPrompt);
  const key = `cache:${Date.now()}:${Math.random().toString(36).slice(2, 8)}`;
  await redis.set(key, { embedding, output }, { ex: CACHE_TTL });
}

// src/lib/rate-limiter.ts

import { Ratelimit } from '@upstash/ratelimit';
import { Redis } from '@upstash/redis';

const redis = Redis.fromEnv();

const limiters: Record<string, Ratelimit> = {
  free: new Ratelimit({
    redis,
    limiter: Ratelimit.slidingWindow(5, '1 d'), // 5 per day
    prefix: 'ratelimit:free',
  }),
  starter: new Ratelimit({
    redis,
    limiter: Ratelimit.slidingWindow(100, '1 d'),
    prefix: 'ratelimit:starter',
  }),
  professional: new Ratelimit({
    redis,
    limiter: Ratelimit.slidingWindow(1000, '1 d'),
    prefix: 'ratelimit:professional',
  }),
  enterprise: new Ratelimit({
    redis,
    limiter: Ratelimit.slidingWindow(10000, '1 d'),
    prefix: 'ratelimit:enterprise',
  }),
};

export async function checkRateLimit(userId: string, plan: string): Promise<{ allowed: boolean; remaining: number }> {
  const limiter = limiters[plan] || limiters.free;
  const { success, remaining } = await limiter.limit(userId);
  return { allowed: success, remaining };
}

// src/lib/prompts.ts

export function buildSystemPrompt(vertical: string, task: string, constraints: string[]): string {
  return `You are an expert ${vertical} professional with 20+ years of experience specializing in ${task}.

## YOUR ROLE
You produce ${task} outputs that are indistinguishable from those created by a seasoned ${vertical} professional. Every output must be accurate, professional, and immediately usable.

## OUTPUT REQUIREMENTS
${constraints.map((c, i) => `${i + 1}. ${c}`).join('\n')}

## QUALITY STANDARDS
- Every claim must be supported by the input data
- Use precise ${vertical} terminology
- Include specific details, metrics, and dates where available
- Never use generic filler phrases
- Never fabricate information not present in the input
- Format output in clean, scannable structure with headers and bullet points

## EDGE CASE HANDLING
- If the input is incomplete, note what is missing and provide the best output possible with available information
- If the input contains conflicting information, flag the conflict and provide both interpretations
- If the request falls outside your expertise area, clearly state the limitation

## OUTPUT FORMAT
${getOutputFormat(vertical, task)}`;
}

function getOutputFormat(vertical: string, task: string): string {
  // Return vertical-specific output templates
  const formats: Record<string, string> = {
    'legal-contract': `## CONTRACT
### Parties
[Extract from input]
### Terms
[Generated from input]
### Signatures
[Placeholder fields]`,
    'real-estate-listing': `## PROPERTY HIGHLIGHTS
- [Key feature 1]
- [Key feature 2]
## DESCRIPTION
[Compelling listing description]
## NEIGHBORHOOD
[Area highlights]`,
    'medical-notes': `## CHIEF COMPLAINT
[From input]
## HISTORY OF PRESENT ILLNESS
[Structured from input]
## ASSESSMENT
[Clinical reasoning]
## PLAN
[Recommended actions]`,
  };
  return formats[vertical] || 'Provide a well-structured, professional output with clear sections and formatting.';
}

// src/lib/quality-check.ts

import { routeAIRequest } from './ai-router';

export async function validateOutput(input: string, output: string, criteria: string[]): Promise<{ score: number; issues: string[] }> {
  const validationPrompt = `Rate this AI output on a scale of 1-10 based on these criteria:
${criteria.map((c, i) => `${i + 1}. ${c}`).join('\n')}

INPUT: ${input.substring(0, 2000)}

OUTPUT: ${output.substring(0, 2000)}

Respond in JSON format: { "score": <number>, "issues": ["<issue1>", "<issue2>"] }`;

  const response = await routeAIRequest({
    systemPrompt: 'You are a quality assurance reviewer for AI-generated content. Be strict but fair.',
    userPrompt: validationPrompt,
    complexity: 'simple', // Use cheap model for validation
    temperature: 0.3,
  });

  try {
    const parsed = JSON.parse(response.content);
    return { score: parsed.score || 5, issues: parsed.issues || [] };
  } catch {
    return { score: 5, issues: ['Could not parse validation response'] };
  }
}

export async function generateWithValidation(
  request: Parameters<typeof routeAIRequest>[0],
  qualityCriteria: string[],
  maxRetries: number = 2
): Promise<{ content: string; qualityScore: number; attempts: number }> {
  let lastOutput = '';
  let lastScore = 0;
  
  for (let attempt = 0; attempt <= maxRetries; attempt++) {
    const response = await routeAIRequest(request);
    lastOutput = response.content;
    
    const validation = await validateOutput(request.userPrompt, response.content, qualityCriteria);
    lastScore = validation.score;
    
    if (validation.score >= 7) {
      return { content: response.content, qualityScore: validation.score, attempts: attempt + 1 };
    }
    
    // If quality is low, adjust the prompt for retry
    if (attempt < maxRetries) {
      request.userPrompt += `\n\nPrevious attempt scored ${validation.score}/10. Issues: ${validation.issues.join(', ')}. Please address these issues.`;
    }
  }
  
  return { content: lastOutput, qualityScore: lastScore, attempts: maxRetries + 1 };
}

// src/app/api/generate/route.ts

import { NextRequest, NextResponse } from 'next/server';
import { createClient } from '@supabase/supabase-js';
import { buildSystemPrompt } from '@/lib/prompts';
import { generateWithValidation } from '@/lib/quality-check';
import { getCached, setCache } from '@/lib/semantic-cache';
import { checkRateLimit } from '@/lib/rate-limiter';

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY!
);

export async function POST(request: NextRequest) {
  try {
    const { userId, input, vertical, task } = await request.json();

    // 1. Authenticate and check rate limit
    const { data: profile } = await supabase
      .from('profiles')
      .select('plan, email')
      .eq('id', userId)
      .single();

    if (!profile) {
      return NextResponse.json({ error: 'User not found' }, { status: 404 });
    }

    const rateLimit = await checkRateLimit(userId, profile.plan);
    if (!rateLimit.allowed) {
      return NextResponse.json(
        { error: 'Rate limit exceeded', remaining: 0 },
        { status: 429 }
      );
    }

    // 2. Build the system prompt
    const constraints = getVerticalConstraints(vertical);
    const systemPrompt = buildSystemPrompt(vertical, task, constraints);

    // 3. Check cache first
    const cached = await getCached(input, systemPrompt);
    if (cached) {
      return NextResponse.json({
        output: cached,
        cached: true,
        remaining: rateLimit.remaining - 1,
      });
    }

    // 4. Generate with quality validation
    const qualityCriteria = getQualityCriteria(vertical);
    const result = await generateWithValidation(
      { systemPrompt, userPrompt: input, complexity: 'medium' },
      qualityCriteria
    );

    // 5. Store in cache
    await setCache(input, systemPrompt, result.content);

    // 6. Log usage
    await supabase.from('api_usage').insert({
      user_id: userId,
      model: 'multi',
      input_tokens: 0, // Populated by routeAIRequest
      output_tokens: 0,
      cost_cents: 0,
      latency_ms: 0,
      quality_score: result.qualityScore,
    });

    // 7. Save output
    await supabase.from('outputs').insert({
      user_id: userId,
      input_data: { input, vertical, task },
      output_data: { output: result.content, qualityScore: result.qualityScore },
      model: 'multi',
    });

    return NextResponse.json({
      output: result.content,
      qualityScore: result.qualityScore,
      cached: false,
      remaining: rateLimit.remaining - 1,
    });
  } catch (error) {
    console.error('Generation error:', error);
    return NextResponse.json(
      { error: 'Generation failed. Please try again.' },
      { status: 500 }
    );
  }
}

function getVerticalConstraints(vertical: string): string[] {
  const constraintMap: Record<string, string[]> = {
    'legal-contract': [
      'Use proper legal formatting and section numbering',
      'Include all required legal clauses for the jurisdiction',
      'Never fabricate legal citations or case references',
      'Include dispute resolution and governing law clauses',
    ],
    'real-estate-listing': [
      'Include all property specifications from the input',
      'Use compelling but truthful language',
      'Include neighborhood and amenities information',
      'Format for MLS compatibility',
    ],
  };
  return constraintMap[vertical] || ['Produce accurate, professional output'];
}

function getQualityCriteria(vertical: string): string[] {
  return [
    'Output is relevant to the input request',
    'Output is factually consistent with the input data',
    'Output follows the required format and structure',
    'Output uses appropriate professional language',
    'Output does not contain fabricated information',
  ];
}

// src/lib/stripe.ts

import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

export const PLANS = {
  free: { priceId: null, limit: 5, name: 'Free' },
  starter: { priceId: 'price_starter', limit: 100, name: 'Starter' },
  professional: { priceId: 'price_professional', limit: 1000, name: 'Professional' },
  enterprise: { priceId: 'price_enterprise', limit: 10000, name: 'Enterprise' },
};

export async function createCheckoutSession(userId: string, planKey: string) {
  const plan = PLANS[planKey as keyof typeof PLANS];
  if (!plan?.priceId) throw new Error('Invalid plan');

  return stripe.checkout.sessions.create({
    mode: 'subscription',
    payment_method_types: ['card'],
    line_items: [{ price: plan.priceId, quantity: 1 }],
    success_url: `${process.env.NEXT_PUBLIC_APP_URL}/dashboard?upgraded=true`,
    cancel_url: `${process.env.NEXT_PUBLIC_APP_URL}/pricing`,
    metadata: { userId, plan: planKey },
  });
}

export async function handleWebhook(event: Stripe.Event) {
  switch (event.type) {
    case 'checkout.session.completed': {
      const session = event.data.object;
      const userId = session.metadata?.userId;
      const plan = session.metadata?.plan;
      if (userId && plan) {
        await supabase
          .from('profiles')
          .update({ plan, stripe_customer_id: session.customer as string })
          .eq('id', userId);
      }
      break;
    }
    case 'customer.subscription.deleted': {
      const subscription = event.data.object;
      await supabase
        .from('profiles')
        .update({ plan: 'free' })
        .eq('stripe_customer_id', subscription.customer as string);
      break;
    }
  }
}

# Deploy to Vercel
vercel --prod

# Set environment variables
vercel env add OPENAI_API_KEY
vercel env add ANTHROPIC_API_KEY
vercel env add SUPABASE_SERVICE_ROLE_KEY
vercel env add STRIPE_SECRET_KEY
vercel env add UPSTASH_REDIS_REST_URL
vercel env add UPSTASH_REDIS_REST_TOKEN