Интерактивный калькулятор в поиске: как Gemini 3 создаёт UI на лету

От статичного ответа к интерактивному приложению

Представьте, что вы ищете в Google «рассчитать ипотеку на 5 миллионов рублей». Вместо привычного списка ссылок и текстового ответа, прямо в результатах поиска появляется полноценный калькулятор с ползунками для срока кредита, процентной ставки и интерактивным графиком платежей. Это не фантастика, а реальность, которую приносит Gemini 3 в режиме AI Mode. Мы наблюдаем переход от генерации текста к генеративному UI — способности модели создавать функциональные пользовательские интерфейсы на лету.

Что такое «агентное кодирование» и как оно работает?

В основе этой магии лежит технология агентного кодирования (agentic coding). В отличие от простого вывода фрагмента кода, модель действует как автономный агент, который:

1. Анализирует интент пользователя: Понимает, что запрос требует не информации, а инструмента для вычислений или визуализации.
2. Выбирает технологию: Решает, какой тип интерфейса подходит лучше всего (калькулятор, форма, график, диаграмма).
3. Генерирует код: Пишет чистый, рабочий код на HTML, CSS и JavaScript, часто с использованием библиотек вроде Chart.js для графиков.
4. Внедряет и исполняет: Встраивает этот код в ответ поисковой системы, который браузер пользователя может немедленно отрендерить и выполнить.

Техническая кухня: как Gemini строит интерфейс

Рассмотрим на примере того же ипотечного калькулятора. Получив запрос, Gemini 3 в фоновом режиме генерирует нечто подобное:

<div class="mortgage-calculator">
  <h3>Калькулятор ипотеки</h3>
  <div>
    <label>Сумма кредита (руб):</label>
    <input type="range" id="amount" min="1000000" max="20000000" value="5000000">
    <span id="amountValue">5,000,000</span>
  </div>
  <!-- ... другие поля ... -->
  <button onclick="calculate()">Рассчитать</button>
  <canvas id="chart"></canvas>
</div>
<script>
  // Динамически подключаем библиотеку для графиков
  const script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
  document.head.appendChild(script);

  function calculate() {
    // Логика расчёта аннуитетного платежа
    const amount = document.getElementById('amount').value;
    const rate = document.getElementById('rate').value / 100 / 12;
    const term = document.getElementById('term').value * 12;
    const payment = amount * (rate * Math.pow(1 + rate, term)) / (Math.pow(1 + rate, term) - 1);
    // Обновление графика...
  }
</script>

Ключевое здесь — контекстная мультимодальность. Модель понимает, что для ответа на финансовый запрос нужны не только цифры, но и визуализация, и элементы управления. Она комбинирует генерацию текста (пояснения), кода (функциональность) и структурных элементов (UI).

Сравнение с другими подходами

Безопасность и ограничения генеративного UI

Само собой, запуск произвольного кода, сгенерированного ИИ, в окне браузера пользователя — это огромный риск. Google решила эту проблему через строгую санитизацию (очистку) кода и выполнение в изолированной песочнице (sandbox).

• Запрещённые операции: Код не может делать сетевые запросы, получать доступ к cookies, localStorage или DOM за пределами своего контейнера.
• Белые списки библиотек: Разрешены только проверенные, безопасные CDN-библиотеки для графиков и визуализаций.
• Валидация логики: Перед исполнением код анализируется на наличие потенциально опасных паттернов.

Будущее: от калькуляторов к полноценным агентам

Технология, демонстрируемая Gemini 3, — лишь верхушка айсберга. В перспективе это открывает путь к:

1. Персонализированным рабочим пространствам: Запрос «спланируй мне бюджет на отпуск» создаст таблицу расходов с подключением к API авиабилетов и отелей (с разрешения пользователя).
2. Образовательным симуляторам: Вопрос по физике будет сопровождаться интерактивной моделью, где можно менять параметры и видеть результат.
3. Локальным сложным вычислениям: Как локальный запуск Claude Code позволяет обходить ограничения, так и генеративный UI может работать оффлайн на мощных edge-устройствах.

Однако для этого нужны не только продвинутые модели, но и новая инфраструктура. Скорость генерации становится критической. Пользователь не будет ждать 10 секунд, пока создастся интерфейс. Здесь в игру вступают такие проекты, как Z.AI, бьющий рекорды скорости инференса.

Вывод: UI как язык общения с ИИ

Появление генеративного UI в поиске Google — это не просто фича, а смена парадигмы. Интерфейс перестаёт быть статичной оболочкой, созданной человеком заранее. Он становится динамическим языком, на котором ИИ общается с пользователем, подбирая оптимальную «форму» для каждого ответа. Это шаг к тому, чтобы поисковая система превратилась из информационного справочника в универсального решателя задач, способного не только найти ответ, но и предоставить инструмент для его применения. И пока одни компании работают над такими инновациями, другие сталкиваются с фундаментальными проблемами инфраструктуры, как в случае с массовым фейлом беспилотников Waymo. Будущее за гибкими, адаптивными и безопасными системами, и Gemini 3 показывает первый уверенный шаг в этом направлении.