フルスタックTS製SaaSを AIエージェント化する

すでに動いているフルスタックTypeScript製SaaS「プロワン」に、AIがブラウザのUIを操作する仕組みを後付けして、AIエージェント化した話です。新しいAIプロダクトを作ったのではなく、既存のプロダクトに後から組み込みました。

AIはツールの引数に何でも送ってくるため、入口でZodによる検証を行い、複雑な操作は専用ツールに型を定義し、型で表現しきれない汎用ツールは元々ある既存の検証に委ねました。弾かれてもAIはエラーを読んで自分で修正します。本番3ヶ月のデータと合わせて、「既存プロダクトをAIエージェント化するなら、普段から検証を整えておくことが効く」という話をします。

Transcript

1. フルスタック TS製SaaSを AIエージェント化する ©プロワン AIがUIを操作する仕組みを、既存のSaaSに後付けした
2. 自己紹介 井藤 佑⾺ 株式会社ミツモア Agentic AI Lab フルスタックTS製SaaS「プロワン」をAIエージェント化しています。 設備⼯事‧リフォームなど、フィールドサービス事業者向けのオールインワンSaaS。 顧客管理から請求まで、業務を⼀つのシステムで扱う。 ©プロワン
3. デモ 本番3ヶ月 7,951 セッション稼働 新しいAIプロダクトを作った話ではなく、すでに動いている既存のSaaSをAIエージェント化した話です 1 ©プロワン
4. 仕組み AIがReactアプリを操作する仕組みを作った AIが返すのは tool_call、「この関数を呼べ」という⽂字列だけ。 { name: "addRows", args: { quantity: 1, unitPrice: 7207 } } これを、Reactアプリの操作に変える。 そのために作ったのが、use-ai というライブラリ Reactのコンポーネントを、AIが操作できるようにする 2 ©プロワン
5. 発想の転換 各画⾯のコンポーネントで、AIに状態とツールを渡す // マウントで「今の画面の状態」と「使えるツール」を登録 useEffect(() => { register(id, { state: { 見積もり: estimate }, // AIが見る、画面の情報 tools: { addRows, editRows }, // AIが使えるツール }) return () => unregister(id) // アンマウントで解除 }, [deps]) 3 ©プロワン Reactの描画ツリーが、AIに渡す状態とツールを決める。 ダイアログを閉じれば、その状態もツールも、AIから⾒えなくなる。
6. 仕組み ツールがUIを動かす ツールはブラウザで実行され、結果と更新後の状態がAIに返る。AI側は結果が返るまで待つ。 4 ©プロワン ブラウザ (React) サーバー LLM API 状態とツール定義を登録 ツール定義（JSON Schema）+ 状態 tool_call + 引数（JSON） 実行を依頼 UIを操作して実行 結果 + 更新後の状態 Type JSON
7. 課題 AIが何を送ってくるかは、わからない AIは任意の⽂字列を⽣成する。だからツールの引数には、型と違う値も想定外の値も⼊ってく る。 { name: "callApi", args: { body: { amount: "たくさん" } } } そのままでは、実⾏できない 5 ©プロワン
8. 型検証 ツールの⼊⼒をZodで検証する const addRows = defineTool( '明細に行を追加する ', z.object({ quantity: z.number(), unitPrice: z.number() }), (input) => { /*inputの型は { quantity: number; unitPrice: number } */ }, ) Type‧JSON Schema‧AIが返すJSON。この3つが⼀致する保証はない。 Zodスキーマ1枚から全部導出すれば、ズレない。 z.toJSONSchema(s) AIに渡る「⼊⼒の取り決め」になる z.infer<typeof s> handler の引数の型になる s.parse(args) 実⾏する前に、値を検証する 6 ©プロワン
9. 専用ツール ツールの⼊⼒を型で定義する // 明細行スキーマ（addRows の入力・抜粋） z.object({ label: z.string().nullable().optional().describe('品名（例: "エアコン"）'), quantity: z.number().nullable().optional().describe('数量（例: 10, 1, 0）'), unitName: z.string().nullable().optional().describe('単位（例: "個", "台"）'), unitPrice: z.number().nullable().optional().describe('単価（例: 75000）'), unitCost: z.number().nullable().optional().describe('原価（例: 50000）'), taxCode: z.string().nullable().optional().describe('税区分（例: "001"）'), isTextLine: z.boolean().nullable().optional().describe('見出し行なら true'), }) 型で値を縛り、.describe() の例がAIへの指⽰になる。1枚のZodが、型とAIへの説明を兼ねる。 型を定義した所では、AIはこの型どおりに送ってくる。本番3ヶ⽉、数量‧単価が型からズレたことは0件。 7 ©プロワン
10. 汎用ツール 型を定義できないツールもある 汎⽤的にフォームを埋めるツールや、APIを呼ぶツールもある。 どんな値が来るか事前に決まらないので、⼊⼒は z.unknown にするしかない。 z.object({ path: z.string(), body: z.unknown() }) 型で縛れない値が、どうしても残ってしまう。 8 ©プロワン
11. 既存の検証 型のない値は、既存の検証に任せる z.unknown にした所では、実際にAIの値が弾かれている。 汎⽤のAPIツール：失敗 5.40% うち約半分（54%）が、サーバーの検証による差し戻し 新しい検証を⾜したわけではない。⼈間向けに元からある検証（UIの⼊⼒チェックや、サーバー の検証）が、AIの値にも効く。 9 ©プロワン
12. 自己修正 弾かれたAIは⾃分で直す 例えば、AIがAPIの boolean の欄に、⽂字列の "true" を送ってしまう。 サーバーの検証が「boolean で送ってください」と差し戻す。 AIはそのメッセージを読んで、true に直して送り直す。 本番では、こうして弾かれた型ミスの8割超 を、AIが⾃分で直して完遂した。 ⼈間向けに検証を作り込んでおけば、AIエージェント化でも効く。 10 ©プロワン
13. まとめ 既存の検証が、AIの⾜場になった 1 AIが何を送ってくるかはわからない。だから、ツールの⼊⼝でZodで検証する。 2 複雑な操作は専⽤ツールに型を定義する。AIはその型を守る（数量‧単価の型ズレ0）。 3 全部は定義できない。汎⽤ツールは z.unknown にして、既存の検証に任せる。 4 弾かれてもAIはエラーを読んで⾃分で直す（8割超）。⼈間と同じ。 既存プロダクトをAIエージェント化するなら、普段から検証を整えておくことが重要 ! 11 ©プロワン
14. 今回発表した use-ai は OSSで公開しています。 https://github.com/meetsmore/use-ai 是⾮、使ってみてください!