This morning, I indulged in a half-day of Diablo 4, only to be thwarted by the frustrations of upgrading to Torment III. Feeling the need for a palate cleanser after lunch, I thought, why not try something fresh — like building a blog system using Cursor? It seemed like the perfect opportunity to test the new Cursor Composer/Agent functionality while creating a little something for personal "entertainment."
Having worked with Cursor and GitHub Copilot for over a year, I've amassed a fair bit of experience with AI-assisted coding tools. But let's be real: a few vague prompts won't magically get the job done. So, armed with the detailed business requirements and high-level design docs I prepared (with some help from the GPT-01 model), I loaded everything into the /doc folder and started feeding it into Cursor Composer/Agent.
Tech Stack Selection
After a thorough discussion of requirements, we settled on the following stack:
- Frontend: Next.js pages and React components for dynamic rendering.
- Styling: Tailwind CSS.
- Backend: Next.js API routes (REST or GraphQL).
- Database: Supabase.
- Hosting: Vercel for serverless scaling and edge routing.
Confession
I'm not particularly fluent in the selected frontend and backend technologies. My main motivation for this stack was to see if Cursor could make programming accessible to everyone. The initial setup was promising — dependencies installed, files generated — and all I had to do was nod along with "yes," "go ahead," and "sure."
The Chaos of Testing
Then testing began, and so did the chaos:
- Null Pointer Error: The absence of initial blog data caused a null pointer issue, which Cursor resolved quickly.
- Database Issues: This turned into a tug-of-war. After several failed attempts by Cursor, I had to intervene with some good old-fashioned Googling and collaboration — 30 minutes later, it was fixed.
- Deletion and Unpublished Functions: Significant challenges arose in implementation. Armed with screenshots and terminal error logs, I worked with Cursor for two hours to resolve them.
- Authentication Bugs: The sign-out function didn’t actually sign users out, leaving operations exposed. After an hour of back-and-forth, the issue persisted in some edge cases.
- Admin Security: AI-generated code didn’t meet security requirements. It took a series of refined prompts and hints to finally lock things down after another hour.
By the end of the afternoon, I had a half-working product. Not exactly the "build an app in hours" dream some folks sell, but progress nonetheless. While I'm no Next.js expert, I do know how to steer AI outputs from design to implementation.
Key Takeaways
AI tools can boost efficiency by 30%-60%, depending on the task, but they’re far from replacing programmers, designers, or architects just yet.
Tips for Working with AI Effectively
- Be Patient: AI isn’t magic; it’s a process.
- Be Specific: Clear prompts yield better results.
- Document Everything: Detailed requirements are your best ally.
- Chunk Tasks: Break work into small, manageable pieces.
- Avoid Overgeneralizing: Don’t let AI assume your intent; spell it out.
- Leverage System Prompts: Use rule files and system setups.
- Checkpoint Often: Save progress and create restore points. Fortunately, Cursor Composer provides an amazing function to easily manage checkpoints and restore progress, making it a breeze to recover from errors.
- Summarize Frequently: Keep track of what's done, pending, and problematic.
When AI goes off track — and it will — revert to a checkpoint, refine your prompts, and course-correct. Otherwise, you risk spiraling into an infinite loop of wasted time.
Conclusion
Experimenting with Cursor's Agent Mode was an enlightening experience. While there’s room for improvement, I’m optimistic about its potential. Here’s to a future where AI makes our lives even better!