A guided tour for first-time readers

AI systems, explained
from first principles

The building blocks first, then a closer look at Claude itself and how software goes from a laptop to live. Two real builds, Modora and Quy Hoa Mat Troi, run throughout as worked examples.

No prior knowledge of AI or automation assumed.

THE BASICS · MEET CLAUDE · LAPTOP TO LIVE · MODORA · HOA MAT TROI

Part zero · Orientation

What you'll be able to say by the end


  1. 01I can name the building blocks: model, agent, tools, skills, rules, secrets, with an example of each.
  2. 02I know what "the cloud" means, and why a service costs almost nothing when idle.
  3. 03I understand how code goes from a laptop to live: write, test, package, deploy.
  4. 04I can name the outside tools a system leans on, and what Google Cloud provides.
  5. 05I can follow two worked examples: Modora (mapping wealth, filing, email) and Hoa Mat Troi (a field photo to a post).
  6. 06And I know where the human sits: in control, approving everything that goes out.

Part zero · Orientation

The shape most of these systems share


Almost any practical AI system has the same outline: people use a single screen, and behind it an AI and a store of data do quiet work. We will keep returning to two real builds, Modora and Hoa Mat Troi, as examples, but the shape is general.

People

A family, or a Foundation team.

One screen

The only thing people touch.

AI

Reads, drafts, proposes.

Data

Kept private, per owner.

GOOD HABIT 01A human approves

The AI only proposes. Nothing leaves for the world until a person confirms it.

GOOD HABIT 02Each copy is isolated

An owner's system is private and walled off, not a shared pool. (Modora: one family. Hoa Mat Troi: one Foundation.)

GOOD HABIT 03Read-only on what matters

The AI is kept away from the dangerous lever. In Modora it never moves money; in Hoa Mat Troi it never breaks a child's dignity.

Part one

The basics

The core building blocks. Each is one simple idea, with an analogy and a real example from both systems.

ONE · THE BASICS TWO · MEET CLAUDE THREE · LAPTOP TO LIVE FOUR · MODORA FIVE · HOA MAT TROI SIX · TOGETHER

The basics

01 / 17


Terminals & writing code by hand

A terminal is a plain text window where you talk to a computer in typed commands, no buttons, no mouse. It is where code is run, and for decades it is where almost all software was built, line by careful line.

An editor to write the code; a terminal to run it; a trained person to think of every line.

What a terminal looks like

$ python report.py
Report saved · 3 warnings

You type a line, it runs, it prints back. That loop is the whole interface.

Think of it like

A workshop with only hand tools. Every joint is measured, cut and sanded by a skilled person. Nothing is wasted, but nothing is fast.

The old rhythm

Read the manuals, write each line, run it, read the error, fix it, repeat. A small change could take a careful hour, and only a trained programmer could do it at all.

The basics

02 / 17


Why AI changes everything

AI can now read and write code itself. The painstaking work, drafting a tool, fixing an error, wiring two services together, becomes a plain-language request answered in seconds. That one shift is what makes the rest of this deck possible.

The bottleneck was never ideas. It was the slow, manual typing in between. AI removes most of it.

Think of it like

Power tools arriving in that workshop. The skilled hand still guides the work, but a day of joinery now takes minutes.

What changes

Writing, reading, explaining and fixing code stop being the bottleneck. One person can now build and run what once needed a whole team.

What it means for people

The human's job shifts from typing every line to deciding what to build, steering it, and checking the result. Coding judgement matters more than ever; routine hand-coding much less. This ripple reaches every job that touches software.

The basics

03 / 17


Code, repos, and deploying

The product is written as text files: code. The whole collection is a repository, or repo. Deploying means taking that code and making it run live.

Think of it like

A recipe book (the repo) versus the cooked dish served to guests (the live app). Same recipe, many dinners.

In Modora

One shared codebase is packaged into a single image, and that one image runs every family's instance.

In Hoa Mat Troi

One private repo holds every tool, agent, and rule, sealed into one image that runs each service.

The basics

04 / 17


Secrets

The passwords, keys, and tokens the system needs to work, kept out of the code so they cannot leak.

code
borrows
the safe
Think of it like

The building's master keys live in a locked safe, never taped to the front door (the code).

In Modora

Keys live in Google's Secret Manager. The code only borrows them at runtime; none is written into the code.

In Hoa Mat Troi

Keys live in a private, never-committed settings file. The Foundation owns every one.

The basics

05 / 17


Keeping secrets safe

A secret (a password, an API key, a token) must never be typed into the code or saved to GitHub. If it leaks once, it is burned forever, so secrets live apart from the code, and each place that runs the code keeps its own copy.

Where secrets live

Google Secret Manager GitHub Secrets AWS Secrets Manager 1Password

Think of it like

House keys. You don't engrave them into the front door; you keep them on a ring, hand a copy only to who needs it, and re-cut the locks if one goes missing.

On a laptop

Secrets sit in a local file named .env that is "git-ignored", so it is never committed. The code reads them only at the moment it runs.

In live places

Each environment that runs the code, Cloud Run, GitHub, Claude Code Web, keeps its own private copy in a secrets store. The code asks for a key by name; the platform hands it over. Same code, different keys per place.

The basics

06 / 17


The model

The "brain": software trained to understand and write language, or to read images. Both systems use two, each with a different job.

Claude · the careful reader and writer

The thoughtful associate who reads, reasons, drafts, and explains in plain words.

Gemini · the eyes

The scanner that turns a photographed document into text the system can use.

In both

Claude writes (a summary, a caption, a thank-you); Gemini reads documents (a statement, a report card).

The basics

07 / 17


Tokens, context & cost

AI reads and writes in tokens, small chunks of text (roughly ¾ of a word). You pay by the token, and the model can only hold so many at once.

In plain terms: longer documents and longer answers cost more and fill the model's memory faster.

A token

The unit the model counts: about 4 characters, or ¾ of a word. A short sentence is a dozen or so tokens.

The context window

How much it can keep in mind at once. Claude Opus 4.8 holds up to 1,000,000 tokens, a whole book, in a single conversation.

What it costs

Pay-as-you-go by the million tokens, roughly US$5 in / US$25 out for the top Claude model, less for lighter ones. Re-using context ("caching") and overnight "batches" cut this sharply. A monthly Pro / Max plan instead gives an allowance that refills on a schedule, spent faster by heavier models.

The basics

08 / 17


The agent

An AI model plus the ability to take actions on your behalf. Not just a chatbot that talks, but an assistant that can read, decide, and do.

Think of it like

The difference between someone who gives advice over the phone, and a capable assistant at the desk who can pull the files and draft the letter.

In Modora

"Ask Modora" is the agent the family talks to about their own wealth.

In Hoa Mat Troi

Small agents each do one job: one culls photos, one writes captions, one drafts a donor thank-you.

The basics

09 / 17


Tools

The specific actions an agent is allowed to take. An agent with no tools can only talk.

Each tool is one narrow, well-defined action, nothing more.

Think of it like

The assistant's hands and instruments: read a document, look up a balance, draft a reply, build a report.

In Modora · tools include

read the registry draft an email generate a report

In Hoa Mat Troi · tools include

sanitise a photo cull the best frames build a post pack

The basics

10 / 17


Reading documents

A file isn't automatically readable text. The system first turns each kind, a Word doc, a slide deck, a PDF, a photo of a page, into plain text or Markdown the model can understand.

Tools that do this

Tesseract Google Document AI AWS Textract Pandoc

Think of it like

A scanner with a translator attached. It doesn't just photograph the page; it works out the words, tables and headings on it.

Two ways in

Files born digital (Word, PowerPoint, a text PDF) give up their text directly. A scan or a photo needs OCR, optical character recognition, to read the letters off the image.

In both systems

Modora reads a bank statement or a brokerage PDF; Hoa Mat Troi reads a scanned report card. Gemini does the seeing; the text then flows to Claude.

The basics

11 / 17


Finding information

When the answer isn't in the files it already has, an agent can fetch a web page or run a search, read the result, and use it, much like a person opening a browser.

Ways to fetch

Web search Official APIs RSS feeds A saved copy

Think of it like

A researcher with a library card. It can look things up, but only sources it can actually reach and open.

What can block it

Pages behind a login or paywall, sites that refuse automated visitors, "prove you're human" checks, or pages that only appear after heavy scripts run. The agent meets a wall, not the content.

Workarounds

Use an official data feed (an API) instead of the page, hand the agent the file or text directly, rely on a saved copy, or have a person fetch it and paste it in.

The basics

12 / 17


Skills and rules

Skills are packaged know-how the agent pulls out for a task, a reusable playbook. Rules are standing instructions it must always obey.

Skills are like

Recipe cards the assistant keeps in a drawer and reaches for when a task needs them.

Rules are like

The house style pinned above the desk. Modora: "never move money." Hoa Mat Troi: "dignity, never pity."

In both

Rules enforce the human approval gate, so no rule can be quietly skipped.

The basics

13 / 17


The cloud

So far everything has run on one laptop. To serve real people, the same code runs on a rented computer in someone else's data centre, the cloud, instead of a machine you buy and keep switched on.

asleep
awake

a request arrives, it wakes for a moment, then sleeps

Think of it like

A food stall that opens the moment a customer arrives and shuts when the street is empty. You never pay rent for an empty stall.

In Modora

The family's system lives on Cloud Run. Idle overnight, it sleeps, and costs almost nothing.

In Hoa Mat Troi

The photo intake, donor form, and care services run on Cloud Run, waking only when used.

The basics

14 / 17


The command line

The same typed terminal from the start of this part, now pointed at the cloud. Instead of clicking buttons, an operator types one instruction at a time.

gcloud is the typed tool for Google Cloud: turn services on, send new code live, read logs.

Reading one line

gcloud run deploy intake --region asia

deploy  =  send this code live intake  =  which service --region  =  where in the world it runs
In both systems

Only an operator ever types these lines. The family and the Foundation team never see the command line.

The basics

15 / 17


Quality control

Three layers keep a system trustworthy. None of them rely on hoping it behaves.

A · Tests

An automatic checklist run every time the code changes, so nothing ships broken.

Hundreds must pass

B · The human gate

The AI only proposes. A person must confirm before anything changes or is sent.

AI never acts alone

C · Offline mode

A full dress rehearsal with fake data and a fake AI, no real keys. A stunt double on a rehearsal stage.

Tested for free, offline

The basics

16 / 17

The same gates, tuned to the stakes


Both systems put the same three layers (tests, a human gate, an offline rehearsal) around their riskiest step. They differ only in which checks each spells out, because the dangerous lever is different.

Hoa Mat Troi · 8 gates on every post
1 Bundle valid 2 Location stripped 3 Voice + access 4 Dignity · locked 5 Terminology 6 Claims trace 7 Platform fit 8 Safeguarding · human

The risky step is publishing a child's image, so the checks are about dignity and safety.

Modora · checks on every change
· Read-only on money · never trades or moves a cent · Confirm-to-write · nothing enters the registry until a person confirms · Isolation · each family's copy is walled off · Tests pass before any deploy · A human sends · every outgoing email

The risky step is touching money or sending mail, so the checks fence those off.

Whatever the irreversible action is, it is fenced behind a person.

The basics · the whole picture

17 / 17

How the words fit together


Model

the brain

Tools

the hands

Skills

the playbooks

Rules

the guardrails

An agent

all four, working as one assistant

A human

approves before anything goes out

A model gains tools and skills, is held by rules, and becomes an agent. The agent proposes; a person decides.

Part two

Meet Claude

The assistant this workspace is built around: how you talk to it, how it writes code, how it designs, and how it plugs into everything else.

ONE · THE BASICS TWO · MEET CLAUDE THREE · LAPTOP TO LIVE FOUR · MODORA FIVE · HOA MAT TROI SIX · TOGETHER

Meet Claude

01 / 09


Claude Chat

The everyday way to talk to Claude: a chat window at claude.ai. You ask in plain language; it answers, explains, drafts, and reasons. Nothing to install.

Others in this category

ChatGPT Google Gemini Microsoft Copilot Perplexity

Cost, basic use: a free tier; Pro around US$20/month for more use.

Think of it like

A knowledgeable colleague on chat. You can paste in a document, ask follow-ups, and think out loud together.

What it's good for

Explaining, drafting, summarising, brainstorming, and checking your reasoning, one conversation at a time.

The limit

On its own it only talks. To act on the world, read your files, run code, post, it needs tools (the agent idea from Part one).

Meet Claude

02 / 09


Claude Code

Claude with hands: it reads and changes a whole project's files, runs commands, and uses tools, not just talks about code. It is what built and edits this workspace.

Others in this category

GitHub Copilot Cursor Windsurf Gemini CLI

Cost, basic use: included with a Claude Pro/Max plan, or pay-as-you-go by token.

Think of it like

A capable engineer at the keyboard, not an advisor on the phone. It opens the files, makes the change, runs the tests, and shows you the result.

Two places it runs

Locally on a laptop (inside VS Code or a terminal), working on files on your own machine. Online as "Claude Code Web", running in the cloud, able to work overnight on its own branch.

Always your call

It proposes changes; a human reviews and approves before anything is kept or shipped (the approval gate from Part one).

Meet Claude

03 / 09


Claude Design

Claude doesn't only write code, it designs. Give it a brief and it produces real, working web pages, slide decks, dashboards and mockups, not just a picture of one.

Others in this category

Figma AI v0 Canva Framer

Cost, basic use: part of the same Claude usage, no separate design tool to buy.

Think of it like

A designer who also builds. The thing it hands back is the finished, clickable page, ready to refine, not a flat drawing.

What it's good for

Explainer decks (this one), website pages, the management-hub mockups, quote cards and graphics, on-brand and editable.

Quality & limits

Strong layout and typographic instinct, and it iterates fast from your feedback. It still needs a human eye for brand fit and final taste, exactly how this deck was made.

Meet Claude

04 / 09


How Claude links up

On its own Claude talks. Connected to tools, it acts. The same model powers the chat, the code, and every small agent here, each given just the tools it needs.

The thread: this ties the whole of Part one together, model + tools + skills + rules.

Think of it like

One brain, many jobs. A single capable mind you can seat at the help desk, the workshop, or the design studio by handing it different tools.

The connectors

Tools (one narrow action each), skills (packaged know-how), and a shared standard called MCP that lets Claude plug into outside services safely.

In this workspace

One caption agent, one photo-culling agent, one donor thank-you agent, all the same Claude, each fenced to one job and one set of tools.

Meet Claude

05 / 09


Plans vs. API: two ways to pay

There are two separate ways to pay for Claude, and they do not mix. A monthly subscription is for a person using Claude's apps; the API is for your own code calling Claude by the token.

A subscription · Free / Pro / Max

A flat monthly fee to use the Claude apps yourself: the chat and Claude Code. Free to start; Pro about US$20/month; Max higher, for heavy daily use. You get an allowance that refills on a schedule.

The API · pay-as-you-go

Your programs call Claude and pay per token. Roughly, per million tokens: Opus US$5 in / US$25 out; Sonnet $3 / $15; Haiku $1 / $5. Caching and overnight batches cut this sharply.

Why they can't mix

A subscription pays for one person at a keyboard; the API bills an organisation's account per call. An API key draws on API credit, never a Pro seat. Every automated tool in these systems runs on the API.

Meet Claude

06 / 09


Plain chat vs. a wired-up Claude Code

The same model can feel worlds apart depending on what it can see. A blank chat knows only what you paste; a properly set-up Claude Code carries your project's files, tools, skills, rules and memory on every turn.

Most of the magic is the set-up, not the model.

Plain chat

Starts fresh each time. You paste context in by hand; it cannot open your files or run anything. Excellent for thinking and drafting, blind to your actual project.

Wired-up Claude Code

Reads the whole repository, runs commands and tests, obeys your written rules, and records decisions in memory files. It acts where the chat can only advise.

What people hit

Asking plain chat to "fix my app" (it can't see it); skipping the rules file so it drifts off-style; pasting half a document and getting an answer for the wrong half.

Meet Claude

07 / 09


What Claude needs from you

Claude is strongest when you point it well. A few habits make the difference between a vague answer and a finished job.

Direction in, quality out. It is a capable colleague, not a mind-reader.

A clear goal up front

Say what "done" looks like in the first message: the outcome, the constraints, the format. Front-loaded intent beats a trickle of half-instructions.

Context and access

The files, examples, or data it should work from, and permission to read them. It cannot use what it cannot see.

Room to check, and your call

Let it run tests, search, and verify; then you review. Tell it which decisions are yours to make. Correct what's off, and it learns your taste.

Meet Claude

08 / 09


Memory drift & other pitfalls

AI tools have a few failure modes worth knowing. None are mysterious once you have seen them, and each has a simple guard.

Memory drift

In a long session its grip on early details fades; it starts to contradict things said an hour ago. Guard: write decisions into a rules or memory file, and start a fresh session for a new task.

Confident errors

It can state a wrong fact or invent a detail in fluent, convincing prose. Guard: ask for sources, have it run the code, and check anything load-bearing.

Stale context

A pasted file goes out of date; a remembered fact silently no longer holds. Guard: re-share the current file, and treat old notes as hints to verify, not gospel.

Meet Claude

09 / 09


Your own library, queried

Point this same idea at your own life: gather your documents and records into one place, then ask questions of them in plain language.

Two kinds of library: tidy records (expenses, contacts, donations) go in a small database for precise queries; loose documents (notes, PDFs, letters) are read into text for Claude to answer across.

Think of it like

A tiny private librarian. You stock the shelves once; afterwards you just ask.

How to set one up

(1) Gather the files into one folder. (2) For records, drop them into a single SQLite file. (3) Ask Claude (Chat or Code) to read the folder or query the file.

What you can then ask

Plain-language questions: "which donors gave more than once this year?" or "summarise every letter that mentions a scholarship."

Part three

From laptop to live

How software is built on a developer's machine, then shipped to run for real, and the outside tools that make it possible.

ONE · THE BASICS TWO · MEET CLAUDE THREE · LAPTOP TO LIVE FOUR · MODORA FIVE · HOA MAT TROI SIX · TOGETHER

From laptop to live

01 / 17

Two worlds: local and live


Local your own machine, safe to break and try things
Live the real thing, used by real people
Local = experiment

Run the whole system on a laptop with fake data and keys, and change anything.

Live = careful

Real users, real data. Changes arrive only by a deliberate deploy.

It never

Tries something risky on live; that is what local is for.

From laptop to live

02 / 17

The journey of one change: write, test, ship


Writechange the code locally
Testrun the checklist, offline
Packageseal it into one image
Deploysend the image up
Liverunning for real users

The same five steps for every change, in both systems. Nothing reaches live without passing the tests first.

From laptop to live

03 / 17

The toolbox: what it leans on, and why


Git + GitHub

Tracks every change to the code, the recipe book's full history.

Anthropic · Claude

The model that reads and writes language.

Google · Gemini

The model that reads documents and images.

Google Cloud

Where the services actually run, on demand.

Cloudflare Pages

Hosts the public review site and website.

SQLite

A small, file-based database for records.

ffmpeg + exiftool

Process video, and strip a photo's location data.

Google Drive / Sheets

Where the team uploads photos and reads dashboards.

Telegram / Facebook

Notifications, and the public page posts go to.

None are exotic. Each does one job the system would otherwise have to build from scratch. The next four slides open up the ones we lean on most.

From laptop to live

04 / 17


VS Code

The program where code is written and edited: a smart text editor made for software. It is also the room where Claude sits and works next to the operator.

Others in this category

Cursor Sublime Text PyCharm Neovim Zed

Cost, basic use: free and open-source. (Cursor adds a paid tier around US$20/month.)

Think of it like

A carpenter's workbench. The raw material is shaped here, every tool within reach, before anything is built or shipped.

In our workspace

Every tool, agent instruction, and rule is opened and edited here. Claude works at the same bench, proposing changes the operator reads on screen and accepts or rejects.

Who touches it

Only the operator. The Foundation team and the families never open it; they only ever see the finished screens it produces.

From laptop to live

05 / 17


Python

The programming language nearly all of this is written in. Plain to read, with a huge free library of ready-made parts, and the common tongue of data and AI work.

Others in this category

JavaScript / TypeScript Go Ruby Java

Cost, basic use: free and open-source, language and every safety-net tool alike.

Think of it like

A widely-spoken language. Because so many people write it, almost any problem already has a tested, shareable solution on the shelf.

The safety net

A set of free checkers rides alongside: Pydantic checks data is shaped right, mypy catches type slips, ruff keeps the style tidy, and pytest runs hundreds of tests before anything ships.

Why it matters

Python is taught everywhere, so the workspace can be handed to someone new without hunting for a rare specialist.

From laptop to live

06 / 17


JSON · Markdown · YAML

Three plain-text formats that hold information so both people and computers can read it. No special program needed, just a text editor. Each has a familiar paper equivalent.

Cost, basic use: free, open standards owned by no one.

JSON · the data format

Like a filled-in form: every field has a printed label and a value next to it. How computers hand each other structured data. Cousins: XML, CSV.

Markdown · the writing format

Like a typed letter: headings, lists and emphasis from a few simple marks (# for a heading, * for a list). This plan is written in it. Cousins: HTML, AsciiDoc.

YAML · the settings format

Like a preferences sheet: a tidy list of settings, one per line. The top of each post's status file, the publish plan. Cousins: TOML, INI.

From laptop to live

07 / 17


First, what "version control" is

As code changes, you want a record of every change: what changed, when, why, and the power to step back to any earlier state. That record-keeping is version control. Git is the tool almost everyone uses for it.

Without it, "save as final_v2_FINAL.doc" is the best you can do. With it, history is exact and reversible.

Think of it like

A document's full edit history, but for a whole project: every save is dated, labelled with a note, and reversible. You can read any past version, or undo back to it.

A "commit"

One saved checkpoint: a snapshot of the project plus a short note on why it changed. History is just a chain of these.

Why it matters here

A bad change is never permanent, and you can always see exactly what an overnight AI run did before keeping it.

From laptop to live

08 / 17


Git and GitHub

Git keeps a dated, reversible record of every change to the code. GitHub stores that record online, as a backup and a shared place to work on it.

Git · here
push
GitHub · off-site

Others in this category

GitLab Bitbucket Azure DevOps

Think of it like

A logbook that never loses a page, paired with a fire-proof copy kept off-site. Any change can be read back, or undone, even months later.

In our workspace

The whole workspace is one private repository on GitHub. Overnight, Claude can even propose improvements as drafts; a person reviews and accepts them in the morning.

Git vs GitHub

Git is the method, the logbook on the machine. GitHub is the home for it online: the backup, and the place changes are reviewed before they count.

From laptop to live

09 / 17


SQLite

A complete database that lives in a single file, with no separate server to run. Fast, reliable, and the most widely used database in the world, it's inside every phone.

Others in this category

PostgreSQL MySQL / MariaDB DuckDB

Cost, basic use: free, public domain. No server bill because there's no server.

Think of it like

A meticulous filing cabinet that happens to be one file on disk. Copy the file and you've copied everything; back it up like any document.

In our workspace

It's the system of record. One file holds every post, photo and caption; another the finance ledger; another the beneficiary register.

Why it matters

No server to keep alive or secure, and the whole record is a single file that's trivially backed up.

From laptop to live

10 / 17


Google Workspace

The everyday Google suite, Drive, Sheets, Forms, Docs, used as the team's shared desk. Apps Script is the small bit of code that lets those everyday tools wake the system.

Others in this category

Microsoft 365 Dropbox Airtable Zapier / Make

Cost, basic use: free with a personal Google account; Business plans from ~US$6/user a month.

Think of it like

The shared office: filing cabinets (Drive), the wall planner (Sheets), the intake form on the counter (Forms), all in one familiar place.

In our workspace

The team uploads field photos to Drive, fills the brief on a Form, and reads the dashboard in Sheets, the one part of the machinery they touch directly. No code, no command line.

What Apps Script is

A few lines of Google's own JavaScript attached to a Form or Sheet. A built-in "on submit" trigger fires the moment someone sends the form; the script calls the system's web address to start the work. It is the doorbell between the team's familiar tools and the cloud.

From laptop to live

11 / 17


VietQR + SePay

How a donation is taken and matched. VietQR is Vietnam's standard bank-transfer QR code; SePay watches the bank account and signals the moment a transfer lands.

Others in this category

Casso VNPAY MoMo ZaloPay

Cost, basic use: VietQR is free; SePay has a free tier, paid plans around tens of thousands of VND a month.

Think of it like

A labelled donation box. The QR is the labelled slot; SePay is the clerk who notices a gift drop in and writes down who, how much, and when.

Getting a receipt after a QR transfer

Each donor gets a personalised VietQR carrying a hidden reference code. They scan and transfer; SePay sees the credit land and reads that code, which names the donor. The system records the gift, then builds a PDF receipt and emails it. (The fixed receipt is the one message allowed to send itself.)

Why it matters

No card fees or middle-man, just a plain bank transfer made trackable and self-receipting. (The bank trigger isn't live yet, so today a person does the matching.)

From laptop to live

12 / 17


Cloudflare Pages

A service that publishes a web page to the public internet: fast, behind a single web address, with copies served from data centres around the world.

Where Google Cloud runs the private machinery, Cloudflare hands finished pages to the public.

Others in this category

Netlify Vercel GitHub Pages AWS Amplify

Think of it like

A global newsstand. You hand over one finished page; identical copies appear on shelves in every city, so any reader gets it instantly.

In our workspace

It hosts the review site, where this very explainer lives, and the Foundation's public website. Copies sit worldwide, so pages load quickly here in Vietnam.

Who touches it

Only an operator publishes to it; anyone with the link can read. Nothing private, no child's data or keys, is ever put here.

From laptop to live

13 / 17

Inside Google Cloud


gcloud is the remote control. Google Cloud is the workshop behind it, a handful of parts that each do one thing.

gcloud

The typed remote control for everything below.

Cloud Run

Runs your code on demand, then sleeps.

Cloud Build

Packages the code into a sealed image.

Secret Manager

The safe that holds keys and tokens.

Cloud Storage

Buckets that hold files, photos, and backups.

Service accounts + IAM

Robot identities, and exactly what each may touch.

A service account is a robot employee with an ID badge: no person logs in, the service carries its own identity and only the permissions it needs.

Others in this categoryAmazon Web Services (AWS)Microsoft AzureDigitalOcean

From laptop to live

14 / 17


Service accounts vs. human accounts

Every action in the cloud happens under an identity. A human account is a person who logs in; a service account is a robot identity the code itself carries, so a program can act with nobody signed in.

It can do the same things a person could, scoped tighter and never asleep.

Think of it like

A night-shift keycard issued to a role, not a person. It opens exactly the doors that role needs, works at 3am with nobody there, and is revoked in one click if lost.

A human account

A person signs in with a password and a second factor, at a screen. Broad access, tied to an individual. Good for people; useless for code that must run at midnight.

A service account

No password to type: the code holds a key and mints short-lived tokens. Given only the narrow permissions its job needs (that's "IAM"), it acts unattended, on a schedule or a trigger. This is how the pipeline runs overnight with no one logged in.

From laptop to live

15 / 17


Cloud Run & Cloud Build, up close

Two Google Cloud parts do the real lifting. Cloud Build turns your code into a sealed package; Cloud Run takes that package and runs it on demand.

Think of it like

Cloud Build is the kitchen that preps and vacuum-seals a meal; Cloud Run is the microwave that heats one to order in seconds, then powers down.

Cloud Build · the packer

Takes the repo and assembles it into one sealed image, code plus every dependency, on Google's own build machines (so you need none of your own). Runs on each deploy and logs every step.

Cloud Run · the runner

Holds that image asleep. A request, timer, or new file wakes a copy in about a second; it works, replies, and sleeps. Idle costs almost nothing; under load it spins up more copies, then scales back to zero.

From laptop to live

16 / 17

How the outside tools work together


Each tool owns one step. A change walks left to right, from the bench where it is written to the people who finally use it, and a person signs off before it reaches anyone.

Write VS Code, with Claude alongside
Keep history Git + GitHub
Package Cloud Build
Go live Cloud Run + Cloudflare
Reach people the team and the public
The private side

Cloud Run runs the AI tools and dashboards only the team logs into. Their data stays walled off.

The public side

Cloudflare serves the website and review site, the pages anyone with the link is meant to read.

Always a human

Nothing reaches either side without a person approving it first. The tools carry the work; they never decide to ship it.

From laptop to live

17 / 17

How a workflow runs, live


A trigger

A form submit, a timer, or a new file.

Cloud Run wakes

A container spins up in about a second.

It does the work

Reads data, may call Claude, writes a result.

Returns

Hands back the answer or the saved file.

Scales to zero

No work, no running cost.

A trigger is

A request, a schedule, or a file landing in a watched folder.

Wakes in ~1 second

Fast enough that nobody waiting notices it was asleep.

Idle is ~free

With no work, it scales to zero and costs almost nothing.

Part four

Modora

A private family-office system that Modora runs for one family: mapping their wealth, filing their documents, and handling their email, all from a single secure screen.

ONE · THE BASICS TWO · MEET CLAUDE THREE · LAPTOP TO LIVE FOUR · MODORA FIVE · HOA MAT TROI SIX · TOGETHER

Modora · the big picture

Meet Modora


The family

Sees and manages their whole wealth in one place.

The dashboard

One secure screen: the only thing the family touches.

AI

Reads, drafts, answers.

Data

The family's own records.

RULE 01Read-only on money

Modora only ever reads money data. It never moves money or trades.

RULE 02A human approves

Anything that goes out to the world waits for a person to confirm it.

RULE 03Your data stays yours

The family's system is private and walled off. Nothing is shared with anyone outside it.

Modora · how it runs

The family's system, walled off


The family's system

Its own cloud project, database, encrypted storage, and keys.

Everywhere else

No other client, no vendor, no shared pool. Nothing crosses in or out.

Modora runs this family's own private instance. Their records never sit in a shared database with anyone else's.

Think of it like

A private vault with one keyholder, not a locker in a shared room.

Privacy is the product.

Modora · how it runs

A profile switches features on


The software is configured by one settings file, the family's profile. It sets the name, language, currency, and which modules are turned on.

Think of it like

A car ordered with exactly the options this household wants ticked, and nothing it doesn't.

smith-family · profile

FamilySmith
LanguageEnglish / Tieng Viet
Base currencyUSD

Modules

Wealth mapON
Email triageON
ReportsON
Daily summary emailOFF

Modora · functions · 01 / 10

Asset mapping and the registry


The registry

The source of truth. Every person, company, trust, and asset is a node.

Ownership graph

Who owns how much of what becomes the connecting lines.

Net worth + Wealth Map

Value is traced up the lines, every currency converted to one base.

Look-through ownership

A family tree, but for ownership. Value flows upward like streams joining into a river.

Where the human is

The family clicks through the Wealth Map tree and reads the numbers.

It never

The AI never changes a valuation on its own.

Modora · functions · 02 / 10

Document intake: getting a document in


Arrives

Private email, watched folder, or upload.

AI reads & proposes

"This statement says the account is now worth X."

Review queue

The proposal waits. Nothing has changed yet.

Human confirms

A person confirms or dismisses.

Registry updates

Only on confirm does the file get saved.

Confirming is the only thing that writes to the registry.

Modora · functions · 03 / 10

Filing: how files stay findable forever


1
The bytes

The original file, stored once, never changed, in the family's encrypted bucket.

2
The record

One row of facts, filled in automatically the moment the file arrives: which node it belongs to, its type, its date, its tags.

3
The views

Folder tree, tidy filename, search results, all derived automatically from the record.

Key insight

You never reorganise folders by hand. You change one fact about a document, and the whole tree rearranges itself.

Filename, generated from the record

2026-05-31_pictet-4471_statement_pictet.pdf

A library where you never reshelve a book, you re-label one and the shelves reflow.

Modora · functions · 04 / 10

Documents out: find and send on request


Ask in plain words

"Send the advisor last year's Pictet statements."

AI finds them

Matched by the facts on file, not a hunt through folders.

Drafts the email

A short cover note, the right files attached.

Human sends

Reviews the files and wording, then sends.

Retrieval is a question. Sending stays a human act.

Modora · functions · 05 / 10


Ask the documents

Once documents are read into text, you can ask questions across all of them in plain language and get a grounded answer in seconds, with the source named.

No more opening ten PDFs to find one clause.

Think of it like

A research assistant who has read the entire filing cabinet and answers from it at once, pointing to the exact page.

What you can ask

"What did the trust deed say about distributions?" "Which statements mention a wire over $1m?" Answered from the family's own files.

Grounded, not guessed

Every answer cites the document it came from, so a person can check it. It reads to answer; it never changes a figure.

Modora · functions · 06 / 10

Email: many mailboxes, one desk


Personal inbox
The trust's inbox
The company inbox
One workspace

Every mailbox on one desk, each message still tagged with the box it came from.

Think of it like

A household with many letterboxes whose post is all brought to one organised desk, each envelope still showing which box it came from.

Send-as, the right identity

Replies go out under the proper address, the trust's, the company's, a person's, all from this one system. The recipient sees the correct sender; the family works from a single inbox.

Modora · functions · 07 / 10

Email: triage, summarise, select, report


Gather

Every connected mailbox in one stream.

Triage

Sorted by priority, sender, topic, language.

Summarise

A short digest of what each thread needs.

Select

The owner picks what matters and what to act on.

Report

A daily briefing, frozen for the record.

From a flooded inbox to one short briefing, with you choosing what to act on.

Modora · functions · 08 / 10

Email: Modora drafts, a human sends


Connect mailbox

Read-only access to the inbox.

AI triages

Sorts by priority, sender, and language.

AI pre-drafts

A reply in the family's own voice, grounded in the thread and their records.

Owner reviews

Reads and edits the draft.

Owner sends

Pressing send is the only thing that sends.

Drafted in your voice

Each reply uses the real thread, the family's tone, and the relevant records, never a generic template.

Attachments filed

Files that arrive on an email are filed automatically, just like any other document.

It never

Sends on its own, and never touches the money registry.

Modora · functions · 09 / 10

Summary and drafting: one pattern


"Summarise this inbox", "draft this reply", and "answer a question about our wealth" are all the same three steps.

AI reads

The family's own data and messages, grounded in real figures.

AI produces a draft

A short answer or a draft reply. Never the final word.

A human decides

What to do with it. Send, save, or set aside.

Ask Modora "Who owns the most?" "What is our net worth?" Answered from live data, in English or Tieng Viet.

Modora · functions · 10 / 10

Reports: freeze a moment in time


Snapshot

Take the whole wealth picture at a moment in time.

Freeze

Store the numbers so the report keeps saying the same thing later.

Save to library

Kept alongside every earlier report.

Optional share

A read-only link, only if the owner opens one.

Think of it like

A photograph of the accounts on a given day. The photo does not change when the scene later does.

Legend Human Gate AI Stored App

Modora · going further

Beyond what's built today


The same building blocks, the registry, the read documents, the email desk, extend naturally. Each of these is the same propose-then-approve shape, just pointed at a new question.

Proactive alerts

Flag a late statement, a covenant near breach, or cash drifting below a floor, before anyone asks.

Scenario questions

"What if the USD/VND moves 5%?" answered against the live wealth map.

Expiry tracking

Passports, mandates, and insurance renewals watched, with a reminder before each lapses.

Meeting prep packs

A briefing assembled automatically before an advisor call, drawn from records and recent mail.

Cash-flow forecast

A forward view across accounts and currencies, flagging shortfalls early.

Shared read-only views

A scoped window for an advisor or the next generation, granted and revoked by the owner.

Every one keeps the same guardrails: read-only on money, and a human confirms anything that goes out.

Modora · together

Modora: a day in the life


OVERNIGHT
The system works

Syncs the mailbox, triages it, and freezes a morning briefing.

EARLY
A statement arrives

It waits in the queue as a proposal. Nothing changes yet.

MORNING
The owner confirms

Confirms the statement, and sends two of three drafted replies.

MIDDAY
The owner asks & shares

Asks Modora a question, then generates a quarterly report to share.

The human is the decision-maker at every gate.

Part five

Hoa Mat Troi

An education charity's operations hub. One login over all its work: media & stories, beneficiary care, donor relations, and finance.

ONE · THE BASICS TWO · MEET CLAUDE THREE · LAPTOP TO LIVE FOUR · MODORA FIVE · HOA MAT TROI SIX · TOGETHER

Hoa Mat Troi · the big picture

Meet Hoa Mat Troi


The Foundation

Coordinators, trustees, and the administrator who runs the day.

The hub

One login over every area: the screen the team works from.

AI

Culls, captions, drafts.

Data

Three private stores, kept apart.

RULE 01Walled off

A separate, private workspace. Beneficiary data and keys never leave it.

RULE 02A human approves

Nothing goes public without a person pressing approve. This is "Phase A".

RULE 03Dignity is the floor

No pity, no poverty-porn. Children are shown as agents in their own story.

Hoa Mat Troi · the map

Four kinds of work, one operating loop


The core

Media & stories

Field posts, evergreen, journey stories, community, website, recaps.

Care

Beneficiary care

Choosing students, child profiles, benefits ledger, a safeguarding watchlist.

Giving

Donor relations

Donor sign-up, gifts and in-kind, thank-yous, receipts, the donor CRM.

Accountability

Finance

The finance ledger and the public transparency report to supporters.

The loop Field Editorial Audience Resources three separate private stores, stitched only by reading, never merged.

Hoa Mat Troi · how it runs

One workspace, walled off


The HMT workspace

Its own repo, its own keys, its own data. Synced privately, never public.

Everywhere else

No data crosses in or out. No outside path is ever referenced.

Beneficiary photos, names, donor records, and platform keys stay inside. The settings file with the secrets is never committed.

Think of it like

A private room with one door. What is said inside stays inside.

The firewall is the first rule.

Hoa Mat Troi · how it runs

Nothing leaves without approval


The whole pipeline runs on its own, right up to the edge. The one step it never takes is publishing. A person approves first, every time.

Think of it like

A kitchen that preps the whole dish, then waits for the chef to taste it before it leaves the pass.

This is "Phase A". It is absolute.

Every post waits for an explicit approve before it is published.

The system hands a person a ready-to-post pack; a human posts it by hand.

The only exception: a donor's receipt may send itself. Never a post, never a newsletter.

Hoa Mat Troi · how it runs

The post-bundle: the unit of work


Every story travels as one tidy folder, a bundle. It carries the photos, the copy, the schedule, and a status sheet that tracks where it is.

Think of it like

A job folder on a desk: everything for this one post in one place, with a cover sheet showing its stage.

one bundle

Sanitised photos, ready to use
The caption, with alt-text
The channel and schedule
A status sheet: stage + gate findings

draft → in-review → awaiting-approval → approved → published

Hoa Mat Troi · the workflows

How things come in, and why that is not a story


Three field intakes share the same shape: a form makes a folder, you upload into it, a watch job files it onto the hub. They differ only in what comes in.

Activity

Photos from an event. Becomes a field record on the hub.

Survey & selection

A candidate / family survey. Restricted, internal-only.

Donor sign-up

A donate form. Produces the donor's personal QR.

Bringing things in never writes a story. Uploading photos just files the activity on the hub. A post is a separate, on-demand step, taken only when someone asks.

Workflows · the media flow

A story is written on request


Request

Click "Yeu cau viet bai" on an activity.

Direction + photos

Type a steer; pick photos, or let it auto-cull.

Draft

Cull, add brand chrome, caption with Claude, in your direction.

Review + approve

Edit, then approve with the dignity check.

Pack + archive

A manual post-pack; the final is filed in the story archive.

Photos wait in the hub until someone asks for a story. Then a human posts it by hand.

A self-improve tool periodically gathers the editor's edits and sends a summary for review before anything changes the way it drafts. It never updates itself on its own.

Workflows · planning

The hub spots gaps and proposes a plan


Spot gaps

Trips with photos but no story; under-covered themes; cadence drift.

Propose a plan

A roadmap + a 3-month board of post ideas. Only ideas.

Editor confirms

Slot by slot. An unconfirmed idea cannot be drafted.

Pick a slot

Routes into the same "on request" draft path.

Plan proposes

The agent only ever writes ideas; it never drafts a post or publishes.

Editor confirms

The same slot-by-slot human tick as the dignity check.

Stream C · journey

An anonymised "Hanh trinh cua em" progress story: no name, school, or place.

Workflows · care

Beneficiary care: from selection to a child's record


A survey

A candidate / family survey, internal-only.

Human admits

Admit, revisit, or not suitable. A person decides.

A care record

An admitted child gets a private, coded profile.

Notes + reports read

A note or a report card becomes a progress entry + benefits ledger.

Human owns it

A watchlist surfaces concerns; the human owns every escalation.

A coded id, not a name

Each child is an internal id, so identifiers never travel.

Tighter access

Child data sits behind stricter permissions than anything else.

It never

Leaves the workspace, and never becomes a public post on its own.

Workflows · donors

Donor relations: sign-up to thank-you to CRM


Sign up + QR

A donate link, a short form, a personal QR to give with.

Gift matched

The QR code on the transfer self-identifies the donor.

Thank-you + receipt

A warm note; a PDF receipt. Returning donors thanked by name.

Receipt sends

The receipt may auto-send. Only the receipt.

Lists + CRM

Added to the mailing list; the relationship is tracked.

The one auto-send

Only the fixed receipt sends itself, and only after a matched gift.

Everything else waits

Newsletters and appreciation notes stay human-approved before sending.

It never

Invents a number; every figure traces to a Foundation record.

Workflows · finance

Finance: records in, transparency out


Opening position

A starting baseline every later report reconciles from.

Statements read

Bank statements uploaded; each credit classified.

Internal report

Income, spend, bank reconciliation. Gaps flagged, never rounded.

Public summary

A transparency summary, only through the same approval gate.

Cash and in-kind apart

Money and donated goods are two separate ledgers, never added together.

A hard privacy check

Any non-opted-in name blocks the public report. No override.

Closes the loop

"Where your gift went" can seed a media story back to supporters.

Workflows · audience

Talking with people, and keeping the record


Community

Comments are brought in, a kind reply is drafted, and a human approves before it is sent. Anything that could identify or endanger a child is hidden and escalated at once.

Replies within 48 hours

Website

Takes an approved post and stages it as news, a gallery item, or an impact update for the Foundation's own site.

From approved posts only

Monthly recap

Gathers the month's approved posts into one bilingual impact summary for the website and supporters.

One number that grows

Workflows · the safety spine

Eight gates every post passes


1

Bundle valid. The folder is well-formed and complete.

2

Location stripped. No GPS survives on any photo.

3

Voice + access. On-brand, alt-text on every image, captions on video.

4

Dignity. No pity or white-saviour framing. Cannot be overridden.

5

Terminology. Program names and mission wording stay consistent.

6

Claims. Any number traces to a record; no unapproved donation ask.

7

Platform fit. The right format and chrome for each channel.

8

Safeguarding sign-off. A named human's final word. Never automated.

Workflows · where the human sits

The approval gate: one dignity tick


Draft ready

The bundle has passed every gate.

Review queue

It waits where the administrator can read it.

Approve

One click: editor sign-off and the dignity check, together.

Post pack

Only now is the ready-to-post pack built.

A person posts

Pressing post is the only thing that posts.

The AI proposes. A human approves. There is no other way out.

Hoa Mat Troi · the front door

One login, one "what needs you today"


One password opens the hub. It reads all three private stores and builds a single action strip, then sends you into the right area to act.

Think of it like

A front desk that tells you what is waiting and points you to the right room, but never signs anything for you.

It can count and link. It can never approve.

Can ban xu ly hom nay

Posts to approve3
Watchlist items2
Thank-yous due5
Intake to review1

Each row is read from a different store. Click one, and you land where its gate lives.

Hoa Mat Troi · going further

Beyond what's built today


The same pieces, the bundle, the gates, the private stores, reach further. Each new idea is still propose-then-approve, and anything that shows a child still passes every gate.

Bilingual website mirror

Every approved post staged to the public site in Vietnamese and a donor-framed English.

Donor portal

A private page per donor: their giving history and the impact it funded.

Smart photo search

"Find photos from the jump-rope day" across the whole sanitised archive.

Outcome dashboards

Each cohort's 8-petal growth, drawn from the care records, for trustees.

Scheduled posting · Phase B

Low-risk evergreen could auto-post one day; event and child posts stay manual forever.

Grant-report assembler

Approved stories plus the finance summary, gathered into a funder report.

The floor never moves: dignity, the human gate, and Phase A for anything that shows a child.

Hoa Mat Troi · together

Hoa Mat Troi: a week in the life


MONDAY
An upload arrives

Photos from a skills day are sanitised and filed on the hub. No story yet.

TUESDAY
Request + approve

The editor asks for a story, gives direction, then approves two with the dignity tick.

WEDNESDAY
A gift arrives

A donor gives by QR; the receipt sends itself; a thank-you waits for a person.

FRIDAY
Replies + the plan

Comments answered; the plan's gaps reviewed; next week's slots confirmed.

The human is the decision-maker at every gate.

Part six

Putting it together

The same handful of ideas, ready to point at a problem of your own.

ONE · THE BASICS TWO · MEET CLAUDE THREE · LAPTOP TO LIVE FOUR · MODORA FIVE · HOA MAT TROI SIX · TOGETHER

Putting it together

The ideas to remember


01

The cloud is just rented, on-demand computers, almost free when idle.

02

Code goes laptop to live by write, test, package, deploy. Nothing ships untested.

03

An agent is a model plus tools and skills, kept on a leash by rules.

04

Secrets stay in a safe, and every copy of the system is isolated.

05

The AI only proposes. A human always confirms and sends.

06

Read-only on what matters: money in Modora, a child's dignity in Hoa Mat Troi.

A few simple parts, layered carefully, with a human always in control. The same handful of ideas builds almost anything.

Modora and Hoa Mat Troi were only two worked examples. The building blocks are yours to point at any problem of your own.

MODORA · HOA MAT TROI THE AI PROPOSES · A HUMAN DECIDES