I built a Multi-Agent Academic Tutor using Next.js 14 & App Router

#webdev #showdev #ai #nextjs

Hey developers! 👋

I've spent the last few months building Study Tutor, a complex multi-agent system designed to help students with academic tasks.

It’s live now at Verla.io.

I wanted to share the tech stack and the architecture behind it, as building a real-time agent workflow on the frontend was quite a challenge.

🚀 What is Verla.io?

Verla.io is not just a chatbot. It's a workflow-based platform where multiple AI agents collaborate to plan, research, and write academic papers or assignments.

Users can create tasks, upload reference files (PDF/PPT), and watch as different agents break down the requirements and execute them step-by-step.

🛠️ The Tech Stack

I chose a modern stack to handle real-time updates and rich text editing:

Framework: Next.js 14 (App Router)
Language: TypeScript
Styling: Tailwind CSS + Shadcn UI
Auth: Clerk (Custom integration with AuthProvider)
Editor: TipTap (Custom extensions for academic writing)
State: Real-time polling for agent workflows

💡 Key Technical Challenges

1. Visualizing the Multi-Agent Workflow

The core feature of Verla is the Workflow Page. I needed to show users exactly what each agent is doing in real-time.

I implemented a polling mechanism on /task/detail to fetch the status of active agents.
The UI renders a dynamic Kanban board and timeline view to track sub-tasks.
We handle huge JSON outputs from agents and render them cleanly using a custom Markdown parser.

2. The "Smart" Editor

We didn't want a simple text area. The editor (built on TipTap) needs to:

Convert Markdown from agents into editable rich text blocks server-side (/api/markdown-to-tiptap).
Support drag-and-drop image uploads directly to our storage.
Export to PDF/Word with academic formatting.

3. Handling File Context

Users can upload massive PDFs. We process these files (convert to Base64 -> Upload -> Vectorize) so the agents can "read" the course material before answering.