React アプリをAIで操作するプロセスと試行

Transcript

1. React アプリをAIで操作するプロセスと試行 井藤 佑馬 / 株式会社ミツモア 2026.03.18 ©ミツモア
2. 自己紹介 About Me 1 井藤 佑馬 Yuma Ito 株式会社ミツモア Agentic AI Lab ソフトウェアエンジニア ©ミツモア
3. プロワンAI ProOne AI 2 フィールドサービス業界向けオールインワンSaaS 顧客管理 見積書 請求書 スケジュール レポート ©ミツモア 12月 AI分析 SQL生成AI プロワンレポートの ・SQL生成支援 ・エラー自動解消 1月 AI-OCR 画像→見積書 PDF/画像から AI見積書自動入力 受入率ほぼ100% 2月 プロワンAI 「何でも回答」 AIチャット 汎用質問応答機能 ・プロダクトに対する質問 ・情報の集約と分析 ・複雑な操作の指示
4. 3 AIに画面を操作 させたい 例: 取り込んだ見積もり明細の金額調整 1 単価の金額を原価にコピー 2 原価 × 掛け率 で単価を再計算 3 明細が10行あったら、10回繰り返す 「単価を原価に入れて、掛け率1.8倍で単価を計算して」 → これだけで済んだら？ 課題提起 Problem ©ミツモア
5. 4 AIが見積もりを操作するデモ 🎬 デモ動画をここに埋め込む デモ① Demo 1 ©ミツモア
6. 5 AIは「ツール」 で仕事をする ツール = 説明文付きの関数 AIは説明文を読んで「どれを使うか」を判断し、関数を呼び出す 💬 ユーザー 「電気工事のタスクを追加して」 ↓ 🤖 AI ツールの説明文を読む → addTask を選択 ↓ ⚡ 実行 addTask("電気工事") → タスクが追加される 見積もり: addLine, updatePrice → 見積もり業務を知っている タスク: addTask, changeStatus → タスク業務を知っている 画面ごとに業務が違う → 画面ごとにツールが必要 = 画面専用ツール 画面専用ツール Per-Screen Tools ©ミツモア
7. 6 どうやって AIの指示がUIの操作になるか ユーザー 「電気工事の行を 追加して」 → AI addLine ツールを 呼び出す → Socket.IO ツール呼び出しを ブラウザに送信 → ブラウザ handler が実行 addRow() を呼ぶ → React state 更新 UI 再レンダリング ポイント : handler はブラウザ内で実行される → Reactの状態やコンポーネントの関数に直接アクセスできる → 開発者が自由にロジックを組める（バリデーション、 API呼び出し等） 画面専用ツール Per-Screen Tools ©ミツモア
8. 7 defineTool + useAI() const addLineTool = defineTool({ description: "明細行を追加する", schema: z.object({ name: z.string(), unitPrice: z.number(), }), handler: async ({ name, unitPrice }) => { addRow({ name, unitPrice }); // ← ブラウザ内で実行 }, }); // コンポーネント内で登録 useAI({ tools: [addLineTool] }); 業務操作をまるごと包んでいる — AIは「何をするか」だけ判断すればいい 画面専用ツール Per-Screen Tools ©ミツモア
9. 8 でも全ページに書くの？ 案件詳細 + ツール定義 見積もり + ツール定義 請求書 + ツール定義 顧客管理 + ツール定義 契約一覧 + ツール定義 レポート + ツール定義 設定 + ツール定義 ... → 開発者がツールを書かなくても動く仕組み が欲しい 画面専用ツール Per-Screen Tools ©ミツモア
10. 9 このページには AIツールの定義を一行も書いていません デモ② Demo 2 ©ミツモア
11. 10 AIがUIを操作するには 何が必要か？ 実験を通じて、4つの問いが見えてきた 1 文脈 Context 今何が表示されているか → 汎用ツールで解決 2 位置 Location 操作したい要素がどこにあるか → 汎用ツールで解決 3 操作 Operation その要素をどう操作するか → 汎用ツールで解決 4 フィードバック Feedback 操作した結果どうなったか → 再読み込みで対応 種明かし How It Works ©ミツモア
12. 11 AIはページを こう見ている 画面（人間が見るもの） AIが見るもの（Markdown） ユーザーを作成 姓必須 {{lastname|input}} 名 {{firstname|input}} 部署必須 {{divisionId|autocomplete}} 役職 {{userPositionIds|autocomplete}} 電話番号 {{phone|input}} メールアドレス必須 {{email|input}} … → HTMLをそのまま渡すとトークン数が膨大に → Markdownに変換して圧縮 文脈（何が表示されているか）と 位置（要素がどこにあるか）を同時に解決 観測の仕組み Observation ©ミツモア
13. 12 観測パイプライン スコープ 検出 今見えている 部分だけを対象に → DOM スキャン 操作可能な 要素を発見 → ID 付与 要素にIDを 振る → Markdown 変換 AIが読める 形式へ スコープ検出: 今見えている部分だけを読み取る 例: メニューが開いていればメニューだけ、ダイアログが開いていればダイアログだけを対象にする ※ Reactを壊さないように clone上で処理（原本DOMは無変更） 観測の仕組み Observation ©ミツモア
14. 13 5つのツール だけで操作する ツール 役割 系統 get_page_context ページを読む（文脈＋位置） 観測 get_element_detail 要素の選択肢や現在値を詳しく見る 観測 set_value フォーム要素に値を設定 操作 click 要素をクリック 操作 submit_form フォームを送信 操作 Markdownに埋まったIDと同じIDで操作する。観測と操作が IDで繋がっている 操作の仕組み Operation ©ミツモア
15. 14 既存コンポーネントに 手を入れなくても動く 何もしなくても動く（自動検出） DOMスキャンで自動検出 ボタン・リンク・タブ・メニュー項目を検出 ラベルとクリックに対応 hookを足すともっと賢くなる（自己登録） コンポーネントにhookを追加 選択肢・現在値・コールバックを提供 値の設定や高度な操作が可能に Before: hookなし <button>保存</button> → ラベル「保存」+ click のみ After: hook追加 <Select data-ai-id="staffId"> → 値・選択肢・コールバック付き → AIからはどちらも区別がつかない — 同じIDで同じように操作する 操作の仕組み Operation ©ミツモア
16. 15 画面専用ツール と 汎用ツール 画面専用ツール 汎用ツール カバレッジ 対応ページのみ 全ページ 実装コスト ページごとに必要 ゼロ 業務ロジック 知っている 知らない 操作の精度 高い 基本操作のみ 両方を組み合わせる のが現時点の方針 使い分け Comparison ©ミツモア
17. 16 現状とこれからの問い 汎用ツールは実装済み・テストでは一定の成果 — ただし本番環境での検証はこれから 本番の複雑さに どこまで耐えるか 100超のフィールド、複雑なワークフロー、 実際の業務データで通用するか AIの操作権限を どう設計するか 確認ダイアログのOKを押す？削除操作は？ ユーザーの信頼とのバランス 画面専用と汎用の 最適な境界はどこか 全部汎用が理想ではない。業務ロジックが 必要な操作は画面専用の方が正確 現状と展望 Status & Next ©ミツモア
18. まとめ: ReactアプリをAIで操作する、2つのアプローチ 画面専用ツール: 業務ロジックを包み、AIは「何をするか」だけ判断 汎用ツール: Markdown観測 + 5つのツールで、コードゼロで全画面カバー 両方を組み合わせて、精度とカバレッジを両立する We're hiring! Agentic AI Labで一緒にAIエージェントを作りませんか？ GitHub: meetsmore/use-ai ©ミツモア