Next.js Mastra Integration Guide

look up the documentation for mastra.ai and rewrite the following guide on how to start a next.js ollama integrated implementation of ## 2. Setting Up the Project ### 2.1 Prerequisites Before starting, ensure you have: - Node.js 18+ installed - Basic knowledge of React and Next.js - Ollama installed (we'll cover this in detail) - A Mastra account (we'll help you set this up) ### 2.2 Creating a Next.js Application Let's begin by creating a fresh Next.js project: bash Copy `npx create-next-app@latest mastra-ollama-app cd mastra-ollama-app` During the setup, select the following options: - Would you like to use TypeScript? → Yes (for type safety) - Would you like to use ESLint? → Yes - Would you like to use Tailwind CSS? → Yes (for styling) - Would you like to use the src/ directory? → Yes (for organization) - Would you like to use App Router? → Yes (for modern routing) - Would you like to customize the default import alias? → No ### 2.3 Installing Dependencies Install the Mastra client library and other necessary packages: bash Copy `npm install @mastraai/client ollama-js dotenv react-markdown`

To integrate Mastra into your Next.js project, follow these steps: ## 2. Setting Up the Project ### 2.1 Prerequisites Before starting, ensure you have: - **Node.js 20+ installed**: Mastra requires Node.js version 20 or higher. citeturn0search5 - **Basic knowledge of React and Next.js**: Familiarity with these frameworks will help in understanding the integration process. - **A Mastra account**: Sign up at [mastra.ai](https://mastra.ai/) to access the platform's features. ### 2.2 Creating a Next.js Application Let's begin by creating a fresh Next.js project: ```bash npx create-next-app@latest mastra-ollama-app cd mastra-ollama-app ``` During the setup, select the following options: - **Would you like to use TypeScript?** → Yes (for type safety) - **Would you like to use ESLint?** → Yes - **Would you like to use Tailwind CSS?** → Yes (for styling) - **Would you like to use the src/ directory?** → Yes (for organization) - **Would you like to use App Router?** → Yes (for modern routing) - **Would you like to customize the default import alias?** → No ### 2.3 Installing Dependencies Install the Mastra client library and other necessary packages: ```bash npm install @mastraai/client dotenv react-markdown ``` Ensure you have your LLM provider API key (e.g., OpenAI) ready, as Mastra utilizes the Vercel AI SDK for model routing, providing a unified interface to interact with various LLM providers. citeturn0search5

Below is a refreshed version of the guide based on the Mastra.ai documentation and best practices for integrating Next.js with Ollama: --- ## 2. Setting Up Your Project ### 2.1 Requirements Before you begin, confirm you have the following: - **Node.js 18+** Make sure you’re running Node.js version 18 or later. - **Fundamentals of React and Next.js** A basic understanding of React and Next.js will be helpful. - **Ollama Installed** Ensure Ollama is installed on your machine. (We’ll cover installation details later.) - **A Mastra Account** Sign up for an account at [Mastra.ai](https://mastra.ai) and review their documentation for guidance on API key setup and configuration. ### 2.2 Creating a Next.js Application Start by creating a new Next.js project. Open your terminal and run: ```bash npx create-next-app@latest mastra-ollama-app cd mastra-ollama-app ``` During the interactive setup, select the following options: - **TypeScript:** Yes (for enhanced type safety) - **ESLint:** Yes - **Tailwind CSS:** Yes (to streamline styling) - **src/ Directory:** Yes (for improved project organization) - **App Router:** Yes (to leverage modern routing features) - **Customize Default Import Alias:** No ### 2.3 Installing Dependencies Next, add the libraries needed for Mastra and Ollama integration. Run this command within your project directory: ```bash npm install @mastraai/client ollama-js dotenv react-markdown ``` This installs: - **@mastraai/client:** The official Mastra client library to interact with Mastra APIs. - **ollama-js:** A JavaScript library that facilitates communication with Ollama. - **dotenv:** For managing environment variables (such as your Mastra API keys). - **react-markdown:** To render Markdown content within your React components. --- This setup prepares your Next.js project for a smooth integration with both Mastra.ai and Ollama. For further details on account configuration and advanced features, consult the [Mastra.ai documentation](https://mastra.ai/docs).