Внести вклад
Разработка с ИИ

Создавайте с ИИ

Создавайте приложения на базе ИИ. Разрабатывайте быстрее с помощью ИИ.

ПОЛЕЗНО: Хотите начать разработку в любимой IDE с поддержкой ИИ?
Ознакомьтесь с нашими правилами промптов и лучшими практиками.

Генеративный ИИ (GenAI) на больших языковых моделях (LLM) позволяет создавать сложные и увлекательные пользовательские сценарии: персонализированный контент, умные рекомендации, генерацию и понимание медиа, суммирование информации и динамическую функциональность.

Раньше такие возможности требовали глубокой экспертизы и значительных инженерных усилий. Новые продукты и SDK снижают порог входа. Angular хорошо подходит для интеграции ИИ в веб-приложение благодаря:

  • надёжным API шаблонов, которые позволяют создавать динамичные, аккуратно составленные UI из сгенерированного контента;
  • сильной архитектуре на сигналах, рассчитанной на динамическое управление данными и состоянием;
  • бесшовной интеграции Angular с ИИ SDK и API.

Это руководство показывает, как с помощью Genkit, Firebase AI Logic и Gemini API уже сегодня наполнить Angular-приложения ИИ. Материал поможет быстро стартовать: объясняет, с чего начать интеграцию ИИ в Angular, и делится ресурсами — стартовыми наборами, примерами кода и рецептами типовых сценариев.

Для начала достаточно базового понимания Angular. Новичок? Попробуйте руководство по основам или вводные туториалы.

ПРИМЕЧАНИЕ: На этой странице показаны интеграции и примеры с продуктами Google AI, но такие инструменты, как Genkit, не привязаны к конкретной модели и позволяют выбрать свою. Во многих случаях примеры и образцы кода применимы и к сторонним решениям.

Начало работы

Создание приложений на базе ИИ — новая и быстро развивающаяся область. Бывает непросто решить, с чего начать и какие технологии выбрать. Ниже — три варианта:

  1. Genkit даёт выбор поддерживаемой модели и интерфейса с единым API для full-stack приложений. Подходит, когда нужна сложная серверная ИИ-логика, например персонализированные рекомендации.

  2. Firebase AI Logic предоставляет безопасный клиентский API к моделям Google для чисто клиентских или мобильных приложений. Лучше всего для интерактивных ИИ-функций прямо в браузере: анализ текста в реальном времени или простые чат-боты.

  3. Gemini API позволяет строить приложение, напрямую используя методы и возможности API — удобно для full-stack. Подходит, когда нужен прямой контроль над моделями: кастомная генерация изображений или глубокая обработка данных.

Создавайте приложения на базе ИИ с Genkit и Angular

Genkit — открытый набор инструментов для ИИ-функций в веб- и мобильных приложениях. Он предлагает единый интерфейс для моделей Google, OpenAI, Anthropic, Ollama и других, чтобы вы могли выбрать подходящие. Как серверное решение Genkit требует поддерживаемой серверной среды, например node-сервера. Full-stack приложение на Angular SSR даёт стартовый серверный код.

Примеры работы с Genkit и Angular:

Создавайте приложения на базе ИИ с Firebase AI Logic и Angular

Firebase AI Logic даёт безопасный способ обращаться к Vertex AI Gemini API или Imagen API прямо из веб- и мобильных приложений. Это удобно для Angular-разработчиков: приложение может быть full-stack или только клиентским. Для чисто клиентского приложения Firebase AI Logic — хороший выбор для внедрения ИИ.

Пример работы с Firebase AI Logic и Angular:

Создавайте приложения на базе ИИ с Gemini API и Angular

Gemini API даёт доступ к современным моделям Google с поддержкой аудио, изображений, видео и текста. Модели оптимизированы под разные сценарии — подробнее на сайте документации Gemini API.

  • AI Text Editor Angular app template — шаблон полноценного текстового редактора с ИИ: уточнение, расширение и формализация текста. Хорошая точка входа для вызовов Gemini API по HTTP.

  • AI Chatbot app template — шаблон с интерфейсом чат-бота, общающегося с Gemini API по HTTP.

Лучшие практики

Подключение к провайдерам моделей и безопасность API-учётных данных

При подключении к провайдерам моделей важно хранить секреты API в безопасности. Никогда не помещайте API-ключ в файл, который попадает на клиент, например environments.ts.

Архитектура приложения определяет, какие ИИ API и инструменты выбирать — в зависимости от того, клиентское оно или серверное. Инструменты вроде Firebase AI Logic дают безопасное подключение к API моделей из клиентского кода. Если нужен другой API или провайдер, рассмотрите proxy-сервер или даже Cloud Functions for Firebase как прокси, чтобы не раскрывать ключи.

Пример клиентского подключения: репозиторий Firebase AI Logic Angular example.

Для серверных подключений к API моделей, требующим ключей, предпочтительнее secrets manager или переменные окружения, а не environments.ts. Следуйте стандартным практикам защиты ключей и учётных данных. Firebase теперь предоставляет новый secrets manager в обновлениях Firebase App Hosting. Подробнее — в официальной документации.

Пример серверного подключения в full-stack приложении: репозиторий Angular AI Example (Genkit and Angular Story Generator).

Используйте Tool Calling для расширения приложений

Если нужны agentic-сценарии, где агенты действуют и используют инструменты для решения задач по промптам, применяйте «tool calling». Tool calling (также function calling) позволяет LLM делать запросы обратно в приложение, которое его вызвало. Вы как разработчик определяете доступные инструменты и контролируете, как и когда они вызываются.

Tool calling расширяет веб-приложения дальше формата «вопрос–ответ» чат-бота. Модель можно наделить возможностью запрашивать вызовы функций через function calling API провайдера. Доступные инструменты выполняют более сложные действия в контексте приложения.

В e-commerce примере из репозитория Angular examples LLM запрашивает вызовы функций инвентаря, чтобы получить контекст для более сложных задач — например, расчёта стоимости группы товаров. Объём доступного API и решение, вызывать ли запрошенную LLM функцию, остаются за вами. Вы контролируете поток выполнения. Можно открыть отдельные функции сервиса, но не все.

Обработка недетерминированных ответов

Поскольку модели могут возвращать недетерминированные результаты, приложения стоит проектировать с учётом этого. Несколько стратегий:

  • Настраивайте промпты и параметры модели (например, temperature) для большей или меньшей детерминированности. Подробнее — в разделе о стратегиях промптинга на ai.google.dev.
  • Используйте стратегию «human in the loop»: человек проверяет выводы перед продолжением сценария. Стройте workflow так, чтобы операторы (люди или другие модели) подтверждали выводы и ключевые решения.
  • Применяйте tool (или function) calling и ограничения схемы, чтобы направлять и ограничивать ответы модели предопределёнными форматами и повышать предсказуемость.

Даже с этими приёмами в дизайн приложения стоит закладывать разумные запасные варианты. Следуйте стандартам устойчивости приложений. Например, недопустимо, чтобы приложение падало, если ресурс или API недоступны. В таком случае пользователю показывают сообщение об ошибке и, при необходимости, варианты следующих шагов. Для приложений на базе ИИ нужны те же соображения. Убеждайтесь, что ответ соответствует ожидаемому, и предусматривайте «мягкую посадку» через graceful degradation, если это не так. То же относится к сбоям API провайдеров LLM.

Пример: провайдер LLM не отвечает. Возможная стратегия:

  • сохранить ответ пользователя для повторной попытки (сейчас или позже);
  • сообщить пользователю о сбое уместным сообщением без раскрытия чувствительной информации;
  • возобновить диалог позже, когда сервисы снова доступны.

Следующие шаги

О промптах для LLM и настройке ИИ-IDE см. следующие руководства: