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

Mithuon Arun — Wed, 08 Apr 2026 10:09:48 +0000

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: Vercel (for edge-optimized performance)

AI Logic: Vercel AI SDK for that real-time "streaming" text feel.

Why use AuraGenX?

I built this for developers who want a professional workspace—not just a chat window. It’s dedicated to project-based AI work where you can see your code and your conversation at the same time.

I need your feedback!