ActiveReportsJS/AI/Azure OpenAI Service/JavaScript/Mastra/Next.js/TypeScript

AIチャットで完結。MastraとActiveReportsJSで実現する日報AIエージェント（1）

by MESCIUS-dev

ChatGPTが登場した2022年以降、生成AIは急速な進化を続け、2025年の今では私たちの身近なビジネスツールにも当たり前のようにAI機能が搭載されるようになりました。

こうした中、業務アプリ開発の現場でも「AIをどう組み込むか」が大きなテーマになっています。特に注目されているのが、ユーザーの意図を汲み取って自律的に動く「AIエージェント」です。

そこで今回は、業種を問わず多くの企業で作成されている「日報」をテーマに、AIエージェントの実践的な開発例をご紹介します。使用するのは、エージェントフレームワーク「Mastra（マストラ）」と、日本の複雑な帳票要件にも対応できるJavaScript帳票ライブラリ「ActiveReportsJS（アクティブレポートJS）」です。

本記事では、「チャットに今日の作業をラフに伝えるだけで、形式的なデータとしてデータベースへ登録され、その結果もチャットで帳票表示ができる」、そんな便利なAIエージェントを、MastraとActiveReportsJSの連携によって実現する方法を解説していきます。

Mastra（マストラ）とは？

AIエージェントの実装に入る前に、まずは本記事で利用するMastra（マストラ）について簡単にご紹介します。

Mastra（マストラ）とは?
出典：The Typescript AI framework – Mastra（2025年12月9日閲覧）

Mastraは、TypeScriptベースのAIエージェント開発フレームワークです。TypeScriptでコーディングできるため、JavaScriptやTypeScriptの知識があるフロントエンド技術者にとって習得しやすいのが特徴です。またエージェントのトレースとログを表示して監視できるため、動作を詳細に確認しながら開発を進められます。

OpenAI、Anthropic、Google Geminiなど主要なAIモデルに対応しており、Next.jsやAstro、SvelteKitといったWebフレームワークと連携してアプリケーションを構築でき、チャットボット、ドキュメント分析、カスタマーサポートエージェントなど、様々なAIアプリケーションを効率的に実装することが可能です。

公式ドキュメントは日本語にも対応しており、テンプレートや実例コードも充実しているため、初めてAIアプリ開発を行う方にも分かりやすくなっています。また、Mastraはオープンソースとして提供されているため、導入の敷居が低く、プロジェクトに合わせた柔軟なカスタマイズも実現可能です。

システム構成

最初に、今回作成するAIエージェントの全体的なシステム構成イメージを、以下のシステムイメージ図に基づいてご紹介します。

システム構成

図をご覧いただくとわかるように、今回作成するシステムにはMastraの他に、Next.jsも利用しています。Next.jsはフロントエンド部分を担う役割を持たせ、Next.js側で「チャット」「ActiveReportsJSレポートビューワ」といったUI機能を実装しています。MastraはバックエンドでAIエージェント機能を動作させ、Mastraフレームワークの標準機能として提供されているWebAPIを通して、フロントエンドのNext.jsとやり取りを行います。

Mastraの実装（バックエンド）

エージェント機能は、Mastra上に構築していきます。エージェントを構成する各実装は次の内容となります。

Agents

フロントエンド側からのユーザーリクエストを受け取り、システムプロンプト（※）とユーザープロンプトをLLMに送信します。LLMからの応答に基づいて、Toolsで提供されている機能を使用してデータベース処理やファイル操作などを実行し、その結果をフロントエンドに返します。

※ システムプロンプトとは、LLMに対してエージェントの役割や振る舞いを定義する指示文のことで、例えば「あなたはデータ分析の専門家です」といった役割設定や、回答の制約条件などを記述します。ChatGPTやGitHub Copilotなどでは、ベースのシステムプロンプトを変更することなく、ユーザーがシステムプロンプトを強化できる「カスタムインストラクション」機能が提供されており、エージェントの動作をカスタマイズする重要な要素となっています。

Tools

データベース操作（CRUD Tool）や、レポートファイル取得（Reports Tool）などの機能をエージェントに提供するための枠組みです。Toolsの各機能を利用することでエージェントからさまざまなリソースの操作が行えるようになります。

CRUD Tool

エージェントからの指示により、データベース（SQLlte）に対して、ORMツール（Drizzle）を利用し、作成、読取、更新、削除を行い、その結果をエージェント返却します。

エージェントから与えられた日報のデータの登録や変更、帳票表示のためのデータ取得に利用します。

Reports Tool

エージェントからの指示により、ActiveReportsJSのレポートファイル（rdlx-json）を取得し、エージェントへ返却します。

フロントエンド側のActiveReportsJSのレポートビューワへ設定するためのレポートファイルを返却します。

Next.jsの実装（フロントエンド）

Next.jsでは、フロントエンド側の実装を行います。今回はAIエージェントと対話可能なチャット機能を持つウェブアプリケーションとして実装します。チャット内でユーザーの「本日の作業〇◇△を日報に登録して」の要求に対して、エージェントを通したデータの登録を実行します。また、「〇〇帳票を表示して」の要求に対して、エージェントから取得したレポートファイルとデータの内容を合わせた結果をActiveReportsJSのレポートビューワで表示されるように作成していきます。

利用する技術スタック

今回のシステムの全体像をご紹介しましたので、今回使用する技術スタックについて改めてご紹介します。それぞれ事前にご準備ください。

開発環境

  • VS Code (Visual Studio Code)： エディタ / 開発環境

フレームワーク

  • Mastra： AIエージェントフレームワーク
  • Next.js：Webフレームワーク

ライブラリ

  • ActiveReportsJS：帳票ライブラリ
  • Drizzle ORM / Kit： データベース操作およびマイグレーション
  • Vercel AI SDK (@ai-sdk/azure)： Azure OpenAI との通信を統合・標準化するライブラリ 

AIサービス

  • Azure AI Foundry： Azure OpenAI Service 等を利用するための統合プラットフォーム
    今回はgpt4.1のモデルを利用します。対象のモデルをデプロイの上、エンドポイント、APIKEY、API_VERSIONをご準備ください。

データベース / ランタイム

  • SQLite (better-sqlite3)：ローカルデータベースと高速接続ドライバー
  • Node.js：JavaScript実行環境（ランタイム）

プロジェクトの作成

それでは、AIエージェントアプリケーションの作成を行うためにプロジェクト作成していきましょう。

Next.jsプロジェクトの作成

最初にNext.jsプロジェクトを作成し、MastraをNext.jsプロジェクトに統合するよう構成していきます。

任意のフォルダで、以下のコマンドを実行します。今回のプロジェクト名は「workreport-agent」としました。

npx create-next-app@latest workreport-agent

コマンド実行後は、次の図のようにデフォルト設定でプロジェクトを作成します。

プロジェクト作成

MastraをNext.jsへ統合

続いて、作成したプロジェクトにMastraを統合します。VSCodeでプロジェクトを開き、ターミナルを起動してください。

ターミナル上で、以下のコマンドを実行します。

npx mastra@latest init

コマンドを実行するといくつかの選択肢が表示されますので、それぞれ以下のように設定してください。

  • Where should we create the Mastra files? (default: src/)
    .
  • Select a default provider:
    OpenAI
  • Enter your OpenAI API key?
    Skip for now
  • Make your IDE into a Mastra expert? (Installs Mastra’s MCP server)
    Skip for now
MastraをNext.jsへ統合

Vercel AI SDK (@ai-sdk/azure)のインストール

Mastraの統合が完了後、Mastra上でAzure OpenAIを利用できるようにVerce AI SDKで提供している@ai-sdk/azureをインストールします。

ターミナルで以下のコマンドを実行してください。

npm i @ai-sdk/azure

環境変数の追加

つづいて、エージェントでAzure OpenAIのLLMモデルを利用するために、LLMモデルのWebAPIのエンドポイント、APIKey、API_VERSIONの設定を環境変数「.env.local」ファイルを追加し、Azure OpenAIの次のように設定します。

  AZURE_OPENAI_ENDPOINT=https://your-end-point/openai
  AZURE_OPENAI_API_VERSION=2025-01-01-preview
  AZURE_OPENAI_KEY=your-api-key

サンプルコードを動作させる

Azure OpenAIのLLMモデルの利用準備が整いましたので、Mastraのサンプルコードとして提供されているエージェント「Weather Agent」を動作させてみます。

Mastraのプロジェクト作成時（Next.jsとの統合時）に、LLMプロバイダをデフォルトの「OpenAI」として設定しましたが、今回はAzure OpenAIを利用するため、さきほど追加した「@ai-sdk/azure」を利用して、サンプルコード「mastra/agents/weather-agent.ts」を以下の強調表示部分のように追加・変更します。

import { Agent } from '@mastra/core/agent';
import { Memory } from '@mastra/memory';
import { LibSQLStore } from '@mastra/libsql';
import { weatherTool } from '../tools/weather-tool';
import { createAzure } from '@ai-sdk/azure';

const azure = createAzure({
  useDeploymentBasedUrls: true,
  baseURL: process.env.AZURE_OPENAI_ENDPOINT!,
  apiVersion: process.env.AZURE_OPENAI_API_VERSION!,
  apiKey: process.env.AZURE_OPENAI_KEY!,
});


export const weatherAgent = new Agent({
  name: 'Weather Agent',
  instructions: `
      You are a helpful weather assistant that provides accurate weather information and can help planning activities based on the weather.

      Your primary function is to help users get weather details for specific locations. When responding:
      - Always ask for a location if none is provided
      - If the location name isn't in English, please translate it
      - If giving a location with multiple parts (e.g. "New York, NY"), use the most relevant part (e.g. "New York")
      - Include relevant details like humidity, wind conditions, and precipitation
      - Keep responses concise but informative
      - If the user asks for activities and provides the weather forecast, suggest activities based on the weather forecast.
      - If the user asks for activities, respond in the format they request.

      Use the weatherTool to fetch current weather data.
`,
  model: azure('gpt-4.1'),  //← 変更 model: 'openai/gpt-4o-mini',
  tools: { weatherTool },

  memory: new Memory({
    storage: new LibSQLStore({
      url: 'file:../mastra.db', // path is relative to the .mastra/output directory
    }),
  }),
});

Mastra Studioを利用しエージェントを使ってみる

サンプルコードの変更が終わりましたので、MastraのUIツール「Mastra Studio」を利用してエージェントを使ってみます。Mastra Studioはチャット形式で、エージェント動作の確認ができるWebアプリ形式のUIツールです。作成した「agents」、「workflows」、「tools」など実装したAIエージェントの確認ができるほか、Observability（可観測性）によって、エージェントの各機能の実行結果がリアルタイムに確認できます。

それでは、以下のコマンドでMastraを起動し、Mastra Studioで確認します。

mastra dev --dir ./mastra

コマンドを実行すると、次の画像のようにMastra StudioのURL「http://localhost:4111」が表示されます。こちらをブラウザで起動して動作を確認します。

Mastra Studioを利用しエージェントを使ってみる

Studioを起動し、エージェント「Weather Agent」を選択。エージェントへ“札幌の天気を教えて”とチャットメッセージを送ってみます。エージェントから最新の札幌の天気が返ってきました。

Observabilityタブに切り替えて、エージェントの実行推移を見てみると、「Weather Agent」はエージェント内でシステムプロンプトで利用可能とされている「weatherTool」を呼び出して、ユーザーからの応答に返答しています。

「weatherTool」では、リクエストに応じて、地名から正確な地理情報をWebAPIで取得し、その地理情報をもとに、天気WebAPIを利用して該当地の天気情報を取得してエージェントに返却しています。

サンプルコードを動かすと、エージェントの仕組みがよく理解できます。システムプロンプトにLLMに対して行わせたい振る舞いや利用できるツールなどを記載してエージェントを機能させる方法や、外部からの情報を取得するためにはツールの実装が必要であることなど、エージェント構築の基礎を学ぶことができます。

さいごに

今回は、「MastraとActiveReportsJSで実現する日報AIエージェント」の1回目として、Next.jsプロジェクトの作成とMastraの統合、Mastraのサンプルコードを用いたエージェント構築の基本についてご紹介しました。

次回の記事では、サンプルコードを参考にして、今回実装するエージェントに必要な日報データの登録や帳票表示のためのレポートファイルの取得といった機能をエージェントとツールの実装により実現していきます。次回の記事も是非ご覧ください。

製品サイトでは、今回ご紹介したActiveReportsJSの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼  この記事をシェアする  ／