> For the complete documentation index, see [llms.txt](https://docs.uptiq.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.uptiq.ai/app-builder/build.md). # Build **Build** is where the App Builder converts your blueprint into a functional, production-ready React application, and where you shape how it looks and what it can reach. **Build Mode is the default.** Every prompt you send initializes active code execution rather than strategic discussion — you do not need to turn it on. Switch to [Plan Mode](/app-builder/plan.md) from the header dropdown only when you want to align on logic before executing changes. ## Initialising the build Transitioning from a concept to a functional React application depends on whether you are starting fresh or iterating on a saved project. * **New Apps**: Enter your intent into the dashboard prompt bar and select **Build** to trigger immediate generative execution. * **Existing Apps**: Locate the project in the **My Apps** section of your dashboard. Clicking the app restores the workspace for further iterative shaping.

A successfully initialized personal finance tracker showing the live functional prototype, transaction logging, and implemented visual analytics.

### What generation does * **Prompt-Driven Development:** Describe what you need — for example, *"Build a loan calculator that adjusts interest rates based on credit score inputs."* * **High-Velocity Infrastructure:** The engine writes the frontend React components, structures application state management, and implements persistent `localStorage` out of the box. * **Real-Time Preview:** Production-ready code compiles into an interactive mockup side by side with your chat timeline. If something isn't right, send a follow-up prompt to tweak the layout or logic.

The default Build Mode executing text instructions into full-stack code instantly

{% hint style="info" %} **Fix with AI** sends the reported issue to Qore's build agent. Review the rebuilt preview before you continue. {% endhint %} ## Attach assets Sometimes a text prompt isn't enough. Provide deep context by attaching business documentation or visual references directly into your workspace.

Utilizing the Attach Assets dropdown within the prompt bar to attach reference documentation or import standalone application packages.

Clicking the **Plus (+)** icon in the prompt bar reveals: * **Attach File**: Upload custom data layers, spreadsheets, or wireframes to serve as an explicit structural guide for the layout. * **Import App Package:** Upload whole legacy project files, to iterate on previously compiled builds without starting from zero. What the builder does with them: * **PRD Integration**: Upload your Product Requirements Document. The builder analyses your technical specs — such as lending compliance rules — and ensures the app's logic adheres to every requirement. * **Visual Reference Mapping**: Attach a screenshot of a dashboard you admire. The builder uses it as a wireframe to map out where buttons, charts, and data tables live. * **Natural Language Synergy:** Combine text with attachments — *"Use the logic in the attached PRD, but follow the layout of this screenshot."* ## Design-aware generation In the financial sector, brand consistency isn't optional — it's trust. **Design-Aware Generation** ensures your new app looks like your internal design team built it from day one. Clicking the **Color Palette (Branding)** icon opens the Set Your Branding control center: a side-by-side workspace where changes on the configuration panel instantly map to an interactive preview canvas.

The Branding Workspace

### Image mapping and asset uploads Upload your core visual identity markers. The App Builder extracts and scales your design language across logos, favicons, and primary and secondary colours.

The 'Set Your Branding' workspace in Light Mode, featuring asset upload inputs, primary color configurations, and a live user interface preview canvas.

**Originality at scale:** Because the builder understands the generalized visual style rather than a static layout template, it generates original pages that remain on-brand through every structural expansion. ### Dual-theme optimization The platform supports native theme switching directly inside the configuration panel. * **Light Mode Framework**: Optimizes high-contrast visibility using light background fields (`#ffffff`) paired with soft neutral borders and inputs. * **Dark Mode Architecture:** Restructures container logic to use dark, eye-strain-reducing panels (`#27272a`) while preserving your defined Primary Brand Color highlights.

Toggling the native Dark Theme configuration selector to preview the adaptive behaviors of branding colors on dark system layers.

### Advanced customization For granular control over design systems, **Advanced Customization** unlocks a code-level variables panel, bypassing automated generation: * **Foreground & Typography States**: Fine-tune readability using Primary Foreground (e.g., `#eff6ff`) and standard Foreground (e.g., `#09090b`) hex configurations. * **Layout Structure Variables**: Explicitly define systemic borders (`#e5e5e5`), form entry fields (`#e4e4e7`), and deactivated elements (Muted / Muted Foreground).

Expanding the Advanced Customization sidebar to configure deep-level design variables including precise foreground, input box, and container border hex codes.

## Building for mobile Select the **Mobile (beta)** platform in the header **before** generation, and the engine targets touch-optimized environments. * **Responsive Initialization:** The engine prioritizes touch-friendly components, such as bottom-sheet menus and thumb-optimized button placement.

Defining a mobile-first project by selecting the Mobile (Beta) platform before initializing the generative prompt.

* **Mobile-Enriched Codebase:** Mobile-first generation produces a codebase optimized for smaller devices, including responsive breakpoints and efficient data-fetching patterns.

The generative engine prioritizing mobile-enriched code (e.g., expense.data.ts) based on the project’s platform parameters.

Validating a mobile build on a real handset is covered in [Test](/app-builder/test.md). ## Service extensions A polished interface needs a secure data layer and operational intelligence to do useful work. Once your build initializes, the context panel exposes quick-action extension buttons.

A sample chat interface log showing successful initialization of the base application with direct execution links to connect infrastructure and attach automated agents.

### Database integration To move from a static mock state to permanent persistence, the platform integrates with **Supabase**, giving your application an enterprise-grade PostgreSQL backend. * **Zero-Config Connection**: Click **Connect Supabase** in the workspace log panel to open the modal manager. * **Bring Your Own Key (BYOK) Linking**: Authenticate your organization layer, connect to your workspace environments, and map your database URL and Anon Keys without writing manual API endpoints or SQL schemas. * **Granular Record Control:** Capture, isolate, and read financial data records — transaction histories, loan status modifications — directly through the compiled frontend. * **Real-Time PostgreSQL Sync**: Updates made by users are immediately reflected across admin dashboards and analytics charts.

The database configuration window, guiding users through organization setup and project connection parameters to initialize the Supabase data mapping layer.

### Autonomous workspace agents Beyond storage, attach task-specific agents to monitor compliance, validate parameters, or review strategic goals within your build. * **Modular Intelligence Assignment:** Click **Attach Agent(s)** to access the agent workspace marketplace. * **Specialized System Handlers:** Check the agents you want, to deploy oversight directly onto your app's processing loop.

The Attach Agent(s) selection modal displaying custom, pre-built autonomous assistants available to deploy onto the compiled application instance.

Agents attached here are built and configured in the [Agent Builder](/agent-builder/agent-builder.md), and they travel with the app when you export it — see [Deploy](/app-builder/deploy.md). *** When the app does what you intended, validate it on a real device in [Test](/app-builder/test.md). --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.uptiq.ai/app-builder/build.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.