Step 5 — Connecting AI coding tools

Late 2024 onward, Claude Code / Cursor / GitHub Copilot moved from "assist" to "production-capable". Once the habit is in, learning speed scales 1.5–3x.

1. The landscape

Tool	Form	Feel	Price
Claude Code	CLI	terminal-native, multi-file edits	Pro $20 · Max $200
Cursor	IDE (VS Code fork)	chat + tab completion	Free · Pro $20
Windsurf	IDE	Cursor-like · Cascade agent	Free · Pro $15
GitHub Copilot	plugin	single-line completion	$10
Kiro	IDE (AWS)	2025 release · spec-driven	waitlist

For beginners, Cursor or Claude Code are the smoothest starts.

2. Install Claude Code

npm install -g @anthropic-ai/claude-code
claude --version

Global install · Node 20+.

3. Login

claude login

Browser opens → pick a plan (Pro / Max / API).

4. First command

cd my-first-app
claude "show 'Hello, World' large in src/app/page.tsx"

It reads files, proposes changes, you approve, files update. Run pnpm dev to verify.

5. Good vs bad prompts

Bad

• "build a React app" — too vague
• "fix the bug" — which?
• "make it pretty" — no criteria

Good

• "Add an email/password form in src/app/page.tsx, Tailwind centered, POST to /api/login on submit"
• "Why does the password hash test in user.ts mismatch?"
• "Improve accessibility in this component — aria-label, keyboard nav"

Specific file · specific conditions · specific outcome.

6. CLAUDE.md (or AGENT.md)

Placing a CLAUDE.md at the project root loads it automatically.

# My Project

## Stack
- Next.js 16 App Router
- TypeScript strict
- Tailwind v4
- PostgreSQL + Drizzle ORM

## Rules
- pnpm only
- Korean commit messages
- Tests with vitest

## Folders
- src/app — pages and API routes
- src/lib — utils, DB
- src/components — reusable UI

7. Slash commands

Inside a Claude Code session:

/clear       fresh conversation
/init        generate a CLAUDE.md template
/memory      manage long-term memory
/agents      list sub-agents
/mcp         MCP server status

8. Cursor path

If VS Code is familiar, try Cursor.

Key shortcuts:

• Cmd/Ctrl + K — edit selection with AI
• Cmd/Ctrl + L — chat with the file / project
• Cmd/Ctrl + I — Composer (multi-file agent)
• Tab — inline completion

9. Safety

• API keys — never paste into AI logs. Use env vars
• Auto-commits — always review diffs before committing
• Suspicious packages — verify before installing
• Understand output — code that runs but you can't read is risky

10. Cost

• Pro ($20) — enough for several hours/day
• API pay-as-you-go — for occasional use
• Cursor Free — 50 requests/month

Start cheap, upgrade with measured usage.

11. Mindset

AI sometimes speaks with confidence about wrong things.

• Never fully trust completion — verify types/signatures
• Write tests to validate AI output
• Read official docs in parallel — knowing "why" beats "works"

Use AI as a fast colleague; stay the final decision-maker.

12. Gotchas

• AI uses outdated APIs — confirm against current docs
• Huge multi-file edits hard to review — keep changes to 1–3 files
• Ignoring rules → put them in CLAUDE.md
• AI reading .env — enforce .gitignore and review what you feed it

13. Next direction

Base setup done. Pick your interest:

• Frontend → frontend-foundations
• Next.js fullstack → nextjs-fullstack
• Backend → backend-with-spring or python-data-pipeline
• Deeper AI tooling → ai-agent-tooling

Each assumes you completed getting-started.

Closing

AI tools don't replace fundamentals. Strong basics + AI = multiplied output; AI without basics stalls on the first error. People first, tools second.

Congrats — the five starter steps are done. The real learning begins now. 🎉

Next

• frontend-foundations or nextjs-fullstack

References: Claude Code · Cursor · GitHub Copilot.