ChatGPT Atlas не нужен: Пишем свой AI-«браузер» который не стыдно запустить

Снова здравствуйте, уважаемые хабровчане.

Почти каждый день в ленте я вижу новости про очередного “революционного” AI-агента. AutoGPT, BabyAGI, Devin, Cursor, Perplexity, Atlas, Windsurf, Antigravity…. мол они заменят программистов, браузеры, людей, машины, а в итоге…. даже говорить не хочется

Я, как человек простой, хотел бы инструмент, который просто работает, мол “ыы зайди в гугл, найди доку, скажи мне ответ”.
Я скачал пару ( два ) популярных решений ( все они на питухоне ) . И началось: venv, uv, конфликты, абстракции над абстракциями, и ужасная скорость

Ну так шо, ради интереса ^[1] – я решил написать свой AI-“браузер” , но:

1. Никакого Python ( ничего личного просто бизнес )

2. Никакого LangChain

3. Никакой оплаты (я нищук)

Так появился Traw ^[2].

Акт 1. Почему современные агенты – это….

Большинство современных AI-фреймворков – это…

• LangChain / LangGraph: Чтобы сделать простой цикл “Подумай -> Кликни”, нужно – продраться через графы, чейны и проприетарный синтаксис и то что упоминать страшно….

• Vision-based агенты: Они делают скриншот страницы на каждый шаг, Это медленно, дорого и бессмысленно для 90% задач ( на рандом циферка )

• Python: без слов

Мне нужно было что-то, что работает по принципу Plug||Play. Скачал и запустил) Поэтому – Bun ( быстрый и относительно легкий )

Акт 2. Архитектура

Идея проста: Агент – это не magic :) Это просто цикл вайле!(Доне).

Вместо того чтобы скармливать нейронке скриншоты (как делают богатые) или сырой HTML , я выбрал фильтрацию DOM

Внутри это работает как старый добрый Vimium <3 Скрипт пробегает по странице, находит все интерактивные элементы (кнопки, инпуты, ссылки) и вешает на них индексы

// Упрощенная логика из src/browser/controller.ts
document.querySelectorAll(selector).forEach((el) => {    // ... логика фильтрации скрытых элементов    const tag = el.tagName.toLowerCase();    items.push(`[${i}] <${tag}>${text}</${tag}>`);
});

В итоге нейронка видит не кучку текста а чистый, понятный список:

[1] <input type="text">Search...</input>
[2] <button>Google Search</button>
[3] <a>How to center a div</a>

Это в 10-50 ( а может и больше ) раз дешевле по токенам, чем Vision, и работает мгновенно, и легче для AI

Акт 3. Мозги и… немного реверс-инжиниринга

Агент без модели – это просто скрипт, нужна LLM – Но платить $20/мес за API, чтобы потестить пет-проект? повторяю я нищук

В проекте используется модуль mo ^[3] (мой отдельный проект), который… “оптимизирует” доступ к моделям GLM

В коде агента это выглядит максимально тупо (и просто). Никаких адаптеров. Просто JSON тудон, JSON судон:

// src/agent/agent.ts
const response = await this.mo.chat([  { role: "system", content: systemPrompt },  { role: "user", content: stateText }
]);

Если модель возвращает {"action": "click", "index": 5}, мы кликаем по 5-му элементу – Все

Акт 4. Эстетика в терминале (аххаха я написал свой Markdown-парсер)

Ненавижу уродливые логи НО тащить жирный marked или что хуже markdown-cli ради вывода в консоль…. ну у нас тут не node а bun

Поэтому я сделал то, что лучше бы не стоило делать…. написал свой микро-парсер Markdown (markdownly.js)

Зачем? Чтобы вывод в терминале выглядел вот так:

Да, это велосипед

Акт 5. Traw в действии

Что мы имеем в остатке?

1. Установка: bun install (или один бинарник ^[4])

2. Запуск: traw run "кто такой zarazaex69" # йа

3. Результат: Агент сам идет в DuckDuckGo, парсит выдачу, ходит по ссылкам и возвращает итог

Что вышло то вышло

Traw – это игрушка, но логично ^[5] что это показывает:

1. Сложность современных AI-агентов искусственна. Вам не нужны гигабайты либ, чтобы заставить браузер кликать кнопки ( вау )

2. Bun идеально подходит для CLI. Быстрый старт, встроенный TypeScript, компиляция в бинарник ( хотя думаю все знали )

Исходники как всегда открыты, Бинарники собраны – Пользуйтесь

GitHub: github.com/zarazaex69/traw ^[2]