Workshop 1 of 2 · Mac Only

Made by Chris Downs · chris@datadowns.com

From idea to working app on your laptop. Build an AI agent with Claude Code — no coding experience needed.

Workshop 1 Build it on your computer
Workshop 2 Put it on the internet

A program that thinks, talks, and acts. An AI agent is a program that uses AI to understand what people say and respond intelligently. Think: a chatbot that actually knows about your specific topic, or a tool that reads your notes and answers questions about them. You describe what you want. Claude Code builds it.

Two things before starting. One account and one install. Both free. Do these in order and keep your credentials somewhere safe.

A

Anthropic Account

console.anthropic.com ↗

You need an account and an API key. The API key is what lets the apps you build talk to Claude's brain.

What's an API key?

An API key is a secret password that connects your app to Claude. When your app needs to think — understand a question, generate a response, make a decision — it sends a request to Claude's servers. The API key proves your app has permission to do that.

You'll paste this key once when you first set up Claude Code. After that, everything happens automatically — you won't need to think about it again.

  1. Go to console.anthropic.com and sign up
  2. Go to API Keys in the left menu
  3. Click Create Key and give it a name (anything — "my first key" is fine)
  4. Copy the key immediately — you won't be able to see it again
Where should I save my API key?

Open TextEdit (or Notes), paste your key in, and save the file somewhere you'll remember — something like API Keys.txt on your Desktop.

This is worth doing properly because:

  • You can't go back for it. Once you close the Anthropic page, the key is hidden forever. You'd have to delete it and create a new one.
  • You'll get more keys over time. As you explore other AI tools, you'll collect API keys from different services. One file to keep them all is a good habit to start now.
  • Never share it. Your API key is tied to your account and your billing. Anyone who has it can use it — and you'll pay for their usage. Treat it like a bank PIN.
Cost

You get free credit to start. For learning projects, this goes a long way.

You won't need to configure anything manually

Claude Code will ask for this key the first time you run it. Just paste it in and press Return.

B

Node.js

nodejs.org ↗

Software that Claude Code needs to work. You install it once and forget about it.

  1. Go to nodejs.org and click the big green download button (the recommended version)
  2. Run the installer
  3. Verify: open Terminal and type node --version
Note

To verify, you'll need Terminal — which we cover in the next section. Come back and check this after Step 1.

Checklist
  • Anthropic account created and API key saved
  • Node.js installed and working

Step-by-step setup. Follow these in order. Each step builds on the last.

1

Open Terminal

Press ⌘ + Space, type Terminal, press Enter. A window opens with a blinking cursor waiting for commands.

Terminal is not a text editor

You can't click to position the cursor. Navigate with ← → arrow keys. Delete with backspace, one character at a time.

Tab autocomplete: Start typing a folder or file name and press Tab. Terminal finishes it for you. Use this constantly.

2

Create a local project folder

Your work needs to live in a folder on your Mac — not in iCloud. iCloud syncing causes problems with these tools.

iCloud problem

If your files are in iCloud (Desktop or Documents), Claude Code and git will behave unpredictably. Create a folder outside iCloud.

How: Open Finder → Go → Home. Create a folder called Projects. This is where everything goes.

Now create a project subfolder inside it. Back in Terminal:

Navigate to your Projects folder:
cd ~/Projects
Create a project subfolder:
mkdir my-first-agent
Move into it:
cd my-first-agent

You now have an empty project folder. This is where Claude Code will build your app.

3

Install Claude Code

Claude Code runs in your Terminal. You type what you want, it writes the code.

Install Claude Code:
npm install -g @anthropic-ai/claude-code
This will take a minute. Wait until you see your cursor again.
Start Claude Code. That's it — just the word claude:
claude
First run will ask you to sign in with your Anthropic account. After that, you'll see this:
Xcode Command Line Tools

If you see a popup asking to install "Command Line Tools" or "Xcode", click Install. This is normal on a fresh Mac and can take 10-20 minutes. It only happens once.

user@MacBook-Pro ~ % cd Projects/my-first-agent user@MacBook-Pro my-first-agent % claude
Claude Code v2.1.72
Welcome back!
Opus 4.6 · ~/Projects/my-first-agent
Tips for getting started
Run /init to create a CLAUDE.md …
Recent activity
1w ago npm run dev
1w ago npm install
/resume for more
? for shortcuts

Claude Code will ask for your Anthropic API key on first launch. Paste the key you saved earlier and press Return.

The pattern you'll use every time

Open a new Terminal window (⌘ + N), then type these two commands:

cd ~/Projects/my-first-agent
claude

That's it. You're in Claude Code, ready to build.

What comes later

In Workshop 2, you'll learn how to save your code online with GitHub and put your agent on the internet so other people can use it.

Terminal cheat sheet. Keep this open while you work.

Navigation
pwdShow current directory
lsList files in current folder
ls -laList all files including hidden
cd folder-nameMove into a folder
cd ..Go up one level
cd ~Go to home folder
Files
mkdir my-appCreate a new folder
touch file.txtCreate an empty file
open .Open current folder in Finder
cat file.txtPrint file contents
Running apps
npm run devStart development server
npm installInstall project dependencies
Ctrl + CStop whatever is running
claudeStart Claude Code
Things nobody tells you

You can't click to move the cursor. Use ← → arrow keys. Backspace to delete.

Tab autocomplete. Start typing a name, press Tab. Terminal finishes it.

↑ arrow = previous command. Cycles through your command history.

Passwords are invisible. When Terminal asks for your Mac password, type it and press Enter — nothing appears on screen, but it's working.

Setup complete

Now build your agent.

Everything above was preparation. This is where it gets interesting — choose an agent and bring it to life.

Each card is a complete agent app. Pick one, click it, and paste the brief straight into Claude Code. It handles the rest.

The Archivist

Feed it your notes and writing. Ask it questions about your own thinking.

View brief →

The Interviewer

It asks you questions to capture and organise your knowledge.

View brief →

The Advisor

A thinking partner that knows your context and pushes back.

View brief →

The Explainer

Takes something complex and makes it accessible to a specific person.

View brief →

The Curator

Monitors a topic and surfaces what matters, filtering the noise.

View brief →

The Character

A custom persona — a mentor, historical figure, or fictional advisor.

View brief →

Your first agent will change

You might start wanting to build an archivist, then realise everything you know is in your head, not on paper. So you flip the brief to an interviewer instead. Same instinct, different agent. Start with what feels right and let the process teach you what you actually want.

Paste your brief and watch it come to life. You picked an agent. Now tell Claude Code to build it.

1

Paste the brief

Open Claude Code (type claude in Terminal from your project folder). Paste the brief you copied from the agent card into the prompt.

Each brief already asks Claude Code for a plan before building. Read the plan, ask about anything you don't understand, then approve it:

That looks good. Go ahead and build it.
Why a plan matters

Without a plan, Claude Code makes dozens of decisions you don't see. The plan surfaces those decisions so you can steer before anything gets built.

2

Run your agent

Once Claude Code finishes building, exit it by typing /exit — then run the app on your own machine:

npm run dev
Look for a line like "Local: http://localhost:3000" — open that URL in your browser.

When you see something running in your browser — that's your agent.

When things go wrong

When you see an error — and you will — don't panic. Copy the error message, paste it back into Claude Code, and say "I got this error, can you fix it?" This is completely normal. Even experienced developers spend most of their time fixing errors.

3

Improve it

Use the app, notice what's wrong or missing, go back to Claude Code and describe changes in plain English:

The tone is too formal. Make it conversational.
When it doesn't know something, it makes things up. I want it to say it doesn't know instead.
Add a way to save conversations.

Your agent is running. Now make it yours. Pasting the brief was just the start. Here's how to shape it into something that actually fits what you need.

Ask for its opinion

Claude Code can look at what you've built and tell you what's working and what isn't. It's like having a second pair of eyes.

Look at what we've built so far. What would you improve? What feels rough or unfinished?

Explain what it did

If Claude Code just built something and you have no idea how it works — ask. It'll walk you through it in plain English.

Explain what you just built like I'm a complete beginner. What are the main parts and how do they fit together?

Fix something that broke

When you see an error, don't try to understand it. Just copy the whole error message, paste it in, and let Claude Code handle it.

I got this error: [paste the error]. Can you fix it?

Change how it looks

You don't need to know CSS or design terminology. Describe what you want it to feel like and Claude Code will figure out the rest.

The design feels generic and boring. Make it feel more like a luxury brand — clean, minimal, lots of white space, elegant typography.

Add a feature

Describe what you want it to do, not how to build it. Claude Code turns your ideas into working features.

I want users to be able to save their conversations and come back to them later. Add that.

Think out loud together

You don't always need to give instructions. Sometimes just describe a problem and let Claude Code help you think through it.

I'm not sure whether this should be one page or multiple pages. What are the trade-offs? What would you recommend?
The key idea

Talk to Claude Code the way you'd talk to a smart colleague. You don't need special commands or technical language. If you can describe what you want in a sentence, Claude Code can usually do it.

Stuck? Need help?

If you hit a wall at any point — something doesn't install, Claude gives you an error, or you just don't know what to do next — get in touch. I'll respond.

chris@datadowns.com

Resources for when you want to learn more or go deeper.