Open the project in Kiro

Now that Kiro is installed, you will open the admin project and learn your way around the editor.

Open the project folder

1. In Kiro, click File → Open Folder (or press Cmd + O)
2. Navigate to your Desktop
3. Select the admin folder
4. Click Open

Kiro will load the project. You will see the file tree on the left side showing all the project's files and folders.

A quick tour of the Kiro interface

Kiro has four main areas:

• Sidebar (left) — the file explorer, showing all files and folders in the project
• Editor (center) — where file contents are displayed when you click on a file
• AI Chat panel (right or bottom) — where you type prompts to ask Kiro to make changes
• Terminal (bottom) — a built-in Terminal, just like the one you have been using

Start the dev server from Kiro

Instead of switching between Kiro and Terminal, you can run commands directly inside Kiro's built-in terminal:

1. Open the terminal panel: View → Terminal (or press Ctrl + `)
2. You should see a command prompt inside Kiro

3. Make sure you are in the admin folder. If not, run:

cd ~/Desktop/admin

4. Start the development server:

pnpm dev

Now you can see the project at http://localhost:5173 in your browser, and you can make changes in Kiro without leaving the editor.

Your first prompt

Now that the project is running, let's make your first change using AI.

1. Open the AI Chat panel on the right side of Kiro
2. At the top of the chat panel, switch to Vibe mode
3. Copy and paste this prompt into the chat:

4. Press Enter to send the prompt
5. Kiro will show you the proposed changes — review the diff to see what it wants to change
6. Click Accept to apply the changes
7. Switch to your browser — you should see the app's color theme has changed to purple