How to Build Your First AI Wrapper in Next.js

"AI Wrappers" are currently dominating both developer side-projects and enterprise SaaS tools. But what exactly is an AI wrapper? At its core, it is a focused, highly specialized user interface built around a generalized Large Language Model (LLM) like OpenAI's GPT-4 or Anthropic's Claude.

Instead of presenting users with an intimidating blank chat box, an AI wrapper solves one specific problem extremely well. For example, generating complex RegEx strings, translating Python to JavaScript, or writing dynamic Cron job schedules based on natural language.

In this guide, we'll walk through building a Next.js 14 App Router backend capable of securely communicating with the OpenAI API.

Step 1: Set Up the Project and Dependencies

First, initialize a new Next.js project and install the official OpenAI Node SDK.

npx create-next-app@latest ai-wrapper --typescript --tailwind --eslint
cd ai-wrapper
npm install openai

You'll also need an API key from OpenAI's Platform. Never expose this key to the frontend! Store it in a .env.local file at the root of your project:

OPENAI_API_KEY="sk-proj-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

Step 2: Create the API Route Handler

We'll use Next.js App Router Route Handlers to securely communicate with the OpenAI servers. Create a new file at app/api/generate/route.ts.

The secret sauce of any AI wrapper is the System Prompt. This is where you instruct the AI on exactly how to behave, what role to assume, and what format to return data in (like enforcing raw JSON without markdown formatting).

import { NextResponse } from 'next/server';
import OpenAI from 'openai';

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

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

    const completion = await openai.chat.completions.create({
      model: "gpt-3.5-turbo",
      messages: [
        { 
          role: "system", 
          content: "You are an expert developer. You convert natural language down into pure, valid regular expressions. DO NOT output any explanation, markdown, or chat text. Output ONLY the raw Regex string." 
        },
        { 
          role: "user", 
          content: userInput 
        }
      ],
      temperature: 0.1, // Keep it deterministic
    });

    return NextResponse.json({ result: completion.choices[0].message.content });
    
  } catch (error) {
    console.error(error);
    return NextResponse.json({ error: "Failed to generate text" }, { status: 500 });
  }
}

Step 3: The Frontend Interface

Now, build the client-side UI to capture the user's input and fetch the data from our new API route.

'use client';

import { useState } from 'react';

export default function Home() {
  const [input, setInput] = useState('');
  const [output, setOutput] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    
    try {
      const res = await fetch('/api/generate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ userInput: input }),
      });
      const data = await res.json();
      setOutput(data.result);
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <main className="max-w-xl mx-auto mt-20 p-6 bg-white shadow rounded-lg border">
      <h1 className="text-2xl font-bold mb-4">AI Regex Generator</h1>
      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
        <textarea 
          placeholder="e.g. Match a valid email address..."
          className="border p-3 rounded h-32 text-black"
          value={input}
          onChange={(e) => setInput(e.target.value)}
        />
        <button disabled={loading} className="bg-blue-600 text-white font-bold py-2 rounded">
          {loading ? 'Generating...' : 'Generate Regex'}
        </button>
      </form>
      {output && (
        <div className="mt-6 p-4 bg-slate-100 font-mono text-sm rounded border">
          {output}
        </div>
      )}
    </main>
  );
}

Best Practices for AI Wrappers

• Temperature Control: Set your temperature: 0.1 or 0.0 when you want factual, deterministic transformations (like code translation or IP subnet calculators). Set it higher (0.7+) for creative tasks.
• Data Security: Never expose API keys on the frontend. By routing through Next.js API endpoints, you hide your OpenAI key and can implement rate limiting.
• Output Validation: If your AI wrapper is expected to return JSON (for example, to feed into a graphing library), always validate the output against a strict schema, or enforce JSON formatting checks before rendering the UI.