AI Tool Comparison

--- theme: seriph title: "AI Tool Comparison" info: "Module A-TOOLS-001 - GitHub Copilot, Cursor, Claude Code, v0/bolt, when to use what" --- # AI Tool Comparison Knowing what exists and when to reach for it. --- # You Already Use AI for Coding Over the past 5 weeks you've used: - **ChatGPT** - general chat for explanations, brainstorming, and code generation - **GitHub Copilot** - autocomplete inside VS Code - **Claude.ai** - chat for explanations, debugging, code generation These are three points on a much larger map. Today we tour the rest. --- # The AI Tool Landscape | Tool | Interface | Strength | Access | |---|---|---|---| | ChatGPT | Browser / app | General chat, explanations, code generation | Free tier available | | GitHub Copilot | VS Code extension | Inline completions while you type | Free for students | | Cursor | Standalone editor | AI woven into every editor action | Free tier available | | Claude Code | Terminal (CLI) | Autonomous multi-file tasks | Requires API key | | v0.dev | Browser prompt | Instant UI prototypes | Free tier available | | bolt.new | Browser prompt | Full-stack apps from a description | Free tier available | --- layout: center --- # Tool-by-Tool Walkthrough --- # GitHub Copilot What you already know, plus what you might not. **Three modes:** 1. **Inline completions** - gray ghost text as you type, press `Tab` to accept 2. **Chat panel** - ask questions, get code with context from your open files 3. **Edits** - highlight code, describe a change, Copilot rewrites in place **Best for:** writing code line-by-line inside VS Code when you know what you're building. > Copilot sees your open files. The more context it has, the better its suggestions. --- # Cursor An editor built around AI from the ground up. - Fork of VS Code - familiar layout, same extensions - **Cmd+K**: edit or generate code inline with a prompt - **Cmd+L**: chat with full codebase awareness (not just open files) - **Tab completions** that predict multi-line changes - Understands your entire project structure **Best for:** developers who want AI integrated into every editing action, not just autocomplete. > You don't need to switch to Cursor for this course. It's worth knowing it exists. --- # Claude Code A terminal tool, not an editor. ```bash $ claude "add a dark mode toggle to index.html" ``` - Reads and writes files directly on your machine - Plans multi-step changes, then executes them - Can run commands (npm install, git commit) - Works across many files at once **Best for:** larger tasks where you'd describe the work rather than type the code yourself. Refactoring, adding features across files, debugging complex issues. --- # v0.dev Vercel's UI prototyping tool. 1. Describe what you want: "a pricing page with three tiers" 2. Get a working React component in seconds 3. Iterate by chatting: "make the popular tier stand out more" 4. Copy the code into your project **Best for:** quickly seeing what a UI could look like before you build it. Design exploration. **Limitation:** generates React/Next.js code. You'd need to adapt it for plain HTML/CSS/JS. --- # bolt.new StackBlitz's full-app generator. 1. Describe an app: "a to-do list with local storage" 2. Get a running app in the browser - frontend, logic, and all 3. Edit the code live or prompt for changes 4. Download or deploy when satisfied **Best for:** going from zero to a working prototype in minutes. Hackathons, proof of concepts, exploring an idea. **Limitation:** the generated code may not follow best practices. Treat it as a starting point. --- layout: center --- # When to Use What --- # Decision Guide | Situation | Reach for | |---|---| | Writing code line by line, you know the structure | **Copilot** (inline completions) | | "What does this code do?" or "Why is this broken?" | **ChatGPT**, **Copilot Chat**, or **Claude.ai** | | Refactoring or editing across multiple files | **Claude Code** or **Cursor** | | "Show me what a dashboard could look like" | **v0.dev** | | "Build me a working prototype from scratch" | **bolt.new** | | Learning a new concept | **ChatGPT** or **Claude.ai** (ask it to explain) | There's no single best tool. The skill is matching the tool to the task. --- # Two Principles **1. Start with the tool you know.** Copilot + Claude.ai cover most of what you'll need in this course. Don't switch tools for the sake of switching. **2. Reach for a bigger tool when the task outgrows the current one.** - Typing the same change in 5 files? That's a Claude Code task. - Can't picture the UI? Throw a prompt at v0.dev. - Want to test an idea in 2 minutes? bolt.new. The right tool saves time. The wrong tool adds confusion. --- # What You Still Own No matter which tool you use: 1. **Read the code** - every line, before you submit 2. **Understand the logic** - can you explain it without AI? 3. **Test it** - does it actually work in the browser? 4. **Modify it** - change something and see what breaks AI generates. You verify. That responsibility never transfers. --- # Your Turn Pick one tool from today's landscape that you haven't tried yet. Spend 5 minutes using it to solve a small task (generate a nav bar, explain a code snippet, prototype a layout). Save your notes in `ai-tools-notes.md`: - Which tool did you try? - What did you ask it to do? - What worked well? What was confusing? - Would you use it again? Why or why not? > AI tip: If a tool's output confuses you, paste it into a tool you already know (like ChatGPT or Claude.ai) and ask for an explanation. --- # Key Takeaways 1. ChatGPT: general-purpose chat for explanations and code generation 2. Copilot: inline completions, chat, and edits inside VS Code 3. Cursor: AI-native editor with full-project awareness 4. Claude Code: terminal tool for autonomous multi-file tasks 5. v0.dev / bolt.new: prompt-to-prototype in the browser 6. Match the tool to the task - don't switch for the sake of switching 7. You still own the code. Read it, understand it, test it.