На этой странице описывается, как можно использовать режим сборки в Google AI Studio для быстрой сборки (или вибрирования кода) и развертывания приложений, которые тестируют новейшие возможности Gemini, такие как nano banana и Live API .
Начать
Начните кодирование Vibe в режиме сборки Google AI Studio. Вы можете начать разработку несколькими способами:
- Начните с подсказки : в режиме «Создание» введите описание объекта в поле ввода. Выберите «ИИ-чипы», чтобы добавить в подсказку специальные функции, например, генерацию изображений или данные Google Карт. Вы даже можете произнести свою мысль, используя кнопку преобразования речи в текст.
- Кнопка «Мне повезет» : если вам нужна творческая искра, нажмите кнопку «Мне повезет», и Gemini сгенерирует подсказку с идеей проекта, с которой вы сможете начать.
- Создайте ремикс проекта из Галереи : Откройте проект из Галереи приложений и выберите Копировать приложение .
После запуска приглашения вы увидите, как будут сгенерированы необходимый код и файлы, а справа от вас появится предварительный просмотр вашего приложения.
Что создано?
При запуске запроса AI Studio создаёт веб-приложение. По умолчанию оно создаёт веб-приложение на React, но вы можете выбрать создание приложения на Angular в меню «Настройки» . Сгенерированный код можно просмотреть, выбрав вкладку «Код» в правой панели предварительного просмотра.
Ниже приведены файлы, на которые следует обратить внимание:
- geminiService.ts : этот файл содержит основную логику вашего приложения, от создания подсказок до вызова API Gemini и анализа его ответов. Вы можете редактировать базовую подсказку в этом файле или изменять функциональность любого компонента напрямую или через интерактивное общение с Gemini в режиме сборки. Обратите внимание, что код в этом файле использует GenAI TS SDK для взаимодействия с API Gemini.
Продолжайте строить
После того как Google AI Studio сгенерирует начальный код для вашего веб-приложения, у вас будет два основных варианта продолжения работы над проектом: сборка в AI Studio или внешняя разработка .
Сборка в Google AI Studio
Вы можете продолжить доработку и расширение своего приложения непосредственно в среде Google AI Studio:
- Итерация с Gemini : используйте панель чата в режиме сборки , чтобы попросить Gemini внести изменения, добавить новые функции или изменить стиль. Например, можно попросить: «Добавить кнопку, которая оповещает пользователя» или «Изменить цветовую схему на сине-белую».
- Редактируйте код напрямую : откройте вкладку «Код» на панели предварительного просмотра, чтобы вносить изменения в режиме реального времени. Вы можете сохранить свой проект на GitHub, чтобы использовать систему контроля версий во время разработки.
Развиваться внешне
Для более сложных рабочих процессов вы можете экспортировать код и работать в предпочитаемой вами среде:
- Загрузите и разрабатывайте локально : экспортируйте сгенерированный код в виде ZIP-файла и импортируйте его в редактор кода. Это позволит вам использовать привычные инструменты, системы сборки и локальные методы управления версиями для продолжения разработки после завершения первоначального прототипа.
- Отправка на GitHub : интегрируйте код с существующими процессами разработки и развертывания, отправив его в репозиторий GitHub .
Ключевые особенности
Google AI Studio включает в себя несколько функций, которые делают процесс сборки интуитивно понятным и наглядным:
- Режим аннотаций : вместо написания кода для изменения внешнего вида приложения, режим аннотаций позволяет выделить любую часть пользовательского интерфейса приложения и описать желаемое изменение. Например, вы можете выбрать компонент и ввести: «Сделать эту кнопку синей» или «Анимировать это изображение, чтобы оно появлялось слева». При выборе «Добавить в чат » будет создан запрос со снимком экрана аннотируемого приложения.
- Поделитесь своим приложением : вы можете делиться своими творениями с другими, чтобы совместно работать или демонстрировать свои работы.
- Галерея приложений : Галерея приложений представляет собой визуальную библиотеку идей для проектов. Вы можете ознакомиться с возможностями Gemini, мгновенно просмотреть приложения и адаптировать их под себя.
Разверните или архивируйте свое приложение
Когда приложение будет готово, вы сможете развернуть его прямо из AI Studio. Возможные варианты развёртывания:
- Google Cloud Run : разверните своё приложение как масштабируемый сервис. Обратите внимание, что стоимость Google Cloud Run может зависеть от объёма использования.
- GitHub : экспортируйте свой проект в репозиторий GitHub, чтобы интегрировать его в существующие рабочие процессы разработки и развертывания.
Ограничения
В этом разделе описаны важные ограничения при использовании режима сборки в Google AI Studio.
Безопасность и раскрытие API-ключа
- Код общих приложений виден всем, кто их просматривает. Никогда не используйте настоящий ключ API непосредственно в коде приложения.
- По умолчанию приложения используют заглушку (например, process.env.GEMINI_API_KEY) для API-ключа. Когда пользователь запускает ваше общее приложение в AI Studio, AI Studio выступает в качестве прокси-сервера, заменяя заглушку API-ключом конечного пользователя, гарантируя конфиденциальность вашего ключа.
Видимость и совместное использование приложения
- Приложения хранятся в Google Диске и наследуют его модель разрешений, то есть по умолчанию они являются конфиденциальными.
- Разрешения на общий доступ: когда вы делитесь приложением с другими пользователями:
- Пользователи с общим доступом могут увидеть код и создать копию приложения для собственного использования.
- При наличии разрешения на редактирование общие пользователи могут изменять код приложения.
Развертывание вне AI Studio
- Хотя вы можете развернуть свое приложение в Cloud Run по общедоступному URL-адресу, эта настройка будет использовать ваш ключ API для всех вызовов API Gemini пользователей.
- Приложения JavaScript запускаются на стороне клиента, поэтому убедитесь, что API-ключи имеют лишь минимальный доступ, чтобы предотвратить утечки данных или несанкционированное использование. Например, другие хранилища поиска файлов из того же проекта могут быть доступны пользователям через этот механизм.
- Безопасное внешнее развертывание: для безопасного запуска приложения вне AI Studio (например, после загрузки ZIP-файла) необходимо перенести логику, использующую ключ API, в серверный компонент, чтобы предотвратить раскрытие ключа конечным пользователям. Это не требуется при развертывании с помощью Cloud Run.
- Предупреждение о раскрытии ключа: настоятельно не рекомендуется простая замена заполнителя реальным ключом API в клиентской среде, поскольку ключ станет виден любому пользователю.
Поддержка инструментов и функций
- Импорт локальной разработки: в настоящее время невозможно разрабатывать приложения локально с помощью внешних инструментов и импортировать их в AI Studio.
Что дальше?
- Посмотрите, что создали другие, и найдите вдохновение, ремикшировав существующий проект в Галерее приложений .
- Ознакомьтесь с плейлистом YouTube , где собрана коллекция обучающих программ по кодированию в AI Studio Vibe, которые помогут вам приступить к работе.