Anthropic Chat Lab
A small chat app for learning the Claude API by watching it work.
It is a normal chat window with an activity log beside it. The log shows
every request that leaves your machine and every response that comes
back — the actual JSON, not a summary — along with what each one cost
and why it happened. You can switch the orchestration pattern, the
models, the tools, the system prompt, caching, thinking and effort
between messages, and watch the numbers change.
Built for people preparing for the Anthropic certifications, and for
anyone who would rather see stop_reason: "tool_use" arrive than read
about it.
It runs entirely on your machine. Nothing is hosted, nothing is shared,
and the only network calls are to the Anthropic API.
📄 Project overview
— a one-page tour of the architecture, the patterns and what each one
costs, without cloning anything.
What you need
| |
|---|
| Node.js | 20 or newer. Developed on 24.4.1 — check with node --version |
| An API key | From console.anthropic.com. Starts with sk-ant-. You paste it into the app itself — there is no config file to edit |
| About $2 | Enough for weeks of learning. Most turns cost a fraction of a cent; the figure in the header tells you as you go |
No database, no Docker, no build step to watch. One npm install and
one npm run dev.
Setup
Three steps, and none of them involve editing a file.
1. Install the dependencies.
npm install
2. Start the server.
npm run dev
3. Open http://localhost:3000 and paste your API key.
The app opens with a banner saying no key is set. Click Add a key,
paste your key from
console.anthropic.com,
and press Save. The banner disappears and you can send your first
message.
That is the whole setup. There is no .env to create.
Where the key goes
Worth knowing, because the app is partly about this.
The key is sent to the small Express server in server/, which holds
it in memory and uses it to call Anthropic on your behalf. It is
never stored in your browser — not in localStorage, not in a cookie
— and no endpoint will give it back. The browser can only ask whether
a key is set and see a masked hint like sk-ant-…7gAA.
That is the same reason the chat itself goes through a server rather
than calling Anthropic from the page: a key in frontend code is a key
anyone can read with DevTools. The frontend tsconfig sets
"types": [] so server-only globals like process cannot even be
referenced from client code by accident.
The trade is that the key is forgotten when you stop the server.
For a laptop running a teaching app, retyping it is cheaper than
having a secret written somewhere that backups and sync tools might
pick up.
Optional: skip retyping the key
If re-entering the key each session annoys you, put it in a .env
file and the server will load it at startup instead:
# macOS / Linux
cp .env.example .env
# Windows (PowerShell)
Copy-Item .env.example .env
ANTHROPIC_API_KEY=sk-ant-...
PORT=3000
.env is git-ignored; .env.example is committed and holds no
secret. When a key is loaded this way, Settings labels it as coming
from .env. Saving a key in Settings overrides it for that session,
and clearing one falls back to the .env value.
To check that a .env file is being read correctly:
npm run check-env
That only inspects .env — it cannot see a key you typed into
Settings, because that one lives in the running server's memory.
If your machine has a company API gateway
If ANTHROPIC_BASE_URL is set in your environment, the SDK will use it
and you may get a 401 with a key that is otherwise fine. This app
pins baseURL to https://api.anthropic.com in server/anthropic.ts
to bypass that. If you want to go through a gateway, change it there.
Running it
npm run dev
Then open http://localhost:3000.
npm run dev uses tsx, which runs the TypeScript directly and
restarts on save. That is the normal way to use this app.
A restart clears the in-memory API key, so you will be asked for it
again unless you set up a .env as described above.
npm run build compiles both halves into dist/ and copies
server/data alongside them, so node dist/server/index.js also
works. You will not need it for learning, but it is there if you want
to check the compiled output.
The first five minutes
With a key saved, you are ready. Above the message box is a row of
five example questions. Each one is
chosen to make a different mechanism visible, and each sets up whatever
it needs — pattern, tools, effort — when you click it. They fill the
box rather than sending, so you can read the question first.
Click them left to right:
| Button | What to watch in the log |
|---|
| Tool call | Claude's first reply has stop_reason: "tool_use" and no answer. Your code runs the calculator and sends the result back. Two requests for one question. |
| Tool loop | Three tool calls, four requests. The loop runs until stop_reason stops being tool_use. |
| Caching | Send it twice. The first write puts the tool definitions in the cache; the second reads ~2,150 tokens back. |
| Extract | Then click Extract structured data under your own message. Look at output_config.format in the request, and at how the raw reply is bare JSON with no code fence. |
| Effort | Send at effort low, then again at xhigh. About 2.5× the output tokens on Haiku, for an answer the same length. |
The two panes
The window is two columns, each with its own header and its own
Clear:
Message log Clear │ Activity log 14 Clear
Tool loop · effort: low │ ☑ API ☑ TOOL ☑ INFO ☑ WARN
──────────────────────────────┼──────────────────────────────
the conversation │ what each turn actually did
This is the beginning of the README. Read the rest at the original. Read the full README ↗
