Overview and setup

The comparison

We compare AI-assisted development tools by building the same small app several ways: Snake in React. The app is deliberately small. It gives each tool enough work to show how it works without turning the session into a React course.

You do not need to know React to follow along. Watch where the code appears, how you move it into a project, how the tool edits files, and how you verify the result.

We compare four 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 are the easiest way to try AI coding. Then we move into tools that share more of your project context. That is the main comparison: the more context the tool can see, the less copying you do, but the more careful you need to be about reviewing its changes.

The comparison map

The same app moves through several tool types:

AI coding tool is a broad label. A chat app gives you code in a browser. An IDE assistant works inside the project. A bootstrapper creates and hosts a first 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. Do not use this small sample 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:

• 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, even when the code was produced by different tools.

Main links

The workshop materials refer to these resources:

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

Now we can start with the most familiar workflow: ask a chat application to write the Snake game and move the answer into a local React project.