tudy.club
BlogResourcesAbout
KO

© 2024 tudy.club

← Back to Blog
3 Ways to Vibe Code with Claude Code - Which One Should You Use?
Ddev
Aai

3 Ways to Vibe Code with Claude Code - Which One Should You Use?

Claude Code comes in three flavors: web, CLI, and VSCode extension. Here's what makes each one different and how to pick the right one for your workflow.

2026-02-04•2 min read
#Claude#Claude Code

3 Ways to Vibe Code with Claude Code - Which One Should You Use?

2026-02-04

You've probably tried asking "explain this code," "add this feature," or "find this bug" on Claude.ai or ChatGPT before. But when it comes to actually modifying files, committing, and pushing? Copy-paste hell begins.

That's why Claude Code exists. But now there are 3 versions...

  • Claude.ai web + GitHub integration
  • Claude Code CLI (terminal)
  • Claude Code VSCode extension

I was confused at first too. Aren't they all the same thing? But after using them, they turned out to be completely different tools.

Bottom line:

  • Web = for reading and reviewing code
  • CLI/VSCode = for actually coding

Here's what makes each one different, and how I actually combine them in my workflow.


3 Tools -- What's the Difference?

1. Claude.ai Web + GitHub Integration

This is the browser-based approach where you connect your GitHub repo.

  • Can read code
  • Can create PRs
  • Directly edit files? Nope
  • Commit/push? Nope

When to use: Code review requests, understanding repo structure, "what does this code do?" questions

2. Claude Code CLI

Run it from the terminal with the claude command.

  • Can directly edit files
  • Can git commit/push
  • Can run terminal commands
  • Can connect to Chrome browser (-chrome flag)

When to use: Server work, browser automation, when you're not using VSCode

3. Claude Code VSCode Extension

Runs as a sidebar inside VSCode.

  • Can directly edit files
  • Can git commit/push
  • Select code and ask questions right away
  • Click file links to jump straight there

When to use: General development work (this is the one I use the most)


Side-by-Side Comparison

FeatureWebCLIVSCode Extension
Read code✅✅✅
Edit files❌✅✅
git push❌✅✅
Run commands❌✅✅
Chrome integration❌✅❌
IDE integration❌❌✅

My Actual Workflow

Day-to-day development: VSCode Extension

  • Super convenient to chat while looking at code
  • Click a file link and jump right to it
  • Selecting code and asking questions is genuinely great

When I need browser testing: CLI

  • When building a web app and telling it to actually test it
  • Reading console logs for debugging

Quick checks on mobile: Web

  • When all I need is a code review
  • When an idea suddenly pops into my head
  • Can't edit anything anyway, so it's purely for review/analysis

Getting Started

  1. If you use VSCode → Install the Claude Code extension (my top recommendation)
  2. If you love the terminal → npm install -g @anthropic-ai/claude-code
  3. Just want to try it out → Connect GitHub on claude.ai

Personally, I'd recommend starting with the VSCode extension. The barrier to entry is the lowest, and you'll immediately get that vibe coding feeling.


Wrapping Up

I built tudy.club with the VSCode extension too. Back when I was using Sanity, it took weeks just to set up schemas, but with Claude Code, you can have a working blog in a single weekend day.

The tool itself is simple. What matters is the experience of coding without copy-paste. Once you try it, there's no going back.

목차

  • 3 Tools -- What's the Difference?
  • 1. Claude.ai Web + GitHub Integration
  • 2. Claude Code CLI
  • 3. Claude Code VSCode Extension
  • Side-by-Side Comparison
  • My Actual Workflow
  • Day-to-day development: VSCode Extension
  • When I need browser testing: CLI
  • Quick checks on mobile: Web
  • Getting Started
  • Wrapping Up