Intro to Claude Code / Agentic Workflows

--- theme: seriph title: Intro to Claude Code / Agentic Workflows info: "Module A-AGENT-001 — terminal-based AI coding, multi-step workflows, safety awareness" --- # Intro to Claude Code ## From Chatbot to Coding Agent --- # AI Tools You've Used So Far | Tool | How it works | |---|---| | ChatGPT / Claude.ai | You paste code in, get code back, paste it into your editor | | GitHub Copilot | Autocompletes the line you're typing | Both require **you** to move code between tools and files. What if the AI could read your project, edit your files, and run your code directly? --- # What Is Claude Code? A **terminal-based AI coding agent**. - Runs in your terminal (no browser, no GUI) - Reads files in your project - Writes and edits code directly in your files - Runs commands (`npm install`, `npm run dev`, `git commit`) - Chains all of this together without you copy-pasting You talk to it in plain English. It acts on your codebase. --- # Chatbot vs Agent | | Chatbot | Agent | |---|---|---| | **Input** | You paste code snippets | It reads your whole project | | **Output** | Code in a chat window | Changes written to your files | | **Actions** | None — you do everything | Runs commands, installs packages, creates files | | **Context** | One conversation | Your entire project directory | An agent doesn't just answer questions -- it **does work**. > AI tip: Start simple. "Add a dark mode toggle to my page" is a better first prompt than "rebuild my entire site." --- layout: center --- # Live Demo --- # What You're About to See I'll open Claude Code in a starter project and ask it to add a feature. Watch for these steps: 1. **Agent reads** — it explores the project (files, structure) 2. **Agent plans** — it tells me what it intends to do 3. **Agent writes** — it creates or edits files 4. **Agent runs** — it executes commands to verify its work 5. **I review** — I check the diff before accepting --- # The Agent Loop ``` You describe what you want ↓ Agent reads your files for context ↓ Agent proposes a plan ↓ Agent writes code + runs tests ↓ You review the changes ↓ Accept, reject, or ask for changes ``` This is a **multi-step workflow** — the agent does several things in sequence to accomplish one task. --- # When to Let It Run vs Stop and Review | Let it run | Stop and review | |---|---| | Adding a new file | Deleting or overwriting files | | Installing a package | Running commands you don't recognize | | Writing boilerplate (HTML/CSS) | Modifying logic you don't understand | | Running tests | Anything touching deployment or credentials | **Default rule**: if you can't explain what it just did, stop and ask. > AI tip: You can always type "explain what you just did" in Claude Code and it will walk you through the changes. --- # Safety: What an Agent Can Do Claude Code can: - **Read** any file in your project directory - **Create** new files and folders - **Edit** existing files (including deleting content) - **Run** terminal commands (install packages, start servers, run git) - **Access the internet** via terminal commands This is powerful. It also means a bad prompt can break things. > AI tip: Before giving the agent a big task, commit your current work with `git commit`. That way you can always undo with `git revert`. --- # Safety Habits 1. **Use git** — commit before asking the agent to make changes (you can always revert) 2. **Read the diff** — review what changed before you accept 3. **Don't give it secrets** -- never put passwords or secret tokens in your project files 4. **Stay in scope** — work in a project folder, not your home directory 5. **Ask questions** — "What will this command do?" before letting it run > Version control is your undo button. Commit early, commit often. --- # Why This Matters for You The industry is moving from "AI suggests code" to "AI builds features." - Junior developer roles are changing — employers expect you to **direct** AI agents, not just use autocomplete - The skill is not typing code — it's **reviewing, evaluating, and steering** AI output - Everything you've learned about reading HTML/CSS/JS is what makes you effective with agents This course is evolving toward: **Building Web Products with AI Agents** --- # Your Turn: Think Like a Director Write down your answers (no code needed): 1. What feature would you ask Claude Code to add to your current project? 2. What files would it need to read to understand your project? 3. What is one thing you would want to review before accepting its changes? > AI tip: The better you describe what you want, the better the agent performs. Practice writing clear, specific prompts. --- # Key Takeaways 1. An agent reads, writes, and runs -- not just suggests 2. Multi-step workflows: read, plan, code, test, review 3. You control when to let it run and when to stop 4. Git is your safety net -- commit before agent changes 5. The skill is steering and reviewing, not typing code