ArchVibe
Ship It Lesson 1 of 33

You've Outgrown Lovable

The Story

Narrated

Let’s start with the truth: what you built was real.

You opened a no-code AI builder — maybe it was Lovable, maybe Base44, maybe v0, Bolt, or Replit Agent — and you described an app. And it appeared. Screens, buttons, colors, a little bit of logic. You typed in plain English and software came out the other end. It felt like magic, because it kind of was. You shipped something. You showed it to a friend. Maybe a few people even used it.

And then you hit the ceiling.

You wanted to change one specific thing — move a button, change how something worked under the hood, connect a service the builder didn’t support — and you couldn’t. The tool only lets you do what the tool lets you do. You went looking for the actual code so you could fix it yourself, and you found out you don’t really own it. It lives inside their platform. Exporting it, if it’s even possible, gives you a tangled mess you can’t run anywhere else.

Then the other walls showed up. The monthly subscription that kept creeping up. The realization that if that company changes its pricing, or its rules, or just disappears, your app goes with it. You wanted to add real user accounts, a real database that remembers things, a way to take payments, jobs that run in the background — the stuff every actual product needs — and the builder either couldn’t do it or did it in a way you couldn’t control. And worst of all: when something broke, you had no idea why. It was a black box. You could only sit there and hope it started working again.

Here’s what I want you to hear, because it matters: you did not fail. You outgrew the toy.

No-code AI builders are wonderful. They’re the best way in the world to discover that you can make software. But they have a ceiling, on purpose — they trade control for convenience. You climbed all the way up to that ceiling. The fact that you’re frustrated means you’re ready for the next thing.

And the next thing is this: you become the architect. The person who decides how the software is built, what it’s made of, and who owns it. You’re not going to learn to type code by hand — that’s not what this is. You’re going to learn to direct a builder that writes the code for you, on your computer, in files that are yours forever. No platform. No lock-in. No black box. When it breaks, you’ll understand why, and you’ll fix it.

You’ve spent enough time at the ceiling. Let’s knock out the roof.

Two Different AIs: Your Builder and Your App’s Brain

Narrated

Before we set anything up, there’s one idea that trips up almost everyone at the start, so let’s clear it up right now. There are two completely different AIs in this course, and they do different jobs.

The first one is your builder. Its name is Claude Code. This is the tool that replaces Lovable. When you say “add a button that saves the trip,” Claude Code writes and edits the actual files on your computer to make that happen. It’s the one doing the construction. Think of it as the contractor you’re directing. You never copy and paste code from a chat window — Claude Code creates and changes the files directly, right in your project. Your whole job is to tell it what you want, in plain language.

The second AI is your app’s brain. This is a service your finished app talks to while real users are using it. When someone opens your trip planner and types “five days in Tokyo,” your app sends that request off to an AI service, which writes back a day-by-day itinerary. That AI is the brain inside your product. We’ll use a service like Google Gemini for this, and you’ll get a key for it in a few minutes.

So: Claude Code builds the app. The AI brain runs inside the app for your users. One is the contractor who builds the house; the other is the smart assistant who lives in it once it’s built. They are not the same thing, they have separate logins, and they cost money in separate ways. Keep those two straight and everything else in this course will make sense.

Setting Up Claude Code (Your Builder)

Walkthrough

🔧 Tool: Claude Code

What it is: The AI builder that writes and edits files on your computer. It replaces your no-code builder. You direct it in plain English; it does the construction.

Registration: Download the app or install the extension (below) and sign in with a paid Claude plan.

Pricing: Runs on a Claude subscription — Pro ~$20/month to start, Max ~$100/month for heavy daily use. No API key needed for the builder; it uses your subscription.

You don’t need to be a “terminal person” to use Claude Code. The easiest way in is a normal app you click on, just like any other program. Pick whichever of the paths below fits how you already work.

This is the simplest option, and the one we recommend if you’re coming from a no-code builder.

  1. Go to claude.com/claude-code (or claude.ai and find the Claude Code download).
  2. Download the desktop app for your computer — there’s a Mac version and a Windows version.
  3. Install it like any other app (drag to Applications on Mac, run the installer on Windows).
  4. Open it and sign in with your Claude account — the same account as your Claude subscription (more on that below).

That’s it. You now have a window where you can talk to your builder.

Path 2: The VS Code (or Cursor / JetBrains) extension

If you already use a code editor — or you want to see the files change as Claude Code edits them — install the extension instead. It puts Claude Code right inside your editor.

  1. Open VS Code (free download at code.visualstudio.com). Cursor and JetBrains editors work too.
  2. Open the Extensions panel (the square icon in the left sidebar, or press the extensions shortcut).
  3. Search for “Claude Code” and click Install.
  4. A Claude Code panel appears. Sign in with your Claude account when prompted.

You can use both the desktop app and the extension — they’re the same tool signed into the same account. Many people keep the editor open just to watch the files appear and change in real time.

About your Claude subscription

Claude Code runs on a paid Claude plan. It uses your subscription to do the work — you do not need an API key for the builder.

  • Claude Pro (~$20/month) — plenty to start learning. In practice it gives you a good chunk of active building time, then a cooldown before the limit resets. Fine for working through these lessons at a relaxed pace.
  • Claude Max (~$100/month) — for heavy, all-day building. Practically unlimited; you’ll rarely hit the limit.

Our recommendation: Start with Pro. If you find yourself constantly waiting on the limit, upgrade to Max. Sign up at claude.ai if you don’t have an account yet.

Optional: the terminal route (for the curious)

You can skip this. The app and extension above are the recommended way in. This section is only for people who prefer the terminal.

Claude Code also installs from the command line. Open your terminal and paste the one-liner for your system:

  • macOS / Linux: curl -fsSL https://claude.ai/install.sh | bash
  • Windows (PowerShell): irm https://claude.ai/install.ps1 | iex

Then type claude inside a project folder to start it. Same tool, same login — just a different doorway. If that sentence made you tense, ignore it entirely and use the app.

Create your project folder and open it

Wherever you launch Claude Code from, do this once so your work lives somewhere you can find it:

  1. On your Desktop, create a new folder called trip-planner (right-click → New Folder, just like normal).
  2. Open that folder in Claude Code:
    • Desktop app / VS Code: use “Open Folder” and pick your trip-planner folder.
    • Terminal route: navigate into the folder and run claude.

Putting the project on your Desktop means you can always see the files in your normal file explorer — these files are yours, sitting on your computer. That’s the whole point.

Getting an AI Key for Your App’s Brain

Narrated

Now let’s set up the second AI — the brain that will live inside your app.

Remember the difference: Claude Code is the builder, and it runs on your subscription. The AI brain is what your finished app calls when a real user asks for a trip. To use that brain, your app needs a key — think of it like a membership card that lets your app talk to the AI service and proves it’s allowed to.

We recommend Google Gemini for this, because it’s the cheapest and has the most generous free tier, which is perfect while you’re learning. But everything in this course works with any major AI provider, so if you have a favorite, use it.

One important rule, and we’ll come back to it in Lesson 4 when we cover what we call the secret leak: when you get this key, save it somewhere safe like a notes app or a password manager — and never paste it into your code. For now, just get the key and keep it handy. We’ll wire it up safely later.

Walkthrough

🔧 Tool: AI API (Google Gemini / OpenAI / Anthropic Claude)

What it is: The AI brain your app calls to generate content for users (in our case, trip itineraries). This is separate from Claude Code and separate from your Claude subscription.

Registration: Sign up with one provider below, create a key, and save it somewhere safe.

Pricing: Usage-based and cheap to start; prices change, so check the provider’s pricing page. We recommend Gemini Flash to begin.

⚠️ Save the key, don’t code it. Put your key in a notes app or password manager — never paste it into your app’s code. We’ll set up the safe way to store it in Lesson 4: The Secret Leak.

  1. Go to aistudio.google.com
  2. Sign in with your Google account
  3. Click “Get API key” in the left sidebar
  4. Click “Create API key”
  5. Copy the key — it looks something like AIzaSyD...long-string...
  6. Save it somewhere safe (notes app or password manager — not in your code)

Pricing (approximate, check the page): Gemini Flash has a generous free tier — enough to learn on without paying. Paid usage is a fraction of a cent per request, the cheapest of the three options.

Option B: OpenAI (GPT)

  1. Go to platform.openai.com
  2. Create an account (email + phone verification)
  3. Go to API keys in the sidebar
  4. Click “Create new secret key”
  5. Copy and save the key

Pricing (approximate, check the page): New accounts usually get a small amount of free credit. Per-request cost is higher than Gemini, and you’ll burn through free credit faster.

Option C: Anthropic (Claude API)

  1. Go to console.anthropic.com
  2. Create an account (or sign in if you have one)
  3. Go to API Keys → Create Key
  4. Copy and save the key

Pricing (approximate, check the page): Charged per use. Important: the Claude API has its own billing, completely separate from your Claude.ai Pro or Max subscription. Using Claude Code does not give your app free access to the Claude API — they’re two different things with two different bills.

Which should I pick?

If you have no strong preference, start with Gemini Flash. It’s the cheapest, has the most generous free tier, and is more than good enough for everything we build. You can always switch providers later — your app’s code barely cares which brain it’s talking to.

Try It Yourself

Try It

No app to build yet — that’s Lesson 2. For now, just get comfortable with your new tools:

  1. Open Claude Code (desktop app or your editor’s extension) inside your trip-planner folder.

  2. Introduce yourself to your builder — type this and read the answer:

    Explain in plain English what you can do for me. I have no coding
experience and I'm coming from a no-code app builder.

    Notice how it talks back like a person. That conversation is the skill this course teaches.

  3. Confirm your project folder exists — check your Desktop. You should see a trip-planner folder sitting there. Those files are yours.

  4. Confirm your AI key is saved — open your notes app or password manager and make sure your Gemini (or OpenAI / Anthropic) key is there, safe and out of any code.

  5. Ask a curiosity question — try:

    What's the difference between you (my builder) and the AI key
I just got for my app?

    Hearing it explained back to you in its own words helps the distinction stick.

Adapt It: Build Your Own

Blank reflection prompt

Our course project is an AI Trip Planner, but the whole point is that you build your idea. Take a minute and write down your own app, using this reflection prompt. Keep it somewhere — we’ll come back to it in Lesson 2 and shape the rest of the course around it.

The app I tried to build in a no-code tool was:
[DESCRIBE YOUR APP — e.g., "a meal planner that builds a week of recipes",
"a quiz maker for teachers", "a workout planner"].

I was using [WHICH NO-CODE BUILDER — e.g., Lovable / Base44 / v0 / Bolt / Replit].

It hit a wall when I tried to:
[WHERE IT BROKE OR STOPPED — e.g., "add real user logins", "save people's
data permanently", "take a payment", "change how one screen worked",
"export the code and host it myself"].

What I really want to own and control is:
[THE THING THE BUILDER WOULDN'T LET YOU DO].

Idea starters if you’re not sure yet:

  • An AI meal planner — type in dietary restrictions, get a week of recipes
  • An AI study buddy — paste a topic, get flashcards and quiz questions
  • An AI cover-letter writer — paste a job listing, get a tailored letter
  • An AI bedtime-story generator — type a character and theme, get a story

Every one of these hits the exact same walls the trip planner hits — and every lesson in this course solves them. Pick the idea that excites you, and carry it with you from here on.

What’s Next

Narrated

You’re set up. Your builder is installed, your app’s AI brain has a key waiting, and most importantly, your mindset has shifted: you’re not a user of someone else’s tool anymore — you’re the architect of your own.

In Lesson 2, “How to Direct Your AI Builder,” you’ll build your first real, working app in a single conversation. Not by typing code, but by learning the director mindset — how to describe what you want clearly enough that Claude Code builds exactly the thing in your head. It’s the most important skill in this whole course, and you’re about to start practicing it.

Let’s go direct your builder.