Build apps and pages

Ask Aderra to build something visual and it writes the code and shows it running in a panel next to the conversation. This is called an artifact. Keep chatting to change it: “make the header dark”, “add a pricing section”, “use these numbers instead”.

Artifacts are included on Plus, Pro and Max. The Free plan doesn’t include them, and buying a credit pack on Free doesn’t add them (see On the Free plan).

What you can build

Kind	Good for
Web page	Landing pages, one-page sites, small tools, games, slide decks
React app	Dashboards, calculators, forms, interactive charts
Diagram	Flowcharts, sequence diagrams, timelines, org charts
Document	A formatted write-up shown as a page

You don’t choose the kind. Describe what you want and Aderra picks it.

Asking for one

Say what it is, who it’s for and what should be on it. The more specific you are, the less you’ll change afterwards.

“Build a landing page for Ember, a small coffee roastery in Lisbon: hero, menu, opening hours, contact.”
“Make a dashboard from these sales figures, with a monthly line chart and a table of the top ten products.” Then paste the numbers.
“Draw a flowchart of our refund process.” Then describe the steps.
“A pomodoro timer with a start, pause and reset button.”

Both models build artifacts: GLM-5.3 Flash and GLM-5.3 Flash Unfiltered.

The Artifacts switch in the composer is on by default. If you ever get a plain block of code where you expected a preview, check that it’s still on.

How a build works

A build takes several steps, and you see them happen in the chat:

Often, a design mockup first. For an app screen, a dashboard, a document or a custom design, Aderra usually starts by making a picture of how it should look, then builds to match it. Diagrams and charts skip this step.
Pictures, if the page needs them. If you ask for real photos or illustrations, Aderra makes them before it builds.
The page, built in parts. Aderra writes the page’s frame first, then adds each section or slide one at a time. The card in the chat updates as it goes. Earlier steps shrink to a single line, “Updated title”.
A short summary of what it made, and anything you should check, like placeholder text or made-up numbers.

A simple page can be ready in under a minute. A full site or a deck usually takes a few minutes. After 30 seconds you’ll see “This can take a few minutes. You can switch tabs.” The first time, it offers Notify me when it’s done: allow notifications and you’ll get one when the build finishes, showing the start of your request. Once allowed, it says “We’ll notify you when it’s done.” instead. The notification only fires if Aderra’s tab is still open but hidden. It isn’t offered where the browser blocks or doesn’t support notifications, such as Safari on iPhone.

What a build costs

Building is chat, so it uses credits like any other long answer. On top of that:

A design mockup is an image. It always uses the best design model, whatever image model you picked: 300 credits, the same as a premium image. An adult design uses the uncensored model, which is priced differently. Open the mockup step in the chat to see what it cost.
Each photo or illustration costs the same as any other image, paid from your credits at the price of the image model you chose. See Images and video.

If you don’t want pictures, say so: “no photos, use simple shapes”. If there aren’t enough credits for a mockup or a photo, Aderra tells you. It normally carries on without it, but the build itself also uses credits, so if your balance is low, buy a credit pack or change plan on the Plan page.

The panel

The artifact opens next to the chat. To reopen it later, click its card in the conversation (Click to open).

The controls in the panel’s header are icons. Hover or focus one to see its name.

Control	What it does
Code / Preview switch	Switch between the source code and the running page
Circular arrows (Refresh)	Reloads the preview from the start
Expanding arrows (Enter full screen)	Shows the preview on the whole screen. Not shown where the browser doesn’t allow it, such as Safari on iPhone.
Clock (Change Version)	Lists every artifact made in this conversation as Version 1, Version 2, and so on, oldest first, and shows the one you pick. Only appears when there’s more than one.
Copy	Copies the code
Down arrow (Download Artifact)	Saves the file to your computer
Export diagram	For diagrams only: Export as SVG or Export as PNG
× (Close)	Hides the panel

On a phone, the panel slides up from the bottom, with the Code / Preview switch across its bottom edge. Drag the handle at the top to resize it, or drag it down to close it.

Changing what you built

Just ask in the chat, the way you’d brief a designer: “make the title much bigger”, “swap the second and third sections”, “the Buy button doesn’t do anything”. Aderra changes the parts it needs to rather than starting again, so small changes are quick.

Versions. Each reply that builds or changes an artifact adds an entry to Change Version. The list holds every artifact in the conversation, so if you built a site and a deck, both appear there, numbered in the order they were made. Picking one only shows it: your next request still changes the latest state of the artifact you’re talking about.
Going back for real. To continue from an earlier state, edit one of your earlier messages or regenerate an earlier reply. That starts a new branch of the conversation, and Aderra carries on from the artifact as it was at that point in the conversation, not from the newer version.
Typing in the Code tab. You can edit the code by hand to try something out, and the preview follows. Aderra doesn’t see those edits, though, and they aren’t reliably saved. For a change you want to keep, ask in the chat. Or, if you mean to take the file away, download it straight after editing.

Pictures inside a page

Ask for them in your request: “a landing page with real photos of the shop”, “use a hand-drawn illustration for the hero”. Aderra makes each image first, then places it in the page.

Only images made in this conversation can go into a page. If you’d rather not pay for pictures, ask for icons, simple shapes or drawings made in code instead.

Keeping what you built

Download Artifact saves one file: a page as index.html, a React app as App.tsx, a diagram as diagram.mmd, a document as content.md. Pictures made for a page are built into the downloaded file. You can open an index.html in any browser, but it may still load libraries or fonts from the internet, and the styling library the preview adds isn’t included. If you want a file that works entirely on its own, first ask Aderra to “make the file fully self-contained”. An App.tsx is source code for a developer to put into a React project. It won’t open by double-clicking.
Copy copies the code exactly as Aderra wrote it. Pictures in copied code only show inside Aderra, so use Download if the page has pictures.
Diagrams can also be exported as a picture with Export diagram.

There’s no link to share a preview. To show someone what you built, download it and send them the file.

On the Free plan

Free accounts don’t get artifacts, and a credit pack doesn’t change that: you need Plus, Pro or Max. If you ask for a website, an app, a game, a dashboard or a presentation, Aderra replies in a sentence or two that building these needs a paid plan, links to the Plan page, and offers what it can do in plain chat instead, like an outline or the text for your page. It won’t build it or make a mockup. A diagram may still be drawn directly in the chat, without the panel.

To build, choose a plan. See Plans and credits for what each one includes.

Artifacts in your own agents

When you create an agent, switch on Artifacts in its capabilities, and it builds the same way as the main chat. Mockups and pictures only work if the agent also has the image tools. The same plan rule applies: on Free, your agents don’t build artifacts either.

Limits

It needs a connection. The preview runs in a sandboxed frame in your browser. The frame and the libraries it uses are loaded from a public code-preview service each time it starts.
No back end. Aderra builds the part of an app you see. It can’t give it a database, user accounts, payments, or anything that has to run on a server.
Check before you use real data. Aderra doesn’t store what you type into a preview, but a page’s code could send it somewhere. Read the code, or ask Aderra, before you enter anything private.
Aderra can’t see the preview. It knows the code it wrote, not how the code looks or runs. When something is wrong, tell it what you see.
One file per artifact. Each artifact is a single page or component, not a multi-file project.
Very long builds can stop part-way. A build has a limit on how many steps it takes. If it stops before it’s finished, reply “continue” and it picks up from the artifact as it stands.

Troubleshooting

The preview is blank. Give it a moment: if the page has pictures, the preview waits until they’ve loaded. Then press Refresh. If it’s still blank, look at the Code tab. If the code stops mid-way, the build didn’t finish, so reply “continue”. Otherwise tell Aderra “the preview is blank” and it will look for the problem.

The preview shows an error. Copy the error message into the chat and ask Aderra to fix it. It can’t see the preview, so the exact message helps.

Buttons or keys don’t do anything. The page’s script probably has an error. In a desktop browser, press F12, open the Console tab and look for a red message. Paste that into the chat. For slides, click the slide once before using the arrow keys, so the keys go to the preview.

I got plain code in the chat instead of a preview. Check that the Artifacts switch in the composer is on, then ask again: “build it as an artifact”.

It said building needs a paid plan. You’re on the Free plan. See On the Free plan.

The downloaded file looks different from the preview. The preview adds its styling library to the page, and the downloaded file doesn’t include it. If a downloaded page looks unstyled, ask Aderra to “make the file fully self-contained” and download it again.