1. Чого агент іще не вмів: торкатися живої сторінки
Гра вже готова: справжні шахи на chess.js, усі сім пунктів проходять, мітки для агента на місці. Тьома приходить до Льохи з цим — і одразу з підступом:
— Слухай, окей. Гра є, мітки є, за кого агент гратиме — вирішили. Але рухати-то фігури руками хто буде? Агент же живе в терміналі — як він потрапить до моєї дошки в браузері? Я що, за нього мишкою клацати маю?
— А ось із цього й починається головне на сьогодні, — Льоха явно чекав на це запитання. — Згадай, що агент умів досі. Читав файли, писав код, навіть минулого тижня через MCP-кабель притягнув тобі землетруси. Усе це — робота з текстом: літери, дані, рядки на диску. А ось відкрити сторінку в браузері й клацнути по ній — натиснути кнопку, схопити фігуру, перетягнути на клітинку — він не вмів. Не було в нього рук у браузері.
— А тепер будуть?
— А тепер будуть. Сьогодні агент навчиться керувати справжнім браузером. Сам відкриватиме вікно, сам рухатиме курсор, сам клацатиме. І це, чесно скажу, найвидовищніше, що ти тут побачиш.
2. Це той самий MCP-кабель, тільки до браузера
— І це що, якась нова величезна штука? — Тьома заздалегідь напружується, бо думає, що зараз буде тиждень налаштувань.
— А ось і ні, — Льоха майже задоволений. — Памʼятаєш, кілька днів тому ми MCP-кабелем дотягнулися до сервісу землетрусів? Була програма зовні, вона віддавала дані, а ми підключили її до агента кабелем. Так от, браузер підключається точно так само. Є спеціальна програма — браузер із розʼємом під MCP. Підключаємо її до агента тим самим кабелем — і агент отримує над браузером руки: відкрити сторінку, клацнути, надрукувати, зняти скриншот.
— Тобто нове щось вчити не треба?
— Кабель той самий, ти його вже опанував. Нове — лише те, куди його підʼєднано. Раніше на тому кінці був сервіс із даними, тепер — браузер, яким можна керувати. Прийом один і той самий. Ця програма-браузер називається Playwright. Підключив кабелем — і в агента зʼявилися руки в браузері.
3. Підключаємо Playwright
— Досить теорії, — Льоха відкриває термінал. — Підключаємо. Одна команда:
claude mcp add playwright -- npx -y @playwright/mcp@latest— Почекай, розбери по словах, — просить Тьома, дивлячись на рядок. — А то на вигляд складнувато.
— Та не складніше за минулий раз, — Льоха розбирає по частинах. — claude mcp add — це «додай MCP-підключення», ти це вже робив кілька днів тому із землетрусами. playwright — просто імʼя, яким я називаю це підключення, щоб потім упізнавати його в списку.
— А ці дві риски?
— -- — це роздільник. Усе, що стоїть праворуч від них, Claude не розбирає як свої налаштування, а передає цілком як команду запуску: «ось цю програму візьми й запусти». Праворуч якраз вона й стоїть — npx -y @playwright/mcp@latest: це «скачай з інтернету свіжий пакет @playwright/mcp і запусти його».
— А минулого разу ми писали якийсь --transport http. Тут де він?
— Гарне запитання. Минулого разу сервіс працював через мережу — десь на чужому сервері, і ми прапорцем --transport http казали: «кабель іде через інтернет, ось за такою адресою». А тут усе інакше. Ми не йдемо в мережу — ми запускаємо програму-браузер просто на твоїй машині, ось цією командою після --. Раз програма локальна, запущена поруч, Claude спілкується з нею напряму, без мережі, і ніякого --transport http не потрібно. Локальна програма проти мережевого сервісу — ось і вся різниця між двома командами.
Льоха тисне Enter — команда відпрацьовує. І одразу попереджає:
— Тепер важливе, не пропусти. Підключення додалося в налаштуваннях, але поточна сесія про нього ще не знає. Нові кабелі підʼєднуються тільки під час запуску — отже, сесію треба перезапустити. Але не просто вийти й зайти знову, а так, щоб не втратити все, що ми тут напрацювали над грою. Для цього є окремий ключ — --continue: він і підхопить свіжий кабель, і поверне весь наш контекст. Виходиш з агента й запускаєш:
claude mcp list # перевірити: playwright → ✓ Connected
claude --continue # перезапустити, підхопивши кабель і не втративши контекст— У списку playwright має стояти зі статусом ✓ Connected — отже, браузер підключений і агент його бачить. Якщо статусу немає або є помилка — перш за все перевір команду і чи пакет завантажився. І майже завжди причина одна: не перезапустив сесію. Забув — агент підключення не підхопить, хоч тричі його додавай.
Далі, уже в новій сесії, глянемо, що дав це підключення:
/mcp # показує підключені MCP та їхні інструменти— /mcp покаже playwright і список його інструментів: відкрити сторінку, клацнути, ввести текст, зняти скриншот. Ось це агент тепер і вміє робити в браузері — кожен такий інструмент наче окрема кнопка.
4. Агент робить перший хід
— А тепер просто проси словами, — Льоха набирає в сесії. — Тільки назви прямо: через Playwright. Скажеш просто «відкрий сторінку» — агент може відкрити її у звичайному браузері, яким він не керує, і дивитиметься збоку. А нам треба, щоб він відкрив її саме в браузері Playwright — тому, яким він уміє керувати. Тому імʼя й указуємо:
Через Playwright відкрий мою гру game.html у браузері.
Ти граєш за чорних. Дочекайся свого ходу, зроби хід і надішли скриншот дошки.— А тепер дивись на екран, — Льоха не квапить.
За секунду нічого. Потім само відкривається вікно браузера — те саме, Playwright-ове, де видно кожен рух агента. У ньому завантажується дошка. Тьома рухає білу пішку своєю рукою — він же за білих. Хід переходить до чорних. І тут курсор у вікні сам підʼїжджає до чорного коня, підхоплює його, веде на клітинку, відпускає. У чат падає скриншот дошки.
— Офігеть! — Тьома аж підстрибує, тицяє пальцем у екран. — Він справді сам пішов! Я нічого не чіпав — а фігура поїхала!
— Сам, — усміхається Льоха. — А тепер дивись, як він це зробив. Прочитав на сторінці мітку data-turn, побачив "b" — зрозумів, що настала його черга, чорні. Подивився на дошку, вибрав хід, клацнув по фігурі, клацнув по клітинці. Ти за нього жодного разу не торкався мишки. Ось тобі й «браузер ожив» — не на словах, а ось воно: вікно є, курсор рухається сам.
5. /goal: агент крутить до результату
Тьома вже загорівся:
— Слухай, а можна ще крутіше? Щоб я не по одному ходу командував, а сказав «доіграй партію» — і пішов, а він сам довів до кінця?
— Можна, і для цього в Claude Code є окрема потужна команда — /goal, «задана мета». Штука крута, запамʼятай її. Зазвичай ти як працюєш: даєш агенту крок, він зробив, чекаєш, даєш наступний. А /goal перевертає це. Ти даєш не кроки, а умову, за якої справу можна вважати завершеною — і йдеш.
Агент далі сам повторює цикл: зробив спробу → перевірив, чи виконано умову → не виконано, робить ще → і так, поки не зійдеться. Причому перевіряє не він сам собі на око: після кожного кроку підключається окремий невидимий перевіряльник (швидка модель) і вирішує — досягнуто мети чи ні. Досягнуто — агент зупиняється. Це й є «поставив задачу й пішов»: повертаєшся — а все готово.
— Це ж узагалі для чого завгодно так можна! — доходить до Тьми. — Не лише для шахів.
— Для чого завгодно, де ви можете чітко описати, що означає «готово», — киває Льоха. — А в нас із шахами це якраз є. Памʼятаєш свою мітку data-game-over? Ось вона тут і згодиться як умова:
/goal на дошці зʼявився атрибут data-game-over="true"— Агент грає хід за ходом і після кожного звіряє: став data-game-over у "true" чи ще ні. Партія дійшла до мату, мітка стала — агент зупинився сам. А ви тим часом хоч чай пийте.
Тьома світиться:
— Та це ж крутість у квадраті! Мало того, що він сам ходить — так ще й усю партію без мене доведе: загадали, пішли, повернулися — готово.
— Ага. А вимкнути режим, коли набридне:
/goal clear # прибрати загадану метуІ тут Льоха ставить чесну межу — не повчаючи, просто відзначає:
— Тільки поміть одну річ. Умову, яку ти вписав, — data-game-over — ти взяв готову. Ти ж сам цю мітку в гру й заклав, коли збирав її, — тепер просто скопіював її в /goal. А ось самому вигадати, за якої умови задача взагалі вважається виконаною, щоб машині можна було довірити перевірку, — це окрема доросла навичка, до неї дійдемо набагато пізніше. Поки — береш готову умову й насолоджуєшся, як агент сам крутить до результату.
— Замовлено, — Тьома вже не дуже слухає застереження, йому не терпиться запустити.
6. Той самий браузер — для будь-якої живої сторінки
— Слухай, — міркує Тьома на ходу, — а раз він уміє ходити по сторінках… це ж не тільки про мою гру?
— Не тільки, — киває Льоха. — Браузер-то спільний. Тією самою рукою агент відкриє будь-яку живу сторінку й пройде по ній сценарій. Памʼятаєш лендинг, який ти викотив в інтернет ще на пʼятому рівні? Ось по ньому тією ж рукою можна швидко пробігтися — відкрити, дійти до потрібного місця, повернути скриншот: усе на місці, сторінка жива.
— Тобто це не лише цирк «він грає, а я дивлюся».
— Зараз — здебільшого цирк, не буду брехати, — Льоха не роздуває. — Але браузер під рукою в агента — штука спільна, не тільки для іграшок. Тією самою рукою можна пробігтися по вже викладеному й глянути, чи воно живе. Просто тримай у голові: рука ця спільна.
— Ну що, голова не пухне? — Льоха тягнеться закрити термінал. — Дивись, що в тебе тепер у руках. Playwright — це агент за кермом справжнього браузера: сам відкрив вікно, сам клацає, сам надіслав скриншот. Підключили його тим самим mcp add, що й землетруси, тільки без мережі — як програму просто тут, на машині; не забув перезапустити сесію — і mcp list показав Connected. Далі агент читає мітки прямо на сторінці — data-turn, data-game-over — і по них розуміє, що до чого, замість того щоб гадати по картинці. А /goal — це коли ви дали не кроки, а умову, і пішли: він сам крутить до результату.
— Усе нормально, — киває Тьома. — Одне тільки це твоє «бери готову умову» — так собі радість.
— На готовому поки й живи, — усміхається Льоха. — Своє вигадувати навчишся, дай час. От тепер — можна збирати по-справжньому.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ