> Discover all available pages from the documentation index: https://mastra.zisheng.pro/ja/llms.txt

# Assistant UI を使用する

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

> **情報:** Mastra を Next.js API Route 内で直接実行するフルスタック統合については、Assistant UI ドキュメントサイトの[フルスタック統合ガイド](https://www.assistant-ui.com/docs/integrations/frameworks/mastra/full-stack)を参照してください。

Mastra の [**「UI Dojo」**](https://ui-dojo.mastra.ai/)では、Mastra と Assistant UI を統合した実用的な例を確認できます。

## 統合ガイド

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

1. ディレクトリ構造を設定します。たとえば、次のような構成にできます。

   ```bash
   project-root
   ├── mastra-server
   │   ├── src
   │   │   └── mastra
   │   └── package.json
   └── my-app
       └── package.json
   ```

   Mastra サーバーを作成します。

   ```bash
   npx create-mastra@latest
   ```

   このコマンドは対話形式のウィザードを起動し、プロジェクト名の入力や基本設定など、新しい Mastra プロジェクトの作成を支援します。案内に従ってサーバープロジェクトを作成してください。

   新しく作成した Mastra サーバーのディレクトリに移動します。

   ```bash
   cd mastra-server # Replace with the actual directory name you provided
   ```

   これで基本的な Mastra サーバープロジェクトが準備できました。次のファイルとフォルダーが作成されています。

   ```bash
   src
   └── mastra
       ├── agents
       │   └── weather-agent.ts
       ├── scorers
       │   └── weather-scorer.ts
       ├── tools
       │   └── weather-tool.ts
       ├── workflows
       │   └── weather-workflow.ts
       └── index.ts
   ```

   > **注記:** `.env` ファイルに LLM Provider 用の適切な環境変数が設定されていることを確認してください。

2. `@mastra/ai-sdk` の `chatRoute()` ヘルパーを使用して、Assistant UI フロントエンド用のチャットルートを作成します。Mastra プロジェクトにパッケージを追加します。

   **npm**:

   ```bash
   npm install @mastra/ai-sdk@latest
   ```

   **pnpm**:

   ```bash
   pnpm add @mastra/ai-sdk@latest
   ```

   **Yarn**:

   ```bash
   yarn add @mastra/ai-sdk@latest
   ```

   **Bun**:

   ```bash
   bun add @mastra/ai-sdk@latest
   ```

   `src/mastra/index.ts` ファイルでチャットルートを登録します。

   ```typescript
   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 互換形式で利用できるようになります。

3. 次のコマンドで Mastra サーバーを実行します。

   ```bash
   npm run dev
   ```

   デフォルトでは、Mastra サーバーは `http://localhost:4111` で動作します。次の Step では Assistant UI フロントエンドからこのサーバーに接続するため、実行したままにしてください。

4. 1 つ上のプロジェクトルートディレクトリに移動します。

   ```bash
   cd ..
   ```

   次のコマンドで新しい `assistant-ui` プロジェクトを作成します。

   ```bash
   npx assistant-ui@latest create
   ```

   > **注記:** API キーの追加、基本設定、手動セットアップなどの詳しい手順については、[assistant-ui の公式ドキュメント](https://assistant-ui.com/docs)を参照してください。

5. 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 に変更します。

   ```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 サーバーへチャットリクエストが直接送信されます。

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

   ```bash
   npm run dev
   ```

   これで、ブラウザーから Agent とチャットできます。

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