AI App Builder

AI is at the heart of Draftbit Next, allowing you to use natural language to instruct the AI what to build allowing you to create apps without needing to write a single line of code.

#	Name	Description
1	Screens List	A list of all the screens in your app
2	Component Tree	The components used on the selected screen
3	Preview Panel	A canvas where you can preview your app on different devices
4	Utility Panel	Access AI chat, component styling, and other functionality

Screens List

Screens are the base element of your app and contain any number of components that make up the user interface (UI). Every app needs at least one screen. The screens in your app are listed here. You can also add more screens or folders directly.

Icon	Action	Description
	Add Screen	Adds a new Screen to the app
	Add Folder	Adds a new Screen Folder to the app

Component Tree

Each screen is built-up out of smaller components in a hierarchy from top to bottom. Components can sometimes also be nested within/below another ‘parent’ component. The Component Tree is a visual representation of the component hierarchy on the selected screen.

From here, you can select components on the screen which will update the context of the Utility Panel on the right side of the builder - including the Style and Content tabs.

Preview Panel

Within the Preview Panel in the center of the Builder, you can add one or more preview devices so that you can see changes being made as they happen in real-time. You can choose between web and native (iOS/Android) previews, change the device orientation (landscape/portrait), and switch device sizes.

Icon	Name	Description
	Route View	Single Route View: Preview one specific route at a time. Use the route input to navigate to different screens. All Routes View: Preview all routes simultaneously in a grid layout. Great for seeing the overall app structure.
	Enable Selection Mode	Highlight and select components inside the preview
	Show Preview Logs	View build output and errors while working in preview

Utility Panel

Within the Utility Panel on the right side of the Builder, you can access different tabs including AI Chat, Styles, Content, Config, and Activity.

AI Chat

The AI Chat tab in the Utility Panel is where you can interact with the AI Agent, giving it instructions on what to build in your app. You can provide additional context to the agent in your chat by including a specific component selection, file reference, or image attachment.

Icon	Name	Description
	Add component	Select a component from the canvas to add it to your message.
	Add reference	Reference files and assets from your project in your message.
	Add attachment	Attach an image to provide visual context for your message.

Styles

Use the Styles tab to control the visual appearance and layout of the selected component. Values map to utility classes, and you can target specific responsive sizes using the Breakpoint selector. The top of the panel also shows Current Classes so you can review or add classes directly.

Icon	Name	Description
	Current Classes	View and manage the utility classes applied to the component.
	Background	Set background color and optional blend modes for overlays.
	Flex	Enable flexbox and control direction, grow/shrink, gaps, alignment, and justification.
	Spacing	Manage margins and padding, either overall or per-side.
	Border	Adjust border width, radius, style, and color.
	Shadow	Apply elevation by choosing a shadow size and color.
	Layout	Control position, visibility, display, inset/offsets, overflow, aspect ratio, and z-index.
	Sizing	Define height and width, including min/max constraints.

Content

Some components, like Text or Button, accept a value. If you have selected a component in the Component Tree which can accept a text value, the Content tab will become available. This is a quick way for you to update the value without needing to ask the AI Agent or manually edit the file in the Code Editor.

The previews in the Preview Panel will update in real-time as you change the value in the provided input.

Config

The Config tab has additional configuration options depending on the selected screen or component.

Name	Description
File Label	Use this label to add a more descriptive name to your file. This does not affect the actual file name.

Activity

Coming soon…