Assistant UIとの使用
Assistant UI は、AI ChatのためのTypeScript/Reactライブラリです。 shadcn/uiとTailwind CSSをベースに構築されており、開発者が数分で美しいエンタープライズグレードのチャット体験を作成できます。
MastraがNext.js APIルートで直接実行されるフルスタック統合アプローチについては、Assistant UIのドキュメントサイトのフルスタック統合ガイド をご覧ください。
統合ガイド
Mastraをスタンドアロンサーバーとして実行し、Next.jsフロントエンド（Assistant UI付き）をそのAPIエンドポイントに接続します。
スタンドアロンMastraサーバーの作成
ディレクトリ構造を設定します。可能なディレクトリ構造は次のようになります：
- package.json
Mastraサーバーをブートストラップします：
npx create-mastra@latestこのコマンドは、新しいMastraプロジェクトをスキャフォールドするためのインタラクティブウィザードを起動し、プロジェクト名の入力を求めて基本的な設定を行います。 プロンプトに従ってサーバープロジェクトを作成してください。
これで基本的なMastraサーバープロジェクトの準備が整いました。次のファイルとフォルダが作成されているはずです：
- index.ts
- weather-agent.ts
- weather-tool.ts
- weather-workflow.ts
.envファイルでLLMプロバイダーの適切な環境変数を設定していることを確認してください。
Mastraサーバーの実行
次のコマンドを使用してMastraサーバーを実行します：
npm run devデフォルトでは、Mastraサーバーはhttp://localhost:4111で実行されます。weatherAgentは通常、POSTリクエストエンドポイントhttp://localhost:4111/api/agents/weatherAgent/stream経由でアクセス可能になります。次のステップでAssistant UIフロントエンドを設定してこのサーバーに接続するため、このサーバーを実行し続けてください。
Assistant UIの初期化
次のコマンドで新しいassistant-uiプロジェクトを作成します。
npx assistant-ui@latest createフロントエンドAPIエンドポイントの設定
デフォルトのAssistant UIセットアップでは、チャットランタイムがNext.jsプロジェクト内のローカルAPIルート（/api/chat）を使用するように設定されています。Mastraエージェントは別のサーバーで実行されているため、フロントエンドをそのサーバーのエンドポイントを指すように更新する必要があります。
assistant-uiプロジェクトのuseChatRuntimeフック（通常はapp/assistant.tsxにあります）を見つけて、apiプロパティをMastraエージェントのストリームエンドポイントの完全なURLに変更します：
const runtime = useChatRuntime({
api: "http://localhost:4111/api/agents/weatherAgent/stream",
});これで、Assistant UIフロントエンドは実行中のMastraサーバーに直接チャットリクエストを送信するようになります。
アプリケーションの実行
これで各部分を接続する準備が整いました！MastraサーバーとAssistant UIフロントエンドの両方が実行されていることを確認してください。Next.js開発サーバーを起動します：
npm run devこれで、ブラウザでエージェントとチャットできるようになります。
おめでとうございます！別サーバーアプローチを使用してMastraとAssistant UIの統合に成功しました。Assistant UIフロントエンドがスタンドアロンMastraエージェントサーバーと通信するようになりました。