New to Code?

Open your terminal

The terminal is a small app where you type commands instead of clicking buttons. It comes free with every computer.

Install Node.js

Create UI's tools run on Node.js. Installing it also gives you npm and npx, the two commands every step below uses. That is all you need to install. You do not have to add yarn, pnpm, or anything else separately.

The simplest way is the official installer. Open nodejs.org, download the version marked LTS (that means Long Term Support, the stable one), open the file you downloaded, and click through the installer.

Prefer a package manager? Use one of these instead:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

brew install node

Check that it worked

Back in your terminal, run these two commands. Each should print a version number.

node -v
npm -v

Pick a code editor (optional)

You will want somewhere to open your project files. Both of these are free:

• Visual Studio Code is the most popular editor.
• Cursor is an editor with an AI assistant built in, handy for the last step on this page.

Create your project

Now the fun part. This one command scaffolds a complete, ready-to-run app with Create UI already wired in:

pnpm dlx @create-ui/cli create my-app

It asks you a few questions: a project name, a template (Next.js is the friendliest place to start), a primary color, a neutral color, and a font. Pick whatever you like, or press Enter to accept the defaults.

When it finishes, move into the new folder and start the development server:

cd my-app
npm run dev

Open the address it prints in your terminal (for Next.js that is http://localhost:3000) in your browser. Your app is running.

Add your first component

Leave the server running and open a second terminal tab. Add a button:

pnpm dlx @create-ui/cli add button

The component's code is copied straight into your project at components/ui/button.tsx, yours to keep and edit. Use it on your page:

import { Button } from "@/components/ui/button"
 
export default function Page() {
  return <Button>Click me</Button>
}

Save the file and your browser refreshes on its own. That is your first Create UI component on screen.

Build with AI (optional)

Create UI is made to be driven by an AI coding agent. Two commands set it up.

First, install the skill, which teaches your agent Create UI's conventions:

pnpm dlx @create-ui/cli skill

Then connect the MCP server, which gives your agent live tools to search and add components. The example below is for Claude Code; if you use Cursor or VS Code, swap claude for cursor or vscode:

pnpm dlx @create-ui/cli mcp init --client claude

Now you can describe what you want in plain language and let your agent build it:

Add a sign-up form with name, email, and password fields, and a submit button.