Skip to main content

Build Your First Project

ℹ️Note

캐럿(Caret) 기준 문서입니다. Caret v3.38.1 머지본을 따르며, 캐럿 전용 정책(지원 모델/권장 설정, 인증/라우팅)이 있을 경우 본문에서 <Note>로 표시합니다.

Ready to see Caret in action? This hands-on tutorial will walk you through building a website in under a minute. You'll experience how Caret understands your requirements, creates files, and iterates on your feedback—all through natural conversation.

By the end of this guide, you'll have built a working website and learned the fundamentals of working with Caret.

Prerequisites​

  • Caret installed in your editor (Install Guide)
  • AI model selected (Model Setup)
  • Any folder open in your editor (or create a new empty folder)

Step 1: Open Caret​

Click the Caret icon in your editor's sidebar (left side). The chat panel will open.

ℹ️Info

Quick Tip: You can also use Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux) and search for "Caret: Open In New Tab"

Step 2: Give Caret a Task​

Copy and paste this prompt into Caret's chat:

Create a simple website in a single HTML file. It should have:
- A welcome message saying "Hello from Caret!"
- A colorful gradient background
- A button that cycles through different color themes when clicked
- Modern, clean design
- All CSS and JavaScript should be included in the same HTML file
Caret Chat Prompt

Press Enter and watch Caret work!

Step 3: What Happens Next​

Caret will:

  1. Create a single file:

    • index.html - A complete webpage with embedded CSS and JavaScript

  2. Ask for approval (unless you've enabled auto-approve)

    • Click "Approve" to let Caret create the file
    • You can review what it plans to do first

  3. Complete the task within seconds

Step 4: View Your Website​

Once Caret finishes:

  1. Find index.html in your editor's file explorer
  2. Right-click it and select:
    • "Reveal in Finder/Explorer" then double-click to open in your browser
  3. Click the button to see the color themes change!

Try Making Changes​

In the same chat, try asking:

Add a counter that shows how many times the button has been clicked

or

Make the welcome message fade in when the page loads

Caret understands the context from your previous conversation and will update the file accordingly.

💡Tip

You now know how to:

  • Give Caret a task with a clear prompt
  • Review and approve Caret's actions
  • Build a complete project in seconds
  • Iterate and improve on existing work

Next Steps​

Now that you've experienced Caret's capabilities, explore more:

@ Mentions

Reference specific files, folders, and URLs in your prompts

Plan & Act Modes

Master planning vs. execution for complex tasks

Caret Rules

Set project-specific guidelines for consistent results

Prompting Guide

Learn to write prompts that get the best results

Need Help?​

  • Stuck? Try starting fresh with /new in the chat
  • Found a bug? Use /reportbug to help us improve
  • Have questions? Join our Discord community