We recently ran a livestream experiment to rebuild a page from our internal tool, Hub, using as much AI help as possible. The setup: Cursor as our AI-powered editor, and a goal to recreate Hub’s Events page. It was a fun, fast-paced session—and afterward, I realized we were just one line of code away from a working result!
Here’s a brief recap of the experiment and some thoughts on what worked (and what didn’t).
The Plan
- Rebuild the Events page from Hub (a Rails app) in a Next.js project.
- Use Cursor with a custom mode, configured to maximize large-context capable LLMs.
- Try top-performing models (Gemini 2.5 Pro and Claude 4) based on Cursor’s thinking models documentation.
- Prompt the LLM with the running Rails app, a link to the Events page, and a screenshot to guide design and styling.
“I’d like to rebuild this application, Hub, in Next.js. Let’s start with the Events page, which is available at http://0.0.0.0:5000/events. I’ve added a screenshot for reference and want to apply the existing styles in the new Next.js version.”
We iterated through three different approaches in an hour, each one building on what we learned from the last.
Attempt 1: Gemini 2.5 Pro
Gemini kicked off with strong focus on styling, but got stuck there—ignoring the rest of the page structure and functionality. Even after a few nudges (consolidating CSS, shifting attention to the Events page), the app remained broken.
Attempt 2: Claude 4
Claude started promisingly by summarizing the existing Rails architecture and diving into relevant styles. It also built some type definitions and utility functions. But it introduced unnecessary complexity—like duplicating the src directory—and never fully wired things up.
Attempt 3: Claude 4, Revised Prompt
We gave Claude another shot, this time with a more specific prompt:
“I’d like to rebuild this application, Hub, in Next.js. The application is located in the
hubdirectory. Let’s start with the events page. I currently have the app running and the events page can be accessed via http://0.0.0.0:5000/events. Please place the new Next.js application in the existingnext-js-hubfolder. I’ve added a screenshot so you can see what it looks like, use this as guidance. I’d prefer a TDD approach.”
This small change made a big difference. Claude immediately generated tests, set up routes, and scaffolded supporting types. While we didn’t quite finish during the stream, we were close.
And right after we wrapped… I realized the only thing missing was a simple use client directive!
What’s Next
It’s been fun to see how far AI-assisted development has come—and we’re just getting started. Next, we’re planning to experiment with Cursor’s Max Mode and Custom Rules. With a larger context window and more tailored behavior, we’re curious to see just how much more an AI agent can take on.
What tasks can you trust an LLM to handle? How much structure or oversight does it need? And what does a productive, AI-augmented workflow actually look like in practice?
We’re excited to keep exploring, subscribe to our YouTube channel to stay up to date with new livestreams.