How to vibecode

Vibecoding is building software by describing what you want and letting an AI handle most of the code. You decide what the app should do, try what it produces, and keep directing it until the idea works.

Lovable is one way to do this. You describe an app, it writes the code, and a publish button puts it online. I understand why people like it. The setup is quick and everything sits in one place.

I prefer using Codex locally. Codex is included with ChatGPT Plus, Pro, Business, and Enterprise/Edu. It can create files on your computer, run the app, test it, fix errors, use Git, and prepare it for deployment.

This can keep the extra development cost close to zero. GitHub has a free plan. GitHub Pages can host a personal static project for free. Vercel has a free Hobby plan for personal and non-commercial projects. A domain is usually the only thing I would pay for at the beginning.

The setup takes longer than opening Lovable for the first time. After that, you have a cheaper and much more capable development environment. You can use almost any library, database, payment provider, authentication service, or hosting platform. If the app grows beyond a simple website, Codex can work on the backend, tests, scripts, scheduled jobs, data migrations, and infrastructure in the same repository.

This guide explains the complete route: set up the computer, build the first version, save checkpoints with Git, put the code on GitHub, deploy it, and connect a domain.

Jump to guide

Choose How Much Convenience You Want

Lovable combines several existing tools behind one interface. It writes code, previews the result, connects services, hosts the app, and handles deployment. Its current pricing uses credits, with usage covering building, Lovable Cloud, and AI features inside deployed apps.

There is real value in removing setup work. Someone who wants a landing page this afternoon may reasonably prefer to pay and avoid learning Git or DNS. A company may also prefer one managed platform because staff time costs more than software.

For a personal project or a small app, I would rather spend an hour setting up the normal tools. I already pay for ChatGPT. Paying another subscription each month for access to the code generator feels wasteful, especially when small corrections can consume credits too.

Maintenance is where the difference becomes more obvious. In a local project, I can ask Codex to inspect a bug, change the relevant files, run the tests, and commit the fix. There is no separate builder credit charged for every attempt. Hosting and external services may still cost money, but I pay those providers directly according to what the app uses.

Lovable also offers to buy and register a domain on the user’s behalf. The domain is configured automatically and managed through the Lovable workspace. Convenient, yes. I still prefer to buy mine from an independent registrar. The domain should remain easy to control even if I replace every other part of the app.

Making it effortless to enter an ecosystem and increasingly inconvenient to leave is not very lovable.

And Riff?

Riff belongs in a slightly different conversation. The Oslo startup was founded in 2021 by three former Cognite employees and raised a $16 million Series A in 2025. It started with a broad pitch around building apps for work. Today, its website is largely about supply-chain agents that connect to ERPs, email, procurement systems, and logistics tools.

Think purchase orders rather than personal expense trackers. A Riff agent might chase a supplier, check the reply against SAP, update the order, and send an unusual case to a buyer. Riff provides the backend, database, authentication, schedules, logs, and integrations needed to keep that workflow running. It also works alongside a company’s domain experts and aims to launch the first agent within four to eight weeks.

This is useful when a mistake can affect a real shipment or invoice and the company needs support, controls, and someone to share the implementation risk. It is probably excessive for the person reading this guide. If I were building a small app or testing a startup idea, I would still begin with Codex and an ordinary repository.

More Control Gives You More Power

Website builders work best while your needs resemble the paths they were designed for. The moment you want something unusual, you start negotiating with the platform.

With Codex working directly in a local repository, the boundaries are much wider. You can ask it to:

use a framework or programming language suited to the project;
connect to any service with an API;
build a custom backend instead of relying on one supported integration;
add automated tests and browser tests;
process files or data in the background;
build a browser extension, command-line tool, mobile app, or desktop app;
move the deployment to another provider;
inspect and change any part of the code when something goes wrong.

You do not need these features on day one. I would still begin with the smallest possible app. The value lies in knowing that a simple prototype can grow without forcing the product back into a builder’s preferred shape.

Lovable can sync code with GitHub, so using it does not automatically trap a project forever. The local approach starts from a cleaner position: the ordinary repository is the product’s source of truth, while each service attached to it can be replaced.

Follow This Exact Workflow

You do not need to know how to code before starting. Follow these steps in order and let Codex explain anything unfamiliar.

1. Install and Open Codex

Go to the official ChatGPT desktop download page. The current desktop app includes Codex on both macOS and Windows.
Download the version for your computer and open the installer.
Open the ChatGPT app and sign in with the same account you use for ChatGPT.
Select Codex inside the app.

OpenAI’s official onboarding has the same basic flow: sign in, select a project folder, then start a task.

2. Create a Folder for the App

The folder will hold every file belonging to the app.

On a Mac, open Finder → Documents. On Windows, open File Explorer → Documents. Create a folder called Projects, open it, then create another folder called expense-tracker.

Return to Codex:

Click Add project.
Select the expense-tracker folder you just created.
Click Continue.

Codex can now work inside that folder. Keep each future app in its own folder.

3. Ask Codex to Prepare the Computer

A basic web app needs Git, Node.js, and npm. Git saves checkpoints. Node.js runs the development tools. npm comes with Node.js and downloads the packages used by the app.

Paste this into Codex:

I have never set up a local development environment. Check whether Git, Node.js, and npm are installed. Explain the result in plain language. If something is missing, use its official installer or an established package manager. Tell me what you plan to do and ask for approval before installing anything. Use the current Node.js LTS version. When finished, verify all three tools and show me their versions. Do not build the app yet.

Codex will run three checks:

git --version
node --version
npm --version

You do not need to type or memorise them. A successful result shows a version number for each tool.

Codex may ask for permission to download or install something. Read the request and approve it if the source is official. Your computer may also show an administrator-password box. Enter the password into that system box yourself. Never paste your computer password into the Codex chat.

If Codex cannot complete an installation, use these official downloads:

Install the LTS version from Node.js.
On Windows, install Git from git-scm.com using the default options.
On macOS, running git --version may open Apple’s developer-tools installer. Click Install, wait for it to finish, then reopen Codex.

After a manual installation, quit and reopen Codex. Open the same expense-tracker project and paste the environment-check prompt again. Continue only when Git, Node.js, and npm all return version numbers.

4. Build the First Version

Paste this prompt:

Build a mobile-friendly expense tracker for one person. It should record an amount, date, category, and note, then show spending totals by category. Save the data in the browser for now. Keep the interface simple and choose the simplest suitable web stack. Explain the plan before building. Run the finished app locally, test the main flow, and tell me how to start it again next time.

Codex will propose a plan and ask for permission before some commands. Let it create files inside expense-tracker and install the project’s packages. If it asks for access outside that folder or proposes deleting unrelated files, stop and ask why.

When the build finishes, Codex should give you an address such as http://localhost:3000. Click it or copy it into your browser. localhost means the app is running only on your computer. Nobody else can visit it yet.

Keep the development server running while testing. If the page stops loading after you close Codex or restart the computer, reopen the same project and type:

Start the app locally and give me the address.

Codex will usually run npm run dev and show the local address again.

5. Test It Before Adding More Features

Use the app like a careless user. Leave fields empty, enter strange values, refresh the page, and try it on a narrow browser window. Send each problem to Codex as a separate request.

Then paste:

Test the main expense-recording flow. Check the browser console for errors. Run the production build. Explain where the data is stored, whether the app has a backend, which external services it calls, what could cost money, and whether any secrets exist in the code.

Ask Codex to fix every build or test failure before continuing.

6. Create the GitHub Repository

GitHub will keep an online copy of the project. This copy also connects the app to Vercel or GitHub Pages.

Create an account at github.com if you do not have one.
Sign in, click the + button in the top-right corner, and choose New repository.
Enter expense-tracker as the repository name.
Choose Public if you plan to use GitHub Pages. Vercel can use either Public or Private.
Leave Add a README, Add .gitignore, and Choose a licence unchecked. The project already exists on your computer.
Click Create repository.
Copy the HTTPS address shown under Quick setup. It will look like https://github.com/your-name/expense-tracker.git.

Return to Codex and replace the example address in this prompt with the address you copied:

Check the project for passwords, API keys, tokens, and other secrets. Create a suitable .gitignore. Initialise Git, stage the project files, create a commit called “Create first working version”, connect this repository: https://github.com/your-name/expense-tracker.git, and push it. Explain each step and stop if authentication fails.

GitHub may open a browser window asking you to sign in and authorise Git. Complete that sign-in yourself. When Codex finishes, refresh the repository page. You should see the app’s files.

Git Checkpoints in Plain English

Git runs on your computer. GitHub stores the online copy. A commit is a named checkpoint that you can return to after a bad change.

The everyday loop is:

git pull
git status
git add .
git commit -m "Add expense category filter"
git push

git pull downloads newer changes from GitHub.
git status lists the files that changed.
git add . selects the changed files for the checkpoint.
git commit saves the checkpoint on your computer.
git push uploads the checkpoint to GitHub and normally triggers a new Vercel deployment.

You can ask Codex to perform this loop. Tell it to show and explain git status before staging anything. Create a checkpoint whenever a useful change works. Small checkpoints are easier to undo.

7. Put the App Online with Vercel

Vercel is the simplest default for the web app built in this example.

Go to vercel.com and choose Continue with GitHub.
Authorise Vercel to access the expense-tracker repository.
In Vercel, click Add New → Project.
Find expense-tracker and click Import.
Vercel should detect the framework and build settings. Leave them unchanged unless Codex gave you different instructions.
Click Deploy.
Wait for the deployment to finish, then click the generated address ending in .vercel.app.

That address is public. Send it to another person and ask them to try the app. Future pushes to GitHub will normally update it automatically. Vercel documents this workflow in its Git deployment guide.

The free Vercel Hobby plan is restricted to personal and non-commercial use. Upgrade or choose a commercial host before using the app for a business or client.

GitHub Pages as a Static Alternative

GitHub Pages works for portfolios, landing pages, and browser-only tools. It cannot run private server code or a backend, and GitHub prohibits using it as free hosting for a commercial SaaS or online business.

Deployment details vary by framework. Ask Codex:

Confirm that this app is fully static and suitable for GitHub Pages. If it is, configure a GitHub Actions Pages deployment, push the changes, and tell me exactly what to select under the repository’s Settings → Pages screen.

Follow the settings Codex gives you and GitHub’s Pages documentation. Use Vercel when Codex says the app requires server-side features.

8. Connect a Namecheap Domain

Keep the free .vercel.app address until you are happy with the app’s name. Then buy the domain from Namecheap or another independent registrar.

For a Vercel deployment:

Open the project in Vercel and go to Settings → Domains.
Enter your domain and click Add.
Keep that page open. Vercel will show the DNS records it expects.
In another tab, open Namecheap and go to Domain List → Manage → Advanced DNS.
Remove Namecheap parking records only when they use the same host name that Vercel wants you to configure.
Click Add New Record and copy the record type, host, and value shown by Vercel. Do not copy DNS values from an old tutorial.
Save the record, return to Vercel, and wait for the domain to verify. DNS can take time to update.
Test both the root domain and its www version. Choose one as the primary address and redirect the other.

Namecheap’s connection guide explains where A and CNAME records are entered.

Keeping the domain in a separate registrar account makes future moves easier. You can change the host or rewrite the app while keeping the same public address.

What Will Eventually Cost Money?

A personal app that saves data in the browser can run for little more than the annual domain fee. Shared accounts and commercial products need more infrastructure.

Common costs include:

database storage and requests;
authentication beyond free allowances;
file storage;
email delivery;
server functions and background jobs;
payment processing fees;
AI API usage;
commercial hosting.

This is another reason I prefer assembling the services myself with Codex. I can start with the cheapest adequate option, see exactly where the money goes, and replace a service later. Lovable packages much of this work into a smoother experience, but it cannot make the underlying infrastructure free.

Start with local browser storage. Add a free database tier when several devices need the same data. Add authentication when the app has real users. Add payments when somebody wants to pay. Keep each stage boring and small.

When Lovable Still Makes Sense

I would use Lovable for a quick visual prototype, a disposable landing page, or a project where setup time costs more than the subscription. Some people have no interest in touching Git, deployment settings, or DNS. Paying Lovable to handle those details is reasonable.

My preference changes when I expect to maintain the app for months, add unusual features, or turn it into a business. At that point, development credits and platform limits matter more. I want the repository on my computer, the domain in my registrar account, and the freedom to choose each service.

The local route is slightly awkward for the first hour. Codex handles most of that awkwardness. Every project after the first becomes easier, while the development environment remains useful for far more than a Lovable-style web app.

If you already pay for ChatGPT, start there before buying another builder subscription. Create a folder, ask Codex for one small app, run it, put it on GitHub, and deploy it.

That is enough to vibecode. The AI handles most of the implementation while you decide what deserves to be built, test whether it works, and keep control of the finished product.