Part 2: Coding assistants and IDEs
The second tool group moves the AI tool into the project. Now the tool can read files, propose edits, run commands, and keep the code in the editor instead of making you copy from a browser tab.
The public README lists these coding assistants and IDEs:
We use three tools in this part: Claude Code, GitHub Copilot, and Cursor. Claude Code creates the local app, Copilot helps with a refactor inside VS Code, and Cursor helps look at a scoring bug.
Claude Code CLI
Install Claude Code with npm:
npm install -g @anthropic-ai/claude-code
A CLI coding agent works against the project folder. Instead of pasting a generated component into the editor, you ask the tool to read the current files and make a change.
Start from an empty folder:
mkdir snake-claude-code
cd snake-claude-code
claude
Claude Code asks how to authenticate. An Anthropic API key works for this demo and charges per use. During the live run, the first generation cost about 28 cents.
Use this prompt:
Create the snake game using React and Tailwind CSS.
Claude Code proposes a plan, checks the empty directory, and asks before running commands or editing files. The approval step is important because this tool can create projects, install packages, and edit source files directly.
For a repeatable local comparison after cloning the workshop repo, use the finished Claude Code app:
cd workshops/vibe-coding/snake-claude-code
npm install
npm run dev
Use Space to start, arrow keys or WASD to move, and Space again to
restart after game over. The app also has a mode button that switches
between wall collisions and pass-through wrapping before the game starts.
Current documentation still matters
Claude Code may try an older Tailwind setup first. If that happens, stop the
command and give it the current Tailwind instructions from the docs. Then it
can edit vite.config.js and src/index.css for the Tailwind Vite plugin.
With ChatGPT, you copy instructions into the terminal and files into VS Code. With Claude Code, the agent asks for permission, then runs the command and edits the files.
GitHub Copilot in VS Code
Next, use GitHub Copilot for a smaller editor-local task: describe the app and move the game logic into its own component.
Open the Claude Code project in VS Code:
code workshops/vibe-coding/snake-claude-code
A focused refactor target is the split between the app shell and the game
component. src/App.jsx is small, and src/components/SnakeGame.jsx owns
the game behavior. That is a good shape for Copilot because you can ask for
small changes in the file you already have open, then review the diff.
The prompt from the live refactor was:
Describe this project.
After Copilot describes the Vite React Snake app, ask for the refactor:
Let's refactor it. Put the code logic into a SnakeGame component.
Before accepting a larger assistant edit, commit the working version:
git add .
git commit -m "initial version"
Commit first because assistants can break working code. That gives you a clean diff to review and a known point to return to.
Run the same checks after a refactor:
npm run lint
npm run build
Keep this habit with all IDE assistants. The tool can edit quickly, but the project should still prove that the edit compiles.
Cursor for codebase chat
In the Cursor part of the recording, Cursor is used to chase a scoring bug.
The finished app has score state in SnakeGame.jsx, so that is the
concrete area to check.
Use this debugging prompt:
We do +5 when we calculate the score for eating the food, but it adds 10.
There must be a bug. Can you please find it?
This is a good Cursor task because the behavior is local but not obvious. Cursor can trace state updates, suggest likely causes, and point you to the places worth checking.
The score starts at zero:
const [score, setScore] = useState(0)
It increments when the snake eats food:
if (head.x === food.x && head.y === food.y) {
setScore(prev => prev + 5)
setFood(generateFood())
} else {
newSnake.pop()
}
It resets in resetGame:
const resetGame = () => {
setSnake([{ x: 10, y: 10 }])
setFood({ x: 15, y: 15 })
setDirection({ x: 0, y: 0 })
setGameOver(false)
setScore(0)
setGameStarted(false)
}
That is exactly the kind of focused behavior you can discuss with an IDE
assistant. Ask the tool to trace where score is created, updated, rendered,
and reset. Then verify the behavior by playing the game.
Use Cursor for visual and feature changes too:
Let's add a grid to make it visually more appealing.
Then:
Pass-through mode in addition to walls.
Use Cursor again to adjust the border when the snake visually crosses the right and bottom edges. This part can take more back and forth than the feature work, which is a useful warning: vague visual bugs can take several small prompts, and sometimes it is faster to look at the CSS yourself.
Tool fit
Claude Code is useful when you want a terminal agent to read and edit a local project. GitHub Copilot is useful when you already work in VS Code and want inline suggestions or chat beside the code. Cursor is useful when you want an editor centered around AI chat and codebase context.
The shift from Part 1 is that the tool now shares the workspace with you. That reduces copying, but it also raises the need for local verification because the assistant can change multiple files at once.
Next, look at the full snake-claude-code implementation in
Part 2 continued: Claude Code Snake app.