2025年は、既存のサービスにLLM機能を取り込んだりする要望が増え、AIエージェント機能を開発する機会に恵まれた年 でありました。

フロントエンド開発者がAIエージェント機能の開発に携わろうとする場合、以前だと機械学習の知識を基礎から学習していないと構築は難しかった ですが、今ではそのハードルがグッと下がって簡単になっています。

つまり、今までは AIの専門家を中心 にしてLLMやAIエージェント機能の開発に関わっていたのが、フロントエンジニアだけでもAIエージェントアプリの構築が可能 になっています。

言い換えると、AIエージェントの開発の中心が、LLMのコア機能開発というよりはもっと ユーザー寄りのアプリケーション開発の領域にシフト してきたと感じています。

そんな中、実際にAIエージェントを作ってる人たち（元フロントエンジニア多め） から話を聞く機会がありました。
せっかくなので、印象に残った内容をざっくり共有します。

フロントからAIエージェントへ

最近、フロントエンジニアがAIエージェントを作る流れ がじわじわ増えている。
特に話題になっていたのが 「AIと協業するためのチャット＋イベントストリーミングUI」 みたいなテーマです。

つまり、「人がボタンを押すUI」から「AIエージェント同士と人が協業するUI」へのシフト が始まってる感じがします。

ポイントはこのへんです

AIの非同期・複数エージェント分散UI をどう設計するか
これからのUIは人間中心ではなくエージェント中心 の設計が必要
（とはいえ、人間が触るUIがゼロになるわけではない）
human in the loop（人間が途中で介入する仕組み） をどうUIに落とし込むか

会話を中心とした新しいUI設計の発想

これまでのUIは、ボタンやタブ、メニュー、アイコンといった視覚的な操作要素を中心に構成されてきました。人間が画面上の要素をクリックしたりタップしたりして、明示的にシステムへ指示を出す従来のUIです。

AIエージェントアプリのUI

AIエージェントアプリでは、UI設計の中心は AIとの会話のフロー そのものへと移ります。つまり、どんな話しかけ方ができるのか、このエージェントは何が得意で、どんなことが苦手なのか、そうした特徴をユーザーが自然に理解できるようにすることが重要です。

そのためには、単にチャット欄を置くだけでなく、文脈を補う情報をわかりやすく提示するUIが求められると考えています。

そもそもユーザーはチャット欄に自然言語で書き込むのが煩わしいと感じているので、そこをどう簡略化してUIに落とし込むのかというのもこれから解決したい課題ではあります。

バックグラウンドプロセスの「見える化」でユーザーの安心感を高める

AIエージェントはバックグラウンドで、データ解析や外部サービスとの連携、複雑な推論などを非同期かつ並列に行っています。
しかし、ユーザーから見るとその動きはブラックボックスになりがちで、「今、何をしているのだろう？」と不安を感じる場面も少なくありません。
そこで重要になるのが、エージェントの状態変化や進捗をわかりやすく可視化するUI設計です。

デザインの工夫の例

非同期処理中はグルグルを出す
複数エージェントをタブで切り替えたりグループ化したり、現在の状態をタブに表示
過去の履歴の参照
現在の進捗（例：「Step 1/3完了」など）を表示して、ユーザーに進行の見通しを与える
ステータスメッセージや小さなアイコンで「情報収集中」「要約を作成中」など、エージェントの作業内容を可視化する
作業が完了したときの通知UIを用意

こうした工夫により、ユーザーはAIの「思考過程」を追えるようになり、結果を待つストレスが軽減されます。

human in the loop（人間が途中で介入する仕組み）のUI

AIエージェントアプリには、必ず人間が関与するUIが必要不可欠です

エージェントがアクションするときの承認UI
エージェントの作業結果に対する、評価UI
作業途中に人間が介入する場合のUI
diff表示UI
ただし、人間の介入は最小限にしたい。自律作業させるには人間の介入はゼロにするのが望ましい・・・

などなどです

みんな、どうやってAIエージェント作ってるのだろう？

結論から言うと、使うツールは結構バラバラでした。
でも意外と 「GAS（Google Apps Script）で十分」 って人も多かったです。

代表的なのはこんな感じ。

GAS派
- とにかく手軽。スプレッドシートと組み合わせて使えるのが強い。
自前でなんとかする派
- 自分でAIフレームワーク自作する人もチラホラいる
Strands派
- TypeScriptで組めるのが嬉しい。フロントの人に刺さりやすい。
Mastra派
- これもTSでいける。LangChainより軽量でわかりやすい。

一方で、LangChain / LangGraph などの “LangXXX系” は、
「バージョン追うのが大変」「作りたいものに対して大げさ」「Pythonだし…」
という理由で、フロント出身の人たちにはちょっと敬遠されがちっぽいです。
Python好きなら PydanticAI とかも悪くないらしいです。

個人的にはMastraがおすすめです。
Mastraですと、Next.jsでフロントとバックエンドを一緒に開発できて効率がいいです。
それにVercel AI SDKが使いやすくておすすめです。

でも結局、大事なのはツールじゃないかも？

最終的には「何を使うか」よりも どうデータを扱うか が超重要。

社内やサービス内に散らばったデータをどう集めるか（←ここが最初のムズいポイント）
AIに必要な情報をどう検索して、どのように切り貼りしてコンテキストに載せるのか(←ここもめちゃくちゃ悩ましい)
それをどう「ユーザーにとって便利な形」で提供するか（←最終的にここが最大の難関）

このあたりを詰めないと、どんなにすごいAIエージェントアプリを作っても、
結局は 「誰にも使われないままお蔵入り」 する可能性が高いかも…。

「使われるAIエージェント」を作るために

エンジニア的には「AI使えばもっと効率化できるじゃん！」って思いがちですが、
一般ユーザーからすると 「AIツールを使いこなすための学習コスト」 が面倒なんですよね。

だからこそ、
“人が自然に使いたくなるUI” と “AIが裏で勝手に頑張る仕組み” の両立が鍵だと思います。

まずは「自分専用AIエージェント」から

フロントエンジニアなら、まずは 自分専用AIエージェント を作ってみるのがおすすめ。
GASでもMastraでもいいので、とりあえず小さく試してみるのが一番早い。

個人開発で自分の作業を自動化するところから始めると、
「AIと一緒に仕事する」感覚が掴めてくると思います。

まとめ

AIエージェント開発の波は、確実にフロントエンジニアの世界にも到達しています。
UI/UXを理解する人たちが、AIの行動と人の意図をつなぐハブを作る。
そんな時代が、いよいよ始まった感じがしています。

“AIを使う” から “AIと共に働く” へ。
フロントエンジニアの新しい挑戦が、始まっています。

Mastra の簡単な使い方まとめ

Mastra は TypeScript ベースの AIエージェント開発フレームワークです。
LangChain より軽量で、フロントエンジニアにも扱いやすいのが特徴です。

インストール

npm install mastra

🧠 基本の使い方

import { Mastra } from "mastra";

const mastra = new Mastra({
  openai: { apiKey: process.env.OPENAI_API_KEY },
});

async function main() {
  const result = await mastra.run({
    model: "gpt-4o-mini",
    prompt: "こんにちは、Mastra！",
  });
  console.log(result);
}

main();

エージェントを作る

import { createAgent } from "mastra";

const agent = createAgent({
  name: "assistant",
  prompt: "あなたは親切なAIアシスタントです。",
});

agent.run("今日の天気は？").then(console.log);

起動

npx mastra dev

ブラウザで http://localhost:8787 にアクセス。
作成したエージェントを API 経由で呼び出せます。

参考リンク