Building Laravel Wrapped: A Technical Deep Dive into its Development with Laravel Cloud and AI

On December 4, we launched Laravel Wrapped, a unique year-in-review experience for Laravel developers. Similar to Spotify Wrapped, it provided personalized insights into their shipping activities across Laravel Cloud and Forge, tracked with Nightwatch. Users received an annual review via email, expressing appreciation for their contribution to the Laravel community. This review showcased deployment counts, shipping streaks, midnight deploy habits, most-used Git commit messages, and even AI-generated insights unique to each user. A chat panel allowed users to ask questions about their yearly data.

The entire project was completed in under two weeks, a feat made possible by the efficiency of Laravel Cloud, complemented by Laravel Boost and MCP (Model Context Protocol). Both new and long-time Cloud users can explore the docs to understand how easily projects can be deployed using the same tools that built Wrapped.

The Challenges Behind Laravel Wrapped

Building Laravel Wrapped presented several interesting technical hurdles for our team:

• Aggregating data from multiple distinct products.
• Generating thousands of personalized AI summaries.
• Creating shareable open graph (OG) images dynamically.
• And, as mentioned, delivering the entire project in less than two weeks.

Josh Cirre, Developer Relations Engineer at Laravel, stated, "We couldn’t have built it as quickly as we did if Laravel Boost didn’t exist." He extensively leveraged Boost, Laravel’s AI sidekick, for the application's development. Boost empowers AI agents with Laravel-specific tools and documentation through an MCP server, transforming them from basic search engines into knowledgeable Laravel developers.

Aggregating Data Across Three Products

The initial challenge involved collecting user data from three separate Laravel products: Cloud, Forge, and Nightwatch. Each product maintained distinct data structures and lacked a unified authentication system. Josh explained the solution: "Each individual's link is a custom UUID. It was the easiest thing to do without having to dive into product authentication differences between Cloud, Forge, and Nightwatch. So we just went with email." Users were matched by email address across all products, and a unique UUID was then generated for each personalized Wrapped experience.

The workflow comprised:

1. Exporting product usage from Laravel’s marketing database to CSV.
2. Running multiple queries to normalize the data.
3. Building a custom Artisan command to merge all data by email.
4. Generating one UUID per user and writing all fields into a database row.

Josh accessed Laravel's marketing database (mirroring production data, excluding sensitive information). He used SQL queries, with assistance from Claude AI, to export data to CSV files. "By the end of it, I had gotten to the point where I was able to have just one really long SQL query that generated one huge CSV," Josh noted. The final export on November 30 captured a full year's worth of deployments, commits, and events. Separate CSV exports were done for Cloud, Forge, and Nightwatch, along with a unified CSV for Nightwatch events.

Building the Backend: Artisan Commands and Database Design

With the CSVs ready, Josh developed a Laravel application to process and serve the data. The backend featured custom Artisan commands that iterated through the CSV files, consolidating data into a Postgres database. "Essentially, each user has one row, and I don't know how many columns at this point. I think there's probably close to 70 or 80," Josh estimated. Each row contained various statistics, such as Cloud deployment times, Forge shipping times, and hourly deployment patterns. "Midnight deploys were probably the most fun part. We captured deploys per hour in UTC, then calculated ranges like 12 to 4 a.m. in the user's timezone."

The choice of Serverless Postgres was practical: "Within Laravel Cloud, it's really easy to click view credentials, and I can connect it to TablePlus locally, and then I just copy things over," Josh detailed. This facilitated seamless replication of the local database to production for launch. Boost’s AI assistance was also crucial in generating and executing data import commands, ensuring clean and efficient data transfer from CSV to live data.

The AI-Generated Insights: 55,000 Prompts

A highlight of Wrapped was the personalized AI-generated summaries, such as the number of days a user had been on Cloud since its launch. Each user received unique insights based on their data. This required running OpenAI prompts for approximately 55,000 users. Josh initially faced challenges: "I ran it for like a day, and it only had finished 5% of everything." After adjusting the approach, he batched the prompts into groups of a thousand, which "took like an hour after that."

The prompts were designed to prioritize engaging statistics. "There are some prompts to say, okay, here are the top three things that you should try to pull from. If there's nothing crazy or flashy about that, then look at different columns," Josh explained. The AI selected from various data points, even those not explicitly displayed on the main cards, to generate three distinct insights per user. These AI summaries were pre-generated and stored in the database, avoiding on-the-fly generation during the anticipated launch traffic spike.

The Frontend: React, Inertia, and Attention to Detail

Leah Thompson, Developer Relations Engineer, built the frontend using React, Inertia.js, Laravel, and Tailwind CSS. She noted, "The whole app is built out using React, Inertia.js, Laravel, and Tailwind. I think it was built out in four to five days." Like Josh, Leah also utilized Boost for frontend development. Boost’s browser logs exposed client-side JavaScript errors and console output to AI agents, which "made frontend debugging way easier since the AI was able to see what was actually happening in the browser," Leah shared.

The design featured a staggered grid layout with cards of varying heights for visual appeal. "We have them kind of staggered based on the column," Leah explained. "And then also the on-page load animation, they're randomized so that each card doesn't load in at the same time." Product and Marketing Designer Tilly Tokdemir created the stickers, which added personality with a dot matrix effect and rotation capabilities for variety. Josh highlighted, "Each one of these stickers can kind of rotate to give a little bit more pop." The development process was a continuous "triangle" collaboration between design, frontend, and backend teams. Josh managed the backend, while Tilly and Leah focused on design and frontend, respectively, with Product Design Lead Jeremy Butler contributing to the homepage design.

The Share Modal: A Technical Puzzle

The share feature proved to be the most intricate frontend challenge. Users could drag and drop stickers, select which statistics to display, customize themes, and toggle their name visibility. Upon completion, they received a shareable link with a custom OG image precisely matching their configuration.

"This was probably the most time-consuming part for the front end," Leah stated. The drag-and-drop functionality was implemented using DND Kit, a React library. Users could freely position stickers on their share card, choose from available stats (filtering out those already shown), and see real-time updates.

The core difficulty was synchronizing two separate components: the interactive React share modal and the server-rendered OG image. "What you're seeing as the share card here, this is a React component," Leah clarified. "But then the OG image that you see when you share your card is actually rendered by an OG template Blade component. So those two components are actually kind of separate, but you need them to be in sync."

Josh initially attempted to use Inertia for the OG images but found it too slow for social media sharing due to JavaScript loading and database query times. The solution involved using Blade for server-rendered OG images while maintaining the rest of the site with Inertia. The team utilized OG Kit by Peter Suhm for OG image generation. Every shareable link included a cache-busting parameter to ensure users always saw the most updated OG image when sharing.

The Highlight: Laravel MCP in Action for the Chat Feature

Each Laravel Wrapped page included a chat interface, enabling users to inquire about their data. Josh demonstrated, "I can ask, ‘How many applications have I created?’ and it answers me based on the information that it has." To build this, Josh again leveraged Boost, adapting many prompts and system instructions. The chat itself used Stream and Inertia, combined with the OpenAI PHP package, rather than being a direct MCP implementation for the frontend interaction. However, the Laravel MCP package powered the backend prompts, ensuring the chat exclusively returned information relevant to the specific user. "We had the prompts ready for the chat to make sure it's actually only returning data from that particular person," Josh confirmed.

Laravel Cloud Made the Difference

Throughout the project, Laravel Cloud significantly reduced typical deployment complexities. Josh chose Serverless Postgres to utilize Cloud’s robust database management capabilities, streamlining the migration of local data to the production database.

Cloud's preview functionality allowed the team to conduct production testing before the official launch. "We use the Cloud URL to check that all is working in production. Then we just have to shift the domain. Having that technically hidden URL, at least hidden by obscurity, was super nice because it wasn't just us working on our local machine anymore," Josh explained.

The rapid deployment speed proved critical during the launch meeting. Leah recounted, "During testing, we launched at around 9:30 a.m. PT, and we had a launch meeting that was like an hour or something long. Whenever someone suggested changes, I’d push a fix. Since we were working on Cloud, we’d see the changes go live within two minutes. We were able to refresh it, and instantly everyone saw all the updates." The ability to quickly revert changes was equally important: "If we did push something that did break something or whatever, we could easily revert it," Leah added.

Build Your Own Wrapped

Laravel Wrapped powerfully demonstrates the potential of combining Laravel's ecosystem with a platform like Cloud, which eliminates infrastructure and deployment complexities. The team successfully aggregated data across multiple products, generated tens of thousands of AI insights, built a sophisticated React frontend with advanced sharing features, and launched it all within two weeks. This rapid delivery is a testament to the benefits of removing deployment friction. We encourage you to build something innovative on Laravel Cloud – you might even receive your own Laravel Wrapped next year.