Assistant UIとの使用

Assistant UI は、AIチャット用のTypeScript/Reactライブラリです。 shadcn/uiとTailwind CSSをベースに構築されており、開発者が数分で美しいエンタープライズグレードのチャット体験を作成できます。

Next.jsとAssistant UIとの統合

Assistant UIを使用する際にMastraをNext.jsプロジェクトに統合する主な方法は2つあります：

フルスタック統合: MastraをNext.jsアプリケーションのAPIルートに直接統合します。このアプローチでは、バックエンドとフロントエンドのコードを同じプロジェクト内に保持します。フルスタック統合の設定方法を学ぶ
独立したバックエンド統合: Mastraをスタンドアロンサーバーとして実行し、Next.jsフロントエンドをそのAPIエンドポイントに接続します。このアプローチでは関心事を分離し、独立したスケーリングが可能になります。独立したバックエンド統合の設定方法を学ぶ

フルスタック統合

Assistant UIを初期化する

assistant-ui CLIを使用してAssistant UIをセットアップする際には、2つのオプションがあります：

新規プロジェクト: Assistant UIを含む新しいNext.jsプロジェクトを作成します。
既存プロジェクト: 既存のReactプロジェクトにAssistant UIを初期化します。

新規プロジェクト


npx assistant-ui@latest create

既存プロジェクト


npx assistant-ui@latest init

💡

APIキーの追加、基本設定、手動セットアップ手順を含む詳細なセットアップ手順については、assistant-uiの公式ドキュメントを参照してください。

Mastraパッケージをインストールする

必要なMastraパッケージをインストールします：


npm install @mastra/core@latest @mastra/memory@latest @mastra/libsql@latest

Next.jsを設定する

APIルートでMastraを直接使用する際にNext.jsがアプリケーションを正しくバンドルするために、serverExternalPackagesを設定する必要があります。

next.config.jsファイルを更新して@mastra/を含めます：


/** @type {import('next').NextConfig} */
const nextConfig = {
  serverExternalPackages: ["@mastra/*"],
  // ... その他のNext.js設定
};
 
module.exports = nextConfig;

Mastraメモリとストレージを設定する

mastra/memory.ts


import { LibSQLStore } from "@mastra/libsql";
import { Memory } from "@mastra/memory";
 
export const storage = new LibSQLStore({
    url: 'file:./memory.db',
})
 
export const memory = new Memory({
    storage,
})

💡

エッジにデプロイする場合は、互換性のあるストレージソリューションを使用し、ファイルベースのストレージは使用しないでください。

Mastraエージェントを定義する

mastra/agents/chef-agent.ts


import { openai } from "@ai-sdk/openai";
import { Agent } from "@mastra/core/agent";
import { memory} from "../memory";
 
export const chefAgent = new Agent({
  name: "chefAgent",
  instructions:
    "あなたはMichelです。実用的で経験豊富な家庭料理人です。" +
    "手元にある材料で料理を作る手助けをします。",
  model: openai("gpt-4o-mini"),
  memory,
});

エージェントをMastraインスタンスに登録する

mastra/index.ts


import { Mastra } from "@mastra/core";
import { chefAgent } from "./agents/chef-agent";
 
export const mastra = new Mastra({
    agents: { chefAgent },
    // ... その他の設定
});

これによりMastraが初期化され、chefAgentが使用可能になります。

チャットAPIエンドポイントを変更する

初期のブートストラップされたNext.jsプロジェクトには、POSTハンドラーをエクスポートするapp/api/chat/route.tsファイルがあります。初期実装は次のようになっている可能性があります：

app/api/chat/route.ts


import { openai } from "@ai-sdk/openai";
import { frontendTools } from "@assistant-ui/react-ai-sdk";
import { streamText } from "ai";
 
export const runtime = "edge";
export const maxDuration = 30;
 
export async function POST(req: Request) {
  const { messages, system, tools } = await req.json();
 
  const result = streamText({
    model: openai("gpt-4o"),
    messages,
    // forward system prompt and tools from the frontend
    toolCallStreaming: true,
    system,
    tools: {
      ...frontendTools(tools),
    },
    onError: console.log,
  });
 
  return result.toDataStreamResponse();
}

この実装の代わりにchefAgentを使用するようにPOSTハンドラーを変更する必要があります。

app/api/chat/route.ts


import { mastra } from "@/mastra";
 
export async function POST(req: Request) {
  const { messages } = await req.json();
 
  const agent = mastra.getAgent("chefAgent");
 
  const stream = await agent.stream(messages);
 
  return stream.toDataStreamResponse();
}

主な変更点

作成したmastraインスタンスをインポートします。
mastra.getAgent("chefAgent")を使用して、使用したいエージェントを取得します。
agent.stream(messages)を使用して、エージェントからのメッセージストリームを取得します。
assistant-uiと互換性のあるデータストリームレスポンスとしてストリームを返します。

アプリケーションを実行する

すべて設定完了です！Next.js開発サーバーを起動します：


npm run dev

これで、ブラウザでエージェントとチャットできるようになります。

おめでとうございます！フルスタックアプローチを使用して、Next.jsアプリケーションにMastraを正常に統合しました。Assistant UIフロントエンドが、Next.jsバックエンドAPIルートで実行されているMastraエージェントと通信するようになりました。

独立したバックエンド統合

Mastraをスタンドアロンサーバーとして実行し、Next.jsフロントエンド（Assistant UI付き）をそのAPIエンドポイントに接続します。

スタンドアロンMastraサーバーの作成

ディレクトリ構造を設定します。可能なディレクトリ構造は次のようになります：

- - package.json

Mastraサーバーをブートストラップします：


npx create-mastra@latest

このコマンドは、新しいMastraプロジェクトをスキャフォールドするためのインタラクティブなウィザードを起動し、プロジェクト名の入力を求めて基本的な設定を行います。プロンプトに従ってサーバープロジェクトを作成してください。

これで基本的なMastraサーバープロジェクトの準備が整いました。

💡

.envファイルでLLMプロバイダーの適切な環境変数を設定していることを確認してください。

Mastraエージェントの定義

mastra/agents/chef-agent.ts


import { openai } from "@ai-sdk/openai";
import { Agent } from "@mastra/core/agent";
import { memory} from "../memory";
 
export const chefAgent = new Agent({
  name: "chefAgent",
  instructions:
    "You are Michel, a practical and experienced home chef. " +
    "You help people cook with whatever ingredients they have available.",
  model: openai("gpt-4o-mini"),
  memory,
});

エージェントをMastraインスタンスに登録

mastra/index.ts


import { Mastra } from "@mastra/core";
import { chefAgent } from "./agents/chef-agent";
 
export const mastra = new Mastra({
    agents: { chefAgent },
    // ... other config
});

Mastraサーバーの実行

次のコマンドを使用してMastraサーバーを実行します：


npm run dev

デフォルトでは、Mastraサーバーはhttp://localhost:4111で実行されます。chefAgentは通常、POSTリクエストエンドポイント（http://localhost:4111/api/agents/chefAgent/stream）経由でアクセス可能になります。次のステップでAssistant UIフロントエンドを設定して接続するため、このサーバーを実行し続けてください。

Assistant UIの初期化

assistant-ui CLIを使用してAssistant UIを設定する際には、2つのオプションがあります：

新規プロジェクト: Assistant UI付きの新しいNext.jsプロジェクトを作成します。
既存プロジェクト: 既存のReactプロジェクトにAssistant UIを初期化します。

新規プロジェクト


npx assistant-ui@latest create

既存プロジェクト


npx assistant-ui@latest init

💡

APIキーの追加、基本設定、手動セットアップ手順を含む詳細なセットアップ手順については、assistant-uiの公式ドキュメントを参照してください。

フロントエンドAPIエンドポイントの設定

デフォルトのAssistant UIセットアップでは、Next.jsプロジェクト内のローカルAPIルート（/api/chat）を使用するようにチャットランタイムが設定されています。Mastraエージェントが別のサーバーで実行されているため、フロントエンドをそのサーバーのエンドポイントを指すように更新する必要があります。

Assistant UIフロントエンドプロジェクトのメインページファイル（通常はapp/page.tsxまたはsrc/app/page.tsx）を開きます。useChatRuntimeフックを見つけて、apiプロパティをMastraエージェントのストリームエンドポイントの完全なURLに変更します：

app/page.tsx


const runtime = useChatRuntime({
    api: "http://localhost:4111/api/agents/chefAgent/stream",
});

これで、Assistant UIフロントエンドは実行中のMastraサーバーに直接チャットリクエストを送信するようになります。

アプリケーションの実行

パーツを接続する準備が整いました！MastraサーバーとAssistant UIフロントエンドの両方が実行されていることを確認してください。Next.js開発サーバーを起動します：


npm run dev

これで、ブラウザでエージェントとチャットできるようになります。

おめでとうございます！独立したサーバーアプローチを使用してMastraとAssistant UIの統合に成功しました。Assistant UIフロントエンドは、スタンドアロンのMastraエージェントサーバーと通信するようになりました。