Your First AI App in 30 Minutes

Introduction

Welcome to your first AI app building tutorial! You do not need any prior programming experience to follow along. We will build a simple Email Subject Line Generator using Next.js and the OpenAI API.

By the end of this tutorial, you will have a working web application that takes a description as input and outputs 5 catchy email subject lines generated by AI.

Step 1: Environment Setup

First, we need to create a new project. We will ask our AI assistant (like Cursor or v0) to do the heavy lifting.

Prompt for your AI:

"Please create a new Next.js project with Tailwind CSS. It should be a single-page app with the title 'Subject Line Generator', a text input asking 'What is your email about?', and a 'Generate' button."

The AI will output terminal commands for you to run and initial source code for page.tsx. Run the setup command in your terminal:

npx create-next-app@latest subject-generator
cd subject-generator

Step 2: Connect to OpenAI

You will need an OpenAI API key. Grab one from platform.openai.com.

Save your key into a .env.local file at the root of your project:

OPENAI_API_KEY=sk-your-secret-key-here

Now, ask the AI to implement the logic for the website.

Prompt for your AI:

"Update the app to use an OpenAI API route. Create an API route at /api/generate using the openai npm package. When the user clicks the Generate button, send the input text to this API route along with a prompt asking for 5 catchy email subject lines. Display the list of results below the button."

Step 3: Refine the UI

The app works smoothly now, but the interface looks a bit basic. Let's make it look more professional.

Prompt for your AI:

"Make the UI look modern and beautiful. Use a dark theme, glassmorphism effects on the main card, and a blue gradient on the Generate button. Add a loading spinner while the API request is processing."

Summary

That's it! You have successfully built an AI app by directing an AI with prompts, rather than writing every line of syntax yourself. This is the core workflow for building anything with AI today.