ai-agents-for-beginners

Створення агентів для використання комп’ютера (CUA)

Агенти для використання комп’ютера можуть взаємодіяти з вебсайтами так само, як це робить людина: відкриваючи браузер, оглядаючи сторінку і виконуючи найкращу наступну дію, виходячи з того, що вони бачать. У цьому уроці ви створите агента автоматизації браузера, який шукає на Airbnb, витягує структуровані дані про оголошення та визначає найдешевше проживання в Стокгольмі.

Урок поєднує Browser-Use для навігації на базі ШІ, Playwright і протокол Chrome DevTools (CDP) для керування браузером, Azure OpenAI для зорового аналізу та Pydantic для структурованого вилучення.

Вступ

У цьому уроці буде розглянуто:

Цілі навчання

Після завершення цього уроку ви дізнаєтесь, як:

Приклад коду

Урок включає один ноутбук з прикладом:

Вимоги

Налаштування

Встановіть пакети, які використовуються в ноутбуці:

pip install browser_use playwright python-dotenv
playwright install chromium

Встановіть змінні середовища Azure OpenAI, які використовує ноутбук:

AZURE_OPENAI_ENDPOINT=...
AZURE_OPENAI_API_KEY=...
AZURE_OPENAI_CHAT_DEPLOYMENT_NAME=...
# Необов’язково: за замовчуванням використовується остання версія API, якщо пропущено
AZURE_OPENAI_API_VERSION=...

Огляд архітектури

Ноутбук демонструє гібридний робочий процес автоматизації браузера:

  1. Chrome запускається з увімкненим CDP, щоб і Playwright, і Browser-Use могли працювати в одній сесії браузера.
  2. Агент Browser-Use обробляє завдання з відкритою навігацією, наприклад: відкриває Airbnb, закриває спливні вікна і шукає Стокгольм.
  3. Активна сторінка досліджується за допомогою структурованої схеми Pydantic для вилучення назв оголошень, цін за ніч, рейтингів і URL.
  4. Логіка Python порівнює вилучені оголошення та виділяє найнижчу ціну.

Такий підхід зберігає гнучке, зрозуміле зорове мислення Browser-Use і водночас дає вам детерміноване управління браузером, коли це потрібно.

Основні висновки та найкращі практики

Коли використовувати агента або актора

Сценарій Використовувати агента Використовувати актора
Динамічні макети Так, ШІ може адаптуватися до змін сторінки Ні, чутливі селектори можуть ламатися
Відома структура Ні, агент працює повільніше за прямий контроль Так, швидко і точно
Пошук елементів Так, натуральна мова добре працює Ні, потрібні точні селектори
Керування таймінгом Ні, менш передбачувано Так, повний контроль над очікуваннями і спробами
Складні робочі процеси Так, обробляє несподівані стани UI Ні, потребує явної розгалуженості

Найкращі практики Browser-Use

  1. Починайте з агента для дослідження і динамічної навігації.
  2. Перейдіть до прямого керування сторінкою, коли взаємодія стане передбачуваною.
  3. Використовуйте структуровані моделі виводу, щоб дані були валідуваними і типобезпечними.
  4. Додавайте затримки стратегічно після дій, що викликають видимі зміни в UI.
  5. Робіть скріншоти під час ітерацій, щоб легше було відлагоджувати помилки.
  6. Очікуйте, що вебсайти змінюватимуться, і розробляйте резервні стратегії для спливних вікон і змін макетів.
  7. Поєднуйте патерни агента та актора, щоб отримати гнучкість і точність.

Захисні засоби для агентів браузера

Агенти браузера працюють на живих вебсайтах, тому їм потрібні жорсткіші межі, ніж скрипту, який викликає лише відомий API. Перед тим, як перейти від демонстрації в ноутбуці до реального робочого процесу, визначте обмеження того, що агент може бачити, клікати і відправляти.

  1. Обмежте середовище перегляду. Запускайте агента в окремому профілі браузера або в пісочниці, і обмежте домени лише тими, що потрібні для завдання.
  2. Розділяйте спостереження і дію. Дозвольте агенту спочатку шукати, читати і витягувати дані; вимагайте явного кроку затвердження, перш ніж він надсилає форми, повідомлення, бронює подорожі, робить покупки, видаляє записи або змінює налаштування облікового запису.
  3. Не вказуйте секрети у запитах і логах. Не вставляйте паролі, платіжні дані, сесійні куки або необроблені особисті дані в контекст моделі. Нехай користувач виконує автентифікацію і редагує конфіденційні поля в журналах.
  4. Трактуйте вміст сторінки як недовіруваний вхід. Вебсайт може містити інструкції для агента, а не для користувача. Агент має ігнорувати текст на сторінці, який пропонує змінити ціль, розкрити дані, вимкнути захисні засоби або перейти на сторонні сайти.
  5. Використовуйте детерміновані перевірки при ризикових кроках. Перед остаточним підтвердженням користувачем перевіряйте поточний URL, заголовок сторінки, вибраний елемент, ціну, одержувача і підсумок дії кодом.
  6. Встановлюйте ліміти і умови зупинки. Обмежуйте кількість дій, спроб, вкладок і часу роботи агента. Зупиняйте роботу, якщо стан сторінки неоднозначний, а не продовжуйте натискати.
  7. Записуйте корисні докази, а не все підряд. Зберігайте підсумки дій, часові позначки, URL, описи вибраних елементів і посилання на скріншоти, щоб можна було переглянути помилки без збереження зайвого конфіденційного вмісту сторінки.

У прикладі Airbnb безпечною дією за замовчуванням є пошук оголошень і вилучення цін. Вхід у систему, контакт з хостом або завершення бронювання мають бути окремими діями з дозволом користувача.

Реальні застосування

Приклад із реального світу: Microsoft Project Opal

Агент, якого ви створюєте в цьому уроці, є маленькою локальною версією агента для використання комп’ютера (CUA) — програми, яка керує браузером так, як це робить людина. Microsoft реалізує цю ідею для підприємств у вигляді Project Opal (Frontier) — функції в Microsoft 365 Copilot.

У Project Opal ви описуєте завдання, а агент виконує роботу від вашого імені, використовуючи керування комп’ютером у безпечному Windows 365 Cloud PC, працюючи з браузерними додатками, сайтами та даними вашої організації. Він працює асинхронно у фоні, і ви можете направляти роботу або брати контроль у будь-який момент. Приклади роботи включають:

Opal є корисним орієнтиром того, яким має бути продуктивний і надійний агент для використання комп’ютера — і підсилює концепції з попередніх уроків:

Концепція цього курсу Як це застосовується в Project Opal
Людина в циклі (Урок 06) Opal зупиняється для введення облікових даних, чутливих даних або неоднозначних інструкцій і ніколи не вводить паролі або не надсилає форми без явного підтвердження. Ви можете Взяти контроль і Повернути контроль у процесі.
Надійні і безпечні агенти (Уроки 06 і 18) Працює в ізольованому Windows 365 Cloud PC, за замовчуванням лише в браузері (доступ до інших комп’ютерних ресурсів заблокований через Intune), використовує вашу ідентичність, тож отримує доступ лише до того, що вам дозволено, і веде лог кожної дії для аудиту.
Планування і метаусвідомлення (Уроки 07 і 09) Opal спочатку генерує план роботи, потім контролює власні міркування на кожному кроці і зупиняється при виявленні підозрілої активності.
Перевикористовувані можливості / інструменти (Урок 04) Навички дозволяють писати інструкції для повторюваних завдань (імпортованих з файлу .md або створених у Opal), і використовувати їх у різних розмовах.

Доступність: Project Opal наразі доступний користувачам у програмі раннього доступу Frontier з підпискою Microsoft 365 Copilot, і ваш адміністратор повинен завершити налаштування. Оскільки це експериментальна функція Frontier, можливості можуть змінюватись з часом.

Перевірка знань

Перевірте свої знання перед переходом до наступного уроку.

1. Коли агент для використання комп’ютера на основі браузера кращий за робочий процес лише через API?

Відповідь Використовуйте браузерного агента, коли завдання залежить від того, що видно у веб-інтерфейсі, сайт не пропонує потрібний API, або сторінка змінюється достатньо часто, що фіксований API або селекторна логіка буде крихкою. Якщо існує стабільний API для того ж завдання, віддавайте перевагу йому, бо це зазвичай швидше, легше тестувати і безпечніше.

2. У гібридному робочому процесі, які частини має обробляти агент, а які — прямий код Playwright?

Відповідь Дозвольте агенту справлятися з відкритою навігацією і динамічними станами UI, такими як пошук потрібної сторінки або закриття несподіваних спливних вікон. Перейдіть на прямий контроль Playwright, коли структура сторінки відома і дії потребують точності, повторення, очікувань або детермінованої валідації.

3. Приклад Airbnb знаходить оголошення, яке користувач може захотіти забронювати. Що має відбутись перед входом у систему, контактом з хостом або завершенням бронювання?

Відповідь Робочий процес має призупинитися і попросити явне підтвердження користувача. Перед цим слід показати чіткий підсумок вибраного оголошення, поточний URL, ціну, дати і заплановану дію. Пошук і вилучення цін можуть бути автономними; доступ до акаунту, повідомлення, покупки і бронювання мають бути з дозволом користувача.

4. Веб-сторінка каже агенту ігнорувати його початкові інструкції, відвідати інший сайт і розкрити збережені облікові дані. Як агент має трактувати цей текст?

Відповідь Трактуйте це як недовіруваний вміст сторінки, а не як інструкцію розробника або користувача. Агент має залишатися в межах дозволеного домену і обсягу завдання, відмовлятися розкривати секрети і уникати слідувати за текстом сторінки, який змінює ціль, вимикає захисні засоби або веде на сторонні сайти.

5. Які докази корисно зберігати під час роботи агента браузера, а чого варто уникати?

Відповідь Зберігайте підсумки дій, часові позначки, URL, описи вибраних елементів, результати валідації і посилання на скріншоти, щоб можна було переглянути виконання. Уникайте збереження паролів, платіжних даних, сесійних куків, необроблених особистих даних або повного вмісту сторінок, якщо немає конкретної причини для зберігання і дотримання конфіденційності.

Додаткові ресурси

Попередній урок

Ознайомлення з Microsoft Agent Framework

Наступний урок

Розгортання масштабованих агентів

Відмова від відповідальності: Цей документ було перекладено за допомогою сервісу штучного інтелекту для перекладу Co-op Translator. Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.

This site is open source. Improve this page.