Build

Generate, customize, and connect production-ready apps from your requirements.

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

Fix with AI sends the reported issue to Qore's build agent. Review the rebuilt preview before you continue.

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.

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, and they travel with the app when you export it — see Deploy.

---

When the app does what you intended, validate it on a real device in Test.