🎯 О чём этот конспект: Разбор революционного open-source проекта Space Agent от создателя Agent Zero. Это агент, который живет и исполняется прямо в браузере (client-side), умеет создавать виджеты на лету, серфить интернет с минимальным расходом токенов и самообучаться через систему навыков.

👤 Кому будет полезно: Вайбкодерам, разработчикам AI-агентов и тем, кто ищет максимально дешевый и конфиденциальный способ автоматизации рабочих процессов в вебе.

✨ Что получите: Пошаговое понимание архитектуры Space Agent, инструкции по запуску локально или в облаке, и методы создания кастомных инструментов (виджетов) через прямой диалог с AI.

1. Архитектура "Agent in the Frontend": Безопасность и Скорость

Контекст: В отличие от классических агентов, где UI — это просто оболочка, а логика крутится на бэкенде, Space Agent полностью работает внутри JavaScript runtime вашего браузера. Это означает, что агент имеет прямой доступ к DOM, может рисовать элементы на экране в реальном времени и использовать WebGPU для локального вывода (inference) без отправки данных на сторонние сервера. Такой подход радикально снижает задержки и повышает приватность.

Выгода: Нулевая стоимость хостинга логики агента и возможность работы с локальными LLM прямо в браузере.

Как применить:

• Шаг 1: Запуск — Перейдите на space-agent.ai или разверните локально из репозитория.
• Шаг 2: Настройка API — Введите ключ OpenAI/Anthropic или выберите "Local Model" для использования ресурсов вашей видеокарты через WebGPU.
• Шаг 3: Создание пространства — Используйте команду в чате для создания новой рабочей области.

Create a new space called "My Dashboard" and add a crypto price tracker widget for BTC and ETH.

Результат: Агент создаст изолированную среду и мгновенно отрендерит JS-виджет, который будет обновляться в реальном времени.

2. Экономия токенов через YAML и Plain Text

Контекст: Автор отказался от стандартных Tool Calling и JSON-ответов, которые "съедают" огромное количество контекстного окна. Space Agent общается чистым текстом, а команды для браузера передаются через специальные токены-маркеры. Для передачи состояния среды используется YAML, который на 30-50% компактнее JSON.

Выгода: Создание и редактирование сложных виджетов обходится в среднем в 7,000 - 10,000 токенов против 30,000+ у стандартных агентов.

Как применить:

• Шаг 1: Проверка истории — Откройте вкладку "History", чтобы увидеть, как агент минимизирует промпты.
• Шаг 2: Редактирование кодом — Если нужно изменить виджет, просто скажите об этом. Агент не будет переписывать весь код, а использует функцию edit для замены конкретных строк.

In the analog clock widget, remove the background and make the hands neon green.

Результат: Агент отправит только измененный фрагмент кода, экономя ваши деньги на API.

3. Эффективный Web Browsing и обход ограничений

Контекст: Space Agent использует продвинутый парсинг DOM. Вместо того чтобы скармливать модели весь HTML код страницы, он транскрибирует дерево DOM в компактный список ссылок, текста и кнопок. Важно: данные о сайте живут в "transient space" (временной области) промпта, что не ломает кэширование (Context Caching) и позволяет агенту "видеть" сайт, не раздувая историю диалога навсегда.

Выгода: Возможность выполнять многошаговые задачи в вебе (поиск на GitHub, покупка товаров, сбор новостей) за копейки.

Как применить:

• Шаг 1: Навигация — Дайте команду открыть сайт.
• Шаг 2: Интерактив — Если на сайте есть капча или логин, вы можете вмешаться в процесс прямо в окне браузера, выполнить действие и сказать агенту: "Continue from here".
• Шаг 3: Извлечение данных — Попросите найти конкретную информацию.

Go to Google, search for "Agent Zero GitHub", find the oldest release version and tell me the date.

Результат: Агент сам прокликает ссылки, обработает куки и выдаст финальный ответ, потратив минимум токенов.

4. Система навыков (Skills) и саморазвитие агента

Контекст: Весь функционал агента (работа с файлами, браузером, виджетами) описан в .md файлах в виртуальной файловой системе. Это "навыки". Поскольку агент имеет доступ к своей файловой системе, он может сам писать новые навыки для себя или модифицировать существующие прямо во время работы.

Выгода: Вы можете расширять возможности агента без пересборки проекта и перезагрузки сервера.

Как применить:

• Шаг 1: Изучение навыков — Зайдите в папку skills/ через встроенный файловый менеджер.
• Шаг 2: Создание нового навыка — Попросите агента создать новый функционал.
• Шаг 3: Использование — Новый навык станет доступен агенту мгновенно после сохранения файла.

Create a new skill that allows you to fetch weather data from a public API and format it as a markdown table. Save it to skills/weather.md.

Результат: Агент пропишет логику взаимодействия с API, и теперь вы сможете просить его "Check weather in Tokyo" в любом диалоге.

5. Time Travel: Git-контроль состояния в реальном времени

Контекст: Каждая папка пользователя в Space Agent автоматически инициализируется как Git-репозиторий. Это позволяет реализовать функцию "Time Travel" (путешествие во времени). Если агент в процессе написания кода сломал интерфейс или удалил важные данные, вы можете откатить состояние всей системы на любой шаг назад.

Выгода: Безопасное экспериментирование. Вы никогда не потеряете работающую версию своего дашборда.

Как применить:

• Шаг 1: Откройте панель Time Travel — Нажмите на иконку часов в интерфейсе.
• Шаг 2: Выбор точки — Перемещайте ползунок, чтобы увидеть, как менялся интерфейс и файлы на каждом этапе диалога.
• Шаг 3: Восстановление — Остановитесь на нужной версии, и система продолжит работу с этого момента.
• Шаг 4: Admin Mode — Если интерфейс "лег" полностью, включите Admin Mode (разделённый экран), где левая часть статична и всегда позволяет сделать откат.

Результат: Полный контроль над итеративной разработкой без страха ошибок.

FAQ

В: Нужно ли устанавливать Node.js или Docker для запуска? О: Нет, для базового использования достаточно зайти на сайт. Если хотите хостить сами, есть легкий бэкенд на Node.js, который просто раздает статику и управляет правами доступа.

В: Могу ли я поделиться созданным дашбордом с другом? О: Да, в Space Agent есть функция "Share". Она генерирует ссылку, открыв которую, ваш друг попадет в изолированную песочницу с вашим виджетом. Это безопасно, так как код выполняется в его браузере и не имеет доступа к вашим ключам.

В: Какие модели лучше всего работают со Space Agent? О: Автор рекомендует Claude 3.5 Sonnet или GPT-4o для сложных задач. Для простых виджетов подойдут и более дешевые модели. Также поддерживаются локальные модели через WebGPU (требуется мощная видеокарта).

В: Сохраняются ли мои данные, если я закрою вкладку? О: Да, все изменения сохраняются в виртуальной файловой системе (IndexedDB браузера или на сервере, если вы залогинены). При обновлении страницы все виджеты останутся на своих местах.

В: Насколько это безопасно для моих API ключей? О: Ключи хранятся локально в вашем браузере (LocalStorage) и не передаются на бэкенд Space Agent. Запросы к LLM идут напрямую с вашего клиента.

Конспект создан на основе видео «Space Agent - The Next Generation of AI Agents» канала Franecki. Все права на оригинальный материал принадлежат авторам. Источник: https://youtu.be/CNRHxEZ8yqs