> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Design the chat

> Where the app-building chat goes in your platform, how to lay it out, and the states it has to show.

The app-building chat is the part of your integration your builders see. It lives in your platform, in your navigation and your styles, and it shows each [build turn](https://docs.base44.com/developers/white-label/the-build-turn.md) in words your builders understand. Decide where it goes and how it's laid out before you connect it to Base44, so you can check the screens with placeholder responses first.

## Screens you need

Every integration has the same two screens:

* **App list:** Each app your builder made, by the name Base44 gave it, with a way to open it and a way to start a new one.
* **App chat:** One chat per app, with the conversation, the agent's questions, and a preview of the app.

Put them where your builders already work, such as a **Build an app** item in your main navigation, rather than on a separate site.

## Choose a layout

Pick the layout that fits how your platform already looks.

| Layout | How it looks | Fits when |
| :- | :- | :- |
| Chat beside the preview | A full page with the chat on one side and the preview filling the rest. | Building an app is a task of its own in your platform. This is the layout most integrations use. |
| Side panel | A panel that opens over your platform's page, with the chat, and the preview opens in the page behind it. | Builders make tools for the page they're on, such as a widget on a dashboard. [Sunny](https://docs.base44.com/developers/white-label/overview.md#try-the-reference-integration) works this way. |
| Chat over the preview | The preview fills the page, and the chat is a collapsible box on top of it. | Builders mostly look at the app and send short changes. |

At phone width, stack the chat and the preview, and let your builders switch between them.

## States to show

Each state comes from the build turn. Show every one, in plain language, and never show status codes, field names, tool names, or raw states.

| State | When it happens | What to show |
| :- | :- | :- |
| Empty | A new app, before the first message. | A short prompt such as "Describe the app you want," and two or three example ideas. |
| Building | The app's state is `processing`. | What the agent is doing, such as "Designing your booking page." |
| Question | A tool call is `waiting_for_user_input`. | A picker, a form, or approve and decline buttons, one for each [kind of question](https://docs.base44.com/developers/white-label/the-build-turn.md). Lock the message input until it's answered. |
| Loading the preview | The preview URL isn't ready, or the sandbox is starting. | A message such as "Loading your app preview…" so the panel is never blank. |
| Ready | The app's state is `ready`. | The preview, and the message input open for the next change. |
| Error | The app's state is `error`, or a call failed. | What went wrong in one sentence, and what your builder can do, such as "Try again." |
| Out of credits | A build couldn't start because the workspace has no credits left. | That building is paused, and who to contact. |

## Check the screens

Before you connect anything, build both screens with placeholder responses and check them at desktop and phone width. The app list, the chat, the preview panel, and each state above should show. Once they're connected, build one small app from the chat and check the same states with real responses.

## See also

* [The build turn](https://docs.base44.com/developers/white-label/the-build-turn.md): The calls each state in the chat comes from
* [Live updates](https://docs.base44.com/developers/white-label/live-updates.md): Show a build in your builders' browser as it happens
* [Embed the app](https://docs.base44.com/developers/white-label/embed-the-app.md): Show the app inside your platform, signed in as the person looking at it


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.