Integrating Next.js 15 and Mastra AI to Build an AI-First MVP

When I started building Sarion, I knew I wanted an app that was AI-first, modern, scalable, and quick to develop.

The goal was clear: integrate a true conversational AI agent into a web app accessible via browser (desktop and mobile), able to manage tasks and notes, but also to reason about user requests.

To do this, I used two essential tools:

• Next.js 15
• Mastra AI 0.10.x, a framework for orchestrating LLM agents in real-world environments

The result is an AI-first MVP with a modern, responsive, and scalable stack.

In this article, I explain how I integrated these technologies, with some architectural insights useful for anyone looking to build something similar.

Next.js + Mastra AI: a Native Integration

Mastra AI provides native integration with Next.js 13+ (so it’s also compatible with 15 and App Router).

In short:

• You can use Edge Functions or traditional API Routes
• Mastra is compatible with Next.js middleware
• Supports streaming via Server-Sent Events (SSE)
• Works in serverless environments, including on Vercel
• You can pass a RuntimeContext to agents directly from a route

In my case, I separated the Next.js APIs and the Mastra agent logic, orchestrating communication between frontend and backend via Redux Toolkit and standard API calls.

Agent Workflow and Secondary Agents

In building Sarion, I adopted a workflow-based approach inspired by Anthropic’s article: Building Effective Agents – Anthropic.

In summary:

An effective AI agent is not just a prompt + LLM. It’s a reasoning system, capable of:

• breaking down complex problems
• deciding when to use tools
• activating other specialized agents (subprocesses)
• maintaining a contextual state (memory)

Sarion implements this principle in the task creation flow:

when the user enters a complex activity, the main agent delegates the analysis to a secondary agent, which assesses the complexity and—if necessary—breaks the task into subtasks.

Architecture

Here’s what happens in the system as represented in the diagram:

Authentication

• Managed by Auth0, integrated with Next.js

Frontend & Backend

• Next.js 15 (App Router) with Redux Toolkit
• API Routes to communicate with Mastra

Mastra AI

• Tools: current date, CRUD (create, read, update, and delete) tools for tasks and notes, and the tool the agent uses to start the complex task creation workflow.
• Main Agent: main agent that receives user requests and decides which tool to use
• Workflow: Activates a secondary agent to assess the complexity of the task. If it’s too complex, it breaks it down into subtasks. If it’s simple, it creates it directly.

Contextual Memory

• The Main Agent maintains a conversational state through context memory managed by Mastra
• The memory DB is on Upstash Redis, separate from the app’s DB

Database

• Application data (tasks, notes, users, etc.) are saved on MongoDB Cloud
• Mastra writes the agent memory to Upstash, for performance and compatibility with serverless environments

How long does it take?

The entire app, as described in this article, was developed in about 4 weeks.

Teams involved: just one person—with a bit of windsurfing here and there.

Thanks to the use of technologies designed to speed up prototyping (Next.js, Mastra, Tailwind, Stripe, MongoDB Cloud), it’s possible to build a truly functional AI-first MVP with modern UX and real AI in a short time.

Conclusion

Sarion is an example of how it’s possible to build solid AI-first web apps with intelligent agents, using a full JavaScript stack.

Mastra AI, Next.js 15, and Gemini 2.5 form a powerful and already mature ecosystem, perfect for modern MVPs.

If you’re interested in:

• building a conversational AI agent
• orchestrating intelligent workflows
• using LLMs in a controlled and safe way
• creating scalable MVPs as a solo dev

…then this stack deserves your attention.

👉 Try Sarion at getsarion.com

👉 Follow the blog for upcoming articles on prompting, modular agents, and AI orchestration in JavaScript.