こちらはLayerX AI Agentブログリレー9日目の記事です。昨日の記事はClaude Code SDK ではじめる 定額 AI Agent 開発入門でした！！
こんにちは、Hiromu Nakamura (pon) です。 LayerXでAI/MLOpsをやってます！
先月の中頃にLayerXのサービス「バクラク」上で1日1AI Agent機能をPoCしていました。その時の経験から爆速でAI Agent機能のPoCを回す技術についてお話しします。
目次
AI Agentを実サービス上でPoCしたい理由と課題
AI Agent機能が実際のサービス上でどのように動くかを検証したい時があります。実際に動いている画面を見ることでイメージを掴みやすくなり、さらにアイデアを磨くことができます。
しかしAI Agent機能を実サービスに差し込む場合、現行のリポジトリを理解した上でのコード修正が必要です。そのサービスのコードベースに詳しくない場合、コードを理解するところから始まるので、PoCの速度が出せません。特に私のように入社3ヶ月でまだ触ったことのないサービスに手を加えるのは障壁が高いです。どうすれば実サービス上で動くAI Agentを試しやすくなるでしょうか？
Chrome Extensionsで突破するサービス上PoCサイクル
そこでChrome Extensionsです。本番サービスで起動するChrome Extensionsを作成し、そこからローカルで立てたAI Agentにリクエストすれば、そのまま本番サービス上で動くAI AgentがPoCできます。
実際に私がPoCしたものの一例を紹介します。こちらは弊社サービスバクラク上でAI Agent機能を試したものです。選択した文字列に関する解説をしてくれるAI Agent機能です。
技術スタックは次を使っています。
Amazon Bedrock Knowledge Basesに関しては次の弊社ブログも参照ください。メタデータフィルタリングなどの実践的なノウハウについても解説しています。
重要なことは、このPoCの開発では実サービス上でのAI Agent機能を検証できている上に、既存コードに一切触れてない点です。また、上の動画のように、AI Agentとやりとりした結果を使ってフロントエンドをChrome Extensions経由で修正することも可能です。このようにChrome Extensionsを使うと、AI Agent機能をサービス上ですぐにPoCできます。
Chrome Extensions開発では次が便利です。ボイラーテンプレートをベースに実装を始めることができ、ホットリロードも入ってます。
ちなみに僕はClaude Codeへの指示だけでChrome Extensionsのコードは一行も書いてないです。Claude Codeへの指示だけでChrome ExtensionsがローカルのAI Agentにリクエストを送り、UIを書き換えて結果を表示するところまで実装をしてくれています。
さらに爆速でPoCを回すために
Chrome Extenisonsでサービス上でのAI Agent機能を試せるといっても、AI Agentを爆速で作れないとPoCが回せません。そこで自分なりのAI Agent実装サンプルを用意することが重要です。まずはシンプルでもいいので一つAI Agentを作成しましょう。そこでまで出来れば、その実装をClaude Codeに参照させつつ、アイデアの指示を与えれば、AI Agentができます。
私の場合はStrands Agents SDKを使ったAI Agent開発テンプレートを用意しており、次のようなディレクトリ構成になってます。
. ├── converter (文書変換系はよく使うのでまとめる) │ └── pdf2md.py ├── sample (雛形になるAI Agnet実装) │ ├── api │ └── chrome-extension ├── (sampleを参照して生成した色々なAgent + Chrome Extensions実装) × N │ ├── api │ └── chrome-extension ├── llm (LLMクライアント設定も切り出しておく) ├── memory ( memory系も共通でよく使うので切り出す ) ├── pyproject.toml (依存管理も共通で持っておく) ├── docker-compose.yml (特にベクトルDBやグラフDBなどの永続化レイヤー) └── CLAUDE.md
ポイントは次です。
- 依存管理共通化(AI Agentを作るたびに新しい依存管理構築をしたくない)
- 共通で利用するものは切り出しておく(新しいAI Agentは既存の実装を使うだけ)
- APIサーバーもChrome Extensionsも全てホットリロード(Claude Codeにサーバーのプロセス管理をさせない)
- 上記のルールなどはCLAUDE.mdに記載し実装時に参照させる。
一番シンプルなsample実装をお見せします。
LANGFUSE_AUTH = base64.b64encode(
f"{os.environ.get('LANGFUSE_PUBLIC_KEY')}:{os.environ.get('LANGFUSE_SECRET_KEY')}".encode()
).decode()
os.environ["OTEL_EXPORTER_OTLP_HEADERS"] = f"Authorization=Basic {LANGFUSE_AUTH}"
strands_telemetry = StrandsTelemetry()
strands_telemetry.setup_otlp_exporter()
agent = Agent(
name="Knowledge Base Agent",
description="An agent that can retrieve information from a knowledge base",
system_prompt="""
(省略)
""",
trace_attributes={
"session.id": str(uuid.uuid4()),
"agent.name": "Knowledge Base Agent",
},
)
app = BedrockAgentCoreApp()
@app.entrypoint
def invoke(payload):
user_message = payload.get(
"prompt", "No prompt found in input"
)
agent.trace_attributes["request.id"] = str(uuid.uuid4())
agent.trace_attributes["user.message"] = user_message[:100]
response = agent(user_message)
return response.message['content'][0]['text']
if __name__ == "__main__":
app.run()
このサンプルはAmazon Bedrock AgentCore + Strands Agents SDKを使ったサンプル実装です。Amazon Bedrock AgentCoreやStrands Agents SDKのより詳しい解説は公式ドキュメントをご覧ください。
さらにデバッグやトレース確認がしやすいように、Langfuseのセットアップもできるようになっています。これをwatchdogをかませてホットリロードしています。Langfuseに関しては、弊社から過去記事がいくつか出ているのでぜひご覧ください。
このように俺が考える最強スターター実装を作るのも面白いです。
アイデアは日々Obsidianに書き溜めます。アイデアを試したい時にClaude Codeを開き、Obsidian MCP経由でアイデアを読み込ませ実装させます。
1つ目のsample実装となるAI Agentを作っておくことが大事です。それができればChrome Extensionsでサービス上で動くAI Agent機能のアイデアがぶん回せます。
まとめ
今回はChrome ExtensionsでAI Agent機能をPoCする方法をお伝えしました。皆さんもChrome Extensionsで実サービス上で動くAI Agentのアイデアをガンガン試していきましょう！！
また、この記事はLayerX AI Agentブログリレーの9日目の記事です。毎日AI Agentに関する知見をお届けします！！LayerXテック公式Xか僕のX(@po3rin)を是非フォローして見逃さないようにお願いします！
LayerXではAIで全ての経済活動をデジタル化する仲間を募集しています。LLMを使って終わりではない難しいチャレンジが溢れています。もし今回の内容に興味を持っていただけたら、ぜひ一度お話しましょう。LayerXでは技術検証を積極的に行っており、非常に刺激的な環境です。是非カジュアルにお話ししましょう。
ここから僕につながります！
jobs.layerx.co.jp
コメント