AI Agents for Beginners - 15. Computer Use Agent (CUA)

Build a Computer Use Agent (CUA) with Browser-Use and Playwright via CDP integration. Covers vision-based navigation, structured Pydantic extraction, Agent vs Actor pattern selection, and a real-world Airbnb price comparison workflow.

June 9, 2026

ai ai-agents

AI Agents for Beginners - 15. Computer Use Agent (CUA)

이 글은 Microsoft의 AI Agents for Beginners 강좌 Lesson 15를 기반으로 정리한 내용입니다.

출처: microsoft/ai-agents-for-beginners - 15-browser-use

Computer Use Agent (CUA) 는 사람처럼 브라우저를 열고, 페이지를 보고, 화면에서 최선의 행동을 취해 웹사이트와 상호작용하는 에이전트입니다.
이번 레슨에서는 Airbnb를 검색하고 스톡홀름에서 가장 저렴한 숙소를 찾는 브라우저 자동화 에이전트를 구축합니다.

이를 위해 다음 네 가지 기술을 결합합니다:

Browser-Use: AI 기반 브라우저 내비게이션
Playwright + CDP: 브라우저 생명주기 제어
Azure OpenAI (GPT-4 Vision): 비전 기반 추론
Pydantic: 구조화된 데이터 추출

Architecture Overview

노트북은 하이브리드 브라우저 자동화 워크플로우를 시연합니다:

Playwright와 Browser-Use가 동일한 브라우저 세션을 공유할 수 있도록 CDP(Chrome DevTools Protocol) 가 활성화된 Chrome이 시작됩니다.
Browser-Use 에이전트가 Airbnb 열기, 팝업 닫기, 스톡홀름 검색 같은 개방형 내비게이션 작업을 처리합니다.
활성 페이지를 구조화된 Pydantic 스키마로 검사해 숙소 제목, 1박 가격, 평점, URL을 추출합니다.
Python 로직이 추출된 목록을 비교하고 가장 저렴한 결과를 강조합니다.


CDP Architecture
Mermaid
%%{init: {'look': 'handDrawn'}}%%
flowchart TD
    subgraph Chrome["Chrome Browser (CDP Port 9222)"]
        Page["Active Page"]
    end
    PW["Playwright\n브라우저 생명주기 관리\nCDP 연결 처리"] -->|"connect_over_cdp"| Chrome
    BU["Browser-Use\nAI 기반 자동화\n구조화된 출력 추출"] -->|"cdp_url"| Chrome
    Agent["Agent\n(use_vision=True)"] --> BU
    LLM["Azure OpenAI\nGPT-4 Vision\n스크린샷 분석"] --> Agent
    Pydantic["Pydantic Models\nAirbnbListing\nSearchResult"] --> BU

Playwright vs Browser-Use

역할	Playwright	Browser-Use
브라우저 생명주기 관리	✅ 강력한 제어	—
CDP 연결	✅ 완전 지원	✅ cdp_url 방식
AI 기반 요소 탐색	❌ CSS 선택자 필요	✅ 자연어 사용
비전 기반 페이지 이해	❌	✅ 스크린샷 분석
구조화된 출력 추출	❌	✅ Pydantic 통합
타이밍·대기 제어	✅ 완전한 제어	△ 덜 예측 가능

Setup


setup.sh
bash

Azure OpenAI 환경 변수를 설정합니다:


.env
bash

Azure OpenAI LLM Initialization

Browser-Use의 ChatAzureOpenAI로 LLM을 초기화합니다. Temperature 0.3으로 일관되고 예측 가능한 자동화를 구현합니다:


airbnb_agent.py
python

Structured Output Models

Pydantic 모델을 사용해 에이전트가 추출할 데이터의 타입 안전 스키마를 정의합니다:


airbnb_agent.py
python

Starting Chrome with CDP

Playwright와 Browser-Use가 동일한 Chrome 인스턴스를 공유하기 위해 CDP 포트를 열고 Chrome을 시작합니다:


airbnb_agent.py
python


Starting Chrome with CDP
Mermaid
%%{init: {'look': 'handDrawn'}}%%
sequenceDiagram
    participant Script
    participant Chrome
    participant Playwright
    participant BrowserUse

    Script->>Chrome: 시작 (--remote-debugging-port=9222)
    Script->>Playwright: connect_over_cdp("http://localhost:9222")
    Playwright-->>Script: playwright_browser
    Script->>BrowserUse: Browser(cdp_url="http://localhost:9222", keep_alive=True)
    Note over Playwright,BrowserUse: 동일한 Chrome 세션 공유
    Script->>BrowserUse: Agent(task=..., browser=browser).run()
    BrowserUse->>Chrome: 브라우저 자동화 (AI 기반)
    Playwright->>Chrome: 직접 페이지 제어 (결정론적)

AirbnbSearchAgent Class

Agent와 Actor 접근 방식을 전략적으로 결합한 검색 에이전트입니다:


airbnb_agent.py
python


Agent Search Workflow
Mermaid
%%{init: {'look': 'handDrawn'}}%%
flowchart LR
    subgraph Step1["Step 1: Agent 탐색 (AI)"]
        A1["https://airbnb.com 열기"] --> A2["팝업·쿠키 배너 닫기"]
        A2 --> A3["Stockholm, Sweden 검색"]
        A3 --> A4["결과 페이지 로드 확인"]
    end
    subgraph Step2["Step 2: Vision 추출"]
        E1["page.extract_content()"] --> E2["GPT-4 Vision이 페이지 스크린샷 분석"]
        E2 --> E3["모든 숙소 가격 추출"]
        E3 --> E4["SearchResult Pydantic 모델로 반환"]
    end
    Step1 --> Step2
    E4 --> R["가장 저렴한 숙소\n평균 가격\n가격 범위"]

Running the Full Workflow


airbnb_agent.py
python

실행 결과 예시:


Output
bash

When to Use Agent vs Actor

CUA 구현의 핵심 설계 결정은 언제 Agent를 쓰고, 언제 Actor(직접 제어)를 쓸지입니다:

시나리오	Agent 사용	Actor 사용
동적 레이아웃	✅ AI가 페이지 변화에 적응	❌ CSS 선택자가 깨짐
알려진 구조	❌ 직접 제어보다 느림	✅ 빠르고 정확함
요소 찾기	✅ 자연어 쿼리 사용	❌ 정확한 선택자 필요
타이밍 제어	❌ 예측 가능성 낮음	✅ 대기·재시도 완전 제어
복잡한 워크플로우	✅ 예기치 않은 UI 상태 처리	❌ 명시적 분기 코드 필요


Agent vs Actor
Mermaid
%%{init: {'look': 'handDrawn'}}%%
flowchart LR
    Task["새로운 태스크"] --> Q1{"레이아웃이\n동적인가?"}
    Q1 -->|"예"| Q2{"구조화된\n추출이 필요한가?"}
    Q1 -->|"아니오"| Actor["Actor 패턴\nCSS 선택자\n+ Playwright 직접 제어"]
    Q2 -->|"예"| Hybrid["하이브리드\nAgent 탐색 +\npage.extract_content()"]
    Q2 -->|"아니오"| Agent["Agent 패턴\nuse_vision=True\n+ 자연어 태스크"]

Browser-Use Best Practices

Start with an agent for exploration and dynamic navigation — AI가 팝업, 쿠키 배너, 레이아웃 변경을 자동으로 처리
Switch to direct page control when the interaction becomes predictable — 반복 작업은 Actor가 더 빠르고 안정적
Use structured output models — Pydantic으로 추출 데이터의 타입 안전성과 유효성 보장
Add delays after visible UI changes — 검색 버튼 클릭, 페이지 전환 후 충분한 대기 필요
Capture screenshots for debugging — page.screenshot()으로 에이전트 실행 중 시각적 상태 캡처
Design fallback strategies for pop-ups and layout shifts — 웹사이트는 언제든지 변경될 수 있음
Blend agent and actor patterns — 유연성과 정밀성을 동시에 얻는 하이브리드 접근

Real-World Applications

Browser-Use + Playwright CUA 패턴은 다양한 실제 시나리오에 적용할 수 있습니다:

Travel Booking: 가격 모니터링, 자동 예약, 옵션 비교
E-commerce: 재고 추적, 가격 비교, 자동 구매
Structured Data Extraction: 동적 사이트에서 타입 안전한 데이터 스크래핑
Vision-aware UI Testing: AI가 사람처럼 화면을 보고 검증하는 자동화 테스트
Website Monitoring: 변경 감지, 특정 조건에 대한 알림
Intelligent Form Filling: 복잡한 폼을 AI가 지능적으로 작성


CUA Applications
Mermaid
%%{init: {'look': 'handDrawn'}}%%
flowchart TD
    CUA["Computer Use Agent\n(Browser-Use + Playwright + CDP)"]

    CUA --> Nav["AI 탐색\nuseVision=True\n자연어 태스크"]
    CUA --> Extract["구조화된 추출\npage.extract_content()\nPydantic 모델"]
    CUA --> Control["직접 제어\nPlaywright Actor\n결정론적 동작"]

    Nav --> UC1["동적 웹사이트\n팝업·배너 처리"]
    Extract --> UC2["가격 비교\n데이터 수집"]
    Control --> UC3["폼 자동화\nUI 테스트"]

    UC1 --> Result["실제 활용\n여행 예약 · 전자상거래\n모니터링 · 테스팅"]
    UC2 --> Result
    UC3 --> Result

PreviousAI Agents for Beginners - 14. Microsoft Agent Framework