DS DevShelfHub Projects · AI tools
Articles / Claude Code Hands-On: Installation, Agentic Loop, Slash Commands, and Real Examples for Non-Coders

AI Engineering

Claude Code Hands-On: Installation, Agentic Loop, and Real Examples

By DevShelfHub

A practical deep dive into Claude Code — three ways to install it, the agentic loop under the hood, token economics, slash commands tour, CLAUDE.md init, and three progressive examples from a hello.txt file to a working Kanban task manager.

Claude Code Hands-On: Installation, Agentic Loop, and Real Examples

Introduction

Most people who’ve heard of Claude Code use it the same way they use Claude Chat: they paste a question, get an answer, copy code back to their editor. That works, but it’s a fraction of what the tool was built for. Claude Code isn’t a chat interface—it’s an agentic coding tool that lives inside your terminal, reads your files, runs commands, and ships changes with your approval.

A useful mental model: Claude is a brain. Claude Code is a brain with hands. This hands-on guide walks you through what those hands can do—three ways to install it, how the agentic loop actually works under the hood, why a simple “hi” can burn 43,000 tokens, the slash commands that matter, and three progressive examples that go from a one-line file to a working Kanban task manager.

📚 Table of contents

  • Why Claude Code is “Claude with hands”
  • Pricing and authentication: Pro, Max, API key, or third-party
  • Three ways to install and run Claude Code
  • How the agentic loop actually works
  • The 43,000-token mystery: token economics explained
  • The tool catalogue: what Claude Code can actually do
  • Slash commands tour: model, session, context, cost
  • Keyboard shortcuts and background tasks worth knowing
  • Git, GitHub, and getting Claude to save your work for you
  • Building up: three progressive hands-on examples
  • The CLAUDE.md file and /init
  • Terminal vs. desktop app vs. IDE extension — which to use when
  • Common mistakes & pro tips
  • Best practices for non-coders
  • Frequently asked questions

🧠 Why Claude Code is “Claude with hands”

Claude Chat can think but can’t act. You ask a question, you get text back. If you want the answer to land in a file, you copy and paste. Claude Code closes that loop. It gets a terminal, file I/O, shell commands, web fetch, and a small army of built-in tools. The brain plans, the hands execute.

🧠 Claude (Chat)

  • Pure conversation interface
  • Reads files you upload, but can’t reach your filesystem
  • You copy outputs back to your editor
  • Great for thinking, drafting, planning

🛠️ Claude Code

  • Runs inside your terminal (or IDE/desktop)
  • Reads, writes, edits files directly
  • Executes shell commands with your approval
  • Great for shipping—not just describing—changes

💳 Pricing and authentication

Claude Code is not free. To use it you need one of four authentication paths:

⚡ Claude Pro

~$17/mo annual. Includes Claude Code access at standard usage limits. The default choice for individuals learning the tool.

🚀 Claude Max

From $100/mo. Generous limits for long agentic sessions. Pick this when you regularly run multi-hour Claude Code workflows.

🔑 Anthropic API key

Pay-as-you-go via the Anthropic Console. Best for experimentation—$5–$10 of credit goes a long way for learning.

☁️ Third-party gateway

AWS Bedrock, Google Vertex AI, or Azure if your company already has cloud commitments.

⚠️ Avoid running Claude Code against local models like Ollama or random Hugging Face checkpoints. It works technically, but the experience is “driving a Ferrari with a Maruti 800 engine.” The agentic loop expects strong reasoning.

📦 Three ways to install and run Claude Code

Same tool, three surfaces. Pick the one that fits your daily workflow.

1️⃣ Terminal (the canonical way)

The official install runs from your shell. Open the Claude Code docs, copy the install command for your OS, run it, then drop into any project folder and type:

mkdir claude-code-ai-for-all
cd claude-code-ai-for-all
claude

Claude Code asks whether you trust the current folder, then drops you into an interactive session. On Windows, run it inside WSL for the best experience.

2️⃣ Claude Desktop app

The Claude desktop app bundles a Claude Code surface inside a GUI. Open the app, switch to the “Code” tab, pick a folder, and you’re running an agentic session with mouse-driven approvals and a built-in model picker. Great for non-coders who don’t live in a terminal.

3️⃣ VS Code / Cursor extension (recommended)

The most productive setup for most people. Install the official Anthropic Claude Code extension from the VS Code marketplace. You get an in-editor side panel that proposes diffs, shows file changes inline, and asks for approvals next to the code being modified.

Cursor and other VS Code forks work identically. The extension also lights up tooling for any file you open, so a file like test.txt gets an “Ask Claude” button in its corner.

🔄 How the agentic loop actually works

Claude Code isn’t a single-shot model call. It’s an agentic loop: a cycle of Ask → Think → Act → Observe that keeps running until the goal is met or you stop it.

  1. Ask — you describe the goal.
  2. Think — Claude plans the steps it needs to take.
  3. Act — it invokes tools (read file, write file, run shell, web fetch).
  4. Observe — it reads the tool output and updates its plan.
  5. Repeat until done.

Each iteration runs through the model with the entire conversation, tool definitions, and observed outputs. That’s why agentic systems can solve real problems—and why token usage looks nothing like a chat app.

💸 The 43,000-token mystery: token economics

Start a fresh Claude Code session, type hi, and check the context: roughly 43,000 tokens used. For a two-character message. What’s going on?

📊 Where the tokens go

  • System prompt (~6K tokens) — identity, behavior, safety rules
  • Tool definitions (~22K tokens) — the entire catalog Claude Code can call
  • MCP server schemas — if you have Gmail, Drive, Notion, Supabase, etc. connected
  • Skills metadata — descriptions of any custom skills you’ve installed
  • CLAUDE.md — your project context, sent on every turn
  • Your message — finally, the “hi”

This is the cost of having hands. The agent has to know what tools exist before it can choose one—just like you carry your wallet and keys before leaving the house even if today’s errand only needs your phone. The good news: Anthropic’s prompt cache reuses most of this overhead across turns, so the first message is expensive but subsequent messages reuse cached tokens at a fraction of the cost.

🧰 The tool catalogue: what Claude Code can actually do

Out of the box, Claude Code has roughly the following built-in tool families. Knowing them helps you predict what the agent will reach for in a given task.

📁 File & code operations

  • Read, Write, Edit
  • Bash for shell commands
  • Grep and Glob for code search

🧭 Exploration & reasoning

  • Explore sub-agent for codebase mapping
  • Plan mode for upfront design
  • Task management and TODO tracking

🌐 Web access

  • WebSearch
  • WebFetch with content extraction

🛠️ Collaboration & ops

  • Git operations and PR helpers
  • Scheduling (cron, scheduled wakeups)
  • Notifications and hooks

⌨️ Slash commands tour

Inside a Claude Code session, slash commands are how you control the agent without using natural language. Learn these five and you’re 80% of the way there.

/model — pick the right brain

Switch between Opus, Sonnet, and Haiku. Opus for deep reasoning and 1M-token context. Sonnet for fast iterative work. Haiku for cheap, simple tasks. You can also set effort level (low/medium/high) to cap how much thinking the model does per turn.

/context — see what’s in the window

Shows the current token budget broken down by system prompt, tools, MCPs, skills, files, and your conversation. The most useful debugging command Claude Code ships with.

/compact — summarize a long session

When the context fills up, /compact asks Claude to summarize the conversation so far and start the next round with a smaller, denser context. Use it often.

/sessions, /resume, /fork

Sessions are persistent chat threads tied to a folder. Resume yesterday’s work, fork an experiment off a stable branch, or rename a session for easier retrieval. Treat them like git branches for AI conversations.

/cost — know what you’re spending

Shows token usage and approximate cost for the current session. Especially helpful on the API-key plan where you’re paying per token.

📌 There are more slash commands (/agents, /init, /login, /config). Type / and tab through the autocomplete.

⌨️ Keyboard shortcuts and background tasks

The thing nobody tells you in their first Claude Code session: half the productivity comes from keyboard shortcuts that aren’t in any onboarding screen. Learn these five and the friction drops in half.

  • Shift + Tab — cycle between the three modes: ask (default, asks permission), code (auto-accepts edits), and plan (writes a plan before touching code). Switch mid-session as the work changes.
  • Escape, Escape — clear the current input. Faster than backspacing a long prompt. A single Escape during execution interrupts whatever Claude is doing.
  • Alt + Enter (Option + Enter on Mac) — multi-line input. Enter on its own submits, so use this to write structured prompts with explicit sections.
  • Up / Down arrows — cycle through previous prompts in the session. Same as terminal history.
  • Ctrl + O — toggle verbose mode. See the actual thinking and tool calls Claude is making, not just the summary.

For longer-running work, two more pay off:

📋 Background tasks

Some commands block the terminal — a dev server, a long build, a file watcher. Claude Code detects these and offers to put them in the background. Manage them with:

  • /tasks — list every background task, how long it’s been running, and its status.
  • Ctrl + T — jump to the task view; press Enter to peek at a task’s output, K to kill it.
  • Ctrl + B — explicitly push the current operation to the background and keep prompting in the same session.

That last one matters most: it lets one terminal run multiple Claude Code threads in parallel — a code-writing thread plus a long-running test suite, for example.

🐙 Git, GitHub, and getting Claude to save your work for you

The single most useful habit to set up early: tell Claude Code to use Git and GitHub for every project, so a bad prompt never costs you yesterday’s progress. The setup takes ten minutes once and pays off every session after.

  1. Install Git. Ask Claude itself: “Install git for me.” It picks the right command for your OS. On Windows you may need to run PowerShell as administrator first.
  2. Make a free GitHub account at github.com if you don’t have one. This is where your code lives so it survives a wiped folder, a broken laptop, or a bad Claude run.
  3. Install the GitHub CLI and authenticate. Run gh auth login. Claude will detect gh isn’t installed if it’s missing and offer to install it. Pick the device-flow option, paste the one-time code GitHub shows you, authorise on your phone or browser, done.
  4. Tell Claude the rule. Once, in your first session, prompt: “From now on create a new Git repository for this project. Make clean commits, push to GitHub regularly, so we never lose work and can always revert. Set everything up.” Claude runs git init, creates the GitHub repo, makes the initial commit, and configures the remote.
  5. Make it sticky. Run /init to generate a CLAUDE.md, then ask Claude to add a line: “As you do work, commit changes to Git and push to GitHub regularly with clean commit messages.” Now the rule survives session resets.

From that point on, every change Claude makes lands in GitHub automatically. If a prompt goes sideways, git revert or rolling back to a commit is one command away. Most tutorials skip this setup. Most regrets happen because someone skipped it.

🧪 Three progressive hands-on examples

The fastest way to understand Claude Code is to ramp difficulty in three steps—each one shows a different capability.

Example 1 — Creating a single file

Drop into an empty folder and ask:

Create a file called hello.txt containing the message:
"My name is Mayang and I just set up Claude Code."

Claude proposes the file, asks for approval, and writes it. You now have a confirmed working install with file-write capability.

Example 2 — A multi-step Python script

First check what’s currently in the folder. Then create
a Python script called greet.py that asks the user for their
name and prints "Hello {name}, welcome to Claude Code". After
creating it, run it and show me the output.

Now you’re exercising the full loop: Bash (to list files), Write (to create the script), and Bash again (to execute and capture output). Claude asks for approval on each shell command.

Example 3 — A working Kanban task manager

Build a single HTML file containing a professional task manager
with a Kanban board and drag-and-drop columns. Embed CSS and
JavaScript. Save it as task-manager.html and tell me how to run
it on a local server.

In two minutes you have a working app: three columns, drag-and-drop, priority filters, assignees, the lot. Open http://localhost:8000 and it’s already running. Bug? Just type “Add task isn’t working, please fix.”—Claude reads the diff, patches it, you refresh.

👉 This is the moment Claude Code stops being a coding assistant and starts being a prototype factory for non-coders with domain knowledge.

📄 The CLAUDE.md file and /init

Run /init inside any project and Claude Code inspects the codebase, writes a CLAUDE.md at the root, and starts attaching that file to every session as durable context.

📌 What CLAUDE.md should contain

  • What the project is and how the folders are organized
  • Build, test, and deploy commands
  • Coding conventions, naming rules, commit style
  • Hard guardrails (“never run migrations from this folder”)
  • External services and where their credentials live

👉 Adding a CLAUDE.md to every repo pays off within a week. You stop re-explaining your project every session, and Claude makes fewer dumb mistakes because it knows your rules.

🖥️ Terminal vs. desktop app vs. IDE extension

⌨️ Terminal

Best for: developers comfortable in the shell, scripting Claude into CI, batch jobs, and long autonomous runs. Lowest UI overhead.

🖱️ Desktop app

Best for: non-coders who want a friendly UI for approvals, model switching, and session management. Visual but limited to one folder at a time.

🧩 IDE extension

Best for: everyday coding. You see diffs inline, get approval prompts where the change lands, and keep all your editor superpowers. Recommended for 80% of users.

Common mistakes & pro tips

❌ Common mistakes

  • Using Claude Code like a chatbot — you’re paying for tools you never invoke
  • Auto-approving every command without reading what’s about to run
  • Skipping /init and re-explaining the project every session
  • Letting context balloon past 100K tokens — use /compact
  • Running Opus for trivial edits and burning quota
  • Using local models — the agentic loop needs serious reasoning

✅ Pro tips

  • Always add a CLAUDE.md before starting real work
  • Use Plan mode (Shift+Tab) for anything destructive
  • Keep sessions scoped to one task; fork instead of polluting
  • Watch /context and compact often
  • Read the diffs Claude proposes—don’t just hit yes
  • Switch to Sonnet for high-volume iterative work

🎯 Best practices for non-coders

  • Start with the IDE extension. The visual approvals teach you what Claude is doing without overwhelming you with terminal output.
  • Begin with throwaway folders. Build the hello.txt → greet.py → task manager ladder before touching anything important.
  • Treat your domain knowledge as the moat. You don’t need to outcode developers—you need to out-specify them.
  • Save your prompts. The prompts that built your task manager are reusable assets.
  • Pair with one strong developer. When you hit something Claude can’t debug, a 15-minute pairing session beats a week of frustration.

Conclusion

Most people pay $20–$100 a month for Claude Code and use a fraction of what it can do. The gap isn’t talent—it’s knowing the tool. Once you internalize the brain-with-hands mental model, learn the slash commands, understand where your tokens are going, and adopt CLAUDE.md as a standard, the productivity curve gets very steep very fast.

Start small. Build hello.txt today. Build the Kanban task manager tomorrow. By next week you’ll be sketching prototypes for your team that previously required a developer.

Related reading: Claude ecosystem guide (Chat, Code & Desktop)Claude Code vs Cursor AI comparisonClaude AI review

Explore More on DevShelf

Claude Code Hands-On: Installation, Agentic Loop, Slash Commands, and Real Examples for Non-Coders FAQ

Is Claude Code free?

No. You need a Claude Pro/Max subscription, an Anthropic API key, or access through a third-party gateway (AWS Bedrock, Vertex AI, Azure). Pro at ~$17/mo is the cheapest practical entry point.

Can I run Claude Code with an OpenAI model?

Technically you can route requests through compatible APIs, but in practice you'll hit rate limits quickly and the agentic loop is calibrated for Claude. Stick with Claude models for the smoothest experience.

Why does Claude Code use 43,000 tokens just to start a session?

Because Claude Code attaches its system prompt, tool catalog, MCP server schemas, and skills metadata to every turn. The cost is the price of having a hands-on agent rather than a stateless chat bot. The prompt cache makes subsequent turns much cheaper.

Should I use Claude Code in the terminal or in VS Code?

Use the VS Code (or Cursor) extension for everyday work—you see diffs inline and approvals land next to the code. Drop into the terminal for batch jobs, long autonomous runs, and scripting.

What's the difference between Claude Code and Cursor?

Cursor is an AI-native IDE with its own agent. Claude Code is Anthropic's agentic coding tool that can run inside Cursor as an extension. Many people use both: Cursor as the editor, Claude Code as the heavier reasoning agent.

How do I prevent Claude Code from doing something destructive?

Use Plan mode for anything risky, encode hard rules in CLAUDE.md, scope Claude's tool access, and never auto-approve commands you haven't read. For production systems, layer real guardrails on top—don't rely on prompts alone.

Can non-coders really use Claude Code?

Yes—arguably they get the biggest leap. A domain expert with no coding background can build a working web app, automate a report, or ship a small internal tool in an afternoon. The hello.txt to Kanban task manager ladder is designed exactly for that audience.

What's coming next that I should watch for?

Two areas: deeper skills and hooks support inside Claude Code, and tighter MCP integrations so any external system (Gmail, Notion, Supabase, Linear, internal APIs) can be wired in cleanly with reusable tool servers.