AIエージェントを「使う」から「作る」へ - SaaSに組み込むAIエージェント開発の実践

Transcript

1. AIエージェントを「使う」から「作る」へ SaaSに組み込むAIエージェント開発の実践 柄澤 史也 / 株式会社ミツモア 2026.03.18 ©ミツモア
2. 自己紹介 About Me 1 柄澤 史也 Fumiya Karasawa 株式会社ミツモア 共同創業者・取締役CPO兼CTO Agentic AI Lab リーダー ©ミツモア
3. 問いかけ Question 2 Coding Agentを使うだけで満足していませんか？ 2024-2026年、Coding Agentの爆発的普及 Devin 開発生産性は劇的に向上した しかし — 私たちは「使う側」に留まっていないか？ AIエージェントは「開発ツール」であると同時に「プロダクトそのもの」になりうる ©ミツモア
4. 視点の転換 Paradigm Shift 3 AIエージェントを「作る側」に回る Coding Agent = 開発者のための道具 → プロダクトに組み込む AIエージェント = エンドユーザーのための価値 SaaSにAIエージェントを組み込むことで、ユーザーの業務を直接変革できる → プロダクト開発の「1手法」として、組織のケイパビリティにする必要がある ©ミツモア
5. 組織づくり Organization 4 組織のケイパビリティにするために 1 属人化の排除 AIエージェント開発は一人のスーパーエンジニアに 依存させてはいけない 2 全員が使いこなせる状態 プロダクト本部全体が「AIエージェント開発」を 自然に使いこなせる状態を目指す 3 まず専門チームで実践 ノウハウを蓄積・還元するための専門チームを設立 → Agentic AI Lab の設立 ©ミツモア
6. チーム紹介 Agentic AI Lab 5 DO LLM/AIエージェントを組み込んだプロダクト開発、MVPを現場投入 DON'T AIが関連しない機能開発、時間をかけた意思決定 Agentic AI Lab Mission: AIエージェントを核にしたプロダクトを高速で作り、実際のユーザーに届ける。 開発の過程でAIの可能性と限界を見極め、得たノウハウをプロダクト本部全体に 還元し、すべてのエンジニアがAIエージェント開発をプロダクト開発の手段の一 つとして自然に使いこなせる状態を作る。 ©ミツモア
7. 実績 Released Products 6 リリース実績 12月 AI分析 SQL生成AI プロワンレポートの ・SQL生成支援 ・エラー自動解消 1月 AI-OCR 画像→見積書 PDF/画像から AI見積書自動入力 受入率ほぼ100% 2月 プロワンAI （βリリース） AIチャット 汎用質問応答機能 ・プロダクトに対する質問 ・情報の集約と分析 ・複雑な操作の指示 → 最近は1ヶ月に1回の新機能リリースペース ©ミツモア
8. プロワンAI ProOne AI 7 プロワンとAIエージェントの親和性 フィールドサービス業界向けオールインワンSaaS 顧客管理 見積書 請求書 スケジュール レポート AIエージェントとの親和性が極めて高い理由: 1 会社に閉じた固有データ 顧客、取引、業務履歴がSaaS内に蓄積 2 日常業務の文脈理解 ユーザーはSaaS上で業務 → AIがその文脈を理解して支援 3 業務に溶け込んだ体験 汎用LLMでは到達できない価値 ©ミツモア
9. 全体設計 Architecture 8 初期全体設計 — アーキテクチャ プロワン Web ブラウザ AIサーバ AIエージェント構築 プロワン Server MCPエンドポイント AIチャットUI チャット画面 チャットUI マウント JS呼び出し 画面操作 WS通信 LLM model MCP 呼び出し Langfuse or Datadog でトレース・コスト監視 通常API ©ミツモア
10. 技術選定 Tech Stack 9 技術選定の判断軸 AI SDK by Vercel streamText / toolCall対応、TypeScript first MCP ツール管理の標準化 @rekog-labs/mcp-nest でNestJSと統合 FE Tools（独自設計） MCPだけではブラウザ上のDOM操作ができない → ブラウザ内でツール実行する仕組みが必要だった Langfuse プロンプト管理 + 観測 + コスト分析を一元化 自社ホスティング セキュリティ 専用短命JWT + RBAC + Rule of Two原則 ©ミツモア
11. オープンソース use-ai 10 use-ai の開発とオープンソース化 npm install @meetsmore-oss/use-ai-client コアコンセプト: useAI() Reactコンポーネントにtoolsとpromptを登録するだけ レンダリング中のコンポーネントのツールのみAIに公開 アンマウントで自動解除 → 画面に応じた動的ツール切替 UseAIProvider Page A useAI({ tools: { addTodo, deleteTodo }, prompt: `Todo: ${todos}`, }) Page B → ページ遷移でツール自動切替 3ステップでAIエージェント化: 1 defineTool() でツール定義 2 コンテキスト 構築 3 useAI() 呼び出し 既存のReactアプリにAIエージェント機能を後付けできる useAI({ tools: { fillForm }, }) ©ミツモア meetsmore/use-ai
12. 全体設計 Architecture 8 現在のアーキテクチャ with use-ai プロワン Web ブラウザ UseAI Server new UseAIServer() new AISDKAgent() プロワン Server MCPエンドポイント JWT認証・RBAC UseAI Client <UseAIProvider> useAI() hooks state & toolsの 受渡し FE toolsで 画面操作 Socket.IO 通信 LLM model Claude Sonnetメイン MCP tools 呼び出し Langfuse （自社ホスティング）でトレース・コスト監視 streamText 通常API ©ミツモア
13. 今後の課題 Technical Challenges 11 今後の課題 — 技術面 Global Toolsのスケーラビリティ ページ固有ツールはスケールしない → 個別開発が不要で全ページ操作可能にする設計 Plan / Todo機能 現状AIが不要なブラウザ操作を多用する問題 → Claude Code / Manus式のtodo_write方式を検証 コンテキスト爆発 データ量の多いページでトークン消費が膨大に → 3ステップの段階的開示で制御: Overview → Detail → Action セキュリティ プロンプトインジェクション対策 → 画像レンダリング脆弱性の発見・修正 ©ミツモア
14. 今後の課題 Product & Business 12 今後の課題 — プロダクト・事業面 プロワンAI 正式リリース トークンベースの利用制限・課金の仕組み メトリクス KPI設計と改善ループ Good/Badフィードバック比率、Edit rate（Levenshtein Distance）、継続利用率 組織 プロダクト本部への還元 専門チームのノウハウをエンジニア全体のケーパビリティへ ©ミツモア
15. まとめ AIエージェントは「使う」だけでなく「作る」時代 SaaSに溶け込んだAIエージェントは、固有データ × 業務文脈で真価を 発揮 use-ai で既存Reactアプリを手軽にAIエージェント化 We're hiring! Agentic AI Labで一緒にAIエージェントを作りませんか？ GitHub: meetsmore/use-ai ©ミツモア