Find your way around the workspace

When you open a project, you see its workspace. Everything for that app is here: the conversation, the running app and its code.

The top bar#

• The arrow on the left takes you back to your projects.
• Next to the project name, a label shows its state: Setting up, Building, Ready or Needs attention.
• The panel button shows or hides the chat, so the preview can use the full width.
• The balance button shows your remaining AI usage. While a build runs, it also shows what the build has used so far, and its limit. Click it to open the Billing page.
• GitHub exports your code and keeps it in sync. See GitHub.
• The theme button switches crisp between the system, light and dark themes.
• Publish puts your app online. See Publish your app. Once it is live, a Live label with its address and a copy button appears on wide screens.
• The More button, with three dots, opens Secrets and Security check. See Give your app a key and The security check.

On a phone, the top bar is shorter. The More menu then also holds your live address, GitHub, Credits and billing, and the theme.

If the connection drops, a Reconnecting label appears. crisp keeps working on your build, and the chat catches up when the connection is back.

The chat#

The chat holds the whole conversation for this project: your messages, crisp's plans and replies, and every step of every build. The box at the bottom is where you ask for changes. See Change your app by chatting.

The Preview, Code and Data tabs#

• Preview shows your app, running. See Use the preview.
• Code shows the files of your app, and lets you edit them. See Edit the code yourself.
• Data shows the records your app saved, and lets you change them. See The Data tab.

Change the size of the chat#

Drag the line between the chat and the tabs to make the chat wider or narrower. Double-click the line to go back to the default width. crisp remembers your choice on this device. You can also use the keyboard: see Keyboard shortcuts.

On a phone#

On a small screen, the workspace shows one part at a time. Use the bar at the bottom to switch between Chat, Preview, Code and Data.