Using Chirai · Chapter 6

The Studio and IILA

The Studio is where your site appears while it's built and where you shape it afterwards. It opens automatically when you press Generate Preview, and you can return to it from My Apps.

The screen

The preview in the middle is your real site running. Switch between desktop, tablet and phone widths at the top.
The left side has tabs: Activity, IILA chat, and pages (add a page, or pick from pages IILA recommends).
Activity tells you what Chirai is doing in plain words: each step as it happens, every fix (where, why, and what's better now — tap a fix to see why), what Chirai added (a shop, bookings, legal pages), and what the visitor check found. Fixes & additions shows only those; Technical log shows the raw engine log. It stays with the build, so you can read it again later.
The right side lists your site's parts — pages, database, payments, email — each marked ready, needing one step from you, or not added yet. After a build it also shows the code review results.
The top bar: ↓ Code (download), ↗ GitHub (export), ↑ Publish, and ⚙ Manage site.

Three modes

Mode	Use it for
Design	Changing how pages look and what they say: IILA chat and click-to-edit.
Content	Manage site next to the live preview — add a product and watch it appear.
Backend	The services the site uses (email, payments, database) and whether each is ready.

Changing things with IILA

IILA edits your site's real code. Ask in plain words, one change at a time:

"Make the hero heading bigger and the background darker."
"Add a FAQ section above the footer on the home page with 5 questions about delivery."
"On the products page, show 4 per row on desktop."
"Add an About page with our story and link it in the navbar."

IILA changes only what you asked and leaves the rest as it was.

NoteIILA won't rewrite Chirai's own pages (shop, product, cart, checkout, account) — they're built to work with your data. Change products, prices and stock in Manage site; IILA can still change their styling (colours, spacing).

Click to edit

Press ✦ Select, then click any element on the page. A small toolbar appears:

✎ Text — type the new words in place.
Color / Fill — change text or background colour.
IILA edit — describe a change to just this element.
Add section — insert a new section before or after it.

Code review

Every build is reviewed before you see it, and the result is shown in the right-hand panel:

Automatic checks for common mistakes (keys in the code, unsafe links, missing image descriptions, wrong use of React) — safe ones are fixed automatically.
An AI review of the pages that save data, show money or depend on who's signed in, against a fixed checklist. Real problems are repaired.
Access tests: two test accounts try to read, change and delete each other's data. If they can, Chirai tightens the database rules and tests again.

When a build fails

Most problems are fixed automatically — the preview's own repair runs first, then AI repair for what's left. If a preview still shows "Build failed", press Fix with IILA or Try again. See Troubleshooting.