Back to Workshops
Workshop Free

AI Coding Tools Compared: ChatGPT, Claude, Copilot, Cursor, Lovable and AI Agents

Alexey Grigorev Jul 21, 2025 ai-tools
Workshop

AI Coding Tools Compared: ChatGPT, Claude, Copilot, Cursor, Lovable and AI Agents

July 21, 2025 Alexey Grigorev
ai-tools coding-assistants comparison developer-tools ai-agents

Watch the recording

Full workshop video with timestamps and downloadable materials.

Follow the tutorial

10 pages of step-by-step instructions you can work through at your own pace.

View code on GitHub

We compare AI coding tools by asking them to help build the same small app: Snake in React. The session is a comparison, not a single production build, so the walkthrough follows the tool categories: chat applications, coding assistants and IDEs, project bootstrappers, and agents.

Links

The main resources:

The comparison

The same app appears in several workflows:

flowchart LR PROMPT["Prompt<br/>implement snake in react"] CHAT["Chat apps<br/>ChatGPT, Claude, DeepSeek, Ernie, Microsoft Copilot"] IDE["Coding assistants and IDEs<br/>Claude Code, GitHub Copilot, Cursor, Pear"] BOOT["Project bootstrappers<br/>Bolt, Lovable"] AGENTS["Agents<br/>tools, file access, computer use"] CHATAPP["Local app<br/>snake-chatgpt"] CLAUDEAPP["Local app<br/>snake-claude-code"] PREVIEW["Hosted app<br/>Lovable preview"] PROMPT --> CHAT CHAT --> CHATAPP IDE --> CLAUDEAPP BOOT --> PREVIEW AGENTS --> IDE AGENTS --> BOOT

The workshop code includes two Vite React projects. snake-chatgpt keeps the game in one component and is useful for seeing what a chat app can produce from a short prompt. snake-claude-code splits the page shell from the game component, adds score, start and restart flow, WASD controls, and a walls versus pass-through mode.

Walkthrough

Follow the numbered files in order. Each one stands on its own, but the sequence matches the live workshop flow.

  1. Overview and setup - setup, example code, links, and the comparison map.
  2. Part 1: Chat apps - use chat apps such as ChatGPT and Claude to generate the first Snake implementation, then run the resulting Vite React app locally.
  3. Part 1 continued: ChatGPT Snake code - look at the snake-chatgpt implementation in detail.
  4. Part 2: Coding assistants and IDEs - compare Claude Code, GitHub Copilot, Cursor, and Pear as tools that work inside a project.
  5. Part 2 continued: Claude Code Snake app - look at the richer snake-claude-code implementation.
  6. Part 3: Project bootstrappers - compare app bootstrappers such as Bolt and Lovable, including the hosted Lovable preview and export-to-GitHub flow.
  7. Part 4: Agents and computer use - connect the previous tools to the agent pattern and run Anthropic's computer use demo container.
  8. Deferred items - items that are worth trying after the workshop.
  9. Appendix: file inventory - file inventory, dependency details, and command quick reference.
  10. Q&A - side questions about Claude project download, Lovable with an existing repo, the score bug, and the agent follow-up path.

Tutorial pages

  1. 1 Overview and setup
  2. 2 Part 1: Chat apps
  3. 3 Part 1 continued: ChatGPT Snake code
  4. 4 Part 2: Coding assistants and IDEs
  5. 5 Part 2 continued: Claude Code Snake app
  6. 6 Part 3: Project bootstrappers
  7. 7 Part 4: Agents and computer use
  8. 8 Deferred items
  9. 9 Appendix: file inventory
  10. 10 Q&A
Saw this on the events timeline? View the event page