Part 1: Chat apps

We start the comparison with the simplest interface: a chat box. Chat apps are easy to try. They also make you move code by hand between the browser and your editor.

Start with the chat applications people usually try first:

• ChatGPT
• Claude
• DeepSeek
• Ernie
• Microsoft Copilot

Microsoft Copilot here means the chat product, not GitHub Copilot. Microsoft Copilot behaves like a chat app, while GitHub Copilot works inside an editor or repository workflow.

The shared prompt

Use a compact prompt for chat apps:

implement snake in react

The ChatGPT demo uses the same ask with slightly different wording:

Create snake game using React.

The prompt is short on purpose. A small prompt tests the default behavior of each tool. Look at which framework assumptions it makes and how much code it returns. Check whether the answer is ready to paste into a local project.

Try the same prompt in at least two chat apps.

Compare how each one structures the answer before you copy anything:

• Does it return one component or a whole project?
• Does it assume Tailwind, plain CSS, or another styling system?
• Does it include setup commands?
• Does it explain where the file should go?
• Does it include controls, score, and restart behavior?

Use those questions to compare the tools. The code matters, but the flow around the code matters too.

Local Vite shell

The finished snake-chatgpt folder runs as a Vite React app.

To recreate that shell from scratch, start with the React template:

npm create vite@latest snake-chatgpt -- --template react
cd snake-chatgpt
npm install

The finished app uses Tailwind through the Vite plugin, so add the same packages if your generated answer uses Tailwind classes:

npm install tailwindcss @tailwindcss/vite

Configure vite.config.js with the plugin, since the component returned by the chat app uses Tailwind utility classes for the board and controls.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

The matching src/index.css is one line:

@import "tailwindcss";

Now run the app:

npm run dev

Open the local Vite URL that appears in the terminal. The important comparison here isn't visual polish but whether the chat answer turns into a running project without a lot of manual repair.

Tailwind version gotcha

The ChatGPT answer uses React and Tailwind CSS. A first setup answer can mix in older Tailwind initialization steps.

That makes the terminal fail with this error:

$ npx tailwindcss init -p
could not determine executable to run

The model may know an older version of a tool, and frontend setup commands change often.

Ask ChatGPT to search and use the current Tailwind instructions:

Use the most up-to-date instructions for Tailwind CSS.
Search to find the most up-to-date instructions for Tailwind.

If the answer still mixes the old and new approaches, tighten the request:

Use only the newest instructions, not the old ones.

You want the Vite plugin setup shown above, and the lesson isn't Tailwind specific. When generated setup commands fail, ask the model to verify against current documentation, and watch whether it combines old and new answers.

Package structure

The snake-chatgpt/package.json file keeps the default Vite scripts and adds React, Vite, ESLint, and Tailwind packages:

{
  "name": "snake-chatgpt",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  }
}

The dependency list is small, which helps the comparison: the app is still mostly generated component code rather than framework setup.

{
  "dependencies": {
    "react": "^19.1.0",
    "react-dom": "^19.1.0"
  },
  "devDependencies": {
    "@tailwindcss/vite": "^4.1.11",
    "@vitejs/plugin-react": "^4.6.0",
    "vite": "^7.0.4"
  }
}

The full package also has ESLint packages and type packages. The shorter set above is enough to understand which pieces affect the generated React app directly.

Claude chat comparison

Try the same app in Claude chat:

Create the snake game using React.

The generated app runs in Claude's preview.

Then ask for two changes:

I want to use WASD for controlling the snake.
Also I want to have two modes: walls and pass through.

Claude edits the preview directly, which saves you from pasting a plain text answer, but the download path still matters. In this demo, the available download is a single tsx file. You still create a local project, paste the file, install the right dependencies, and run it.

Claude also hits the free-message limit during the live demo, and that's part of the tool comparison too. A tool can produce good code and still get in the way when the session limit interrupts the workflow.

Chat app friction

Chat applications work for a first draft, but they slow down ongoing development because you keep moving between the chat application and the IDE.

That's the main takeaway from this part. Chat is good for producing a first draft, explaining code, and asking for focused changes. Once the code is in a real project, tools that can read and edit files in place feel more natural.

Before moving on, look at the generated app in Part 1 continued: ChatGPT Snake code. The code shows the result a chat app can leave behind.