Find your way around

There are two kinds of screen in WebDIY. The dashboard is where your organization's projects, people and credits live. Inside a project, you chat with WebDIY and see your app.

The dashboard

The sidebar has Home and Projects at the top, then a group for your organization: Team, Usage, Billing and Settings.

The credits card in the sidebar shows how many credits your organization has left, and selecting it opens your usage. Owners and Admins also get a button there to upgrade or top up.

What you can see depends on your role. Viewers see Home, Projects and Team. Builders can open Usage, Billing and Settings, but can't change anything there. A Guest sees only Shared with you, the projects they've been invited to.

Inside a project

On a computer, the chat sits on the left and the workbench on the right. In the header you'll find three tabs, Preview, Code and Tools, and two buttons, Share and Publish.

The chat

This is where your messages and WebDIY's replies go. While WebDIY works, the chat shows what it's doing, stage by stage, and a checklist when it tests your app.

• The message box is where you type. You can attach files and choose the AI model for each message. While a message is running, the send button turns into Stop.
• Details under a reply opens Turn details, with the model, its thinking, the tokens and the credits that message used.
• Revert to this message, next to a reply, opens History at the version that message made.

For tips on what to say, see Write a good first prompt.

Preview

Your app, running on its own computer. In the toolbar you'll find:

• Reload, and the address field for the page you're on.
• Viewport, which switches between Desktop, Tablet and Phone. Drag the edge to try other widths.
• Open preview in a new window, with Open in new tab, Open in new window and 13 device sizes, anywhere between a small phone and a 4K display, in portrait or landscape.
• Full screen.

While your app starts or updates, the Preview shows the last picture of your app, dimmed, with a single status line like "Starting your app's computer". When a message changes your app, the Preview updates in place.

Your app's computer pauses after 10 minutes without activity, and opening the project starts it again.

Code

Your project's files. Select a file to read it in the editor. Builders and Admins can edit files themselves too: select Save to keep a change, or Reset to undo it. Files are read-only while WebDIY is answering a message.

Builders and Admins also get a Terminal for running commands on your app's computer.

To download the project, open Tools, then Settings, and use Download Code under Take it with you.

Tools

Everything about the project that isn't the app itself. Overview sits at the top. It tells you whether your site is live and up to date, shows anything that needs you and has shortcuts to the sections used most. The rest are grouped:

A few more sections are marked Planned, and they don't do anything yet.

Viewers can open every section except Logs, Security and Keys & secrets. To change Publishing, Domains, Database, Users & Auth, Keys & secrets, Integrations, Security or Members & sharing, you need Admin access to the project.

Share and Publish

• Share opens Members & sharing, where you can invite people to the project and make a preview link.
• Publish is the blue button with a globe, and it puts your app online. Only the project's Admins can publish. Everyone else sees a lock on it, with the names of the people who can.

See Publish your app.

On a phone

On phones and narrow windows, a floating bar at the bottom switches between Chat, Preview and Tools. Tools opens as a menu: pick a section to open it, and select Tools at the top to go back. There's no Code tab on phones. The header keeps the menu button, the project's name and Publish.