Vibe Coding Tools

Four kinds of tools

The products change every few months; the kinds of tools change much more slowly. It helps to sort any new tool into one of four groups, and to ask two questions about it: what does it do for me, and what do I still have to do (and check) myself?

The line between the groups is blurring: chat assistants can now build small apps, and editor assistants have chat windows. The question that matters stays the same: who carries out the change, you or the tool?

Chat assistants

A chat assistant is a general AI assistant you use through a conversation in a web page or app, not built into a code editor. It can write, explain and fix code, but it cannot see or change your project: you paste in what it needs and copy out what it gives you. The well-known ones, as of October 2026, are ChatGPT (OpenAI), Claude (Anthropic), Gemini (Google) and Microsoft Copilot. How chat assistants work in general is explained in Working with LLMs.

For a beginner, that copying is not a flaw. Every change passes through your hands, so you notice what changed, and the model never runs anything on your computer. The loop looks like this:

The price of this loop is effort and attention: you have to paste the right file, and the model knows only what you show it (see what the model knows about your project). How to keep each round small and checkable is the subject of Prompting in Small Steps.

Online code editors

An online code editor is a website where you write HTML, CSS and JavaScript and see the result right away in a preview, without installing anything. The code runs in your own browser. It is the quickest way to get from an AI's answer to something on screen, and a safe one: the code runs inside the browser's protections, not with access to your files. Several exist; this topic uses CodePen.

CodePen

CodePen is an online code editor and community for front-end code, where each project is called a Pen. CodePen 2.0, the current editor, launched on 23 July 2026: a new Pen has three files, index.html, style.css and script.js, and index.html is a complete HTML page. The older Classic editor still works at codepen.io/pen. For this topic, these points matter (as of October 2026):

• Libraries without setup. When script.js contains import * as THREE from "three", CodePen adds the package itself, with its latest version (how that works is on Build 1 · Your Starfield).
• The free plan is enough. It allows as many Pens as you like, with three files each, which is exactly what the game uses.
• Public by default. Free accounts cannot make private Pens, and public Pens are MIT licensed: anyone can see, copy and reuse them. Never put a password, an API key or personal data in a Pen.
• No version history on the free plan. Autosave starts after your first save, but going back to an earlier version is a paid feature. Forking (copying) a Pen and exporting it as a .zip file are free; see Saving Versions and Going Back.
• No AI inside. At its 2.0 launch, CodePen said it "doesn't have any built-in AI features yet". The assistant lives in another browser tab.

Assistants and agents in the editor and terminal

Professional developers mostly use an AI coding assistant built into the program they write code in, or one that runs in a terminal. These work on a project folder on your own computer (or in the provider's cloud), so they need more setup than a browser tab: an installed editor or command-line tool, a project, and often Git (see What Is Version Control?). Examples as of October 2026:

• GitHub Copilot: in the editor, the terminal (Copilot CLI), on the desktop and on GitHub itself, with chat, agent mode, code review and the Copilot cloud agent.
• Cursor: a code editor built around AI agents.
• Claude Code (Anthropic), in its own words an agentic coding tool that "understands your codebase, edits files, runs commands".
• OpenAI Codex: Codex CLI, a coding agent that runs on your computer, plus an editor extension, a desktop app and a cloud version.
• Gemini CLI (Google): an open-source agent for the terminal; Google also offers Gemini Code Assist for editors.
• JetBrains: AI Assistant and the coding agent Junie in JetBrains editors, and JetBrains Air for working with several agents.
• Devin Desktop (Cognition), the new name since 2 June 2026 of the editor formerly called Windsurf.

Inline suggestions

The oldest form of help is the inline suggestion: code that an editor assistant proposes while you type, shown in a faded color right where your cursor is, which you accept with a key press or ignore by typing on. Each suggestion is small, often one line or one function, so it is easy to read before accepting. It suits people who already write code; for someone who cannot yet judge a line of JavaScript, a chat is usually the better start.

Agent mode

Agent mode is a setting of an editor assistant in which it works on a task by itself: it plans the steps, edits several files, runs commands such as the tests, reads the output and keeps going until it considers the task done, usually asking for approval before certain actions. GitHub Copilot uses this name; other tools have similar modes under other names. This is the agent loop applied to code: the model no longer only writes code, it also runs it and reacts to the result.

Coding agents

A coding agent is an AI agent built for software work: it reads a codebase, edits files, runs commands and tests, and uses the results to decide its next step, iterating until it reaches a goal you gave it. Claude Code (released February 2025), OpenAI's Codex CLI (April 2025) and Gemini CLI (June 2025) are well-known examples. Because an agent acts, its permissions matter as much as its answers: what folders it may change, which commands it may run without asking, whether it can reach the internet or a production database. The risks are excessive agency and the safeguards are guardrails and a human in the loop. Agents also read standing instructions from instructions files in the project, and can hand parts of a task to subagents.

A cloud coding agent is a coding agent that runs on the provider's servers instead of your computer. You give it a task, often an issue in a repository, and it works in its own copy of the code and comes back with proposed changes, typically as a pull request for a person to review. Examples as of October 2026 are the Copilot cloud agent (which GitHub previously called the Copilot coding agent) and OpenAI's Codex Web.

App builders

An app builder is a web service that generates a complete application, often with a database and user accounts, from a description in plain language, and usually hosts it for you too. There is real code underneath, but you mostly work through the chat and a preview. Examples as of October 2026: Lovable ("a full-stack AI development platform"), Bolt.new by StackBlitz, v0 by Vercel (now at v0.app) and Replit Agent, whose maker advertises "No coding required."

App builders are the fastest route from an idea to a working, shareable app, and they are where the risks of vibe coding show up first, because the result is online and may store other people's data. A database rule the builder got wrong, or one you never checked, exposes that data to anyone; real cases are on Risks of Vibe Coding.

They also tie your project to one company. Google's Firebase Studio is being shut down: new workspaces could no longer be created from 22 June 2026, and on 22 March 2027 the service closes and remaining data is deleted. Projects whose code can be exported to ordinary files survive a closure like that; projects that exist only inside the service do not.

Free tiers

Most of these tools have a limited free tier as of October 2026, which is plenty for a small project like this topic's game. The limits change often; this is what the official pricing pages said in October 2026:

For ChatGPT, OpenAI Codex and Replit, check the provider's own pricing page. Two things to keep in mind on any free or personal plan: usage limits can stop you halfway through a change (keep your last working version), and some consumer plans may use your chats to improve their models unless you switch that off. Business and API plans generally do not by default. Either way, never paste passwords, keys or real personal data into a chat (see what never to paste); the details are on Risks of Vibe Coding.

What this topic uses, and why

The build pages use two tools: an AI chat assistant of your choice and CodePen 2.0. The prompts are written to work with any of the well-known chat assistants. That combination is deliberately the simplest one:

• Nothing to install. A browser and a free CodePen account are enough.
• You see every change. Each paste is a moment where you can look, run, and keep or undo.
• Nothing runs without you. No agent can delete a file or run a command, because there is no agent.
• The habits carry over. One change at a time, reading the code, pasting the exact error, saving a working version: the same habits make a coding agent safe to use later.

The move to an editor, Git and a coding agent, once a project is worth it, is covered in From Prototype to Real Software.

There is no independent, widely recognized certification for vibe coding or AI-assisted development as of October 2026. Several vendors offer short courses with a certificate of completion, which can be good learning material but are not certifications. For readers who work with GitHub Copilot, GitHub's GH-300 exam is a proctored certification for that one tool; it covers agent mode, prompting and context, responsible use, and privacy settings.