The guide
How to use Uttra
Step by step, from a first idea to a published site with your own code in hand.
Step 1
Start your first project
Describe your idea in plain words, and Uttra starts building it in front of you.
- Type your idea in the composer on the homepage, in Arabic, dialect, or English, the same way you'd explain it to a person in front of you.
- Click "Start building". Uttra prepares an isolated environment just for your project; its files are never shared with anyone else's.
- Follow the build step by step in the chat: pages, data, and logic get built one after another right in front of you. You can also pick a design direction from "UI Styles" if you like.
- Once it's done, you can keep asking for changes in the same chat any time; the project stays open for further development.
Step 2
Open the Preview and see your site live
A live preview next to the chat, updating instantly with every request.
- As soon as the build finishes, Uttra opens a live Preview of your site or app right next to the chat window.
- Any change you ask for in the chat reflects in the preview right away: you see the result while you're talking to Uttra, not later.
- The preview link is private to you: nobody else can see it until you decide to publish the project to the world.
ChatCodePreview
Publish
Preview
Live
Smile Dental ClinicBook your visit
Step 3
Use "Select element" to edit visually
Click "Select element", pick anything on the page, and tell Uttra what to change about it.
- Above the preview there's a button called "Select element". Click it, then pick anything on the page (text, image, button, a whole section).
- The element you pick is sent to the chat as context automatically, so you can write your request directly, like "make this text bigger" or "delete this section", without describing where it is.
- This is faster for precise edits on one element. For bigger changes, or ones touching several parts and needing logic and data connections, the regular chat is the better tool.
Preview
Select element
Smile Dental Clinich1.hero-title
Make this text bigger
Step 4
Test your site on different devices
Switch between mobile, tablet, and desktop views from the same screen.
- From the preview toolbar, you can switch between mobile, tablet, and desktop sizes without needing to open another device.
- This lets you confirm the design works and looks clear at every size before you publish your site for people to see.
- If Uttra built you a mobile app, you can try it on your real phone directly through the Expo Go app by scanning a QR code.
Preview
Step 5
Publish on a free Uttra domain
One click, and a ready link to share with anyone, no hosting setup.
- Click the "Publish" button at the top of the project, and your project becomes "Public", and you get a direct link to share with anyone right away.
- The link is on a free subdomain like your-app.uttra.io, with no hosting setup on your part.
- Published sites run on your plan's resources (CPU, memory, storage), distributed automatically, ready for real traffic without you needing to set up a server.
- If you press "Publish" again after an edit, the previous version stays live for visitors until the new one is verified; your site never goes down mid-update.
ChatCodePreview
Publish
PublishMake this project reachable to the public
Hosting
0.8 vCPU
processor
2.4 GB
memory
24 GB
storage
Domain
Our subdomain
clinic-smile.uttra.io
Custom domain
Bring your own, free on every plan
Publish
Step 6
Connect your own domain
Your site on your own domain, free with every plan.
- From the "Publish" screen, choose "Custom domain" and enter your domain, e.g. app.example.com.
- Add the DNS records Uttra shows you into your domain registrar's control panel, usually a TXT record for verification, and an A record.
- Click "Verify domain". Once the settings propagate (this can take a little time), your site goes live on your own domain directly.
| Type | Host | Value |
|---|---|---|
| TXT | @ | uttra-verify=8a2f... |
| A | @ | 76.13.x.x |
Verified: your site is live on your domain
Step 7
Connect GitHub and push your code
A full copy of the code, in your own repository.
- From the "GitHub" tab inside the project, connect your account with a Personal Access Token that has repo scope.
- After connecting, push your project directly to your own repository whenever you like.
- Importing an existing repository (pull) can be done through the terminal inside the project environment with the usual git commands like git clone and git pull.
Connect GitHub
clinic-smile-appPush
Step 8
Download your code or edit it yourself in the terminal
The code is fully yours, and never locked inside the platform.
- The code is entirely yours. You can push it to GitHub any time, or download/copy it directly through the terminal built into the project.
- The terminal gives you a real development environment: open files and edit them manually, and install any npm or system package your project needs.
- So you're not limited to the chat only; you can work as a full developer inside the same project any time.
zsh
$
$
Ready to try it yourself?
Free · No credit card needed