How to Add a Database to Your AI-Built App With Neon

Some links may be affiliate links. We may earn a commission at no extra cost to you.

Your AI-built app looks great in the browser. Users can type things in, click buttons, and see results — but the moment they refresh the page, everything disappears. That's because your app has no memory. It has no database.

This is the most common gap between a demo and a real app. Here's how to close it in about 10 minutes using Neon — a free serverless Postgres database that works well with the tools beginners already use.

Why Your AI-Built App Probably Has No Memory

What "no database" actually means for your users

When someone fills out a form, creates an account, or saves a piece of data in your app, that data needs somewhere to live permanently. Without a database, it only exists in the browser's temporary memory — so it vanishes on refresh, and no other user can see it.

Think of a database like a spreadsheet that lives on a server. Every row is a record. Your app reads from it and writes to it. The difference is that a real database can handle thousands of users at once, searches in milliseconds, and never loses data when someone closes their tab.

The gap between a demo and a real app

Tools like Lovable, Bolt.new, and Cursor are exceptional at building the visible layer of an app fast — the UI, the layout, the logic. They're the entry point for most vibe coders.

But a working product needs persistence. User signups need to be stored. Items added to a cart need to survive a page reload. Submitted forms need to land somewhere you can actually read them. That's the gap this guide fills. If you're still deciding which builder to use, the AI app builders comparison breaks down Lovable, Bolt, Replit, and others side by side.

What Is Neon and Why Does It Work for Beginners

Serverless Postgres in plain English

Postgres is one of the most widely used databases in the world — it's what powers large chunks of the professional web. Neon gives you a real Postgres database without any of the normal setup pain: no server to configure, no software to install, no terminal commands to figure out.

"Serverless" just means Neon manages the infrastructure for you. You create a project, get a connection string (one line of text your app uses to talk to the database), and you're done. The database scales automatically and sleeps when it's not in use, which is why the free tier is genuinely usable.

What the free tier actually includes

Neon's free tier includes 100 compute-unit hours per month per project, 0.5 GB of storage per project, and up to 100 projects. For a beginner app or side project, that's plenty. The database autosuspends after 5 minutes of inactivity, which is how Neon keeps costs down — and why you never pay for idle time.

If you outgrow those limits, the Launch plan starts at $5/month (usage-based minimum) and adds higher compute caps and production-grade features.

Why it beats setting up your own database

The alternative — running your own Postgres on a server like a DigitalOcean droplet or an AWS RDS instance — requires configuring security groups, managing backups, handling connection pooling, and keeping the server alive. None of that is hard to learn eventually, but it's the wrong thing to learn on day one. Neon handles all of it so you can stay focused on your app.

Step 1 — Create Your Neon Database (Under 2 Minutes)

Sign up and create a project

Go to neon.tech and create a free account — GitHub OAuth works if you want to skip the email step. Once you're in, click New Project. Give it a name (your app name works fine), pick a region close to your users, and click Create Project. That's it. Neon sets up the database in seconds.

You'll land on a project dashboard. This is where all your tables, queries, and connection details live.

Grab your connection string

On the project dashboard, find the Connection Details panel. It will show a connection string that looks like this:

postgresql://username:password@ep-something-12345.us-east-2.aws.neon.tech/dbname?sslmode=require

Copy this string and keep it somewhere safe — you'll use it in the next step. Treat it like a password: it gives full access to your database, so don't paste it into public chat or commit it to a public GitHub repo.

Step 2 — Connect Neon to Your AI Tool

How you connect Neon to your app depends on which builder you're using. There are three paths.

Option A: Lovable

Lovable has Supabase built in as its native database solution — when you connect a database inside Lovable, it provisions a Supabase Postgres instance automatically. Lovable does not support swapping in an external Postgres connection string directly.

If you're starting fresh and want Neon specifically, the cleanest path is to use Lovable for the frontend and wire up the backend connection manually through Cursor or Claude Code (see Option C below). Lovable generates clean React code that you can then edit in a proper editor.

Option B: Bolt.new

Bolt.new works well with Neon because you can paste your connection string directly into a prompt and tell Bolt what to do with it. Try something like this:

I have a Neon Postgres database. My connection string is:
postgresql://username:password@ep-something-12345.us-east-2.aws.neon.tech/dbname?sslmode=require

Please add a users table that stores name, email, and created_at.
Then update the signup form to save new users to this table.

Bolt will scaffold the data layer, add the necessary dependencies (usually pg or @neondatabase/serverless), and wire the form to write to your database. Review what it builds before shipping — always check that the connection string isn't being exposed in client-side code.

Option C: Cursor or Claude Code (with the Neon MCP server)

This is the most powerful option if you're using Cursor or Claude Code. The Neon MCP server lets your AI agent talk to your database directly — it can create tables, run queries, inspect your schema, and fix errors without you typing a single SQL command.

The next section walks through setup step by step.

Step 3 — Set Up the Neon MCP Server in Cursor or Claude Code

What the MCP server does

MCP (Model Context Protocol) servers extend what an AI agent can see and do. The Neon MCP server gives Claude or Cursor direct access to your Neon database — it can list tables, run queries, create schemas, and read results. You describe what you want in plain English; the agent handles the SQL.

If you're not familiar with MCP servers yet, this guide to MCP servers for beginners covers the concept — and Neon is one of the strongest examples of an MCP that removes real friction for beginners.

How to install and configure it (step by step)

You'll need Node.js installed. The fastest way to set up the Neon MCP server is with one command that auto-configures it across Cursor, VS Code, and Claude Code:

npx neonctl@latest init

This uses OAuth — a browser window opens to authorize access. No API key management required.

If you prefer to configure it manually, add the following to your editor's MCP config file.

For Cursor, open your ~/.cursor/mcp.json (create it if it doesn't exist):

{
  "mcpServers": {
    "Neon": {
      "type": "http",
      "url": "https://mcp.neon.tech/mcp"
    }
  }
}

For Claude Code, add the same block to your .mcp.json file in your project root, or use the global config at ~/.claude.json.

If you prefer API key authentication over OAuth, you can use your Neon API key instead. Go to your Neon console, click your account name, then Account Settings > API Keys > Generate new API key. Then use this config format:

{
  "mcpServers": {
    "Neon": {
      "type": "http",
      "url": "https://mcp.neon.tech/mcp",
      "headers": {
        "Authorization": "Bearer your-neon-api-key-here"
      }
    }
  }
}

Restart Cursor or Claude Code after saving the config. You should see the Neon MCP server listed as connected in your editor's tools panel.

Tell your AI to create a table and wire it to your app

With the MCP server running, you can use natural language to manage your database. In your AI chat, try:

Using the Neon MCP server, create a table called "form_submissions" with columns:
- id (auto-incrementing primary key)
- name (text, not null)
- email (text, not null)
- message (text)
- submitted_at (timestamp, default now())

Then update the contact form in my app to write to this table on submit.

The agent will run the SQL to create the table, update your app's backend code to use the Neon connection string, and handle error states. This is where the MCP workflow really shines — you're describing intent, not writing queries.

Step 4 — Test That Data Is Actually Saving

Use Neon's dashboard to confirm rows are appearing

After submitting a test entry through your app's form, go to your Neon dashboard and click Tables in the left sidebar. You should see your table listed. Click it — if rows are appearing, your app is successfully writing to the database.

The Neon SQL Editor (also in the dashboard) lets you run queries directly:

SELECT * FROM form_submissions ORDER BY submitted_at DESC LIMIT 10;

This shows your 10 most recent submissions. If the table is empty after testing, something in the connection or the form handler isn't working — paste the error from your browser console or server logs into your AI chat and ask it to fix it.

A simple test prompt to run in your AI tool

If you're not sure whether things are wired up correctly, use this prompt to have your AI verify the connection:

Using the Neon MCP server, run a quick test:
1. Check if the "form_submissions" table exists in my database
2. Insert one test row with name="Test User", email="test@example.com", message="hello"
3. Confirm the row was saved by querying the table

If all three steps succeed, your database is live and your app has memory.

What to Do When You Outgrow the Free Tier

When to upgrade and what it costs

The free tier is right for: learning, prototyping, personal projects, low-traffic apps. You'll know you're hitting the limits when Neon starts emailing you about compute-hour usage or when your app starts returning "database suspended" errors at peak times.

At that point, the Launch plan ($5/month minimum, usage-based) is a reasonable step up — it increases storage, gives you higher compute caps, and is billed on actual usage. A lightly-used project on the Launch plan often runs closer to $5–10/month in practice.

Alternatives worth knowing about

• Supabase — also Postgres, also has a free tier, and Lovable integrates with it natively. More features out of the box (auth, storage, realtime) but slightly more to configure.
• PlanetScale — MySQL-based, no free tier (base plan starts at $5/month), slightly more developer-focused.
• Turso — SQLite-based edge database, extremely fast, very beginner-friendly. Good for read-heavy apps.

For most beginners building on Neon, you won't need to switch. The free tier is genuinely usable for months.

FAQ

Do I need to know SQL to use Neon?

Not to get started. With the Neon MCP server and Cursor or Claude Code, you can describe your data needs in plain English and the AI will handle the SQL. That said, learning a few basic queries (SELECT, INSERT, WHERE) will help you verify things are working and debug issues faster.

Is Neon free forever?

The free tier is not a trial — there's no expiration date. Neon's free plan is designed for developers to keep hobby projects running indefinitely. The limits (compute hours, storage) are what constrain you, not a countdown clock.

Does Neon work with Next.js / plain HTML apps?

Yes. Neon is just Postgres — any language or framework that can connect to Postgres can use Neon. For Next.js, the @neondatabase/serverless package is the recommended driver (it's optimized for serverless environments). For plain HTML apps with a Node backend, the standard pg package works fine.

---

Once your database is wired up, the natural next step is getting the whole app live for real users. This guide to deploying with Vercel and Claude Code picks up exactly where this one ends.