20260406_Mastra 版 AI 機能のフロントエンド対応状況

やりたいこと

Mastra と AI-SDK (の useChat) と相性が良い新チャット画面の実装

実装アプローチ

• (現状) AI Elements (AI 機能を実装するためのコンポーネントライブラリ) を使う

  • 巷の AI 機能のコンポーネントライブラリは tailwind 製なので tw: prefix をつけて bootstrap とバッティングしないようにしている

• AI Elements のような tailwind 製のコンポーネントライブラリを使ってダウンロードされたコンポーネントを全て bootstrap のクラスに置き換える

  • tailwind にしか存在しない要素の対応などが課題

• フルスクラッチで bootstrap 製の UI を実装する

参考にしたコンポーネント

https://elements.ai-sdk.dev/examples/chatbot

現状の実装アプローチの課題

• ai-elements によってダウンロードされたコンポーネントの一部要素に tailwind スタイルが当てられてない (わかっているもののみ)
  • メッセージの背景
  • AI model 選択ボタンの角
• ChatSidebar 以外のコンポーネントに影響がある (わかっているもののみ)
  • PersonalDropdown.tsx のアイコン
  • PageCreateButton.tsx のページ作成アイコン

現状の実装方法詳細

https://dev.growi.org/69d31ff96814f5c97ff0b167

ブランチ

support/mastra

環境変数

AI_ENABLED=true
OPENAI_SERVICE_TYPE=openai
OPENAI_API_KEY=<YOUR_OPENAI_API_KEY>