mastraとassistant-uiを使い15分で作るai-chat

https://teratail.connpass.com/event/348281/

Transcript

1. mastraとassistant-uiを使い 15分で作るai-chat (バックエンドTypeScript勉強会) Yuta Nishimori 2025/03/08 1 1
2. 自己紹介 Yuta Nishimori (@YniHun / nyuta01) 株式会社Macbee Planetにて広告の配信基盤やデータ分 析の他、LLMを用いた営業の効率化の開発を担当。 また、株式会社カルノーにて、LLMを用いたAIワークフ ローの開発をリード。 2 2
3. 今日話すこと mastraとassistant-uiを用いた、効率的なagent開発 3 3
4. 注意 今回作成するチャットはあくまでデモ用です 4 4
5. Demo Github 5 5
6. 概要 next.jsでベースプロジェクトを作成 assistant-uiでchat画面を作成 mastraでagentを導入 agentにイベント取得用toolを追加 agentにイベント詳細取得用toolを追加 UI/UXをブラッシュアップ 6 6
7. 構成 7 7
8. 実装 8 8
9. next.jsでベースプロジェクトを作成 9 9
10. 10 10
11. 11 11
12. assistant-uiでchat画面を作成 document 12 12
13. 13 13
14. src/app/page.tsx 14 14
15. src/app/api/chat/route.ts 15 15
16. 16 16
17. mastraでagentを導入 document 17 17
18. 18 18
19. 19 19
20. src/mastra/index.ts 20 20
21. Agentを作成 src/mastra/agents/analyzer.ts 21 21
22. 作成したagentを登録 src/mastra/index.ts 22 22
23. chat apiから実行 src/app/api/chat/route.ts 23 23
24. 24 24
25. agentにイベント取得用Toolを追加 document 25 25
26. mastra/tools/get-events.ts 26 26
27. agentにtoolを登録 mastra/agents/analyzer.ts 27 27
28. 28 28
29. agentにイベント詳細取得用Toolを追加 composio経由でfirecrawlを実行し、スクレイピングする 29 29
30. Firecrawl Power your AI apps with clean data crawled from any website. It's also open source. https://www.firecrawl.dev/ 30 30
31. Composio https://composio.dev/ 31 31
32. document 32 32
33. src/mastra/tools/scrape-url.ts 33 33
34. src/mastra/agents/analyzer.ts 34 34
35. 35 35
36. UI/UXをブラッシュアップ 実行中のToolを確認できるようにする 36 36
37. 37 37
38. src/app/components/assistant-ui/tool-ui.tsx 38 38
39. src/app/assistant.tsx 39 39
40. fin. 40 40
41. まとめ TypeScript(NextJS)のエコシステムを活用することで効 率的なAgent開発が可能 mastraには今回紹介した機能の他にWorkflowや RAG/MemoryといったAgent開発において必要となる機 能が揃っている assistant-uiを活用することで独自のchatUIを効率的に構 築できる composioを活用することで外部サービスとの接続を高速 に実現できる 41 41
42. 最後に 今後重要になるのは ビジネスワークフローのエンジニアリング techとbizの境界線をなくす 42 42