Zenn
🪩

「Next.js + Express + Mastra + 自前DBのWebアプリ」で見えてきた未来

に公開
Next.js
PostgreSQL
Express
OpenAI
Mastra
tech

🧠 この記事を読んだら分かること

  • Express + Mastra で LLM対応の API サーバーの作り方
  • LLM にデータを全部渡さなくても自前のDBにクエリできる仕組み
  • 自前の DB に自然言語でクエリできる web アプリが作れるようになる
  • シンプルだけど SaaS に応用できる未来感のある構成

🎯 対象読者

  • Mastra とか MCP ってなにがすごいの？という人
  • LLM が用意するUIからプロンプト出すだけではなく、自作の Web アプリに取り込んでみたいエンジニア
  • LLM や MCP を使った業務系 SaaS に興味のあるエンジニアや経営者

🧩 LLM + MCP + Mastra で見えてきた未来

LLM と MCP（Model Command Protocol）を組み合わせることで、LLM を使って自然言語で自前のデータ扱ったり、いろんなデータソースからデータを取ってこれるようになってきました。

これまでの LLM は web 内のチャットアプリや IDE の中からアクセスするものが一般的でしたが、Mastra を使うことでその枠から出るのが一気に楽になってきました。

特にこんな web アプリが動く未来が ただの構想 ではなく 手の届くプロトタイプ として見えてきます。

  • 🔒 外部には出せないデータを使って答えるプライベートチャットボット
    → 社外に漏らせないデータを扱う、社内専用のチャットボット。

  • 🌐 必要に応じてリアルタイムで外部サイトからデータを取得
    → 「yyy サイトでの xxx の最新の価格は？」と聞いて、リアルタイムでブラウザを操作し、外部のサイトからデータを取得して表示できる。

  • 🧩 他のアプリと MCP で連携してタスクをこなす
    → 「この価格を slack の#zzz チャネルに送っておいて」と言えば Slack やメールなどと連携してメッセージを送れる。

さらに、Mastra は Node.js アプリとして動作し、Express などと組み合わせれば API サーバーとして公開もできるため、このままSaaS（Software as a Service）として提供することも十分可能です。

様々なデータソースに対して顧客が自然言語でデータ取得できるような Saas サービスを構築することも可能になってきています。

今回は、そういった LLM × 自然言語 UI × API 構成 の第一歩として、
Mastra + Next.js + Express + 自前 DB というシンプルな構成を紹介し、未来の片鱗に触れてみたいと思います。

⚙️ デモアプリ

今回紹介するでもアプリはこちらからダウンロードできます。

https://github.com/moksahero/mastra-mcps/tree/main/mastra-webapp

Postgres の準備

Mastra + Postgres MCP で自然言語でクエリ飛ばしたら面白かった

こちらの記事を参考にして、Postgres がローカルで走っていて employee データベースが作られている状態にしてください。

/backend/src/server.ts
の中身は基本この記事の中の runPostgres.ts と同じロジックを使っているので詳細はこちらの記事を参考にしてください。

実行方法

/backend/ フォルダの中
.env に自分の OpenAI API Key を設定

OPENAI_API_KEY=sk-xxxxx

以下のコマンドで実行

$ npm i
$ npm run start

/frontend フォルダの中で、以下のコマンドを実行

$ npm i
$ npm run dev

http://localhost:3000 にブラウザから行くと以下の様な画面が出て、自前のDBに自然言語でクエリできるようになります。

⚙️ デモアプリのシーケンス図

これまでは ChatGPT にデータ渡す訳にはいかないというユースケースも多くありましたがこの仕組みを使うことで、データは自前で管理してクエリだけ LLM に作ってもらうという運用が可能になってます。

この構成なら自前のデータを LLM に公開しなくて良くなるのでAI禁止令もかわせるかもしれません。

🌱 応用アイデア

この構成をベースにすることで、ちょっとした工夫で実用的なツールや SaaS サービスへ発展させることができます。

  • 📊 DB クエリ＋チャート表示機能で社内 BI ツールに
    ユーザーが「売上の推移を見せて」と聞くだけで、SQL を生成・実行し、グラフとして視覚化。自然言語でデータ分析が可能に。

  • 🧾 PDF や CSV をアップロードして要約
    契約書や調査レポートなどのドキュメントをアップロードすると、Mastra が自動で内容を抽出・要約。文書レビューの時間を大幅に短縮できます。

  • 🔍 業務ナレッジからの FAQ チャットボット構築
    社内マニュアルや Q&A データを読み込ませて、自然言語で質問に答えるエージェントを構築。社内問い合わせ対応の自動化やサポート対応の効率化に。

  • 💬 Slack や LINE などへの LLM チャットボット展開
    Mastra で構築したエージェントを Slack Bot や LINE Bot として公開すれば、日常のコミュニケーションツールから業務操作が可能に。タスク管理やレポート提出もチャットで完結。

  • 📦 SaaS 化して API 販売やクローズド環境への展開も可能
    Express などで API を提供すれば、他社向けの商用サービスとして展開可能。自社データのみを扱う閉じた環境にも対応できるため、金融・医療・法務などセキュリティ重視の分野にも応用できます。

👨‍💻 著者について

東京とアムステルダムを拠点に活動中。
東欧・南アジアのエンジニアと連携しながら、QA コンサル・テスト自動化・フルスタック開発・PM 業務まで幅広く担当しています。

Cucumber・Playwright・ChatGPT などを活かした効率的なテスト運用や開発基盤づくりのご相談も歓迎です！

Discussion