From One Sentence to a Running App: Your First AI CLI Project

Picture this. You are sitting in a coffee shop. You have a notebook full of app ideas -- a habit tracker, a budget tool, a reading list. You have described these ideas to friends in perfect detail. You know exactly what the app should do. But between the idea in your head and the app on a screen, there is a wall. The wall is code. You do not know how to write it. And every time you try to learn, you bounce off a tutorial that assumes you already know what a "variable" is.

Maybe you have tried ChatGPT. You typed "build me a habit tracker" and got back a wall of code. Nice code, probably. But then what? Where do you put it? How do you make it run? It is like someone handing you a car engine and saying "here, now drive." You needed the whole car.

This article is about getting the whole car.

You are going to type one sentence into your terminal. An AI will read that sentence, create all the files, install everything needed, start the app, and open it in your browser. You will see a working habit tracker -- a real one, running on your computer -- in under five minutes. No coding required.

What Is a Terminal, and Why Should You Care?

Before we go anywhere, let us talk about the terminal. You already know how to talk to your computer. You click icons, drag files, tap buttons. That is the graphical way. The terminal is the text way. Instead of clicking "New Folder," you type mkdir new-folder. Instead of double-clicking an app to launch it, you type its name.

Think of it like text messaging versus a phone call. Both accomplish the same thing. But text messages are faster for some things, and you can send them while doing something else. The terminal is the same. It is a text message conversation with your computer.

Here is the key insight: AI is very good at text. AI tools that work in a terminal can do things that browser-based chatbots cannot. They can create files on your computer, install software, run programs, and show you the results. A chatbot gives you text. A terminal AI gives you working software.

What Is Claude Code?

Claude Code is a tool made by Anthropic (the company behind Claude). It lives in your terminal. You type a request in plain English, and it does things on your computer -- creates files, writes code, runs programs, fixes errors. It is not a chatbot that gives you code to copy and paste. It is an agent that does the work.

The difference matters. With a chatbot, you are the driver. With Claude Code, you are the passenger giving directions. "Take me to the airport" versus "here is a map, turn right, now left, now merge onto the highway."

Step 1: Install the Tools

You need two things: Node.js (which is like the engine that runs web apps) and Claude Code itself.

Install Node.js

Node.js is the foundation. Think of it as the electricity that powers your app. Without it, nothing turns on.

Go to nodejs.org and download the LTS version. LTS stands for Long Term Support -- it means "the stable one, the one that will not break." Install it like any other program. Click through the installer.

To verify it worked, open your terminal:

• Mac: Open the app called "Terminal" (search for it in Spotlight)
• Windows: Open "PowerShell" from the Start menu
• Linux: You already know where your terminal is

Type this and press Enter:

node --version

If you see a version number like v22.x.x, you are good. If you see an error, the install did not work -- try restarting your terminal.

Install Claude Code

Now install Claude Code itself. Type this in your terminal:

npm install -g @anthropic-ai/claude-code

npm is the tool that installs JavaScript software. It came with Node.js. The -g flag means "install this for my whole computer, not just one project." And the long name at the end is Claude Code's address in the software registry.

When it finishes, verify:

claude --version

You should see a version number. You are ready.

One More Thing: Your API Key

Claude Code needs an API key from Anthropic. This is like a password that lets Claude Code talk to Anthropic's servers.

1. Go to console.anthropic.com
2. Create an account (or sign in)
3. Go to API Keys and create a new one
4. Copy the key

The first time you run claude, it will ask for this key. Paste it in. You only do this once.

Step 2: Type One Sentence

Here is the moment. Open your terminal. Navigate to a folder where you want your project to live:

mkdir my-first-app && cd my-first-app

mkdir means "make directory" (a directory is a folder). cd means "change directory" (go into that folder). The && means "do the first thing, then do the second thing."

Now, start Claude Code:

claude

You will see a prompt. This is where you talk to it. Type:

Build me a habit tracker web app. I want to add daily habits, check them
off each day, and see a weekly streak counter. Use React and make it look
clean and modern. Then run it so I can see it in my browser.

Press Enter.

Now watch.

Step 3: Watch It Happen

This is where it gets interesting. Claude Code does not give you code and wish you luck. It starts working. You will see it thinking, then acting. It will:

1. Create a project. It runs npm create vite@latest or a similar command to scaffold a React app. This is like laying the foundation of a house.

2. Write the code. It creates files -- App.jsx, HabitTracker.jsx, App.css. You will see the file names appear as it writes them. Each file is a piece of the app: one handles the list of habits, one handles the checkboxes, one makes it look good.

3. Install dependencies. It runs npm install. Dependencies are pre-built pieces of code that other people wrote. Your app does not need to invent date handling or button styling from scratch. It uses existing work. Like building with LEGO bricks instead of carving each piece from wood.

4. Start the app. It runs npm run dev. This starts a local web server -- a tiny program that serves your app to your browser. It will give you a URL, usually http://localhost:5173.

5. Tell you it is ready. Claude Code will say something like "The app is running at localhost:5173. Open it in your browser."

Open your browser. Type http://localhost:5173 in the address bar.

There it is. Your habit tracker. Running. On your computer. From one sentence.

You can type a habit name. Click "Add." Check it off. See the streak counter go up. This is not a mockup or a screenshot. It is a real app, running real code, on your machine.

That feeling right now? That is the whole point.

Step 4: Make It Yours

The app works, but maybe you want to change things. The color is not right. You want to add categories. You want the habits to save when you close the browser.

Go back to your Claude Code session (it is still running in the terminal) and type:

Change the primary color to a deep teal. Add a "category" field when
creating habits so I can group them. And make habits persist in
localStorage so they survive page refreshes.

Claude Code will edit the existing files. It does not start over. It reads what it already built, understands the structure, and makes surgical changes. Like telling an architect "add a window to the living room" -- they do not demolish the house.

Refresh your browser. The changes are there. Teal. Categories. Persistence.

You can keep going. Each request builds on the last. "Add a dark mode toggle." "Show a calendar view of the past month." "Add a motivational quote at the top that changes daily." Each one is a sentence that becomes a feature.

What Just Happened, Technically?

You do not need to understand this section. But if you are curious -- if the wall between you and code is starting to feel shorter -- here is what is behind the curtain.

Your app is built with React, a tool created by Facebook for building user interfaces. React works by describing what the screen should look like as a function of data. "If there are three habits, show three rows. If this one is checked off, show a checkmark." You gave Claude Code the rules in English. It translated them to React.

The files live in a src/ folder on your computer. You can open them in any text editor. They are just text. App.jsx is the main file -- it is the entry point, like the front door of the house. The other files are rooms inside.

npm managed the dependencies. When Claude Code ran npm install, it downloaded packages from the internet -- React itself, the development server, styling utilities. These live in a node_modules/ folder. You do not need to look in there. It is the plumbing.

The development server (npm run dev) watches your files. When anything changes, it automatically rebuilds the app and refreshes your browser. This is why changes appear instantly when Claude Code edits a file.

localStorage is a small storage space inside your browser. It keeps data even when you close the tab. When Claude Code added persistence, it wrote code that saves your habits to localStorage every time you check one off, and loads them back when you open the app. Like a notepad that remembers what you wrote yesterday.

Common Pitfalls and How to Handle Them

"Command not found" when typing claude. The install did not finish, or your terminal needs to be restarted. Close the terminal, open a new one, and try again. If it still fails, run npm install -g @anthropic-ai/claude-code again.

The app does not start. Claude Code usually tells you the error and offers to fix it. Just say "yes" or "fix it." Most first-run errors are missing dependencies, and Claude Code knows how to install them.

You see errors in the browser console. Open Claude Code and paste the error. "I am seeing this error in the browser: [paste error]." It will read the error, find the bug, and fix it. This is exactly what professional developers do dozens of times per day. The difference is that the AI does the reading and fixing.

You ran out of API credits. Claude Code uses Anthropic's API, which costs money per request. For a simple project like this, the total cost is typically a few dollars. Check your usage at console.anthropic.com.

Where to Go From Here

You built a habit tracker. One sentence became a running app. But that sentence could have been anything.

"Build me a personal bookshelf app where I can track books I've read, rate them, and see statistics."

"Build me a Pomodoro timer that logs completed sessions and shows a daily summary."

"Build me a recipe organizer where I can paste URLs and it extracts the recipe into a clean card."

Each of these is a real project that Claude Code can build in minutes. Some will need follow-up requests to get right. "Make the cards sortable by rating." "Add a pause button to the timer." You are having a conversation with an AI that builds software. The conversation is the programming.

This is what people mean by "vibe coding." You describe the vibe -- the feel, the function, the flow -- and AI handles the implementation. You are not a programmer. You are a product designer who happens to have an infinitely patient developer sitting in your terminal.

For a deeper dive into what Claude Code can do beyond project scaffolding, the first hour guide walks through the full range of capabilities. And if you are curious how Claude Code compares to other AI terminal tools, the AI CLI tools overview covers the landscape.

The Two-Pane Setup

Once you get comfortable, you will want to see your terminal and your browser at the same time. Claude Code running in one pane. Your app in the other. You type a request, watch the AI work, and see the result appear in the browser -- all without switching windows.

This is the natural way to work with AI CLI tools. Prompt on the left, result on the right. Like having a conversation where you can see the other person building what you asked for in real time.

If you find yourself constantly switching between the terminal and the browser, a terminal workspace that keeps both visible at once removes that friction entirely.

Recap

You installed Node.js and Claude Code. You typed one sentence describing a habit tracker. Claude Code created the project, wrote the code, installed the dependencies, and started the app. You opened your browser and saw it running. Then you made changes with more sentences. Each one became a feature.

The wall between an idea and a working app just got very short. It did not disappear -- you still need to describe what you want clearly, and complex apps still need complex conversations. But for the first time, the only language you need is the one you already speak.

You had an app idea. Now you have an app.