Hands-on workshop · 2026

From prompt
to production.

Understand how AI really thinks, install and supercharge Claude Code, then ship a real project to the internet, all in one day.

The map

Your journey today.

Five chapters. Each one unlocks the next. By the end you will have a live website you built by talking to an AI.

01

How AI Thinks

How AI predicts, searches, acts and remembers.

02

Install

Plan, terminal, one-line install, secrets and a knowledge base.

03

Supercharge

Long-term memory, cloud services and permissions.

04

Build

Folders, planning, session rituals and the full ecosystem.

The goal

Live Build

Plan, build and deploy a real site, live on the web.

01

How AI thinks.

Before we touch any tool, understand how an AI predicts, searches, acts and remembers. Everything else builds on this.

LLMsModelsSearch by meaningAgentsContextMemory

1.1Foundations

What is an LLM?

You already use a tiny one every day: the keyboard on your phone. A Large Language Model is the same trick, scaled up to everything humans have written.

What you know

Phone keyboard

I'm on my

bikewayphone

Predicts your next word
Learns from your messages only
Small brain, so often hilariously wrong

Same engine, giant scale

Large Language Model

Prompt: "The capital of Malaysia is"

Mental modelYour phone guesses your next word. An LLM guesses the next word of an answer, one word at a time, using almost everything ever written.

1.2Foundations

Same engine, different specialities.

Every model is pre-trained by tuning billions of parameters, tiny knobs that store patterns. Different recipes and goals make different experts.

Our tool

Anthropic

Claude

Deep reasoning, long multi-step tasks, writing and serious coding work.

Fable 5.1Opus 5.5Sonnet 5.5Haiku 5.5

OpenAI

GPT

The brain behind ChatGPT. Strong all-rounder for chat, writing and creative ideas.

GPT familyo-series reasoning

Google

Gemini

Multimodal from the start: text, images, audio, video, plus huge context windows.

ProFlash

Open weights

Llama · DeepSeek · Qwen

Free to download and run on your own machine or server, so your data stays private.

runs locallyOllama

Parameters ≈ knobs. Training turns billions of them until the model's guesses get good. Most labs keep exact counts secret, and model names change every few months. What matters is picking the right tool for the job.

1.3Data

Search by meaning, not words.

AI stores every sentence as a list of numbers that captures its meaning (a vector). Then it finds what you mean, even when you use completely different words.

note	tag	embedding (what AI sees)	match
Pay staff salaries this month	finance	[ 0.91, −0.12, 0.44, … ]	—
Service the car next week	vehicle	[ 0.05, 0.77, −0.31, … ]	—
Buy fertiliser for the garden	garden	[ −0.50, 0.22, 0.60, … ]	—

A normal database table, plus one secret column. Humans see numbers; AI sees meaning. This is pgvector, a Postgres extension.

Keyword search

…

Meaning search

…

Mental modelAI searches by meaning. That's how it can dig through huge piles of notes and still find the right one.

1.4Agents

It doesn't just talk. It acts.

Modern AI reasons first (makes a plan), then acts by calling tools to do real work. That's the difference between a chatbot and an agent.

Reasoning: building a plan

01Research trending kebab shop names

02Design a logo

03Build and publish the website

04Make a 15-second promo video

05Email the launch to customers

Acting: using tools

Web searchready

Image genready

Code + deployready

Video genready

Emailready

Documentsready

Mental modelNot a chatbot any more: an AI that thinks, then does the work.

1.5Context

The context window.

An AI has no memory between replies. Every time it answers, it re-reads the whole conversation from the top, plus a lot you never see.

What you see

CONTEXT FULL

visible messageshidden: rules, files, tool output, thinking0%

Mental modelLonger chat = heavier load. What you see is the tip; the hidden part is far bigger.

1.6Context

When the window fills up.

Context has a hard limit. There are only two ways out, and both lose something.

Option A

Compact · summarise

Squeeze the history into a short summary and keep going. Small details blur or vanish. /compact

Option B

Clear · fresh start

Wipe it and start a clean session. Fast and sharp, but it remembers nothing unless memory is reloaded. /clear

Mental modelBoth have limits, which is why AI needs memory outside the chat.

1.7Memory

Memory that survives.

The fix: Claude writes notes into plain Markdown (.md) files on your disk. A new session reads them back, and it remembers.

kebab-shop/CLAUDE.md

Plain text with simple symbols: # title **bold** - list. Humans and AI read it equally well.

CLAUDE.mdStanding instructions: who you are, how to work

waiting

MEMORY.mdIndex: one line per remembered fact

waiting

memory/*.mdOne file = one fact, linked together

waiting

<project>/CLAUDE.mdContext for one specific project

waiting

Claude CodeCLAUDE.mdCodex · CursorAGENTS.mdGemini CLIGEMINI.mdCopilotcopilot-instructions.md

Mental model.md files live on disk. Each new session reads them back, so Claude remembers.

1.8The tool

Why Claude Code?

Every AI is smart. The difference is how close it can get to your work. Claude Code lives in your terminal, right next to your files.

Just talksUses its own appLives in your terminal

Chatbots

You chat, it replies with text. Can't touch the files, terminal or projects on your machine.

ChatGPTClaude.aiGeminiGrok

IDE / app agents

Do real work, but inside their own editor or app. The terminal is a side feature.

CursorAntigravityCopilot

We use this

Terminal agents

Live fully in your terminal: read and write files, run any command, use every CLI, build and deploy.

Claude CodeCodexGemini CLI

Mental modelChat → app → straight into your terminal. The closer to your machine, the more it can do.

01Recap

What we now understand.

LLM: predicts the next word, like autocomplete that read the whole world.

Models: billions of parameters, different recipes, different strengths.

pgvector: search by meaning, not by matching words.

Reason + Act: plans first, then uses tools to do real work.

Context: it re-reads everything each turn, including hidden material.

Full context: compact (blurry) or clear (blank). Both lose something.

.md memory: notes on disk survive every session.

Claude Code: an agent in your terminal that does the work, not just chats.

Up next · Chapter 02

Theory done. Let's install the real tool.

02

Install Claude Code.

From zero to a working AI agent on your own machine: pick a plan, open the terminal, install, then set up secrets and a knowledge base.

Pick a planTerminalInstallFix PATH.envKnowledge base

2.1Install

Step 1: pick a plan.

Go to claude.ai, create an account and subscribe. Pro is the minimum for Claude Code.

Free

$0

Claude on web and mobile
Good for trying it out
Low message limits
Not practical for Claude Code

Minimum for today

Pro

$20 / month

Claude Code included
Much higher usage than Free
Top models + extended thinking
Projects, research and more

Max

$100 / $200 mo

Everything in Pro
5× or 20× Pro usage
For heavy daily builders
Priority at busy times

Prices and limits change, so check claude.ai/pricing on the day. Teams can use Team/Enterprise plans, or pay per use with API credits.

2.2Install

Step 2: meet your terminal.

The terminal is a window where you type commands instead of clicking. It looks scary for about ten minutes; after that it's your superpower.

1

Ask Claude on the web first

Open claude.ai and ask how to install Claude Code on your computer. It gives you the latest command for your system.

2

Open the terminal app

macOS: press ⌘ Space, type Terminal. Windows: Start menu → PowerShell.

3

Pin it

You'll use it constantly. Mac: right-click the icon → Options → Keep in Dock. Windows: right-click → Pin to taskbar.

Ask at claude.ai

How do I install Claude Code on my MacBook (or Windows laptop)? Explain like I've never used a terminal.

2.3Install

Step 3: one line. That's it.

The native installer needs no Node.js and no setup. Paste one line, press Enter, wait a minute.

Terminal

macOS / Linux

curl -fsSL https://claude.ai/install.sh | bash

Windows · PowerShell

irm https://claude.ai/install.ps1 | iex

Stuck? Copy the error and ask claude.ai: "I ran the Claude Code install on my Mac and got this error: ___. How do I fix it?"

2.4Install

Step 4: "command not found"?

Very common, and not your fault. Your terminal doesn't know where Claude was installed yet. That list of places is called the PATH.

Terminal

1

Screenshot the error

Or copy the text exactly.

2

Ask Claude on the web

It gives you the exact line to add for your system.

3

Close and reopen the terminal

Then type claude again.

Ask at claude.ai

I installed Claude Code but typing 'claude' says 'command not found'. Here's a screenshot. How do I fix my PATH?

2.5Install

Step 5: a vault for your keys.

Your first job for Claude: create one hidden file that holds every API key and token. Claude reads from it, so keys never get hard-coded into your projects.

Type into Claude Code

Create a file at ~/.claude/.env where I'll keep my API keys and tokens for all my projects. Lock it so only my user can read it, and never print the values back to me.

# ~/.claude/.env · one KEY=value per line
SUPABASE_ACCESS_TOKEN=sbp_••••••••••
GITHUB_TOKEN=github_pat_••••••
CLOUDFLARE_API_TOKEN=••••••••••••
OPENAI_API_KEY=sk-••••••••••

One place

Every secret in one file. Rotate a key once, every project picks it up.

Hidden by default

Files starting with a dot are hidden. Press ⌘⇧. in Finder to see them.

Never upload it

Not to GitHub, not to a web server. Add .env to .gitignore.

Small, expiring keys

Give each token only the access it needs, and set an expiry date.

2.6Install

Step 6: give it a knowledge base.

Same move: just ask. Claude builds an organised folder of Markdown notes, one folder per project, so every idea, plan and decision has a home.

Type into Claude Code

Set up a knowledge base for my projects in ~/.claude/knowledge. One folder per project, with files for the idea, planning, milestones, methods, decisions and a running log. Keep an INDEX.md that lists every project and its status.

Per project. Easy for you to find and for AI to follow.

CLAUDE.md is each project's brain, read automatically.

Not just text. Images and PDFs work too.

~/.claude/ └─ knowledge/ ├─ INDEX.md ← all projects ├─ kebab-shop/ │ ├─ CLAUDE.md ← the brain │ ├─ planning.md │ ├─ milestones.md │ ├─ decisions.md │ └─ log.md └─ portfolio-site/ ├─ CLAUDE.md └─ idea.md

02Recap

Claude Code is alive.

Plan: Pro is the minimum for Claude Code.

Terminal: Terminal on Mac, PowerShell on Windows. Pinned.

Install: one line, no Node.js needed.

PATH: "command not found" means a screenshot, a question to Claude, and a fix.

.env: one locked, hidden vault for keys. Never upload it.

Knowledge base: a folder per project plus a CLAUDE.md brain.

Up next · Chapter 03

It runs. Now let's turn it into a real teammate.

03

Supercharge it.

Give Claude permanent memory, plug in real cloud services, and decide how much freedom it gets.

API · MCP · CLIpgvector memoryEmbeddingsTokensDomainsPermissions

3.1Supercharge

Three ways to plug in power.

Remember Reason + Act: the more tools an agent can reach, the more it can do. There are three kinds of plug.

API

The official door

How programs talk to each other: send a request with a secret key, get data back. Almost every service has one, but it's raw, so you write code to use it.

MCP

Plug-and-play for AI

A standard built for AI. A service wraps its abilities as ready-made "tools" Claude can see and call directly. Example: the Supabase MCP lets Claude manage your database.

Our edge

CLI

Commands in the terminal

Tools you type: gh, wrangler, supabase, netlify. Claude Code lives in the terminal, so every CLI is instantly its power too.

Mental modelClaude Code sits in your terminal, so every terminal tool becomes its superpower.

3.2Supercharge

The power kit.

Every service follows the same pattern: the key goes in .env, and Claude uses it when needed. All of them have a free tier. Start with Supabase and add the rest as projects need them.

Service	Role	What Claude can do	Plugs
SupabaseStart here	Database + memory	Create Postgres databases, auth, storage and pgvector memory	MCPCLIAPI
GitHubRecommended	Code home	Push, pull, version history, backups, collaboration	CLI · ghAPI
CloudflareRecommended	Hosting + DNS	Host sites on Pages, manage domains, SSL and protection	CLI · wranglerAPI
NetlifyOptional	Hosting	Alternative static and app hosting, live URLs in seconds	CLIAPI
Domain registrarOptional	Your .com	Check availability, buy and point domains	API
VPS (Hetzner etc.)Later	Your own server	Run 24/7 apps, bots and agents	CLIAPI

3.3Supercharge

Why Supabase?

Supabase is the backend you'll use to build real apps, and it happens to be the perfect brain for Claude's long-term memory.

Most important

Real PostgreSQL inside

That means it can run the pgvector extension to store and search embeddings: the "search by meaning" from Chapter 1. No pgvector, no smart memory.

A backend for every app

Tables, login and an automatic API, ready to go.

MCP + CLI

An official MCP server, so Claude manages the database itself.

Real-time

Data changes push instantly to every user.

Open source

Self-host it later if you want full control.

3.4Supercharge

Build Claude a permanent brain.

By default Claude forgets when a session ends. Three steps fix that, and afterwards it can save and recall memories by meaning across sessions.

1

Sign up at supabase.com

Free, no card needed. You can sign in with GitHub.

2

Create an access token

Avatar → Account → Access Tokens → Generate. Name it claude-code and set an expiry. Copy it once (it starts sbp_) and paste it into your .env as SUPABASE_ACCESS_TOKEN.

3

Ask Claude to build the brain

Type into Claude Code

Using SUPABASE_ACCESS_TOKEN from my .env, create a Supabase project called "Aiman AI Brain" and set up a pgvector memory system in it. Give yourself tools to store and recall memories, recall relevant ones automatically at the start of each session, and use gte-small for embeddings.

Swap "Aiman" for your own name. That's your brain's name.

memories table

One row = one memory

content"Aiman likes dark + amber designs"

tags[design, taste]

importance4

embedding[0.12, −0.04, 0.33, …]

recall()→ top 8 by meaning

3.5Supercharge

Choosing an embedding engine.

An embedding model turns text into a vector. A better engine means more accurate recall. Start free, upgrade when recall starts missing.

Engine	Cost	Key needed?	Languages	When
gte-smallBuilt into Supabase · 384 dims	FREE	No	Best in English	Start here: zero setup
text-embedding-3-smallOpenAI · 1536 dims	~$0.02 / 1M tokens	OpenAI key	Strong multilingual	Cheap, accurate upgrade
gemini-embeddingGoogle · 768–3072 dims	Free tier	Google key	Excellent multilingual	Powerful and generous
bge-m3Local via Ollama · 1024 dims	FREE	No (offline)	Multilingual	Privacy: runs on your machine

Dimensions = how many numbers describe a sentence. More numbers capture more nuance (sharper recall) but take more storage. 384 is plenty to begin with.

3.6Supercharge

One recipe, every service.

Sign up → create a token → paste it into .env → tell Claude. Learn it once and you can connect anything. Pick a service:

1

Sign up at github.com

Free. Choose a username you'll keep, because it becomes your code identity.

2

Fine-grained token

Settings → Developer settings → Personal access tokens → Fine-grained. Give it access only to the repos it needs, with Contents: read/write, and set an expiry. Or simply run gh auth login.

3

Into .env as GITHUB_TOKEN

Paste it yourself. Don't put tokens in chat.

Type into Claude Code

I added GITHUB_TOKEN to my .env. Check it works without printing it, then back up my portfolio-site project to a new private repo.

Why bother? Every change is saved and can be undone. Your laptop could die and your code would still be safe.

1

Sign up at cloudflare.com

Free. Later you can add your domain here to manage its DNS.

2

Create a custom API token

My Profile → API Tokens → Create Token → Custom. Add Account · Cloudflare Pages · Edit (hosting) and Zone · DNS · Edit (domains). Set a TTL (expiry).

3

Into .env

As CLOUDFLARE_API_TOKEN plus your CLOUDFLARE_ACCOUNT_ID.

Type into Claude Code

I added my Cloudflare token and account ID to .env. Verify them, then tell me what you can now do for me with Cloudflare Pages and DNS.

Pages = free hosting. Unlimited static sites with a *.pages.dev address. This very deck is hosted there.

1

Sign up at netlify.com

Free tier, and you can sign in with GitHub.

2

Personal access token

User settings → Applications → Personal access tokens → New. Name it claude-code and set an expiry.

3

Into .env as NETLIFY_AUTH_TOKEN

Claude can now deploy with the netlify CLI.

Type into Claude Code

I added NETLIFY_AUTH_TOKEN to .env. Deploy my portfolio-site folder to Netlify and give me the live URL.

Pick one host to start. Cloudflare Pages or Netlify. Both are great; you don't need both.

1

Choose a registrar

Cloudflare Registrar (at-cost prices) or GoDaddy (mature API). Both let Claude check names and manage DNS.

2

Create API credentials

GoDaddy: developer.godaddy.com → API Keys → Production. You get a Key and a Secret, and the Secret is shown only once.

3

Into .env

As GODADDY_API_KEY and GODADDY_API_SECRET.

Type into Claude Code

Check which of these domains are available and their prices: kebablan.com, kebablan.my, kebab-lan.com. Don't buy anything yet.

Buying costs real money. Always tell Claude to ask before purchasing.

3.7Supercharge

From domain to live site.

When a site is ready it needs two things: a place to live (hosting) and a name people can find (domain + DNS). Here's the journey of one visit.

Visitor

types
kebablan.com

Domain

Bought at a registrar. Your address on the internet.

DNS + CDN

Cloudflare points the name to your site, caches it and blocks attacks.

Hosting

Pages or Netlify serves your files over HTTPS, worldwide.

Mental modelBuy the name → point it (DNS) → serve it (host). Claude can handle every step from your terminal.

3.8Supercharge

How much freedom does it get?

By default Claude asks before editing files or running commands. As trust grows you can loosen the leash. Press Shift + Tab to cycle modes.

Default

Asks yes/no before every edit and command. Best for day one.

Plan mode

Reads and thinks but changes nothing. Great before a big task: agree on the plan first.

Accept edits

Edits files freely, still asks before running commands. A good daily driver.

Bypass

Never asks. Fastest, and riskiest. Only on a machine and folders you trust, with backups.

Rule of thumb: you can always say "ask me before deleting anything or spending money". Put that sentence in your global CLAUDE.md and Claude will follow it in every mode.

03Recap

Claude is now fully armed.

API · MCP · CLI: three plugs. CLI is Claude Code's home advantage.

Supabase: real Postgres with pgvector, a backend plus a brain.

Permanent memory: store and recall by meaning across sessions.

Embeddings: start with gte-small (free), upgrade when needed.

One recipe: sign up → token → .env → tell Claude.

Go live: buy the domain, point the DNS, host the site.

Permissions: start safe, loosen as trust grows.

Safety: small, expiring tokens, and ask before spending money.

Up next · Chapter 04

Armed and ready. Let's organise real projects together.

04

Build together.

Organise projects so you and the AI always understand what's being built, and pick up exactly where you left off.

Projects folderProject typesPlan firstSession ritualBeyond webEcosystem

4.1Build

One home for everything.

Before anything else, make one parent folder: Projects/. Every new project gets its own subfolder inside it. No more files scattered across the Desktop.

~/Desktop/ └─ Projects/ ← one home ├─ kebab-shop/ │ ├─ CLAUDE.md ← project brain │ ├─ index.html │ └─ img/ ├─ portfolio-site/ │ ├─ CLAUDE.md │ └─ src/ └─ expense-tracker/ └─ CLAUDE.md

One place. Easy to find, easy to back up.

AI keeps it tidy. New project, same clean structure.

A brain each. Every folder has a CLAUDE.md.

Type into Claude Code

Create a parent folder called Projects on my Desktop. From now on, whenever I start a new project, make a subfolder in Projects with a clean structure and its own CLAUDE.md. Remember this rule.

Name things clearly: kebab-shop, expense-tracker. Lowercase with dashes. A clear name lets you and Claude find it again months later.

4.2Build

Two kinds of web project.

Know the difference before you start, because you open and deploy them differently.

Simple

Plain HTML

file:///…/index.html

Open: Double-click the file. It opens in your browser straight away.
Tech: HTML + CSS + JS. Nothing to install.
Deploy: Drag the folder onto Cloudflare Pages or Netlify.
Best for: Landing pages, slides, portfolios, explainers.

Powerful

Web app

localhost:3000

Open: npm install → npm run dev first, then open localhost.
Tech: Node.js + a framework (Next.js, React, Vite).
Deploy: Build first, then a host that understands it.
Best for: Logins, databases, dashboards, anything dynamic.

Why a dev server? Modern frameworks write code browsers can't read directly (JSX, TypeScript, modules). npm run dev translates it live and reloads on every save. Without it, the app simply doesn't run.

4.3Build

Plan first: planning.html.

Before any code, ask Claude for a planning.html: one living page holding the discussion, research, phases, milestones and checklist. It's interactive notes, not the product.

You

Ideas · decisions · taste

planning.html

The shared plan

DiscussionResearchPhasesMilestonesChecklist

Claude

Research · structure · suggestions

It can hold

ImagesAnimationsChartsFlow diagramsTimersMaps3DAnything a web page can do

Mental modelA living plan, not paper. You and the AI see the same picture before a single line of code.

4.4Build

The session ritual.

Two sentences, every time. This one habit stops Claude from losing the plot between sessions.

Start a session

New project

I want to start a new project called [project-name]. Discuss it with me first. Don't build anything until we agree on a plan.

Continue a project

Let's continue [project-name]. Read its notes, tell me where we left off, and don't change anything yet.

End a session

Save

Save this session: update the project notes and memory so we can pick up exactly here next time.

Memory
key facts, searchable

Knowledge base
plans, decisions, log

Mental modelStart → discuss first, don't rush. End → save, so tomorrow starts where today ended.

4.5Build

Not just websites.

With Claude Code you're not limited to the browser. From phone apps to physical hardware, if it runs code, you can build it.

Web apps

Sites and apps on any device.

Mobile apps

Real iOS and Android apps.

Tablet

iPad and Android tablet layouts.

Windows apps

Desktop software for PC.

macOS apps

Native Mac .app bundles.

Games

Browser, desktop and mobile games.

Hardware

Raspberry Pi and Arduino over USB.

And more

IoT, robots, bots and automations.

iPhone and Mac apps may need Xcode (Apple's free tool) to ship, but not to start. With a board plugged in over USB, Claude can program and control it directly.

4.6Build

The complete ecosystem.

This is what we built today: Claude Code at the centre, surrounded by memory, knowledge and real tools. A supercharged AI teammate.

Keep the brain clean. Memory and knowledge are the AI's mind. Expired, duplicated or contradictory notes make it confused, and confused AI hallucinates. Clean up regularly.

Monthly clean-up

Review my memories and knowledge base. List anything expired, duplicated or contradictory, and ask me before deleting.

Claude Codebrain in the terminal

Memorypgvector

Knowledge.md files

GitHubcode home

Cloudflarehost + DNS

Projectsweb · mobile · HW

Supabasedatabase

Domainsyour .com

.envsecrets vault

05

Live build.

Everything at once. Plan, build and launch a real website to the internet in about 20 minutes, just by talking.

StartPlanBuildReviewShipSave

5.1Live build

Mission: ship your first site.

1 · Start the project

Give it a clear name and set the rule: talk before building. Tell Claude who it's for and what it should feel like.

Type into Claude Code

Start a new project called my-landing: a one-page site about me and what I do. Ask me questions first. Don't build anything until we agree on a plan.

Expect questions about your audience, colours and sections. Answer like you'd brief a designer.

2 · Make the plan visible

Get the plan as a page you can actually look at: sections, colours, copy and a checklist.

Type into Claude Code

Make a planning.html for my-landing showing the sections, colour palette, headline options and a build checklist. Open it in my browser.

Change anything now. Edits are cheap at the plan stage and expensive later.

3 · Build it

One file, no frameworks. Perfect for a first ship.

Type into Claude Code

Build the site as a single index.html following the plan. Mobile-friendly, dark theme, smooth scroll animations, and a big contact button that opens WhatsApp.

claude

● Write(my-landing/index.html)
  ⎿ Wrote 412 lines
● Bash(open my-landing/index.html)
Done. Your page is open in the browser.

4 · Review like a boss

Look at it on your laptop and your phone. Be specific about what you want changed, and ask for one round of changes at a time.

Type into Claude Code

Make the hero headline bigger and bolder, swap the blue for amber, and check the layout at phone width. Show me a screenshot when done.

Don't like a change? Just say "undo that last change". With GitHub set up, every version is saved.

5 · Ship it

One sentence and it's live on the internet with HTTPS, worldwide, for free.

Type into Claude Code

Deploy my-landing to Cloudflare Pages as a new project called my-landing and give me the live URL.

claude

● Bash(npx wrangler pages deploy my-landing)
  ⎿ ✨ Deployment complete!
Live at: https://my-landing.pages.dev

6 · Save the session

The habit that makes tomorrow easy. Claude writes what was done, what's next and every decision you made.

Type into Claude Code

Save this session: update the my-landing notes with what we built, the live URL and what's next, and store the key facts in memory.

You just shipped a real website. Share the link with someone right now.

5.2Live build

When things go wrong.

They will, and that's normal. Almost every problem has a one-sentence fix.

An error appears

Don't decode it yourself. Paste it back.

I got this error: [paste]. What happened, and fix it.

It changed too much

Roll back, then narrow the request.

Undo your last change. Only change the header this time.

It forgot the project

Point it back at its notes.

Read the notes and memory for my-landing before we continue.

It's going in circles

Stop, step back, re-plan.

Stop. Explain what you've tried, then propose a different approach.

You don't understand it

Ask. There are no dumb questions here.

Explain what you just did like I'm 12.

Chat feels slow and foggy

The context is full. Save, then start fresh.

Save this session. → /clear

Congratulations

Welcome,
Clauder.

Today you opened a door most people haven't found yet. AI isn't here to replace you; it's here to multiply you. Build what used to be just a dream. The future belongs to those who start, and you just did.

Click anywhere to celebrate

Explore on your own

Next level:
always-on agents.

Open-source frameworks like OpenClaw and Hermes Agent let you run a personal AI assistant 24/7 on a VPS or your own machine. What they can do:

Never sleeps: runs on your server around the clock

Lives in your chat: WhatsApp, Telegram and more

Its own name and personality

Remembers you and every conversation

Browses the web and reads sites for you

Scheduled tasks and automatic reminders

Handles files: photos, documents, reports

Delegates big jobs to Claude Code

The end · the beginning

Thank you.

What you learned today isn't just a tutorial. It's a real working method for building, automating and scaling, used every day.

Now it's yours. Take it, change it, break it, rebuild it your own way. Don't copy it blindly. Experiment. Design your own AI architecture, be creative, and don't be afraid to get it wrong.

The future doesn't belong to people who wait for instructions. It belongs to people who build.

AI Training · Todak Academy

From promptto production.

Your journey today.

How AI Thinks

Install

Supercharge

Build

Live Build

How AI thinks.

What is an LLM?

Phone keyboard

Large Language Model

Same engine, different specialities.

Claude

GPT

Gemini

Llama · DeepSeek · Qwen

Search by meaning, not words.

It doesn't just talk. It acts.

The context window.

When the window fills up.

Compact · summarise

Clear · fresh start

Memory that survives.

Why Claude Code?

Chatbots

IDE / app agents

Terminal agents

What we now understand.

Install Claude Code.

Step 1: pick a plan.

Step 2: meet your terminal.

Ask Claude on the web first

Open the terminal app

Pin it

Step 3: one line. That's it.

Step 4: "command not found"?

Screenshot the error

Ask Claude on the web

Close and reopen the terminal

Step 5: a vault for your keys.

One place

Hidden by default

Never upload it

Small, expiring keys

Step 6: give it a knowledge base.

Claude Code is alive.

Supercharge it.

Three ways to plug in power.

API

MCP

CLI

The power kit.

Why Supabase?

Real PostgreSQL inside

A backend for every app

MCP + CLI

Real-time

Open source

Build Claude a permanent brain.

Sign up at supabase.com

Create an access token

Ask Claude to build the brain

One row = one memory

Choosing an embedding engine.

One recipe, every service.

Sign up at github.com

Fine-grained token

Into .env as GITHUB_TOKEN

Sign up at cloudflare.com

Create a custom API token

Into .env

Sign up at netlify.com

Personal access token

Into .env as NETLIFY_AUTH_TOKEN

Choose a registrar

Create API credentials

Into .env

From domain to live site.

Visitor

Domain

From prompt
to production.

Next level:
always-on agents.