How I Built a Custom AI Workspace (AuraGenX) with Next.js 15

Why I built my own AI Workspace (AuraGenX) instead of paying $20/mo I love the "Canvas" side-by-side editing experience in modern AI tools, but I didn't love the $20/month subscription wall or the UI constraints of standard chat boxes. So, I decided to build my own. Eight versions later, AuraGenX is finally live on Vercel. The Journey: From v1 to v8 This project wasn't an overnight success. I've spent the last few weeks iterating through some serious technical hurdles: v1 - v4: Simple API wrappers. Functional, but boring. v5 (The "Sidebar Disaster"): This was my biggest wall. Managing state in sidebar.tsx while streaming AI content into a separate "Canvas" view caused endless re-render loops. v8 (Current): A fully optimized dashboard. It’s fast, the sidebar state is finally stable, and the side-by-side workflow feels exactly how I wanted it to. The Tech Stack I wanted this to be as modern and scalable as possible: Framework: Next.js 15 (App Router) Styling: Tailwind CSS Infrastructure: