AI-assisted development — "vibe coding" — is the practice of using AI tools as a core part of your development loop to write, review, debug, and ship code faster.
Vibe coding is not about letting AI write everything blindly. It is about using AI as a pair programmer that is always available, knows most syntax, and never gets tired — while you stay in charge of architecture, review, and judgment.
| Tool | Type | Best for |
|---|---|---|
| Claude Code | Agentic CLI | Full codebase tasks, autonomous file editing, bash commands |
| Cursor | AI-first IDE | In-editor chat, inline edits, codebase-aware suggestions |
| GitHub Copilot | IDE plugin | Line/function completions inside VS Code, JetBrains |
| v0.dev | UI generator | React/Tailwind UI from text description or screenshot |
| Bolt.new | Full-stack generator | Scaffold entire apps (React, Vue, Node) from a prompt |
| Claude.ai | Chat | General-purpose: planning, review, explanation, writing |
AI models work with a context window — a limited amount of text they can see at once. Everything you send (code, instructions, conversation history) consumes that window.
# The basic loop:
You: "Write a Vue 3 composable that fetches user data from /api/users
with loading state and error handling."
AI: [generates useUsers.js]
You: [test it, find it doesn't handle 401]
You: "It doesn't handle 401 responses — redirect to /login on 401."
AI: [updates the composable]
You: [test passes, commit]
| AI excels at | Be careful with |
|---|---|
| Boilerplate & scaffolding | Business logic with complex domain rules |
| Common patterns (CRUD, auth, REST) | Security-critical code (always review) |
| Syntax and standard library usage | Cutting-edge APIs (training data may be outdated) |
| Explaining and documenting code | Package versions (may suggest outdated ones) |
| Writing unit tests for pure functions | Complex integration tests with many dependencies |
| Refactoring for readability | Performance-critical optimisation (benchmark yourself) |
| Regex and SQL query generation | Knowing when NOT to use a certain approach |
npm install -g @anthropic-ai/claude-code claude # starts an interactive session in your project dir
1. Download from cursor.com 2. Open your project folder 3. Cmd/Ctrl+K → inline edit 4. Cmd/Ctrl+L → open chat panel (codebase-aware) 5. Add .cursorrules file to root for project-wide instructions
1. Install "GitHub Copilot" extension 2. Sign in with GitHub account 3. Start typing — suggestions appear inline (Tab to accept) 4. Ctrl+I → inline chat for edits 5. Ctrl+Shift+I → sidebar chat
1. PROMPT
Describe the task clearly with context and constraints
|
v
2. REVIEW
Read AI output carefully — don't blindly accept
|
v
3. EDIT
Fix issues, adjust style, fill in domain knowledge
|
v
4. TEST
Run the code — check all branches and edge cases
|
v
5. COMMIT
Write a meaningful commit message describing what changed
|
(loop back to PROMPT for the next task)
Try this exercise to feel the iteration loop:
useCountdown that counts down from N seconds and emits a 'done' event when it reaches 0."ref and onUnmounted to clean up the interval?