Your toolbox ยท lessons 2โ€“3

๐Ÿ”ง Setup & Workflow

Install opencode, understand tokens and costs, pick the right model, and put your apps online โ€” for free.

๐Ÿ‘€ What it looks like when it works

This is a real opencode session (it loops โ€” just watch):

opencode โ€” tiktok-studio

You describe. The agent reads, searches, edits and proves. You check. That's the job.

๐Ÿชœ Install, step by step

  1. Install Node.js (if you don't have it)

    Download the LTS version from nodejs.org and install it like any app. To check it worked, open a terminal and type:

    node --version โ€” you should see a number like v22โ€ฆ

  2. Install opencode

    In the terminal, run:

    npm install -g opencode-ai

    Full install guide with other options: opencode.ai/docs

  3. Connect a free model

    Run opencode auth login and follow the steps on screen. We use the free models (the ones marked free in the model list โ€” $0). Ask Yan which one we're using this week.

  4. Open a project and say hi

    Go into any project folder and start it:

    cd my-project then opencode

    First question to ask it: "What does this project do?" ๐Ÿ˜‰

  5. Turn on your cost radar ๐Ÿ’ธ

    opencode can tell you how many tokens you used and what they cost. Try:

    opencode stats โ€” all your sessions ยท opencode stats --days 7 โ€” this week

    Make it a habit: check your stats at the end of every lesson. On free models the cost is $0 โ€” and we keep it that way. ๐Ÿ˜Ž

  6. ๐Ÿ“ธ Proof time

    Screenshot opencode answering your first question + your opencode stats โ€” that's your setup proof for the portfolio. Then tick the mission on the task board!

๐Ÿ”ค What is a token? (watch it happen)

AI doesn't read words โ€” it reads tokens: little pieces of words. Every message you send and every answer you get is counted in tokens. And tokens are what you pay for.

This is a friendly imitation โ€” real tokenizers split even smarter. Try the real one: platform.openai.com/tokenizer. Prices are examples per 1 million tokens โ€” they change all the time; always check the model list.

๐Ÿ’ก One chat message โ‰ˆ tens of tokens. A coding agent reading your whole project โ‰ˆ tens of thousands. That's why pros watch their token use โ€” and why opencode stats exists.

๐Ÿง  Which model should I pick?

Models are like team members: different brains, different speeds, different prices.

๐Ÿ†“ Free models (opencode)

Big Pickle & friends โ€” the ones marked free.
$0. Great for learning.
Sometimes needs more guidance.

โšก Haiku-class

The sprinter.
Fast and very cheap.
Perfect for small, clear tasks.

โš–๏ธ Sonnet-class

The everyday pro.
Smart, balanced price.
What most developers use daily.

๐Ÿง  Opus-class

The deep thinker.
Hardest problems, highest price.
Save it for when you're truly stuck.

Same prompt, different models ๐ŸŒธ

We give each one our explicit flower-shop prompt. What usually happens:

Free modelA good basic site. Might miss a detail or two โ€” guide it, ask again. Cost: $0.
Haiku-classQuick and clean on small asks; split big jobs into steps for it. Cost: tiny.
Sonnet-classSolid site on the first try โ€” understands the whole plan. Cost: cents.
Opus-classAlso nails the tricky parts (form checks, edge cases). Cost: the most.
๐Ÿ‘‘ Our rule: start free, upgrade only when you're stuck โ€” and check opencode stats before and after. Try the same prompt on two models and compare: that's a real engineer's experiment.

๐Ÿš€ Put your app online โ€” Vercel (free)

A project on your laptop is homework. A project with a LINK is a product. ๐Ÿ’…

  1. Push your project to GitHub

    Your code needs to live in a GitHub repo first (we do this in class).

  2. Sign in to Vercel with GitHub

    Go to vercel.com โ†’ Continue with GitHub โ†’ pick the Hobby plan (that's the free one).

  3. Import & deploy

    Add New โ†’ Project โ†’ pick your repo โ†’ Deploy. That's it.

  4. Share your link ๐ŸŽ‰

    You get your-project.vercel.app โ€” send it to everyone. Every push to GitHub updates the site automatically.

๐Ÿšจ Free-tier rules (really important)

  • This year we use FREE tiers only โ€” Vercel Hobby, opencode free models, Mongo free cluster.
  • Never enter a credit card. If a site asks for one โ€” stop and tell Yan.
  • Before you click, check the plan name says Free or Hobby.
  • A "free trial" that wants a card is NOT free. Skip it.
  • See an "upgrade" popup or a price? Screenshot it, close it, ask in class.

Real engineers get surprise bills too. ๐Ÿ˜… The habit of checking first is the skill.

๐Ÿ†˜ If something breaks

โšก Terminal queens