Design the chat

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 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 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. 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.

Start here

Configure

Build an app

Help

Screens you need

Choose a layout

States to show

Check the screens

See also

​Screens you need

​Choose a layout

​States to show

​Check the screens

​See also

Screens you need

Choose a layout

States to show

Check the screens

See also