Всем, кто хоть раз разрабатывал интерфейсы через агентов, известна боль направления агента к нужному элементу на странице.
Лично я испробовал и до сих пор использую следующие подходы:
• Описываю компонент словами и говорю, где примерно он находится («кнопка "выйти" в шапке документации»);
• Описываю компонент по его уникальным идентификаторам из разметки («футер/api-sidebar/etc»);
• Скидываю скриншот и описываю, что с элементом нужно сделать («уменьши отступы в компоненте с изображения»);
• Запускаю браузерный MCP, чтобы тот нашёл нужный элемент и получил больше контекста по нему («перейди на *сайт* и разберись почему кнопка добавления пользователя не нажимается»).
Все эти способы полезны в зависимости от задачи и того, насколько лениво писать промпт, но у всех есть большой минус — модели нужно потратить много времени и контекста, чтобы просто найти элемент. Да, одни способы требуют меньше контекста и времени, другие больше, но в среднем получается дофига.
И здесь на сцену выходит react-grab — новая утилита от создателя популярных и крутых react-scan и million.js.
Принцип работы у неё до смешного простой: наводишься на элемент, копируешь его данные и вставляешь в контекст агента. Агент сразу понимает, куда смотреть, и не забивает себе контекст ненужными данными. Профит!
Ставится всё буквально одной командой, которую нужно запустить из корневой папки:
npx -y grab@latest init.Удивительно, но об этой штуке не трубит весь интернет, хотя она сейчас полезна как никогда в связи с тем, что прекрасная и копеечная GLM-4.7 не умеет обрабатывать изображения, из-за чего её очень сложно использовать для разработки интерфейсов, так как ты лишаешься 2 из 4 способов показать элемент модели (в связи с тем, что браузерные MCP делают скриншоты, чтобы найти элемент и это ломает модель).
P.S. На скриншоте к посту спойлер к предстоящему анонсу 😍