CLAUDE CODE
& VIBE CODING
Agentic AI-Powered Development
Building Software at the Speed of Thought
Powered by Anthropic • 2026
What We'll Cover
01 What is Vibe Coding?
The philosophy of intention-driven development
02 Meet Claude Code
The agentic CLI that codes alongside you
03 Core Features
Tools, slash commands, MCP, hooks & IDE integration
04 Live Workflow Demo
From zero to working app in minutes
05 Using Cline with Claude
VS Code extension powered by Claude API
06 Best Practices & Tips
Getting the most out of AI-assisted coding
07 The Future of Software Development
Where vibe coding is heading
What is Vibe Coding?
"There's a new kind of coding I call vibe coding, where you fully give in to the vibes,
embrace exponentials, and forget that the code even exists."
— Andrej Karpathy, February 2025
▸ Describe WHAT you want — let AI figure out HOW
▸ Treat the AI as a senior engineer pair-programming with you
▸ Iterate rapidly: prompt → review → refine, not write → debug → repeat
▸ Focus on product logic and user value, not boilerplate
▸ Whole-codebase awareness: the AI holds the full context you can't
Meet Claude Code
An agentic coding tool that lives in your terminal, understands your entire codebase,
and autonomously completes complex engineering tasks end-to-end.
Terminal-Native Full Codebase Context Agentic Execution
Runs where developers already live — no Reads, writes, and reasons across every file in Plans multi-step tasks and executes them
context switching your repo autonomously
Tool Use Built-in IDE Integration Safe by Default
Bash, file I/O, web search, MCP servers and VS Code & JetBrains extensions with side-by- Asks permission before destructive actions;
more side diff view fully auditable
Getting Started with Claude Code
# 1. Install via npm (requires [Link] 18+)
npm install -g @anthropic-ai/claude-code
# 2. Navigate to your project
cd my-project
# 3. Launch Claude Code
claude
# 4. Start vibe coding — example prompts:
> "Scaffold a FastAPI REST service with JWT auth and a SQLite backend"
> "Find all N+1 query patterns in this Django app and fix them"
> "Write comprehensive pytest tests for the payment module"
> "Refactor the auth service to use dependency injection"
# 5. One-shot command (no interactive session)
claude -p "Add OpenAPI docs to every endpoint in src/routes/"
# 6. Pipe output to Claude
cat [Link] | claude -p "Diagnose the root cause of these errors"
Install once — works in any repo, any language, any OS
Slash Commands — Your Power Menu
▸ /init → Generate a [Link] with codebase docs & conventions
▸ /compact → Summarise conversation to free up context window
▸ /clear → Start a brand-new conversation
▸ /review → AI code review of the current git diff / PR
▸ /config → Open interactive settings (model, theme, permissions…)
▸ /doctor → Diagnose environment issues (node, auth, MCP servers)
▸ /memory → View & edit persistent project / user memories
▸ /model → Switch between Opus 4.7, Sonnet 4.6, Haiku 4.5
▸ /help → Full command reference
Model Context Protocol (MCP) — Extend Claude's Reach
What MCP Enables Adding an MCP Server
▸ Connect any external data source ▸ claude mcp add my-server "node [Link]"
▸ Call internal APIs & databases ▸ Or edit .claude/[Link] directly
▸ Browse the web live ▸ Scope: local project or global
▸ Read Confluence / Notion docs ▸ Servers auto-start with Claude Code
▸ Query GitHub / GitLab issues ▸ Tools appear as native capabilities
▸ Run custom business logic ▸ Ecosystem: 1000s of open-source servers
▸ Access design tokens (Figma MCP) ▸ Build your own in any language
Hooks — Automate Around Every Action
{
"hooks": {
"PreToolUse": [
{
"matcher": "Bash",
"hooks": [{
"type": "command",
"command": "echo 'Running shell command — logging to [Link]'"
}]
}
],
"PostToolUse": [
{
"matcher": "Write|Edit",
"hooks": [{
"type": "command",
"command": "npx prettier --write $FILE && npx eslint --fix $FILE"
}]
}
],
"Stop": [
{ Hooks fire on: PreToolUse • PostToolUse • Notification • Stop — full shell access
"hooks": [{
"type": "command",
"command": "notify-send 'Claude Code' 'Task complete!'"
Cline — Claude in VS Code
Cline is an open-source VS Code extension that brings Claude's agentic capabilities
directly into your editor — diff view, file creation, terminal commands, and more.
Install VS Code Extensions → search 'Cline' → Install → set API key
Model Select claude-sonnet-4-6 or claude-opus-4-7 in Cline settings
File Ops Creates, edits, and deletes files with side-by-side diff approval
Terminal Runs shell commands — you approve each one before execution
Browser Headless browser tool for UI testing and web research
MCP Same MCP ecosystem as Claude Code CLI — shared tool servers
Context @workspace, @file, @url context pins for precise targeting
Checkpoints Automatic snapshots let you roll back any change instantly
Claude Code CLI vs Cline (VS Code)
Claude Code CLI Cline (VS Code Extension)
▸ Terminal / shell workflow ▸ GUI diff view for every change
▸ Headless & CI/CD friendly ▸ Click-to-approve file edits
▸ claude -p 'task' for automation ▸ Inline browser preview
▸ Git worktrees for isolation ▸ @-mention context pinning
▸ Full [Link] project config ▸ Visual checkpoint timeline
▸ Hooks for pre/post tool events ▸ Side-panel chat + code together
▸ Best for: backend, scripts, DevOps ▸ Best for: frontend, full-stack, UI
Best Practices for Vibe Coding
▸ Write a [Link] — document conventions, stack, test commands up-front
▸ Use /init to auto-generate [Link] from your existing codebase
▸ Be specific in prompts: name files, functions, and acceptance criteria
▸ Keep tasks small: one clear goal per conversation works better than ten
▸ Review every diff — you are the senior reviewer, AI is the implementer
▸ Commit checkpoints often so you can roll back if a direction goes wrong
▸ Use /compact or /clear when context grows stale to avoid drift
▸ Pipe tests into Claude: run failing test → paste output → ask for fix
▸ Grant only needed permissions — least-privilege keeps sessions auditable
Real-World Use Cases
Greenfield Apps Legacy Migration
Scaffold a complete project — routes, models, tests, Docker — from a Upgrade Python 2 → 3, jQuery → React, or migrate a monolith to
single prompt microservices
Test Generation Code Review
Add 80%+ coverage to an untested codebase in an afternoon, not a PR review with security, performance, and style feedback before
sprint humans see it
Database Work Documentation
Write migrations, optimise queries, add indexes — with full schema Auto-generate API docs, README, architecture diagrams from source
context code
Bug Hunting Refactoring
Feed stack traces and logs; Claude traces root causes across files Rename symbols, extract functions, apply design patterns project-wide
safely
The Future of Software Development
▸ AI as co-author: developers own the vision, AI handles implementation velocity
▸ Autonomous agents run full sprint tasks — spec to merged PR, unattended
▸ Multi-agent pipelines: planner → coder → reviewer → deployer, all AI
▸ Natural language becomes the primary programming interface for non-engineers
▸ Code quality rises: AI enforces patterns humans forget under deadline pressure
▸ 10× productivity compounds — small teams ship products that once needed 50 people
▸ Security shifts left: vulnerability scanning baked into every generation step
▸ The skill that matters: knowing WHAT to build, not just HOW to type it
Key Takeaways
Vibe coding is real
1
Describing intent and letting AI handle implementation is a valid, productive workflow
Claude Code is the CLI
2
npm install -g @anthropic-ai/claude-code — then claude in any repo
Cline for VS Code
3
Same power with a GUI diff view — install from the extensions marketplace
[Link] is your config
4
Document conventions once; Claude Code reads it automatically every session
You are still the pilot
5
Review every diff, own every commit — AI accelerates, you steer
Start Vibe Coding Today
Your next project ships faster with Claude alongside you.
CLI VS Code Docs
npm install -g @anthropic-ai/claude- Search 'Cline' in Extensions Full reference & tutorials
code
[Link]/code [Link]/cline/cline [Link]
Questions? • Let's build something amazing.