Skip to main content
Ready to see CodinIT in action? This hands-on tutorial will walk you through building a website in under a minute. You’ll experience how CodinIT 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 CodinIT.

​
Prerequisites

  • CodinIT 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 CodinIT

Click the CodinIT icon in your editor’s sidebar (left side). The chat panel will open.
Quick Tip: You can also use Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux) and search for “CodinIT: Open In New Tab”

​
Step 2: Give CodinIT a Task

Copy and paste this prompt into CodinIT’s chat: 
Create a simple website in a single HTML file. It should have:
- A welcome message saying "Hello from CodinIT!"
- 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
Press Enter and watch CodinIT work!

​
Step 3: What Happens Next

CodinIT 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 CodinIT create the file
    • You can review what it plans to do first
  3. Complete the task within seconds

​
Step 4: View Your Website

Once CodinIT 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
CodinIT understands the context from your previous conversation and will update the file accordingly.
You now know how to:
  • Give CodinIT a task with a clear prompt
  • Review and approve CodinIT’s actions
  • Build a complete project in seconds
  • Iterate and improve on existing work

​
Next Steps

Now that you’ve experienced CodinIT’s capabilities, explore more:

AI Providers

Explore 19+ AI providers and choose the best models

Features Overview

Discover all the powerful features CodinIT offers

Development Tools

Master the integrated development environment

Planning 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