Firebase Studio включает веб-интерфейс, который позволяет быстро создавать прототипы и генерировать веб-приложения на основе ИИ с использованием многомодальных подсказок, включая естественный язык, изображения и инструменты рисования. Агент поддерживает приложения Next.js, а в будущем планируется поддержка других платформ и фреймворков.
Агент App Prototyping — это оптимизированный процесс разработки без кода, который использует генеративный ИИ для разработки, тестирования, итерации и публикации полнофункционального агентского веб-приложения. Вы описываете идею своего приложения на естественном языке с помощью необязательного изображения, а агент генерирует проект приложения, код и веб-превью. Чтобы помочь в разработке и публикации вашего полнофункционального приложения, Firebase Studio может автоматически предоставлять вам следующие услуги:
- Если ваше приложение использует ИИ: Firebase Studio добавляет API разработчика Gemini в ваше приложение, используя мощь потоков Genkit для работы с Gemini . Вы можете использовать свой собственный ключ API Gemini или позволить Firebase Studio предоставить вам проект Firebase и ключ API Gemini.
- Если вы хотите опубликовать свое приложение в Интернете: Firebase Studio создает проект и предоставляет быстрый способ публикации вашего приложения с помощью Firebase App Hosting .
Вы можете усовершенствовать приложение, используя естественный язык, изображения и инструменты рисования, редактировать код напрямую, откатывать изменения, публиковать приложение и отслеживать его производительность — все это из Firebase Studio .
Начать
Чтобы начать работу с App Prototyping agent , выполните следующие действия:
Войдите в свою учетную запись Google и откройте Firebase Studio .
В поле «Прототип приложения с ИИ» опишите идею вашего приложения естественным языком.
При желании добавьте изображение, которое будет сопровождать ваш запрос. Это может быть схема идеального пользовательского потока вашего приложения или цветовая схема, которой вы хотите, чтобы придерживалась Firebase Studio . Изображения могут быть размером не более 3 МБ.
Нажмите «Прототип с ИИ» .
Агент прототипирования приложений возвращает проект приложения, который содержит предлагаемое имя приложения, основные функции и рекомендации по стилю.
Просмотрите чертеж. Вы можете запросить у Gemini улучшения и изменения, а также напрямую отредактировать чертеж:
Нажмите «Настроить» и отредактируйте чертеж напрямую. Внесите изменения и нажмите «Сохранить» .
В поле Describe... на панели чата добавьте уточняющие вопросы и контекст. Вы также можете загрузить дополнительные изображения.
После одобрения проекта нажмите «Создать прототип этого приложения» .
Gemini генерирует код из чертежа и возвращает веб-версию для предварительного просмотра.
Если ваше приложение использует ИИ, вам будет предложено добавить или сгенерировать ключ API Gemini . Если вы нажмете «Автоматически сгенерировать» , Firebase Studio предоставит вам проект Firebase и ключ API Gemini .
После создания вашего первоначального приложения вы можете:
Обзор и взаимодействие с вашим приложением: После завершения генерации кода появится предварительный просмотр вашего приложения. Вы можете взаимодействовать с предварительным просмотром напрямую, чтобы протестировать его. Узнайте больше на Предварительный просмотр вашего приложения .
Тестируйте и итерируйте, используя естественный язык: тщательно тестируйте свое приложение и работайте с App Prototyping agent чтобы итерировать код и схему, пока вы не будете удовлетворены результатом.
В Prototyper mode, you can also use the following helpful features:
Нажмите
Annotate для рисования непосредственно в окне Preview. Используйте доступные инструменты для работы с фигурами, изображениями и текстом, а также дополнительную текстовую подсказку, чтобы визуально описать, что вы хотите, чтобы App Prototyping agent изменил.Нажмите
Выберите , чтобы выбрать определенный элемент и ввести инструкции для App Prototyping agent . Это позволяет быстро нацелиться на определенный значок, кнопку, фрагмент текста или другой элемент. При нажатии на изображение у вас также есть возможность поиска и выбора стокового изображения из Unsplash.
Отладка и итерация непосредственно в коде: нажмите
Переключитесь в режим Code , чтобы открыть представление Code , где вы можете видеть все файлы вашего приложения и изменять код напрямую. Вы можете переключиться обратно в Prototyper mode at any time.В режиме просмотра Code вы также можете использовать следующие полезные функции:
Встроенные функции отладки и создания отчетов Firebase Studio для проверки, отладки и аудита вашего приложения.
Помощь ИИ с использованием Gemini в Firebase либо встроена в ваш код, либо использует интерактивный чат (оба доступны по умолчанию). Интерактивный чат может диагностировать проблемы, предлагать решения и запускать инструменты, которые помогут быстрее исправить ваше приложение. Чтобы получить доступ к чату, щелкните spark Gemini в нижней части рабочей области.
Опубликуйте свое приложение с помощью Firebase App Hosting : нажмите «Опубликовать» , чтобы опубликовать свое приложение на App Hosting .
Мониторинг и оптимизация функций вашего приложения и ИИ: Мониторинг производительности и использования вашего веб-приложения с возможностью наблюдения в App Hosting и ваших генеративных потоков ИИ с помощью телеметрии Firebase в Genkit . Узнайте больше на странице Мониторинг веб-приложений .
Следующие шаги
- Разрабатывайте, публикуйте и контролируйте полнофункциональное веб-приложение с помощью Firebase Studio .
- Разрабатывайте приложения с использованием любого фреймворка с шаблоном или решением .