Agentic Basics


Pingfan Hu & Dr. John Helveston
George Washington University

Agentic Workflows with Claude Code

Meet Your Instructors

Pingfan Hu
PhD Candidate, EMSE
Systems Engineering
pingfan.org ↗
Dr. John Helveston
Associate Professor, EMSE
Director, Data Analytics
jhelvy.com ↗

Roadmap

Agent Basics & Setup
Website Example
Claude Code Essentials

Chat vs Agent

Chat
One-off questions.
Today's focus
Agent
Long-term projects.

Agentic Workflow

Model
The brain of AI.
Fable 5
Opus 5
Sonnet 5
Haiku 4.5
inside
Harness
Wraps model with tools.
Edit files
Run commands
Search web
runs
Loop
Until the task is done.
Think Act Observe

 

— checkpoint —
Open your workspace. Thumbs up when Claude answers.
01
On your Desktop, make a folder called
my-site
This is your project for the whole workshop.
02
Open Positron. From inside it, choose
File › Open Folder…
and pick the folder you just made.
03
Start Claude Code: open a terminal with
Terminal › New Terminal
then type claude
Nothing installed yet? Follow the setup page, or just watch for now. Everything today stays on the website, so you can catch up afterward.

Agents can do almost anything with your files

Write code
Debug & refactor
Analyze data
Generate images
Summarize docs
Write & edit
Automate tasks
today's focus
Build HTML

Let’s get started with a website

index.html
about.html
contact.html
+
styles.css
several HTML files
one CSS file

Your First Website

Talk using FluidVoice, or copy the text below and paste to Claude Code.
Example prompt
Create a website introducing Tom Hanks, a famous movie star in the United States. Give him a main page, then give each of his notable films its own page. Make each film on the main page clickable so it opens that film's page, and add a "Back to Tom Hanks" button at the top of every film page. Put all styling in one shared styles.css file so every page matches.
Tom Hanks is only one example.
Replace the name with anyone you admire: a movie star, an athlete, a scientist, anyone famous.

Example Output: A Full Website

tom-hanks.html
6 HTML pages + styles.css

The Structure of a Website

A Minimum Website
=
Several HTML Pages
+
A Stylesheet
my-website/
├─ html/
│ ├─ index.html
│ ├─ about.html
│ ├─ projects.html
│ └─ contact.html
└─ styles/
└─ styles.css
index.html

Steering with slash commands

/init
Creates project CLAUDE.md
/model
Switch the model
/effort
Low / mid / high thinking
/help
List every command
/resume
Reopen past sessions
/rewind
Roll back to a checkpoint
/compact
Condense chat, keep the core
/clear
Wipe context, start fresh
Type / in the prompt to see them all. Most of these show up in the next few slides.

The CLAUDE.md file

CLAUDE.md
Claude Code
≡
AGENTS.md
other agents
Home directory
~/.claude/
└── CLAUDE.md
Tell Claude Code to create
Global behavior
Project directory
project/
├── CLAUDE.md
└── folder/CLAUDE.md
Run /init to create
High-level summary of the project

A CLAUDE.md for our website

tom-hanks-website/CLAUDE.md scroll
What this is
What the project is, and how to run it.
Structure
The file map, and which page links to which.
Conventions
The rules that keep it coherent: one stylesheet, color only from :root.
Adding a film page
The task you repeat, written as numbered steps.
Use /init to write or update your CLAUDE.md file. You can also hand modify on your own.

Four modes of Claude Code

Use Shift + Tab to switch the mode
Plan
Make plans before a big work.
read-only
Manual
Manually approve/deny edits.
safe but slow
Accept Edits
Auto-applies file edits.
semi engagement
Auto
Auto-approves EVERYTHING.
full file access, use with care

Match the model to the mode

Use /model to switch the model at any time
Plan mode
Opus
Let the stronger model do the hard thinking and shape the plan.
smarter, pricier
Implementation
Sonnet
Once the plan is approved, a faster model can carry it out.
faster, cheaper
Spend the heavy thinking on the plan, so the implementation becomes easy.

Tokens are the currency

Everything the agent does is paid for in tokens.
Spent on
Thinking
Running tools
Writing code
Refilled on a clock
Every 5 hours
Starts at your first message, then resets
Every 7 days
A weekly cap sitting on top of the 5-hour one

Token saving example: the Caveman plugin

Make the agent talk like a caveman: "why use many token when few do trick".
Normal agent
69 tokens
The reason your React component is re-rendering is likely because you're creating a new object reference on each render cycle. When you pass an inline object as a prop, React's shallow comparison sees it as a different object every time, which triggers a re-render. I'd recommend using useMemo to memoize the object.
🪨
With Caveman
19 tokens
New object ref each render. Inline object prop = new ref = re-render. Wrap in useMemo.
65% saved on prose 8.5% on real coding runs accuracy unchanged

Mind your context

Every question re-reads the whole conversation, not just your last line.
0 TO 60%
Room to think
60 TO 80%
Slower, pricier
80 TO 100%
Hard stop at 100%
A tiny question pays for it all
Start fresh early, not at 99%
Install the statusline plugin for your agent

 

Continue the task
/compact
78%
18%
History becomes a short summary.
VS
Start a new task
/clear
78%
0%
A brand new session.
Save your tokens while retaining your agentic workflow quality.

Steering with slash commands

/init
Creates project CLAUDE.md
/model
Switch the model
/effort
Low / mid / high thinking
/help
List every command
/resume
Reopen past sessions
/rewind
Roll back to a checkpoint
/compact
Condense chat, keep the core
/clear
Wipe context, start fresh
Type / in the prompt to see them all. Most of these show up in the next few slides.

 

— practice —
Build your website, start to finish.
Plan
Press Shift + Tab for Plan mode. Ask for a small site: a home page plus two more, linked together. Read the plan before approving.
Build
Approve it, then open index.html in your browser. Ask for changes until you like the look.
Break it, then take it back
Ask for something big. Don't like it? /rewind to a checkpoint, or /clear to start fresh.
a menu bar on every page a dark mode toggle a timeline page
Remember
Finish with /init. Read the CLAUDE.md it wrote, then add one rule of your own.
Thumbs up when your site is on your screen.
Finished early? Restyle it, or run /help and try a new command.

Three takeaways

You used an agent.
You built a website project.
You learned the basic commands.