Creating Your First Project

Before You Start - What You Need: A modern web browser (Chrome, Firefox, Safari, or Edge), an idea of what you want to build. Time Required: 5-10 minutes for a simple project.

Step 1: Craft Your Project Description - The quality of your description directly impacts the result. Include exact features, design preferences (colors, style), functionality details, and attach visual mockups when available.

Good Project Examples: Todo App: Build a todo app with add/delete tasks, checkboxes to mark complete, counter of remaining tasks, clean modern design with blue accents.

Landing Page: Create a landing page with hero section, 3 benefits features section, pricing cards with 3 tiers, contact form, green and white color scheme.

Weather Dashboard: Show current temperature/conditions, 5-day forecast, city search, weather icons.

Step 2: Submit Your Request - Enter description in chat input, attach images (optional), press Enter, sign in if needed.

Step 3: Review the AI's Plan - AI enters Planning Phase and creates implementation strategy showing proposed technology stack, file structure outline, key features, implementation steps. You can Accept, Edit to modify, Respond with feedback, or Ignore to discard.

Step 4: Watch the Implementation - AI enters Implementing Phase: files are created in file tree, code is written automatically, dependencies identified, todo list updates as tasks complete. Usually takes 30 seconds to 2 minutes depending on complexity.

Step 5: Execution & Server Start - AI enters Executing Phase: dependencies install (npm install), development server starts, preview becomes available in right panel with live iframe.

Step 6: Interact with Live Preview - Test functionality by clicking buttons, filling forms, navigating pages. Check responsiveness using device size buttons (Mobile, Tablet, Laptop, Desktop) or width slider. Test different scenarios and edge cases.

Step 7: Iterate and Improve - Request modifications via AI ("Make buttons larger and green", "Add filter for completed tasks", "Change font", "Add animations"). Or make manual edits directly in code editor. Files with unsaved changes show orange dot.

Step 8: Review What Was Built - Check chat panel for summary showing completed todo list, files changed with timestamps and action types, terminal output with commands executed and any errors.

Step 9: Save and Access Later - Projects automatically saved. Access from Dashboard → Projects. Project cards show name, description, creation date, preview thumbnail, collaborators.

Step 10: Next Steps - Continue building with more features, export code (Download button → ZIP file → extract and run locally with npm install and npm run dev), share with others (Settings → Collaborators → enter emails and assign roles), or start a new project.

Common Pitfalls: Avoid vague descriptions, don't be too ambitious initially (start simple then iterate), always review AI's plan before accepting, check terminal for errors, don't expect perfection immediately (iterate and refine).

Example Todo App Flow: Initial prompt with clear features → AI creates plan using React with Vite → Files created (package.json, App.jsx, TodoList.jsx, TodoItem.jsx, styles, index.html) → Working app in ~2 minutes → Follow-up refinements: add edit ability, localStorage saving, clear completed button, mobile responsive design.