🤖Browser Use: AI가 스스로 웹을 탐색하고 상호작용하는 혁신적 도구

안녕하세요! 오늘은 AI 에이전트가 웹사이트와 상호 작용할 수 있도록 돕는 혁신적인 도구인 Browser Use를 소개해 드리겠습니다. Browser Use는 웹 브라우저와 AI를 연결하는 것뿐만 아니라, 지원하는 다양한 LLM(예: GPT-4o, Claude 3.5 Sonnet 등)을 활용하여 AI 에이전트가 사람처럼 웹을 탐색하고 정보를 수집하며 작업을 수행할 수 있도록 지원합니다. 특히, 시각적 요소와 HTML 구조를 분석하는 기능부터 자동 멀티탭 관리, 웹 페이지의 특정 요소를 식별하거나 선택하기 위한 XPath 추출 등 웹 상호 작용을 극대화하는 다양한 기능을 제공합니다. 이 블로그에서는 Browser Use의 주요 기능과 설치 방법을 살펴보고, AI 에이전트를 활용한 실용적인 예제들을 함께 알아보겠습니다.

🤖Browser Use: AI가 스스로 웹을 탐색하고 상호작용하는 혁신적 도구

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

Browser Use 개요

Browser Use는 AI 에이전트가 웹사이트와 상호 작용할 수 있도록 돕는 혁신적인 도구입니다. 웹 브라우저를 AI 에이전트에게 연결하는 가장 쉬운 방법을 제공하며, 지원하는 LLM(예: gpt4o, gpt4o mini, claude 3.5 sonnet 등)을 사용할 수 있습니다. Browser Use를 사용하면 AI 에이전트가 사람처럼 웹을 탐색하고 정보를 수집하며 작업을 수행할 수 있습니다

 

Browser Use는 AI 에이전트와의 효율적인 웹 상호 작용을 위해 다음과 같은 다양한 기능을 제공합니다.

• 시각 + HTML 추출: 웹 페이지의 시각적 요소와 HTML 구조를 분석하여 AI 에이전트가 웹 페이지를 이해하고 필요한 정보를 추출할 수 있도록 지원합니다.
• 자동 멀티 탭 관리: AI 에이전트가 여러 탭을 효율적으로 관리하며 작업을 수행할 수 있도록 자동으로 탭을 열고 닫으며 전환합니다.
• 클릭된 요소의 XPath 추출 및 LLM 동작 반복: AI 에이전트가 클릭한 요소의 XPath를 추출하여 동일한 작업을 반복할 수 있도록 합니다. 이를 통해 AI 에이전트는 웹 페이지에서 일관된 방식으로 작업을 수행할 수 있습니다.
• 사용자 정의 작업 추가: 파일 저장, 데이터베이스 푸시, 알림, 사용자 입력받기 등 사용자 정의 작업을 추가하여 AI 에이전트의 기능을 확장할 수 있습니다.
• 자가 수정: AI 에이전트가 작업 수행 중 오류를 감지하고 수정하여 작업의 정확성과 효율성을 높입니다.
• LangChain이 지원하는 LLM 사용: LangChain에서 지원하는 다양한 LLM 모델을 사용하여 AI 에이전트를 구축할 수 있습니다.

https://github.com/gregpr07/browser-use

GitHub - gregpr07/browser-use: Make websites accessible for AI agents

728x90

Browser Use 설치 방법

Browser Use를 설치하고 사용하는 방법은 간단합니다.

• pip를 사용하여 Browser Use 패키지 설치:

pip install browser-use

• .env 파일 생성 및 API 키 설정:LangChain에서 지원하는 다른 LLM 모델을 사용하려면 해당 모델에 필요한 API 키를 .env 파일에 추가하고, 코드에서 불러와야 합니다.(OPENAI_API_KEY,  ANTHROPIC_API_KEY)

from dotenv import load_dotenv
load_dotenv()

• 코드 작성:

from langchain_openai import ChatOpenAI 
from browser_use import Agent 
agent = Agent( 
    task="Find a one-way flight from Bali to Oman on 12 January 2025 on Google Flights. Return me the cheapest option.", 
    llm=ChatOpenAI(model="gpt-4o"), 
) # ... inside an async function 
await agent.run()

 

Browser Use 예제

Browser Use를 활용하여 AI 에이전트가 수행할 수 있는 작업의 예시는 다음과 같습니다.

• 가장 저렴한 항공편 검색:"What's the cheapest flight from new york to chicago on november 20th" 프롬프트를 사용하여 Google 검색창에 입력된 질문을 바탕으로 가장 저렴한 항공편 정보를 검색합니다.
• LMSYS 아레나 리더보드 Top 5 모델 검색: "Tell me the Top 5 models in the LMSYS Arena Leaderboard" 프롬프트로  LMSYS 아레나 리더보드에 접근해 상위 5개 모델 정보를 검색하고 결과를 출력합니다. 
• AI Times 인기 기사 검색: "https://www.aitimes.com/에서 많이 본 기사 3개 보여줘" 프롬프트를 통해 AI Times 웹사이트에 접속해 가장 많이 본 기사 3개를 추출합니다. 
• 쿠팡 제품 검색 및 최고 평점 제품 가격 추출: 'https://www.coupang.com/에 접속해서, "더함 75인치 tv"를 검색하고, 최고 평점 순으로 정렬하고, 첫 번째 결과의 가격을 알려줘' 프롬프트를 통해 쿠팡 웹사이트에서 검색 작업 수행 후 최고 평점 제품 가격 정보를 추출합니다. 

위 작업을 깃 허브 저장소 examples 디렉토리에 있는 try.py를 통해 테스트해 보겠습니다. try.py 코드는 LangChain 프레임워크를 활용하여 OpenAI 또는 Anthropic 모델을 선택해 대화형 언어 모델(LLM)을 설정합니다. 에이전트는 주어진 작업과 브라우저 컨트롤러를 통합해 웹 상호작용을 자동화하며, 사용자 쿼리에 따라 결과를 반환합니다. 

import os
import sys

from langchain_anthropic import ChatAnthropic
from langchain_openai import ChatOpenAI
from dotenv import load_dotenv
load_dotenv()

sys.path.append(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))

import argparse
import asyncio

from browser_use import Agent
from browser_use.controller.service import Controller

def get_llm(provider: str):
	if provider == 'anthropic':
		return ChatAnthropic(
			model_name='claude-3-5-sonnet-20240620', timeout=25, stop=None, temperature=0.0
		)
	elif provider == 'openai':
		return ChatOpenAI(model='gpt-4o', temperature=0.0)
	else:
		raise ValueError(f'Unsupported provider: {provider}')

parser = argparse.ArgumentParser()
parser.add_argument('query', type=str, help='The query to process')
parser.add_argument(
	'--provider',
	type=str,
	choices=['openai', 'anthropic'],
	default='openai',
	help='The model provider to use (default: openai)',
)

args = parser.parse_args()

llm = get_llm(args.provider)

agent = Agent(
	task=args.query,
	llm=llm,
	controller=Controller(keep_open=True),
	# save_conversation_path='./tmp/try_flight/',
)


async def main():
	await agent.run()

asyncio.run(main())

 

try.py 코드를 저장한 후, 명령어를 다음과 같이 입력합니다. 명령어는 openai 모델을 선택하고 "11월 20일에 뉴욕에서 시카고로 가는 가장 저렴한 항공편은 무엇인가요?"라고 질문하는 명령어입니다. 

python ./examples/try.py "What's the cheapest flight from new york to chicago on november 20th" --provider openai

try.py 항공편 검색 실행화면

코드를 실행하면 브라우저가 자동으로 실행되고 구글 검색창에 "cheapest flight from New York to Chicago"가 자동으로 입력되면서 아래 화면과 같이 비행편이 검색됩니다. 

시카고행 비행기편 검색 화면

다음 예제는 LMSYS 아레나 리더보드 Top 5 모델을 검색하는 예제입니다. 

python ./examples/try.py "Tell me the Top 5 models in the LMSYS Arena Leaderboard" --provider openai

LMSYS 아레나 리더보드 Top 5 모델 조회 코드 실행

LMSYS 아레나 리더보드 Top 5 모델 조회 결과

다음 예제는 "https://www.aitimes.com/에서 많이 본 기사 3개 보여줘"라고 한국어로 요청한 결과입니다. 아래 동영상을 보시면 코드가 실행되는 과정을 확인하실 수 있습니다. 

python ./examples/try.py "https://www.aitimes.com/에서 많이 본 기사 3개 보여줘" --provider openai

 

코드의 실행결과를 보면 많이 본 기사 3개가 잘 출력된 것을 알 수 있습니다. 

AI 타임스 많이본 기사 표시 실행결과

Browser Use는 아래 화면과 같이 웹페이지 요소를 구분해서 확인하고 이해하는 과정을 통해 사용자 요청을 실행합니다. 

웹 페이지 구성요소를 확인하는 Browser Use

try.py 코드 인기기사 검색 실행결과

마지막 예제는 쿠팡에 접속해서 제품을 검색하고 최고 평점 제품의 가격을 출력하는 예제입니다. 

python ./examples/try.py 'https://www.coupang.com/에 접속해서, "더함 75인치 tv"를 검색하고, 최고 평점 순으로 정렬하고, 첫 번째 결과의 가격을 알려줘' --provider openai

이 예제도 아래 화면과 같이 정상동작하였습니다. 

쿠팡 제품 검색 및 가격 출력 실행화면

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

맺음말

Browser Use는 AI 에이전트가 웹과 상호 작용하는 방식을 혁신적으로 변화시키는 강력한 도구입니다. AI 에이전트의 기능을 웹으로 확장하여 정보 검색, 데이터 수집, 웹 자동화 등 다양한 분야에서 새로운 가능성을 열어주는 Browser Use를 사용하면 개발자는 AI 에이전트를 활용하여 더욱 복잡하고 지능적인 웹 애플리케이션을 구축할 수 있습니다.

 

Browser Use를 테스트해 본 후기는 다음과 같습니다.

• Ollama 모델이 잘 동작하지 않는다.(Qwen2.5 모델이 그나마 일부 동작)
• API 비용이 과다하게 소비될 수 있다. 
• Claude Computer Use에 비해 속도가 빠르고 동작이 정확하다

오늘 블로그는 여기까지입니다. 여러분도 Browser Use를 이용해서 다양한 자동화를 체험해 보시길 추천드리면서 저는 다음 시간에 더 유익한 정보를 가지고 다시 찾아뵙겠습니다. 감사합니다. 

 

https://fornewchallenge.tistory.com/

 

 

2024.10.26 - [AI 도구] - 🤖Claude Computer Use 사용 가이드: 컴퓨터를 사람처럼 사용하는 AI

🤖Claude Computer Use 사용 가이드: 컴퓨터를 사람처럼 사용하는 AI