Chrome Extensionを活用し、AI Agentを高速で開発

概要

既存プロダクトのコードベースに手を入れずに、本番サービス上で動くAI Agent機能を爆速でPoCするためのアプローチです。Chrome Extensionをフロントエンドの「実験レイヤー」として活用し、ローカルで立てたAI Agentと連携させることで、実サービスと同じ画面上でアイデア検証を回します。

解決する課題

• PoCスピードの遅さ: 本番リポジトリの理解と改修が必要になり、AI Agent機能の検証までに時間がかかる。

• 参入ハードルの高さ: 新規メンバーや別チームのメンバーが、既存コードに手を入れるには心理的・技術的ハードルが高い。

• 体験イメージの共有の難しさ: スライドやモックだけでは、実サービス上でのAI Agentの振る舞いを具体的にイメージしづらい。

特徴

1. Chrome Extensionによる「本番画面上PoC」

• 本番サービス上で起動するChrome Extensionを用意し、そこからローカル環境のAI Agent APIへリクエスト。

• 画面上のテキスト選択やUI状態をExtension経由で取得し、AI Agentの入出力に利用。

• 既存コードには一切手を入れず、「上から被せる」形で機能を試せる。

2. AI Agent実装テンプレートの整備

• Strands Agents SDKやBedrock AgentCore等を用いて、最小構成のAgent実装をテンプレート化。

• LLMクライアント設定、メモリ、ベクトルDB、トレース（Langfuseなど）を共通モジュールとして切り出し、毎回ゼロから環境構築しなくてよい構成に。

• sampleディレクトリに「雛形Agent + 対応するChrome Extension」を用意し、新しいアイデアはディレクトリを複製して指示を変えるだけで量産可能。

3. Claude Code等による実装の自動生成

• Chrome Extension側のコード（コンテキストメニュー、DOM操作、UI更新など）は、開発者が直接書くのではなくAIコーディングアシスタントに指示して生成。

• 「ローカルで立っているAI Agentにこのエンドポイントでリクエストし、結果でこの領域を書き換える」といった要件をテキストで伝えると、Extensionのコード一式を自動生成。

• APIサーバー・Extensionともにホットリロードを前提とした構成にし、試行錯誤をノンストップで回せるようにする。

導入効果（PoC事例イメージ）

• 実サービス上の体験を即日で可視化: バクラクのような既存SaaS上で、選択テキストに対する解説AI、入力補助AIなどを「本番と同じUI」で即座に試せる。

• 既存コードに触れない安全な検証: 本番リポジトリの変更レビューやデプロイフローを待たずに、アイデア検証だけを先行させられる。

• アイデアの回転数向上: AI Agent側のプロンプト・ツール構成と、Chrome Extension側のUI/挙動をセットで高速に更新できるため、1日で複数パターンのAgent機能を検証可能。

推奨ターゲット

• 既に稼働している自社SaaS上で、AI Agent機能を素早く試したいプロダクトチーム。

• 本番コードへの変更ハードルが高い大規模サービスのPdM・Tech Lead。

• 「まずはユーザー体験を触れる形で見せたい」スタートアップ／事業開発チーム。

活用イメージ

• 経費精算画面上で、選択した明細の妥当性をAIがその場で解説。

• カスタマーサポート画面上で、選択したお問い合わせ内容に応じた回答案やナレッジ記事をサイドパネルに表示。

• 管理画面の複雑な設定フォームに対して、Chrome Extension経由でAIガイドを表示し、入力内容をチェック・補完。

このアプローチにより、AI Agent機能を**「本番に近い環境 × 高速サイクル」**で検証し、価値の高いアイデアだけを本実装に乗せていくことができます。