In the second episode of our series, Is everyone a developer now?, Regan and I are joined by a very special guest from Xero’s Strategic Finance team, Dean Bonanno. Dean isn’t just a finance expert; he’s been a Xero power user for over a decade. He came to us with a challenge: can we take the “overwhelming” end-of-month financial report and turn it into something as digestible and engaging as a Spotify Wrapped?
The vision: Financial insights on the go
Dean’s idea, which he calls Xero Wrapped or “Xapped”, is all about storytelling through data. Xero’s customers are experts at running their businesses, but after a long day at a job site or managing a cafe, they might not necessarily want to read complex financial reports at month end to understand the health of their business.
The goal of this build is to create a mobile-friendly, short-form summary of:
- Profit and loss
- Balance sheet
- Cash flow insights
- Customized design templates that speak to specific industries
Our tech stack: Gemini, Lovable, the Xero API, and Excel!?
The beauty of vibe coding is that the “stack” is becoming increasingly modular and accessible. For this build, we used a combination of powerful AI tools, our own platform, and a surprising design tool.
- Gemini: Used as our primary large language model for image analysis and prompt generation.
- Lovable: Our core “vibe coding” tool used to build the application. It functions as an agent that takes our natural language prompts and turns them into a working app.
- Xero API: The engine behind the data. While the AI handles the interface and logic, the value comes from the 20 years of data structure Xero has already built.
- Excel: Our “legacy” design tool. It’s a great example of using whatever context you have, even a screenshot of a spreadsheet in this case, to guide an AI agent.
From bare bones mockup to AI prompt
Dean didn’t just bring an idea; he brought a “design” he’d mocked up in a spreadsheet. In the world of vibe coding, this is a great starting point. We used Gemini to analyze his mockup image and generate a highly descriptive prompt for Lovable, our coding tool of choice for this session.
We acted as product managers rather than deep-level engineers. By describing the problem we wanted to solve and providing the visual context of the Excel sheet, we let the AI agent figure out the “how” of the execution.
What’s the value of Xero Wrapped?
One of the most interesting parts of this episode was our discussion on value propositions. Dean suggested that for accountants and bookkeepers, a tool like Xero Wrapped could be a massive value-add. Instead of sending a static PDF, they could provide a branded, digestible experience for their clients that helps them truly understand their business position.
Certification, a possible next step?
We’ve proven that we can get a functional app running in just over an hour. But as Regan noted, in a world of continuous improvement, an app is never really “done”.
We’ve kept the door open for Dean to come back in a future episode to explore topics such as making app improvements, ensuring app security, and getting the app Xero certified. We want to show you exactly what it looks like to move from a “vibe-coded” prototype to a published app available to Xero’s millions of subscribers.
https://medium.com/media/b21a1e60222c89154078360753240c12/href<hr /><p>Vibe coding a “Xero Wrapped” app with Lovable, Gemini, and the Xero API was originally published in Xero Developer on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>