Assistant UI を使用する

Assistant UI は AI チャット用の TypeScript/React ライブラリです。shadcn/ui と Tailwind CSS を基盤としており、美しくエンタープライズ対応のチャット体験を数分で作成できます。

情報

Mastra を Next.js API Route 内で直接実行するフルスタック統合については、Assistant UI ドキュメントサイトのフルスタック統合ガイドを参照してください。

Mastra の 「UI Dojo」では、Mastra と Assistant UI を統合した実用的な例を確認できます。

統合ガイド
統合ガイドへの直接リンク

Mastra をスタンドアロンサーバーとして実行し、Assistant UI を使用する Next.js フロントエンドを API エンドポイントに接続します。

ディレクトリ構造を設定します。たとえば、次のような構成にできます。
```
project-root
├── mastra-server
│   ├── src
│   │   └── mastra
│   └── package.json
└── my-app
    └── package.json
```
Mastra サーバーを作成します。
```
npx create-mastra@latest
```
このコマンドは対話形式のウィザードを起動し、プロジェクト名の入力や基本設定など、新しい Mastra プロジェクトの作成を支援します。案内に従ってサーバープロジェクトを作成してください。
新しく作成した Mastra サーバーのディレクトリに移動します。
```
cd mastra-server # Replace with the actual directory name you provided
```
これで基本的な Mastra サーバープロジェクトが準備できました。次のファイルとフォルダーが作成されています。
```
src
└── mastra
    ├── agents
    │   └── weather-agent.ts
    ├── scorers
    │   └── weather-scorer.ts
    ├── tools
    │   └── weather-tool.ts
    ├── workflows
    │   └── weather-workflow.ts
    └── index.ts
```
注記
.env ファイルに LLM Provider 用の適切な環境変数が設定されていることを確認してください。
@mastra/ai-sdk の chatRoute() ヘルパーを使用して、Assistant UI フロントエンド用のチャットルートを作成します。Mastra プロジェクトにパッケージを追加します。
- npm
- pnpm
- Yarn
- Bun
npm install @mastra/ai-sdk@latest
pnpm add @mastra/ai-sdk@latest
yarn add @mastra/ai-sdk@latest
bun add @mastra/ai-sdk@latest
src/mastra/index.ts ファイルでチャットルートを登録します。
src/mastra/index.ts
```
import { Mastra } from '@mastra/core/mastra'
import { chatRoute } from '@mastra/ai-sdk'
// Rest of the imports...

export const mastra = new Mastra({
  // Rest of the configuration...
  server: {
    apiRoutes: [
      chatRoute({
        path: '/chat/:agentId',
      }),
    ],
  },
})
```
これにより、/chat/weatherAgent エンドポイントの weatherAgent を含むすべての Agent が、AI SDK 互換形式で利用できるようになります。
次のコマンドで Mastra サーバーを実行します。
```
npm run dev
```
デフォルトでは、Mastra サーバーは http://localhost:4111 で動作します。次の Step では Assistant UI フロントエンドからこのサーバーに接続するため、実行したままにしてください。
1 つ上のプロジェクトルートディレクトリに移動します。
```
cd ..
```
次のコマンドで新しい assistant-ui プロジェクトを作成します。
```
npx assistant-ui@latest create
```
注記
API キーの追加、基本設定、手動セットアップなどの詳しい手順については、assistant-ui の公式ドキュメントを参照してください。
Assistant UI のデフォルト設定では、Next.js プロジェクト内のローカル API Route（/api/chat）を使用するようにチャットランタイムが設定されます。Mastra Agent は別のサーバーで実行しているため、そのサーバーのエンドポイントを参照するようにフロントエンドを更新する必要があります。
Assistant UI フロントエンドプロジェクトで useChatRuntime フックを含むファイル（通常は app/assistant.tsx または src/app/assistant.tsx）を開きます。useChatRuntime フックを見つけ、api プロパティを Mastra Agent のストリームエンドポイントの完全な URL に変更します。
app/assistant.tsx
```
'use client'

// Rest of the imports...

export const Assistant = () => {
  const runtime = useChatRuntime({
    transport: new AssistantChatTransport({
      api: 'http://localhost:4111/chat/weatherAgent',
    }),
  })

  // Rest of the component...
}
```
これで、Assistant UI フロントエンドから実行中の Mastra サーバーへチャットリクエストが直接送信されます。
接続の準備ができました。Mastra サーバーと Assistant UI フロントエンドの両方が実行されていることを確認します。Next.js 開発サーバーを起動します。
```
npm run dev
```
これで、ブラウザーから Agent とチャットできます。

以上で、別サーバー方式による Mastra と Assistant UI の統合は完了です。Assistant UI フロントエンドがスタンドアロンの Mastra Agent サーバーと通信するようになりました。

統合ガイド統合ガイドへの直接リンク

統合ガイド
統合ガイドへの直接リンク