Zenn
Open9

AI Agent(cline+browser-use)に日用品買い物させてみる

Google Home
Model Context Protocol
OpenAI
Cline
Browser Use
生ビール生ビール

経緯

もともと日用品は下記記事のようにAlexa→Todoist→Google Tasks→Seleniumで一部自動化してた。(〜2024年中旬)
https://zenn.dev/wmoto_ai/articles/c7ad0b897aca3d

ただ、課題もいろいろある。

  • 買い物リストのキーワードにちゃんと一致しないとうまくいかない
  • Seleniumのドライバ更新めんどいい...(自動更新できるみたいだが)

それに2024年AlexaのTodoist廃止ということでいよいよ元の記事の方法が使えなくなった。
https://x.com/wmoto_ai/status/1799344465053954094
↓
ということでGoogle Nestを導入。
https://x.com/wmoto_ai/status/1822072033351725557

AI agnetで良い感じに自動で買い物してくれるようにしたいなというモチベーションでやってみる。

生ビール生ビール

つくりたいもの

plantuml

@startuml
skinparam packageStyle rect
skinparam actorStyle awesome

' ▼ アクター（人）
actor "ユーザー" as User

' ▼ 外部システム
rectangle "Google Home" as GH
rectangle "Google Keep" as GK
rectangle "ネットスーパー" as NS

' ▼ システム本体
rectangle "AI Shopping System" as AISystem {
  actor "Agent (cline)" as Agent
  rectangle "browser-use" as BrowserUse
}

' --- フローの関係 ---
' 1) ユーザーがGoogle Homeに買い物リストの追加を依頼
User --> GH : 「買い物リスト追加依頼」
GH --> GK : 「Google Keepにリストを追加」

' 2) ユーザーがAgentに直接買い物指示
User --> Agent : 「買い物指示」

' 3) AgentがMCP経由でGoogle Keepからリストを取得
Agent --> GK : 「買い物リスト取得 (MCP)」

' 4) Agentがbrowser-useを使ってネットスーパーで買い物
Agent --> BrowserUse : 「ブラウザ操作指示」
BrowserUse --> NS : 「カゴに商品追加」
@enduml

browser-useをわざわざclineに操作させるのもやや冗長な気もするが、VScode(Cursor)のエディタ上でなんでもまとめられる方がいいやん？という思想。
というかそもそもMulti Agent時代にそもそもGoogle Nest経由する必要もない気はする。

生ビール生ビール

とりあえずサクッと実装したかったので
Google keepで買い物リストを取得するのはMCPでやって、browser-useはclineにコマンド実行してもらう方法に。
https://x.com/wmoto_ai/status/1880890907890954483
買い物するにあたり、以下のようなrule(例)をcline側に設定。

# 我が家の買い物基準
表記揺れなどに注意して。

## トマトといえば:
ミニトマト 1パックなど

あとbrowser-useを使うLLM側にも以下のようなプロンプト(例)を設定。

以下要件に従うこと。
    - ネットスーパー内の購入履歴のあるものを優先すること。
    - item毎に指定がない限り、買い物かごには基本的に1つ追加すること。判断に迷ったら保留すること。
    - 野菜や果物、素材名の場合は、それそのものの素材であるものを優先すること。
生ビール生ビール

やってみての感想

Agent(cline)→Browser-useに引き継ぎさせるのどうなん？

  • うん。どっちに買い物ルールを指定するか考えたり、どう役割をもたせるか曖昧なまま実装してしまったのは反省。※ただcline経由でなんでもお願いしたかったというだけ
  • Browser-useだけで完結できるならそっちの方が管理とかやりやすいはず。仕組みはシンプルな方がいいよね、を実感。

ちゃんと意図通りの買い物できた?

  • 2/3くらいは良い感じかな。突貫でやったのでプロンプト(ルール)を模索中。
  • 当初browser-use側でgpt-4o-miniとかも試したものの、自分が使ってるネットスーパー＆プロンプトではイマイチだった。→gpt-4oだったらちゃんと細かく指示してれば意図通り。
  • ただ、汎用的に買い物ルール(自分たちの好みとか重視ポイントとか)をどうコンテキストに入れるのかは難しい。&どうテストすればいいのか≒つまるところ自分の買い物要求を細かく言語化しないといけないのでしんどい。

https://x.com/wmoto_ai/status/1882642856449589734?s=46

便利そう？

  • うまくいけばよさそう。ただ、いまは↑ポストの通り、余計なものを手動で省くとかの手間があり、あんま変わらん。
  • とりあえず実行したら人間側で眺めて変なことしないか監視してる。

AIに買い物させると気持ちいい？

https://x.com/umiyuki_ai/status/1882697982455525571?s=46
→まだ感覚として慣れてないので、途中で変なことしないかな？とか我が子を見守るような気持ちの方が大きい。意図通りに全部買い物してくれたら絶対気持ちいい！

コストは？

この買い物分だけだと1ドルちょいくらい。余分な操作も含めてこれくらい。十分っしょ。

生ビール生ビール

今後LLMによるブラウザ操作は確実に一般化すると思うので、各ECサイト独自のAgentを自前で用意しておくか、世界共通プロトコル決めとくとか必要そうですよね。(他人事)

生ビール生ビール

意図通りの買い物してもらうためのアプローチとしては以下いくつか考えられそう。

  • Browser-use側のLLMをgemini系にしてコンテキストに購入履歴情報をぶっこむ
  • Browser-use側のcustom actionsでRAG的に過去の購入履歴情報を取得して最適なもの選ばせる
  • cline側で過去の購入履歴情報を参照させる(単なるread or MCPで検索させる)
ログインするとコメントできます