Overview and setup

The comparison

We compare AI-assisted development tools by building the same small app several ways: Snake in React. The app stays small on purpose, so each tool gets enough work to show how it behaves without turning the session into a React course.

You don't need to know React to follow along. Watch where the code appears and how you move it into a project. Then watch how the tool edits files and how you verify the result.

We compare these groups of tools:

• Chat applications
• Coding assistants and IDEs
• Project bootstrappers
• Agents

You'll use three files and folders from the public repo:

• vibe-coding README
• snake-chatgpt, a Vite React version produced from a chat app
• snake-claude-code, a Vite React version produced with a coding assistant

We start with chat apps because they're the easiest way to try AI coding. Then we move into tools that share more of your project context, which is the main comparison. More context means less copying, but it also means you need to review changes more carefully.

The comparison map

The same app moves through several tool types:

AI coding tool is a broad label.

We use it for several shapes:

• A chat app gives you code in a browser.
• An IDE assistant works inside the project.
• A bootstrapper creates the first hosted app.

An agent is the tool-using pattern under several of these products.

Get the example code

Clone the public workshop repo and enter the vibe-coding folder:

git clone https://github.com/alexeygrigorev/workshops.git
cd workshops/vibe-coding

That folder has a short workshop README and two finished local app folders:

vibe-coding/
├── README.md
├── snake-chatgpt/
└── snake-claude-code/

Use the app folders as example code to check. Don't treat this small sample as a way to pick a winner. Use it to see how different tools leave different traces in the code and in the way you work.

Prerequisites

Install these tools before the workshop.

• Node.js and npm
• Git
• A browser
• An editor such as VS Code or Cursor
• One or more AI coding tools you want to compare

For the Claude Code demo, install the CLI:

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

The local projects are Vite React apps.

Both expose the same scripts:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  }
}

Those scripts give you a common way to run and check both versions. That matters even when the code was produced by different tools.

Main links

We refer to these resources throughout:

• Workshop recording
• Workshop code repository
• Lovable Snake preview
• AI Dev Tools Zoomcamp
• AI Engineering Buildcamp
• DataTalks.Club AI courses

Start with the most familiar workflow by asking a chat application to write Snake. Then move the answer into a local React project.