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 what is happening: Building with the time so far while a build runs, or Your turn when Crisp waits for your answer. Press it to go to the chat. While a project is being prepared it reads Setting up, and Needs attention if that failed.
• 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, Payments, Security check, Notifications and Keyboard shortcuts. See Give your app a key, The security check and Get told when a build ends.

On a phone, the top bar is shorter, and on a very narrow screen Publish shows only its icon. 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#

Press the panel button in the top bar to hide the chat. While it is hidden, a small label over the preview shows when a build runs or when it is your turn; press it to bring the chat back.

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.

• The Chat tab shows a spinner while a build runs and you are on another tab, and a dot when a new reply came in that you have not seen.
• The Preview tab shows a dot when the app changed since you last looked.
• The Preview tab has its own one-line message box, so you can ask for a change while you look at your app. While a build runs, your message waits for it to finish, and Watch takes you to the chat to follow the build. To attach files or choose Plan or Ask, use the Chat tab.
• While you type, the bar at the bottom steps aside, so the message box sits right above the keyboard.