Overview
BuildX AI is a platform that generates full-stack web applications from high-level requirements. By providing a minimal set of inputs, you can create an application with frontend UI, backend logic, database structure, authentication, and a ready-to-use project folder.
BuildX AI is designed to help developers and teams move fast while still working with a clean, extensible codebase.
What BuildX AI Generates
When you create an application using BuildX AI, it generates:
- Frontend pages and reusable UI components
- Backend APIs and core logic
- Database schema and related files
- Authentication (login and user management)
- A structured project folder with generated and configurable files
Create Your First App
You can create your first application in just a few minutes.
- Create a new app in BuildX AI
- Provide the required inputs (App Name, Description, Pages, Tables)
- Start the generation process
- Preview the generated application
- Refine the UI using the UI Components Agent
Required Inputs
To generate an application, BuildX AI requires the following inputs.
App Name
The name of your application. This is used as the primary identifier across the generated project.
Example: BuildX CRM
Description
A short description explaining what your application should do. This helps BuildX AI understand the business logic and features.
Example: A CRM platform to manage customers, leads, and sales activities.
Pages
A list of pages (screens/routes) that should exist in your application.
Example:
• Home
• Login
• Dashboard
• Profile
• Settings
Tables
Defines the database tables and fields required by your application.
Example:
Users
• id
• name
• email
• password
Projects
• id
• name
• description
• created_at
App Generation
Once all inputs are provided, BuildX AI starts generating the application.
During generation, BuildX AI:
- Creates frontend UI and pages
- Generates backend APIs
- Sets up database schema
- Configures authentication
- Produces a complete project folder
After generation, the application is immediately ready for preview and editing.
Overview
The UI Components Agent allows you to modify the generated UI using natural language prompts. This enables fast iteration without manually editing code.
Editing UI Components
Steps to edit a UI component:
- Hold Cmd (Mac) or Ctrl (Windows)
- Click on the UI section you want to edit
- Enter a prompt describing the change
- The UI updates automatically
Example Prompts
"Make this button larger and primary"
"Change this form to a two-column layout"
"Add validation error messages to this input"
"Convert this section into a card layout"
Project Structure (High-Level)
Overview
BuildX AI generates a structured project that separates AI-generated logic, configuration, React components, and the generated HTML file. This structure is designed to be readable, maintainable, and extensible.
At a high level, the project consists of:
- AI-generated assets
- Configuration-driven files
- React components
- index-generated.html
Project File Structure
The complete project structure generated by BuildX AI follows this hierarchy:
buildx-project/
│
├── ai-generated/ # AI-generated files (auto-generated)
│ ├── db/ # Database schema and table definitions
│ │ ├── ddl.sql # Database schema SQL
│ │ ├── dataServiceServer.js # Data service server
│ │ ├── entities.json # Entity definitions
│ │ └── sample-data.sql # Sample data SQL
│ │
│ └── docs/ # Internal documentation
│ ├── requirements-summary.md # Requirements summary
│ ├── requirements-entities.md # Entity requirements
│ ├── requirements-pages.md # Page requirements
│ ├── requirements-navigation.md # Navigation requirements
│ ├── requirements-components.md # Component requirements
│ ├── requirements-multi-entity.md # Multi-entity requirements
│ ├── navigation-graph.mmd # Navigation graph
│ ├── er-model.mmd # ER model diagram
│ └── index-generated.html # Generated docs index
│
├── config/ # Configuration files (user-editable)
│ ├── pages/ # Page configurations
│ │ ├── pages-config.js # General page configurations
│ │ ├── entity-pages-config.js # Entity page configurations
│ │ └── multientity-pages-config.js # Multi-entity page configs
│ │
│ ├── navigation/ # Navigation structure
│ │ └── navigationConfig.js # Navigation configuration
│ │
│ └── entities/ # Entity-specific configurations
│ ├── user/ # User entity config
│ │ ├── list.js # List view configuration
│ │ └── form.js # Form configuration
│ │
│ ├── product/ # Product entity config (example)
│ │ ├── list.js
│ │ └── form.js
│ │
│ └── ... # Other entity configs
│
├── components/ # React components
│ ├── forms/ # Form-related components
│ │ ├── InquiryCreateInquiryForm.js # Inquiry form component
│ │ ├── ProductDetailProductForm.js # Product form component
│ │ └── ... # Other form components
│ │
│ ├── list/ # List and table components
│ │ ├── inquiryListConfig.js # Inquiry list configuration
│ │ ├── productListConfig.js # Product list configuration
│ │ └── ... # Other list configurations
│ │
│ ├── navigation/ # Navigation components
│ │ └── SideNavigationContainerNew.js # Side navigation component
│ │
│ └── pages/ # Page-level components
│ ├── home.js # Home page component
│ ├── about.js # About page component
│ ├── contact.js # Contact page component
│ ├── productDetail.js # Product detail page component
│ ├── inquiryCreate.js # Inquiry create page component
│ ├── inquiryList.js # Inquiry list page component
│ ├── navs.js # Navigation helper components
│ └── CustomPageTemplateScaffold.js # Page template scaffold
│
└── index-generated.html # Generated HTML file
Directory Descriptions
ai-generated/
Contains files that are automatically generated by BuildX AI based on your inputs. These files should generally not be edited manually.
db/: Database schema files (ddl.sql, entities.json, dataServiceServer.js, sample-data.sql)docs/: Internal documentation including requirements, ER models, navigation graphs, and generated documentation
config/
Contains configuration files that drive the application's behavior. These files are user-editable and allow customization without modifying generated code.
pages/: Page configuration files (pages-config.js, entity-pages-config.js, multientity-pages-config.js)navigation/: Navigation configuration (navigationConfig.js)entities/: Entity-specific configurations (one folder per entity)
- Each entity folder contains:
list.js (list/table views) and form.js (create/edit forms)
components/
Contains React components organized by functionality.
forms/: Form components for creating and editing entities (e.g., InquiryCreateInquiryForm.js, ProductDetailProductForm.js)list/: List configuration files for displaying collections of data (e.g., inquiryListConfig.js, productListConfig.js)navigation/: Navigation UI components (e.g., SideNavigationContainerNew.js)pages/: Page-level React components that render complete pages (e.g., home.js, about.js, contact.js, productDetail.js, inquiryCreate.js, inquiryList.js, navs.js, CustomPageTemplateScaffold.js)
Root Files
index-generated.html: The generated HTML file that serves as the main file for the application.
Purpose
The ai-generated/db directory contains database-related files that are always present in every BuildX AI project.
These files are generated automatically based on the Tables input provided during app creation.
Structure
Typical contents include:
- Database schema definitions
- Table mappings
- Relationship definitions
Each file represents structured data definitions that the backend uses to interact with the database.
Note: These files should generally not be edited manually unless you need advanced customization.
Purpose
The ai-generated/docs directory contains internal documentation generated by BuildX AI.
This folder is always present and serves as a reference for:
- Generated entities
- Data models
- Application behavior
Structure
Files inside this folder typically include:
- Descriptions of generated tables and entities
- Metadata about application structure
These files help maintain consistency between generated code and configuration.
Purpose
The config/pages directory defines the structure and configuration of application pages.
This folder is always present.
Structure
Each file represents a page configuration, including:
- Page name
- Associated components
- Routing information
These configuration files drive how pages are rendered in the frontend.
Purpose
The config/navigation directory defines navigation structure for the application.
This folder is always present.
Structure
Files in this directory typically define:
- Navigation menus
- Routes and labels
- Page ordering
Updating these files changes how users navigate through the application.
Purpose
The config/entities directory is generated based on the entities (tables) defined for the project.
This folder is project-dependent.
Each entity has its own folder.
Entity Folder Structure
Each entity folder contains:
list.js
Defines how a list or table view of the entity is rendered.
Typically includes:
- Columns configuration
- Data mapping
- Display logic
This file controls how entity records are displayed in lists or dashboards.
form.js
Defines the form used to create or edit entity records.
Typically includes:
- Form fields
- Validation rules
- Field types and layout
This file controls how users input and update entity data.
Overview
The components directory contains reusable React components generated based on project requirements.
These components are shared across pages and entities.
Folder Structure
The components directory contains the following folders:
forms
Contains reusable form-related React components such as inputs, dropdowns, and validation elements.
list
Contains reusable list and table components used to display collections of data.
navigation
Contains components related to menus, sidebars, headers, and navigation controls.
pages
Contains page-level components composed using forms, lists, and navigation components.
Purpose
index-generated.html is the generated HTML file for the application.
Description
This file:
- Contains the HTML structure for the application
- Includes references to generated scripts and assets
- Provides the base structure for rendering the frontend
Note: This file is generated automatically and should generally not be modified manually.