Next.jsは記事中で紹介されているserver functionや、server aciton、server componentという概念をRSCとApp Routerの元で混同している(本来は分けて考えることができる)という指摘や、サーバー中心の設計ではサーバー側でキャッシュを管理する必要があるために”use cache”というディレクティブが登場せざるを得なくなったという話は、Next.jsはsimpleではなくeasyなフレームワークであるとよく言われる所以だと感じました。

ブログ記事中ではserver functionというTanstack Startで実現されているアイデアの一端にしか触れられていませんが、フレームワークが持つ他の機能についても気になるため、実際のプロダクトへの採用を考えるため詳しくこれから見ていきたいところです。

その他参考資料

tanstack.com

zenn.dev

This is one of the core motivators for TanStack Starts server function and middleware api. Some platform primitives are simply not that type safe. https://t.co/IFmcrwhjva
— Tanner Linsley (@tannerlinsley) 2025年1月26日

2025-01-31

Anthropic Computer UseとBrowser Useを使ってみた

LLM 大規模言語モデル

ELWでエンジニアをしております、井立田です。

今回はAnthoropic Computer UseとBrowser Useを実際に試してみたので、その手順と感想を書いてみました。

Anthropic Computer Use

docs.anthropic.com

Computer Useとは

AI モデル（Claude ）がコンピューターのデスクトップ環境を操作できる機能のこと
仮装環境で動作するため、ローカルPCのファイルやシステムに直接アクセスすることはできない
プログラムを作らせることも可能

事前準備

クレジットのチャージ（https://console.anthropic.com/settings/billing）
API keyの作成（https://console.anthropic.com/settings/keys）

手順

githubからAnthropic社の用意しているリポジトリをクローン

 git clone https://github.com/anthropics/anthropic-quickstarts.git
 cd anthropic-quicstarts/computer-use-demo

github.com

docker起動

事前準備で作成したAPI keyを設定して、dockerを起動します

 export ANTHROPIC_API_KEY=%your_api_key%
 docker run \
     -e ANTHROPIC_API_KEY=$ANTHROPIC_API_KEY \
     -v $HOME/.anthropic:/home/computeruse/.anthropic \
     -p 5900:5900 \
     -p 8501:8501 \
     -p 6080:6080 \
     -p 8080:8080 \
     -it ghcr.io/anthropics/anthropic-quickstarts:computer-use-demo-latest

コンテナが起動したら、 http://localhost:8080 にアクセスすると、Computer Useのデモ環境が開きます！

試しにELWのテックブログを開いてもらう

感想

Computer Useで実際にステージング環境にログインしてもらい、登録操作を行いました
以下の理由から実運用はまだ難しそう
- 単純作業を行うのであれば問題ないが、少し複雑なことはチャットで詳細に指示する必要がある
- rate limitエラーが頻繁に発生するため、処理が途中で止まってしまう
- スクリーンショットで判定して動くため、画面外のボタンなどは選択できない。キーストローク(PgUp/PgDown)を使ってスクロールを指示する必要がある。 https://docs.anthropic.com/ja/docs/build-with-claude/computer-use

Brouser Use

browser-use.com

Brouser Useとは

AI モデルがブラウザを操作できるようにするためのライブラリ
- 視覚的な理解と、HTMLの構造を読み取ってWebページを操作できる
- 複数のブラウザタブを自動で処理し、並列処理を実行可能
- 要素のXPathを記録し、同じ操作をAIが正確に繰り返せる
- ファイルへの保存、データベース操作、通知、人間の入力処理など、独自のアクションを追加できる
- 自己修正機能がある
- あらゆる LLM に対応（GPT-4、Claude 3、Llama 2 など）

手順

githubからbrowser-useのリポジトリをクローン

 git clone https://github.com/browser-use/browser-use.git
 cd browser-use

github.com

browser-useとplaywrightをインストール

 pip install browser-use
 playwright install

APIキーの設定

.env ファイルを作成し、OpenAI や Anthropic の API キーを設定
```
 OPENAI_API_KEY=%your_api_key%
 ANTHROPIC_API_KEY=%your_api_key%
```

任意の場所に実行ファイルを作成

プロジェクトの任意の場所に実行ファイルを作成する
taskにやりたいこと、llmに利用するAIモデルを指定

 from langchain_openai import ChatOpenAI
 from browser_use import Agent
 import asyncio
 from dotenv import load_dotenv
 load_dotenv()

 async def main():
     agent = Agent(
         task="ELWのはてなブログにアクセスし、最新の記事を開いてください",
         llm=ChatOpenAI(model="gpt-4o"),
     )
     result = await agent.run()
     print(result)

 asyncio.run(main())

上記で作成したファイルを実行
```
 python demo.py
```

自動でブラウザが立ち上がりtaskの指示に従って操作してくれる

感想

Browser Useで実際にstaging環境にログインしてもらい、登録操作を行いました
抽象度の高い指示でも対応してくれるのがすごい。（あまり抽象的すぎると迷子になる）
- 下記のような指示でも実行することができた
  - サイドバーのアイコンから顧客一覧画面を開き、新規作成を行なってください。任意の名前を入力して保存を行なってください。
- 保存ボタンが見当たらない場合でも自動でスクロールを行ってくれる
カスタムアクションを設定すればファイル出力も可能なため、テストケースを作成すれば簡単なテストであれば自動化できそう → 次回アクション

比較

	Browser Use	Computer Use
概要	AI がブラウザを操作する	AI が仮想デスクトップ環境を操作する
実行環境	Webブラウザ（Playwrightを使用）	仮想環境（Dockerコンテナ上で動作）
制限	Playwrightを使用するためブラウザ内の操作しかできない	仮装環境上で実行されるためローカルPCのファイルやシステムにはアクセスできない

議事録

playwrigtのエミュレート機能で自分の操作に対するテストコードを作成できるので、わざわざBrowser Useを利用する必要がないのではないか
それだとUIが更新されたらシナリオテストを更新する必要がある
これであればシナリオテストを更新せずに、AIが解釈して実行してくれる。抽象度が高い指示でテストしてくれるのがメリット
エンジニアじゃなくても支持できるのが良さそう

ELW株式会社テックブログ

リアルなログをそのままお届けします。

SQL OR条件のパフォーマンス低下とオプティマイザ

LATERALサブクエリについて

Discordでゲームのマルチサーバを制御するbotを作ってみた

フロントエンド社内勉強会: AWS AppSyncについてと既存プロジェクトでの活用事例

JWTを理解する

JWTとは

Tanstack Startのserver functionとは