1. Courses
  2. AI Engineering
  3. Build and Launch a Site with AI
  4. Stop 1

25 minBeginner

Your workbench: accounts and tools

Before the AI agent writes a single line, you need a safe workbench: five accounts, four tools on your laptop and a habit of locking every door. This lesson sets it all up in about an hour, the same way Kolom itself was started.

By the end you can

  • Explain what GitHub, Vercel, Supabase and an AI coding agent each do for your site
  • Create the accounts under one owner address, with two-factor sign-in and saved recovery codes
  • Install VS Code, Git, Node.js and an AI coding agent, and check each one works
  • Know which services are free to start, which cost money, and how to pay for them

The everyday picture

Think of opening a small food stall. You need a kitchen to cook in, a notebook with every recipe and every change to it, a spot at the market where people can buy, and a pantry that keeps the ingredients. You also hire a fast helper who cooks whatever you describe.

And you need keys. The kitchen, the pantry and the cash box each get a lock, and the keys hang on one ring that you never lend out. Your laptop is the kitchen, GitHub is the notebook, Vercel is the market spot, Supabase is the pantry and the AI agent is the helper. The password manager is the key ring.

The map: what each piece does

A modern small website is a few services joined together. Each one does one job well, and most have a free plan for small sites.

  • Your laptop holds the project folder. You open it in and talk to the agent there.
  • An AI coding agent, such as Claude Code, reads and changes the files in that folder and runs commands for you, after you approve.
  • GitHub keeps a copy of your code and every saved version of it (lw-03).
  • Vercel builds the code from GitHub and puts the site on the internet (lw-05).
  • Supabase stores data and handles sign-in (lw-04).
  • Later, in Run and Grow Your Site: Cloudflare for your domain, Resend for e-mail, Google for analytics, search and ads.
You + agent push GitHub every push Vercel Supabase data, sign-in you paste SQL HTTPS Visitors Later: Cloudflare, Resend, Google next course
Your stack. Code goes from your laptop to GitHub, and Vercel builds every push into the live site. Supabase stores data and handles sign-in. The SQL that shapes the database you paste in yourself.

Quick check

A visitor saves a favourite recipe. Which service stores it?

Accounts, made safely

Whoever controls these accounts controls the site. Set them up once, properly:

  1. One owner e-mail address for the site, not your personal one. If you leave, or a teammate takes over, the address goes with the site.
  2. A password manager (for example Bitwarden, 1Password or the one built into your browser). Every account gets a long, different password it makes up.
  3. GitHub first. Then sign up to Vercel and Supabase with "Continue with GitHub", so there are fewer passwords to protect.
  4. Two-factor sign-in on every account. with an is safer than SMS codes.
  5. Save the recovery codes each service shows when you turn on 2FA. Print them or keep them in the password manager. Lose your phone without them and you may lose the account.

Quick check

You turn on two-factor sign-in for GitHub. Which step protects you if your phone is stolen?

What it costs, and how to pay

GitHub, Vercel's Hobby plan and Supabase's free plan cost nothing for a small site. The AI agent usually does: Claude Code needs a paid Claude plan or pay-as-you-go API credits, and other agents are similar. Free limits and prices change often, so read each pricing page before you start, and write the plan you chose on your account sheet.

Two limits matter early. Vercel's Hobby plan is for personal, non-commercial use, so plan for a paid plan before the site earns money. Supabase pauses a free project after about a week with no activity; you can restart it from the dashboard.

Most of these services bill international cards in US dollars. In Bangladesh, ask your bank for a dual-currency card that is enabled for international online payments; that spending may count against a yearly limit. Mobile wallets like bKash usually can't pay these vendors directly.

Do it

Install the four tools and check each one. Installer screens change; take the defaults unless a step says otherwise.

  1. Install VS Code

    Download it from code.visualstudio.com and install. On Windows, tick "Add to PATH" if offered. Open it once.

  2. Install Git

    From git-scm.com (on Windows this is "Git for Windows"; the defaults are fine). Git is what makes save points (lw-03).

  3. Install Node.js LTS

    From nodejs.org, pick the version marked . Node runs your site on your laptop, and npm, which comes with it, installs the packages the site needs.

    On Windows you can install all three from a PowerShell window instead:

    PowerShell
    winget install --id Microsoft.VisualStudioCode -e
winget install --id Git.Git -e
winget install --id OpenJS.NodeJS.LTS -e

  4. Install the AI agent

    Follow the agent's official install page. For Claude Code, Anthropic's docs give a one-line installer for each system, or you can use npm. Then run claude once and sign in with the owner account.

    Terminal
    npm install -g @anthropic-ai/claude-code

  5. Check everything

    In VS Code, open Terminal, New Terminal and run these. Each should print a version number. Yours will be newer or different.

    Terminal
    node -v
npm -v
git --version
claude --version
    Output
    v24.11.0
11.6.1
git version 2.51.0.windows.1
2.0.30 (Claude Code)

    "Command not found" usually means the terminal opened before the install. Close VS Code, open it again and retry.

  6. Tell Git who you are

    Every save point records a name and e-mail. GitHub gives you a private "noreply" address in Settings, Emails; use it to keep your real address out of public history.

    Terminal
    git config --global user.name "Your Name"
git config --global user.email "12345678+yourname@users.noreply.github.com"
You VS Code instructions AI agent in the terminal Files edits Node, npm runs the site Git save points you check Browser
How the tools work together. You give instructions; the agent edits files, runs Node to start the site and uses Git for save points. You check every change in the browser.

Bring it to your team

Ask these before anyone starts building, even if the team is you and one helper.

  • Is every account under the owner address, and does someone besides me know where the recovery codes are?
  • Is two-factor sign-in on for all five accounts, with an app rather than SMS?
  • Which plan is each service on, and who gets the bill?
  • What will we do the day the site starts earning money and needs commercial plans?

Red flags

  • Passwords kept in a chat, a spreadsheet or the account sheet itself.
  • The site's accounts belong to one person's personal e-mail.
  • Nobody knows which card pays for the AI agent.

Practice

Make your account sheet

Create the five accounts for your own site (or for Mangrove Kitchen) and write an account sheet like the one above. Turn on 2FA everywhere, then run the four version checks.

  • Every account uses the owner address or signs in through GitHub
  • Each row says which second factor is on and where its recovery codes are
  • Each row names the plan, free or paid, and who pays
  • The sheet contains no password, key or recovery code
  • All four version commands print a version
Show a model answer

Rows for GitHub, Vercel, Supabase, Google and the AI agent. Vercel and Supabase say "GitHub" as the sign-in. Every row says "authenticator app"; GitHub and Google add "recovery codes in the password manager". Plans: four free, the agent on a paid plan billed to one named card. Below the table: "Passwords: owner vault. Next review: in three months." The terminal shows versions for node, npm, git and claude.

Check yourself

Your friend wants to sign up to Vercel with a new e-mail and password. What would you suggest instead?

After installing Node, the terminal in VS Code says "node: command not found". What do you try first?

Mangrove Kitchen starts showing ads that earn money. Which account sheet line should change?

Flashcards

Open my review

Key takeaways

  • Your site is a few services joined together: laptop and agent, GitHub, Vercel and Supabase, with more to come.
  • Put every account under one owner address, protected by a password manager, an authenticator app and saved recovery codes.
  • Install VS Code, Git, Node LTS and the agent, and check each one in the terminal.
  • Start on free plans, but know the limits: Vercel Hobby is non-commercial and idle Supabase free projects pause.

Sources and further reading

Episode transcriptKeys before code · about 8 minutes · tap any line to play from there
  1. NadiaImran, picture this. A year from now, Mangrove Kitchen is a busy site, and the person who built it moves to another job. Who can still sign in to the hosting, the database and the code?
  2. ImranOn my first try? Nobody. I'd have signed up for everything with my personal Gmail in about four clicks.
  3. NadiaThat's why this course starts before any code. Today is the workbench: the accounts, the tools on your laptop, and the locks on every door.
  4. ImranAnd this is the same way Kolom itself was started, right? One person, an AI agent, and these same services.
  5. NadiaExactly the same. So let's start with a picture.
  6. NadiaThink of opening a small food stall. You need a kitchen to cook in, a notebook with every recipe and every change to it, a spot at the market, and a pantry for ingredients.
  7. ImranAnd a helper, I'm guessing. Someone fast who cooks whatever I describe.
  8. NadiaYes. And keys for the kitchen, the pantry and the cash box, all on one ring you never lend out.
  9. ImranSo map it for me. The kitchen is my laptop.
  10. NadiaRight. The notebook is GitHub, the market spot is Vercel, the pantry is Supabase, and the helper is the AI coding agent. The key ring is your password manager.
  11. NadiaIf you can see your screen, the first diagram shows the whole map from top to bottom. If not, picture your laptop at the top, GitHub below it, and Vercel below that, sending the site to visitors.
  12. ImranAnd Supabase sits beside Vercel?
  13. NadiaBeside it, with a two-way arrow labelled data and sign-in. There's also a dashed arrow from you straight to Supabase, because you paste the database instructions in yourself.
  14. ImranLet me check I've got the jobs right. GitHub keeps the code and every saved version. Vercel builds the code and puts it on the internet. Supabase stores data and handles sign-in.
  15. NadiaPerfect. And in the next course you add Cloudflare for your domain, Resend for e-mail, and Google for analytics, search and ads.
  16. ImranQuick one. A visitor saves a favourite recipe. Where does it go? I'd have said GitHub, because it holds everything.
  17. NadiaThat's a common guess, and it's wrong. GitHub holds code, never your visitors' data. The favourite goes into the database, which is Supabase.
  18. ImranOkay. Now the accounts. What's the right order?
  19. NadiaFirst, one owner e-mail address for the site. Not your personal one. If you leave, the address goes with the site.
  20. NadiaSecond, a password manager, so every account gets a long, different password that you never have to remember.
  21. ImranThird, GitHub?
  22. NadiaGitHub. Then you sign up to Vercel and Supabase with Continue with GitHub, so there are fewer passwords to protect.
  23. ImranAnd two-factor sign-in on all of them.
  24. NadiaOn every single one. Two-factor means signing in needs your password and a code from your phone. Use an authenticator app, which shows a new six-digit code every thirty seconds.
  25. ImranWhy not SMS codes? They're easier.
  26. NadiaThey are, but text messages can be intercepted, and a stolen SIM card gets them too. An app keeps the codes on your phone.
  27. ImranAnd if I lose the phone?
  28. NadiaThat's the step everyone skips. When you turn on two-factor, each service shows recovery codes. Save them in the password manager or print them. Without them, a lost phone can mean a lost account.
  29. NadiaHere's how it went at Mangrove. You made an owner mailbox for Mangrove Kitchen and an account sheet: each service, how you sign in, which second factor, which plan, and who pays.
  30. ImranWith the passwords in it?
  31. NadiaNever. The sheet says where things are. The passwords stay in the owner vault, shared with you, Imran.
  32. ImranI remember the first draft. Vercel and Supabase were under the builder's personal e-mail.
  33. NadiaMoved on day one. The site has to stay with Mangrove if anyone changes jobs.
  34. ImranLet's talk money. What does all this cost?
  35. NadiaGitHub, Vercel's Hobby plan and Supabase's free plan cost nothing for a small site. The AI agent usually does. Claude Code needs a paid Claude plan or pay-as-you-go credits, and other agents are similar.
  36. ImranAny traps on the free plans?
  37. NadiaTwo. Vercel's Hobby plan is for personal, non-commercial use, so plan for a paid plan before the site earns money. And Supabase pauses a free project after about a week with no activity. You can restart it from the dashboard.
  38. ImranAnd prices?
  39. NadiaThey change often. Read each pricing page before you start, and write the plan on the account sheet.
  40. ImranWhat about paying from Bangladesh, or anywhere these services don't take local wallets?
  41. NadiaMost of them bill international cards in US dollars. In Bangladesh, ask your bank for a dual-currency card enabled for international online payments. Mobile wallets like bKash usually can't pay these vendors directly.
  42. ImranNow the tools on the laptop.
  43. NadiaFour installs. VS Code, the editor where you see files and a terminal. Git, which makes save points. Node, the long-term support version, which runs your site on the laptop. And the AI agent itself, from its official install page.
  44. ImranThen I check each one?
  45. NadiaIn VS Code's terminal you ask each one for its version. Node, npm, Git and Claude should each print a number. Yours will be different from the lesson's, and that's fine.
  46. ImranAnd if it says command not found?
  47. NadiaUsually the terminal was opened before the install. Close VS Code, open it again, and try once more.
  48. ImranThere's one more setup step, telling Git who you are.
  49. NadiaYes, a name and an e-mail for every save point. GitHub gives you a private no-reply address in its settings. Use it, and your real address stays out of public history.
  50. NadiaThe second diagram shows how the tools work together. You give instructions to the agent inside VS Code. It edits files, runs Node to start the site, and uses Git for save points. Then you check the result in the browser.
  51. ImranSo I'm always the one who checks.
  52. NadiaAlways. That's the whole course in one sentence.
  53. ImranIf I'm doing this with one helper, what should we ask each other before we start?
  54. NadiaIs every account under the owner address? Does someone besides me know where the recovery codes are? Which plan is each service on, and who gets the bill?
  55. ImranAnd the red flags?
  56. NadiaPasswords in a chat or a spreadsheet. Accounts on one person's personal e-mail. Nobody knowing which card pays for the agent.
  57. NadiaHere's one to think about. Mangrove Kitchen starts showing ads that earn money. Which line of the account sheet has to change? Take a second.
  58. ImranNot GitHub, not Supabase. Vercel, because Hobby is non-commercial.
  59. NadiaExactly. An earning site needs a paid hosting plan.
  60. ImranLet me sum up. One, the site is a few services joined together, and each does one job. Two, every account goes under one owner address with a password manager and two-factor sign-in. Three, install the four tools and check each in the terminal.
  61. NadiaAnd one nuance on the second point. Two-factor without saved recovery codes is a lock with no spare key. Save them the same day.
  62. ImranSo the practice is my own account sheet, two-factor everywhere, and the four version checks.
  63. NadiaThat's it. Next time, we open the project folder and start talking to the agent, one small step at a time.
Finished reading?Mark it complete to fill in its stop on your course line.

Use it at work

Process map: as-is and to-be

A swimlane map with lanes per team, decisions with labelled outcomes and a validator; the today and the proposed process side by side.

Open in the Product & BA Lab
Next stopBuilding with an AI agent, one step at a time
Was this lesson helpful?
Questions and discussion

Loading the discussion…