【実演】ブラウザを操作するAI『Browser Use』をMacで設定する方法。実際に使ってみたら想像以上に面白い！
【プロフィール】
Oh my teeth CEO 西野誠（にしのまこと）
1994年生まれ。大学在学中にオープンロジにて創業期を経験。ワークスアプリケーションズに新卒入社し、大規模基幹システム開発に従事。2019年、Oh my teethを創業。日本初の通わない歯科矯正ブランドを東京と大阪6ストアで展開。体験者数は5万人を突破。Onlab 21th「DemoDay」最優秀賞 & オーディエンス賞、ICC 2022「D2Cカタパルト」優勝、ICC 2024「DXカタパルト」優勝、Forbes NEXT100 2024受賞。
▼YouTubeはこちら
Browser-Useの設定方法
Macでのやり方になります。Windowsの方すみません。
設定にあたっては下記のサイトを参考にさせていただきました！
▼【徹底解説】Browser Useの仕組みや安全性、設定方法までまるっと解説！
https://chatgpt-lab.com/n/ncbfc0b1aeae4
ターミナルを開く
Homebrewをインストール
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"Pythonをインストール
brew install pythonプロジェクト用のフォルダを作成
デスクトップに「browser_use_project」というフォルダを作成
プロジェクトフォルダに移動
browser-useをインストール
移動したら下記コマンドを実行
python3 -m venv myenv仮想環境を有効化
下記コマンドを実行
source myenv/bin/activate
仮想環境内でbrowser-useをインストール
下記コマンドを実行
pip install browser-useplaywrightをインストール
下記コマンドを実行
playwright install.envファイルの作成
下記コマンドを実行
touch .envnano .envAPIキーの取得方法はこちらなどを参考に
https://qiita.com/kurata04/items/a10bdc44cc0d1e62dad3
OPENAI_API_KEY=sk-xxxxCtrl + Oで保存し、Enterを押してからCtrl + X
run_agent.py作成
touch run_agent.pynano run_agent.py
import argparse
import asyncio
from browser_use import Agent
from langchain_openai import ChatOpenAI
def parse_args():
parser = argparse.ArgumentParser(description="Run AI agent with a custom task.")
parser.add_argument("--task", type=str, required=True, help="Task for the AI agent.")
return parser.parse_args()
async def main():
args = parse_args()
agent = Agent(
task=args.task,
llm=ChatOpenAI(model="gpt-4o"),
)
result = await agent.run()
print(result)
if __name__ == "__main__":
asyncio.run(main())
Ctrl + Oで保存し、Enterを押してからCtrl + X
準備は完了！あとは実行するだけ！
python run_agent.py --task "楽天トラベルで一番安い明日宿泊できる新宿のホテルに関する情報を日本語で教えて"▼いざ実演！(ホテル検索/求人検索/記事リサーチ)
メンバー：お疲れ様です。今何やってるんですか？
Nishino：Browser Use(ブラウザユース)っていうのが熱くて、それを試してるところです。
メンバー：Browser Useって何ですか？
Nishino：Browser Useっていうのは、「AIにブラウザを操作してもらおう」っていう、あたかも人かのようにブラウザを操作するっていうことですね。何か検索してとかするとChromeを開いて、基本的にChromeを動かすっていうAIですね。だからChromeでできることだったら何でも操作ができる。
今まではブラウザを動かすって考えると、多分マクロとか。これまでのマクロって言ったら、例えば検索簿をクリックします、ここに航空券で調べますと、そこから一番上のサイトを開いてくださいみたいな、場所で覚えたりとか、そういう感じなんですよ。「ここにこれを入れてください」みたいな感じで、こと細かく一個一個の動作を指示して初めて動く。でもそれでもエラーになっちゃったりとか。だからあんま復旧してないじゃないですか。あんまマクロとか使ってる人いないじゃないですか。難しそうって思っちゃう。
だから結局人にやってもらったりとかするしかなかったんだけど、ついに今回。マクロもブラウザを動かすっていうものありましたよ。それとGPT、これ組み合わせはどういうことができるかということなんですけれども、GPT能力は考えることができますよね。つまりこのサイトを全部見た時に、どれをクリックしたら目的の動作ができますかって、お題出したらできそうじゃないですか。
メンバー：確かに。
Nishino：GPTにこれコピーしてこういう画面なんだけれども、そこであなたは札幌池のチケットを買おうと思ってます、どれをクリックしたらいいですかって聞いたら教えてくれるじゃないですか。
まさにそれを聞きながら目的を達成していくっていうことができるっていう。これ前のエージェントみたいな感じで、何か壁に見つかった画面が遷移したら、その情報をGPTに教えてあげて、どれをしたらいいですかって聞いて、指示されたものをまた操作するみたいな感じで、やっていくと目的の結果を得られることができるっていう。そんなことになってます。
言ってるだけじゃわからないと思うんで、実際にどんな感じなのかということをお伝えできればなと思います。
【Browser-Useの実演①】ホテル検索
まずどうするかと言いますと、UIっていうのもあるんですけど、今ベーシックなやつでいきます。まずこのプロジェクトに行きます。
基本ちょっとね取っつきにくいです、ちなみに。なのでUI版。UI版でもいいんですけど、こっちの方が分かりやすいんで、一旦こっちで行こうかなと思います。
ここから結構簡単で、ほんとすごいんで。行きますよ。今1月15日にこれ撮ってます。じゃあ例えばこういうシーン考えましょうと。
python run_agent.py --task "グーグルフライトで、明日の羽田発、福岡空港着のフライトを全てチェックして、一番安い飛行機チケットの値段を教えて"
こういう感じで。プロンプトみたいな感じでやっています。これ結構ね、エラーが出るんで当然ですけど、これでいいかな。行きますよ。はい。起動しました。まずブラウザが開きます勝手に。
メンバー：えぇーこれNishinioさんは操作してないんですか？
Nishino：何も触ってないです。
メンバー：本当だ何も触ってない。
Nishino：勝手にこう、羽田になってるね。
メンバー：本当だ。
Nishino：合ってるかと。これを都度対話しながらやってるんですよ。GPTと。これがエージェントですよねと。Replitが一緒だったじゃないですか。ミスったら投げて、どれをしたらいいって聞きながら進めていけるっていう感じなんですよ。だからゴールだけお伝えしたら、あとはやってくれるっていうのがこの革命ですよね。
今までのマクロだからとも一個一個動作、こういう場合はこうしてこうしてっていうのを、全部設定しないと。これを見てよ。ちゃんと明日だから16になってるね。そしたら出ました。はい。トゥモローは2.17万円ですと。
メンバー：おー。
Nishino：こんな感じです。
メンバー：そこに答えが出てる。すごくないですか。
メンバー：すごい。
Nishino：こういう感じです。まあ早いかどうかは分かんないですよ。早いかどうかは分かんないですけど、でもこれが自動でやってくれるっていうことですよねと。つまりだからリアルタイムで探すことができるわけですね。じゃああと何がいいかな。なんかこれは結構面白いですよ。
リスクはあるんですよ。当然これってやっちゃうと勝手にブラウザ操作されちゃったりするから。これは一応同じChromeでも違うブラウザなので、そういう何かパスワードが保存されてるってことはないんですけれども、そういう事故もあるんで、結構ちゃんと注意しながらないといけないっていうものではありますと。
【Browser-Useの実演②】Indeedで求人検索
例としてあったのは、Indeedで求人を検索して、それで自動で応募するみたいな。そんなのを組んでる人もいましたと。
メンバー：応募までできちゃうんですね。
Nishino：応募までできちゃいます。なぜならブラウザなんで。そこにちゃんとログイン情報とかを入れとけばこれでログインしてくださいとか言うわけ。するとまあこれちょっと怖いけどそんなことここで書かないけど、そういうこともできるみたいです。
だから例えばじゃあIndeedで軽作業の仕事を探して、時給を教えてみたい。こんな感じで言うと、はいまた動き出します。ブラウザがこんな感じで立ち上がって、はい勝手に。IndeedのURLとか教えてないんですよ。どんどん探してますよ。
メンバー：うわーすごいすごい。
Nishino：あー出てきた時給1200円。こんな感じです。こういうリアルタイムな情報をこういう感じで取ってきたりすると。
【Browser-Useの実演③】Google上位記事のリサーチ
メンバー：あとは、なんか業務で使うならっていうのありますか？
Nishino：記事とかも作れます。ブログ記事をどういう感じで作るかっていうと、一個の作り方の方法として、上位サイトやっぱ参考にするじゃないですか。当たり前ですけど。例えば歯科矯正マウスピース矯正、おすすめとかで調べると出てくるわけじゃないですか。上位の記事っていい記事なわけじゃないですか。読まれてる。要はニーズに合った記事。それを参考にして、ここでGPTが裏側で動いてるんで、例えばですけど、マウスピース矯正の上位記事5つを要約してとか、やってみましょうと。するとまたブラウザが立ち上がり。なんかいろいろ模索はしてますね。こんな感じです。ちょっとイメージどう使おうかなはあんまり正直思いついてないです。これも別にこれであればDeep Research使った方がいいし、ぶっちゃけこれまで紹介したFeloロとかDeep Research使った方が、web上の記事をまとめるとかだったらそっちの方がいいなと思うんだから。感動はするんだけどなかなかニーズがこういうのとかかな。
例えば大阪出張行った時とかに、梅田駅周辺のサウナ付きカプセルホテルに、ちょっとやってみようか。楽天トレープ開いてちゃんとチェックインが15日になってます。一部屋一人。で梅田駅になってるからこれ今東京になってちゃったよね。梅田駅なんだけど。こっから梅田になったら感動しますよね。うわ戻った戻った。押さなかったっすね、戻るを選択しましたね。東京の梅田じゃないぞ。これで73番押したらすごいですよね。
メンバー：あー違う。頑張ってる。
Nishino：大阪行った。梅田になってますね確実に。近畿から梅田。すごいカプセルホテルだ。もうゴールじゃないですか。ゴール出た。空いてるか確認しますね。確認した。ここまで来るんですよ。ここまで来たらもうありがとうございますじゃないですか。ここでログインしたら。
メンバー：本当にですね。これ自分でも操作できるんですか。例えばなんか一緒に。この後は僕がやりますって言ったら、西野さんが今打つことはできるんですか。
Nishino：どうなんだろう、できるのかな。予約画面までに到達したら、そこで止めて、とかって言っていけるのかな。最後それだけ。ちょっと興味が湧いてきた。でもこれすごくないですか。東京で探し始めたらつんだなと思ったら、ちゃんと戻り、なんかどういう口から言ったか分かんないけど、梅田に続いて。これなんか最初からうまくいっちゃったね。おー、行きましたニュージャパン。予約画面にはもう来てますと。15日まで押してくれてる。ここまで行ってくれたらだいぶ熱いですよね。
メンバー：本当に。
Nishino：ありがたいですよね。ちょっとこれ調べといてって言ったら、ここの画面で。なんかでも行けそうっすね。なんかまあもうちょっと感あるけど。でも今のみたいな、ちょっと調べてここやっといてって言ったら、あそこまで出しておいてからめっちゃ楽じゃないですか。つまりこれで何ができるんだろうと。ブラウザでできるあらゆることが、AIによって操作できるようになったってことが、これスタートだと思ってて。だって今までもう何してたかって、仕事は全部ブラウザじゃないですか。
メンバー：そうですね。
Nishino：スプシ触るのも今ブラウザだし。全部それがAIになるってなったら、かなり大きいと思うんです。今までってなんだかんだ結局検索だとか、GPTで検索とか対話するとか、そういうコミュニケーションの話だったじゃないですか。
メンバー：はい。
Nishino：でも最後の仕事はそれをアドバイス受けながら、最後は自分だよねってやってたけど、それももう連携してGPTが操作するようになってしまったら、これはかなり時短になってくんじゃないかなと思って。これはめちゃくちゃ面白いということで。もし興味もあってくださった方は、コメント欄に。
多分セットアップが大変なんで。ちなみにですね、Browser UseのUIっていうのもトライはしてて、明日はこれじゃなくて、Browser UseのUI版をちょっと試して、それをデモしてみたいなという風に思います。
ここまで読んでいただきありがとうございます！
Oh my weekはYouTubeで毎朝7時に配信しているので、チャンネル登録して聞いていただけると嬉しいです。それでは本日もOh!全開でいきましょう！
Oh my teeth 採用情報
Oh my teethでは、最速で未来の歯科矯正体験を社会実装する仲間を募集しています。我々と一緒にリアルとTechを駆使した事業創りを経験しませんか？
一緒に戦える仲間をたくさん募集中です！
▼職種の例
・マーケター
・ストアマネージャー
・セールスリーダー
・プロダクトマネージャー
・歯科衛生士少しでも興味持った方、物作りしたいなとか世界中に届ける物作りしてみたいという方はぜひまずは僕と15分面談させてください。
▼興味がある方は、西野と15分面談をしましょう！
Oh my teeth マウスピース矯正
通わないマウスピース矯正、Oh my teethが今大好評です。サクッと歯並びをきれいにしたい方、ぜひ無料診断に来てください。今導入クリニック大阪東京6店舗で展開しています。
無料診断はたったの3ステップ！
Step1： Oh my teethの専門クリニックに行く
🔎Step2：歯型スキャンスタート
3Dスキャナーで実施いたします。結果は最短即日でLINEでゲット！
🧑🔬Step3：矯正相談・プランのご提案
理想的な歯並びの擦り合わせを行います。
▶️無料診断を予約する
ついでにNishinoのLINE追加もお願いします！採用について、矯正について、気になることがあればお気軽にご連絡ください！
▼WebCMが配信中！