Blog
4 min read

How to Build an AI App: A Beginner's Step-by-Step Guide

The parts every AI app needs — a frontend, a backend that holds your API key, a model API, a database and usage limits — and the steps from idea to a working, deployed app. With a minimal code example and the mistakes that cost beginners the most.

"AI app" usually means an app that sends something to an AI model — text, an image, a document — and does something useful with the reply. You don't need to train a model. You call one through an API, the same way you'd call any other service.

Here's how the pieces fit, and the steps to build one.

The parts of an AI app

Browser (your UI)
   │
   ▼
Your backend  ── holds the API key, checks limits
   │
   ▼
Model API (Claude, OpenAI, Gemini…)
   │
Database ── users, history, results
  1. Frontend — the page people use. React, Next.js, or whatever your builder made. (Frontend vs backend)
  2. Backend — a server route that calls the model. This is not optional; see below.
  3. The model API — you send a request with your API key and get a response. (What is an LLM?)
  4. Database — store users, their requests and results. (What is a database?)
  5. Limits — per-user caps so costs can't run away.

Step 1: pick one job

"An AI assistant for everything" is hard to build and hard to sell. "Turn a recipe URL into a shopping list" is a weekend project that people understand instantly. Write down the input, the output, and who it's for. (How to plan your first app)

Step 2: get it working in a chat window first

Before writing code, try your idea in Claude or ChatGPT. Paste realistic inputs and refine the prompt until the output is reliably good. This is your system prompt. (What is a system prompt?, Prompt engineering)

Step 3: get an API key

Sign up for a model provider's developer platform and create a key. (How to get a Claude API key) Set a monthly spending limit straight away.

Step 4: call the model from your backend

Never call the model from browser code. Anything in the browser can be read by anyone, including your API key. (Keep API keys out of an AI-built app)

A minimal backend route in Node.js with Anthropic's SDK:

import Anthropic from '@anthropic-ai/sdk'

const client = new Anthropic() // reads ANTHROPIC_API_KEY from the environment

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

  const message = await client.messages.create({
    model: 'claude-haiku-4-5',
    max_tokens: 1024,
    system: 'Turn the recipe into a grouped shopping list. Reply in plain text.',
    messages: [{ role: 'user', content: recipeText }],
  })

  const text = message.content.find(block => block.type === 'text')?.text ?? ''
  return Response.json({ list: text })
}

Start with a small, cheap model like Haiku and move up only if quality needs it. (Claude Opus vs Sonnet vs Haiku)

Step 5: add the things real users need

Step 6: deploy

Your app needs to run somewhere with the API key stored as an environment variable, not in the code. (Environment variables explained, What is web hosting?)

Step 7: watch costs and quality

Log every request's token usage. Work out cost per user per month before you set a price. Keep a set of test inputs and re-run them whenever you change the prompt or model. (Evaluating LLM outputs)

The mistakes that cost beginners most

  1. API key in frontend code → someone finds it and spends your money.
  2. No per-user limits → one user or bot runs up a large bill.
  3. Using the biggest model for everything → 5–10× the cost for no visible gain.
  4. Not saving results → paying again to regenerate the same answer.
  5. Trusting the output blindly → models make things up. (Why does AI hallucinate?)

EasySpawn gives your AI app a server with a backend for your API keys, Postgres for users and history, HTTPS and daily backups — plus Claude Code to help you build it. See how it works or join the waitlist.

Related: How to Add an AI Chatbot to Your App · What Is an AI Wrapper? · Claude API Pricing Explained · What Is Function Calling?

Keep reading