From Prototype to MVP in 48 Hours — Building Apps with Generative AI and Multi Models

Introduction

In this article, we show in practice how a complete finance app was built—from the home screen to invoice importing and detailed bill management—using Microsoft Copilot as the central development interface, connected to multiple generative AI models. You'll see the exact prompt used for each screen, understand the reasons for choosing each model (Claude 3.7 Sonnet, GPT-4o, Gemini 2.5 Pro, and ChatGPT), as well as the real challenges faced and how each issue was solved.

The goal was to create, in less than two days, a robust MVP to demonstrate our automated invoice extraction and categorization solution (PDF/CSV), combining efficiency, modern design, and smart integration.

Project Kickoff: Stack, Setup, and Motivation

Right at the beginning of the project, we realized that delivering the MVP quickly would depend on combining an efficient tech stack with the strategic use of the best AI models available.

Chosen stack:

• React Native + Expo for multiplatform mobile frontend

• Node.js (Express) + PostgreSQL for the backend

• pdf-parse/csv-parser for automated data extraction

• AsyncStorage for local persistence and offline experience

• i18n-js for internationalization

  
  

The initial motivation was to simplify and provide an intuitive interface to our invoice reading pipeline. The idea was that any user could import a PDF, have their bills read and categorized, and quickly view and manage everything in a smooth way.

The Role of AI Models in Development

During the project, we used Microsoft Copilot as an interface to call different models, selecting them according to the challenge of each screen. Here’s how each one contributed:

AI models and their roles in the process.

Claude 3.7 Sonnet	The main choice for design prompts and screen creation, as it proved superior to Claude 3.5 at maintaining visual cohesion, creating clean layouts, and suggesting modern user flows. However, Claude 3.7 can occasionally “hallucinate” and lose logical references, especially in long flows.
Claude 3.5 Sonnet	Whenever the challenge was debugging issues, fixing logic bugs, or maintaining compatibility between files and components, Claude 3.5 gave more precise and controlled answers.
GPT-4o / ChatGPT	Especially useful for multimodal prompts, generating or adjusting visual examples, synthetic data, refactoring more complex sections, and creating more cohesive, well-structured prompts.
Gemini 2.5 Pro	Essential for refactoring involving many files or broad context; also helped in steps requiring synthesis of information across multiple code points.

This dynamic selection was crucial, as no single model was enough for all stages. Throughout the article, you'll see which model was used for each screen/feature and why.

This dynamic selection was crucial, as no single model was enough for all stages. 

Prerequisites and Environment Setup for Replication

To replicate this process and achieve the same results, you must have a GitHub Copilot Pro account, which currently costs US$ 10/month per user (April 2025 pricing).

 This subscription gives you access to Copilot in your editor (VSCode, JetBrains, etc.), and unlocks Agent Mode, allowing direct interaction with advanced AI models (such as Claude 3.7 Sonnet, Claude 3.5, GPT-4o, Gemini 2.5 Pro), so you can create, edit, and organize multiple files and folders across your entire project workspace.

Initial Project Setup

1. Create a new Expo/React Native project:

npx create-expo-app financeapp
cd financeapp

2. Open the project folder in VSCode (or compatible editor) with GitHub Copilot Pro enabled.

3. Activate Copilot’s Agent Mode:

   1. Click “Edit with Copilot” and select Agent Mode (as shown in the screenshot).

   2. Choose your primary model (Claude 3.7 Sonnet, Claude 3.5 Sonnet, GPT-4o, etc). You can switch between models at any time, depending on the prompt’s focus.

How it works in practice:

In Agent Mode, Copilot analyzes your workspace, can create files and folders automatically, suggest commands, run scripts, and iterate according to your instructions (via prompt). This greatly speeds up project setup, as the model can generate the initial folder structure and boilerplate files.

Initial Prompt for Folder Structure

Before generating screens, start with a robust prompt to create your app architecture and main files. Here’s an example of the initial prompt used:

I'm building a personal finance mobile application using React Native with Expo.
Please set up the entire initial project architecture, including:

- Recommended folder structure for a medium-sized app (e.g., /src, /src/screens, /src/components, /src/services, /src/hooks, /src/assets, /src/utils, etc).
- Create appropriate index.js or index.tsx files in each folder.
- Implement a minimal example of screen navigation using react-navigation.
- Add sample reusable components (such as Button, Card, Input).
- Create config files for theme, global context, and i18n.
- Ensure cross-platform compatibility (iOS and Android).
- Comment the code, explaining the main functions and responsibilities of each part of the structure.

Don't create specific business logic yet, just the architecture and minimal examples for navigation and component integration.
Briefly explain each part you create.

⚠️ Always review the generated structure, make small adjustments if needed, and use Git commits to save the initial version.

How to use prompts to create each screen

From here, just proceed with each robust prompt given in the article to create the main screens (Home, Cards, Bills, Import, Settings, etc.), switching models as needed for design, logic, or debugging, always using Copilot’s Agent Mode.

---

Creating Each Screen: Prompts and Decisions

Screen	Home Screen / Financial Dashboard
Model	Claude 3.7 Sonnet
Motivation	We used Claude 3.7 Sonnet because it was essential to guarantee a modern, intuitive, and cohesive design on the user’s first contact. The model stood out by creating a pleasant layout and suggesting elegant month navigation with well-organized components. On some iterations, however, Claude 3.7 removed logic from previous months or forgot installment statuses—so we used Claude 3.5 for corrections.

Prompt used

You must create the home screen of a personal finance control mobile app using React Native (with Expo), focused on excellent user experience.

Mandatory elements:
- Two main buttons at the top: "New Bill" (for manual entry) and "Import Bills" (to open the file import flow).
- Horizontal bar for month navigation, with visual highlight for the selected month and arrows to switch months.
- Financial summary section with two cards: one showing the total spent in the month, another for outstanding debt.
- Below, a list showing all monthly installments and bills, including type (e.g., recurring, installment, one-time), name, value, due date, status (paid/pending), and a clear visual indicator.
- If there are no bills that month, show an elegant placeholder.
- Footer with tab navigation for Home, Cards, Bills, Transactions, and Settings, with icons and highlight for the current tab.

Additional requirements:
- The design must be modern, clean, responsive, with easy reading and accessibility.
- Use sober colors and orange highlights for main actions.
- Prioritize performance and smooth animations when changing months.
- Generate the code for all necessary components and explain how to connect to the data source.

Avoid repeating existing functions and ensure the selected month synchronizes correctly with the dashboard and bill list.

Home Screen generated from prompt.

---

Screen	Credit Card Registration and Management
Model	Claude 3.7 Sonnet + tweaks with Claude 3.5
Motivation	Claude 3.7 produced a clear interface aligned with the rest of the app. Claude 3.5 was used when it was necessary to address minor inconsistencies in forms, such as bugs in date validation and closing logic.

Prompt used

You must create the home screen of a personal finance control mobile app using React Native (with Expo), focused on excellent user experience.
Implement a complete credit card registration and management flow in a React Native app with Expo.

Screen requirements:
- Form to add a new card, with fields: Card Name, Issuing Bank (autocomplete or dropdown), Due Day (numeric), Days before due date to close the bill (numeric).
- Informative message next to the closing field: "Payments on weekends will be adjusted to the next business day."
- "Save" button in green highlight.
- After saving, display all registered cards in a list, showing: name, bank, due day, closing days, and options to "Edit" and "Delete" (with icons and visual feedback).
- The form must validate all fields and show friendly error messages for invalid input.
- Visual feedback for success/error when saving, editing, or deleting cards.

Design:
- Follow the app's overall pattern, soft colors, orange highlights for main buttons and green for success actions.
- Responsive and usable, including numeric keyboard for dates.

Explain how registered cards should be persisted and integrated with other app screens.

User interfaces for credit card registration and management generated from prompt.

---

Screen	Bill/Installment Registration and Editing
Model	Claude 3.7 Sonnet
Motivation	Again, we chose Claude 3.7 Sonnet for a flexible interface, able to handle multiple bill types, including complex installment and recurring flows. The model delivered an intuitive experience, but it was necessary to manually review due date logic, as the AI occasionally disregarded holidays or weekends.

Prompt used

Implement a full-featured bill editor in the app, covering the following flows:
- Allow the user to register a new bill, providing: Bill Name, Type (Card, Bank Slip, Cash, Recurring).
- If type is card, show selection of already registered cards.
- Allow selection of payment type: Single Payment, Installment, Recurring.
- If installment, show fields for number of installments, total value, value per installment (automatically calculate the installment value from the total and vice versa).
- Require purchase date selection (DatePicker) and automatically calculate due dates for each installment.
- Show a visual summary of generated installments, displaying date, value, status (paid/unpaid), with ability to edit before saving.
- The user must be able to edit and delete any already registered bill/installment.

Design:
- Smooth, friendly, modern interface, aligned with the app's standard.
- Error and success messages always visible and clear.
- Validation to prevent inconsistent values (e.g., installments with value 0).

Document the components and explain how to connect with the dashboard screen and persistence.

Prompt-generated user interfaces for managing billing and payment installments.

---

Screen	Bill Importing (PDF/CSV)
Model	GPT-4o/ChatGPT + Claude 3.7 Sonnet
Motivation	For this flow, we combined GPT-4o (ChatGPT) and Claude 3.7 Sonnet. GPT-4o was especially useful for suggesting UX improvements in the selection step, creating more cohesive prompts, and generating realistic file examples, while Claude 3.7 created the main layout. We encountered challenges with password-protected PDFs, and part of the parsing logic was manually adjusted since the AI couldn't handle native decryption libraries.

Prompt used

Implement a robust bill import flow via PDF or CSV files.

Desired flow:
- Allow the user to select a file (PDF/CSV) from the device, showing the selected filename.
- Optional field for PDF password.
- Automatically detect the issuing bank from the file using heuristics/AI suggestions, and display to the user (e.g., "Detected bank: American Express" highlighted).
- Allow the user to select which card to associate the imported file with.
- Parse the file and list all detected bills, showing: transaction name, amount, date, payment type (installment/recurring/single), number of installments, status.
- Allow the user to select which items to import (checkboxes), and an option to select/deselect all.
- "Import selected bills" button, showing visual feedback for progress and success/error.
- In case of parsing error, show a clear message, including possible reasons (wrong password, invalid format, etc.).

Design:
- Clean, informative, responsive layout.
- Colors compatible with the app's visual identity.

Explain the methods for PDF/CSV parsing and how to integrate the result into the app's local database.

Prompt-generated user interfaces for bills importing functionality.

---

Screen	Bill/Installment Listing and Details
Model	Claude 3.7 Sonnet
Motivation	Here, Claude 3.7 performed well in maintaining visual consistency and proposing good solutions for installment status. In some cases, bugs in status update logic were fixed using Gemini, which proved more reliable for quick refactoring and ensured that tab navigation didn’t break the user experience.

Prompt used

Implement a robust bill listing screen for the app.

Requirements:
- Display all bills grouped into two tabs: "Upcoming" and "Paid".
- In each tab, show cards for each bill, displaying: name, total amount, type, number of installments, visual status (different color for pending and paid).
- If installment, list installments with due date and value, allowing each installment to be individually marked as paid/unpaid (toggle switch).
- Allow the user to edit or delete any bill directly from the list.
- Dynamically update totals and dashboard status when marking installments as paid.
- If there are no bills, show a friendly message and suggestion to create/import a new bill.

Design:
- Responsive layout, usability for quick navigation between tabs and bills.
- Visual consistency with the other screens.

Include documentation for integration with other features and explain best practices to avoid status sync bugs.

Prompt-generated user interfaces for bills and installments listing.

---

Screen	Settings and Internationalization
Model	Claude 3.7 Sonnet
Motivation	Claude 3.7 was ideal for creating the multilingual interface, maintaining accessibility and clarity. The logic for real-time language switching was validated with GPT-4o’s help, to ensure all labels were updated instantly.

Prompt used

Develop a centralized settings screen for the finance app.

Requirements:
- Preferences section with switches for: enabling/disabling push notifications and toggling between light and dark mode.
- Language selection menu with instant update of the entire app (options: English, Portuguese, Spanish, Italian, German, Chinese). Show flag and language.
- Account section: options to edit profile, change password, and access help/support.
- Highlighted logout button.
- Show app version in the footer.
- Interface must be accessible, responsive, and provide clear visual feedback for all actions.

Document how language switching should work to update all dynamic labels in the app in real time, without reloading the application.

Prompt-generated user interfaces for settings and internationalization.

---

Overcoming Practical Challenges

Using generative AI integrated with Microsoft Copilot, we faced challenges such as:

Context loss and “silent deletion” of logic	In long prompts, especially with Claude 3.7, some features would disappear after editing rounds. Thus, every change was reviewed and versioned immediately to avoid surprises.
Bugs in sensitive logic	Due dates, installment calculations, and handling password-protected files required human intervention or use of different models.
Visual consistency	Keeping a UI pattern across all screens was only possible by alternating between models, testing, and reviewing each suggested section.

The main lesson was the need for extremely specific prompts, continuous review, and combining the strengths of each model.

The main lesson was the need for extremely specific prompts, continuous review, and combining the strengths of each model.

Nocode, Low-Code & the “Invisible Code”

An important reflection that emerged during FinanceApp’s development is that the concept of nocode/low-code, although seemingly new, has always existed in some form. The difference now is that AI can generate files and code blocks that developers often don’t even see directly. This provides incredible productivity—but also introduces risks.

Without a solid knowledge of the stack fundamentals, small bugs can turn into complex traps. Often, the time saved by code generation is lost trying to decipher logic automatically created by the model, especially when this logic can’t be easily explained—even by the model itself.

Without a solid knowledge of the stack fundamentals, small bugs can turn into complex traps.

This challenge is similar to the indiscriminate use of managed cloud services (like AWS Cognito, AWS API Gateway, or AWS SQS): at first, they accelerate delivery, but may create a technical lock-in that’s hard to migrate later to another cloud or to on-prem environments, as detailed in our blog on cloud-to-on-premise migration case study.

In the same way, adopting generative AI without visibility and real understanding of what’s being produced can create a “cognitive lock-in”, where the team becomes dependent on code it doesn’t fully understand—the famous “invisible code”.

Adopting generative AI without visibility and real understanding of what’s being produced can create a “cognitive lock-in” — the famous “invisible code”.

That’s why we reinforce: Artificial intelligence should be a copilot, not an autopilot. Maintain traceability, adopt constant reviews, and empower your team to ensure autonomy, clarity, and security throughout the software lifecycle.

Conclusion

The experience of building FinanceApp showed that integrating Microsoft Copilot with different generative AI models is extremely powerful, but requires direction, review, and strategic model choice at each step.

Claude 3.7 Sonnet was the main ally in visual creation and screen organization, but showed limitations in long flows and maintaining complex logic.

Claude 3.5 was fundamental for debugging and fixing critical details.

GPT-4o/ChatGPT added value in multimodal situations, prompt crafting, and UX validation, while Gemini 2.5 Pro made it easier to refactor large blocks of code.

A significant part of the codebase structure and architecture was generated with the help of AI. From the folder organization to the creation of components, screens, utility modules, and internationalization files, almost every boilerplate and integration followed the recommendations and outputs from the chosen AI models. The result was a project with a clear, scalable, and highly maintainable structure:

/financeapp/
├── .env
├── app.json
├── package.json
├── tsconfig.json
├── README.md
├── /types/
│   ├── CreditCard.ts
│   ├── navigation.ts
│   ├── Bill.ts
│   ├── BillType.ts
├── /navigation/
│   └── index.tsx
├── /utils/
│   ├── paymentCalculator.ts
│   ├── dateUtils.ts
│   └── pdfExtractUtils.ts
├── /storage/
│   ├── billStorage.ts
│   ├── billTypeStorage.ts
│   └── creditCardStorage.ts
├── /screens/
│   ├── BillDetailsScreen.tsx
│   ├── TransactionsScreen.tsx
│   ├── FileImportScreen.tsx
│   ├── CreditCardListScreen.tsx
│   ├── PaidBillsScreen.tsx
│   ├── CreditCardScreen.tsx
│   ├── BillTypeListScreen.tsx
│   ├── BillTypeScreen.tsx
│   ├── NewBillScreen.tsx
│   ├── SettingsScreen.tsx
│   ├── ReportsScreen.tsx
│   ├── DashboardScreen.tsx
│   └── BillsScreen.tsx
├── /components/
│   ├── /ui/
│   │   ├── Card.tsx
│   │   ├── TabBarIcon.tsx
│   │   ├── Header.tsx
│   │   ├── Button.tsx
│   │   └── FinanceButton.tsx
│   ├── MonthlyBillsView.tsx
│   ├── MonthNavigation.tsx
│   ├── PaymentSummary.tsx
│   ├── MonthContentViewer.tsx
│   └── SyncedMonthViewManager.tsx
├── /theme/
│   └── theme.ts
├── /i18n/
│   ├── i18n.ts
│   └── /locales/
│       ├── de.ts
│       ├── it.ts
│       ├── es.ts
│       ├── en.ts
│       ├── zh.ts
│       └── pt.ts

Did we experience productivity gains?

Productivity gains were substantial. The use of Copilot, paired with state-of-the-art generative models, allowed the team to move from a blank canvas to a fully functional MVP in less than 48 hours — something that would typically take a week or more with a traditional, fully manual approach.

 AI was especially valuable in speeding up boilerplate generation, UI prototyping, and the automation of repetitive or structural tasks, such as internationalization setup and data model creation.

Where did AI contributed most?

From the very beginning, AI played a key role in accelerating development. It helped us design the initial project architecture and folder structure, generate screen and component skeletons with proper TypeScript typings, and even suggest navigation flows, state management, and context wiring. Repetitive tasks like creating utility modules and storage logic were automated, while features like i18n translation were significantly sped up. Throughout the process, context-aware prompts also supported rapid iteration and debugging, making development faster and more efficient.

Have we saved time?

By leveraging AI for both code generation and project scaffolding, the development cycle was reduced by approximately 80%, allowing the MVP to be delivered in under two working days.

By leveraging AI for both code generation and project scaffolding, the development cycle was reduced by approximately 80%.

Intelligent prompt engineering, combined with careful human curation, not only accelerated development but delivered a robust and modern MVP, ready for real validation.