Создайте агента поддержки клиентов на основе искусственного интеллекта с помощью Firebase AI Logic.

1. Введение

В этом практическом занятии вы добавите интеллектуальный виджет чата поддержки клиентов в интернет-магазин товаров для активного отдыха под названием Rugged Terrain Guide . Вы будете использовать Firebase AI Logic для создания этого агента и узнаете, как настроить шаблон запроса на стороне сервера ( product-agent ), который обрабатывает профиль ИИ, строгие правила ограничения бюджета и динамически использует каталог товаров в качестве контекста.

Что вы будете делать:

  • Получите стартовый код для веб-приложения этого семинара.
  • Создайте проект Firebase.
  • Настройте и инициализируйте сервисы Firebase (например, Firebase AI Logic) в веб-приложении.
  • Настройте шаблон запроса на стороне сервера в консоли Firebase.
  • Доступ к шаблону осуществляется путем вызова сервиса генеративного ИИ из интерфейса на TypeScript, подобного React.

Что вам понадобится:

  • Веб-браузер, например Chrome .
  • Базовые знания TypeScript и Node.js.
  • Среда разработки или текстовый редактор на ваш выбор. Antigravity — хороший выбор.

2. Получите стартовый код

  1. В терминале клонируйте стартовый репозиторий: 
    git clone https://github.com/GoogleCloudPlatform/devrel-demos.git
  2. Перейдите в каталог с кодом и установите зависимости: 
    cd devrel-demos/codelabs/firebase-server-prompt-templates-codelab
npm install

3. Создайте проект Firebase.

Создайте проект Firebase.

  1. Войдите в консоль Firebase, используя свою учетную запись Google.
  2. Нажмите кнопку, чтобы создать новый проект, а затем введите название проекта (например, rugged-terrain-ai ).
  3. Нажмите «Продолжить» .
  4. Если появится запрос, ознакомьтесь с условиями использования Firebase и примите их, после чего нажмите «Продолжить» .
  5. (Необязательно) Включите помощь ИИ в консоли Firebase (в Firebase она называется "Gemini").
  6. Для этого практического занятия вам не понадобится Google Analytics, поэтому отключите эту опцию.
  7. Нажмите «Создать проект» , дождитесь завершения подготовки проекта, а затем нажмите «Продолжить» .

Обновите свой тарифный план Firebase.

Для использования сервисов Firebase в этом практическом задании ваш проект Firebase должен быть подключен к тарифному плану с оплатой по мере использования (Blaze) , то есть он должен быть связан с учетной записью Cloud Billing .

Чтобы перейти на тарифный план Blaze для вашего проекта, выполните следующие шаги:

  1. В консоли Firebase выберите вариант обновления вашего тарифного плана .
  2. Выберите тарифный план Blaze. Следуйте инструкциям на экране, чтобы связать учетную запись Cloud Billing с вашим проектом.
    Если в рамках этого обновления вам потребовалось создать учетную запись Cloud Billing, возможно, вам нужно будет вернуться к процессу обновления в консоли Firebase, чтобы завершить обновление.

4. Настройте службы Firebase и подключите ваше приложение.

Для выполнения этого практического задания вам необходимо настроить Cloud Storage for Firebase и Firebase AI Logic в вашем проекте Firebase. Вам также необходимо связать исходный код вашего приложения с вашим проектом Firebase.

Настройка облачного хранилища для Firebase

В этом практическом занятии для хранения описаний товаров используется Cloud Storage for Firebase.

  1. В консоли Firebase перейдите в раздел «Базы данных и хранилище» > «Хранилище» .
  2. Нажмите « Начать» .
  3. Выберите местоположение для вашего хранилища по умолчанию.
    Для сегментов US-WEST1 , US-CENTRAL1 и US-EAST1 доступен тариф "Всегда бесплатно" от Google Cloud Storage. Для сегментов во всех остальных регионах действуют тарифы и правила использования Google Cloud Storage .
  4. Нажмите «Производственный режим» . В следующих шагах вы обновите эти правила безопасности, чтобы они соответствовали условиям данной практической работы.
  5. Нажмите «Создать» .
  6. Обновите правила безопасности:
    1. После создания хранилища перейдите на вкладку «Правила» .
    2. Скопируйте и вставьте следующие правила: 
      rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /products.txt {
      allow read;
    }
  }
}
    3. Нажмите «Опубликовать» .
  7. Загрузите описания товаров из стартового кода:
    1. Для выбора хранилища перейдите на вкладку «Файлы» .
    2. Нажмите «Загрузить файл» , а затем загрузите файл products.txt из стартового кода. Этот файл находится по адресу: src/data/products.txt .

Настройка логики Firebase AI

Firebase AI Logic — это основной сервис Firebase, который вы будете использовать в этом практическом занятии.

  1. В консоли Firebase перейдите в раздел AI Services > AI Logic .
  2. Нажмите « Начать» .
  3. На карточке API Vertex AI Gemini нажмите « Начать работу с этим API» и следуйте инструкциям на экране. Этот процесс активирует необходимые API для использования Firebase AI Logic с API Vertex AI Gemini.
  4. (Необязательно) Включите мониторинг с помощью ИИ , чтобы отслеживать различные метрики и использование на уровне приложения и получать полную картину ваших запросов с помощью Firebase AI Logic.

Подключите свой код к проекту Firebase.

В процессе настройки Firebase AI Logic вам будет предложено создать веб-приложение Firebase и добавить конфигурацию в исходный код.

  1. В процессе настройки Firebase AI Logic при появлении соответствующего запроса нажмите « Веб» ( Значок для регистрации нового веб-приложения.
  2. Назовите приложение (например, Rugged Web ).
  3. Скопируйте объект firebaseConfig из инструкций по настройке.

Далее обновите стартовый код:

  1. В редакторе кода откройте src/firebase.ts .
  2. Замените существующий firebaseConfig на тот, который вы скопировали из консоли Firebase.

Ваш файл должен выглядеть примерно так:

import { getAI, getTemplateGenerativeModel, VertexAIBackend } from "firebase/ai";
import { initializeApp } from "firebase/app";

// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT_ID.firebasestorage.app",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
};

// Initialize Firebase
export const app = initializeApp(firebaseConfig);

const ai = getAI(app, { backend: new VertexAIBackend() });

5. Создайте шаблон запроса на стороне сервера.

Вместо того чтобы жестко прописывать сложные подсказки ИИ в клиентском приложении, вы будете использовать синтаксис Dotprompt для безопасного управления инструкциями на сервере.

Это предотвращает ознакомление конечных пользователей с секретными правилами «бюджета умиротворения».

  1. В консоли Firebase перейдите в раздел Vertex AI или Prompt Management .
  2. Создайте новый шаблон запроса и назовите его product-agent .
  3. Установите модель на gemini-2.5-flash .
  4. Задайте входную схему точно следующим образом: 
    input:
  schema:
    query:
      type: string
      description: the customers ask of the robot
    productId?:
      type: string
      description: the product the customer is looking at right now
    history?:
      type: array
      description: list of previous history between the user and system
      items:
        type: object
        required: [role, contents]
        properties:
          role:
            type: string
          contents:
            type: string
  5. Скопируйте содержимое файла agent-product.prompt из корневого каталога в поле «Подсказка» и в поле «Необязательные системные инструкции» . Это позволит надежно указать модели, как вести себя в качестве «надежного оператора» и внедрять каталог продукции.
  6. В консоли Firebase сохраните и опубликуйте шаблон product-agent .

6. Вызовите модель ИИ.

Теперь, когда шаблон надежно определен на сервере, вам нужно просто вызвать его из интерфейса вашего приложения.

  1. В редакторе кода вернитесь к src/firebase.ts .
  2. Ниже, после инициализации, используйте getTemplateGenerativeModel для подключения к шаблону: 
    const model = getTemplateGenerativeModel(ai);

export const callCustomerSupportModel = async (query: string, productId?: string, history?: { role: string, contents: string }[]) => {
    // Generate content using the published 'product-agent' template
    const result = await model.generateContent('product-agent', {
        query,
        productId,
        history,
    });
    return result.response.text();
}

7. Защитите агента с помощью Firebase App Check.

Модели ИИ обладают мощными возможностями, но ими также можно злоупотреблять, если общедоступные конечные точки остаются незащищенными. Всегда используйте Firebase App Check, чтобы убедиться, что только ваше веб-приложение может вызывать генеративную модель Vertex AI, блокируя ботов и неавторизованных клиентов.

  1. В консоли Firebase перейдите в раздел Build > App Check .
  2. Перейдите на вкладку «Приложения» , разверните ваше веб-приложение ( Rugged Web ) и выберите поставщика reCAPTCHA Enterprise .
  3. Выберите «Создать новый ключ reCAPTCHA Enterprise» и заполните поля запроса:
    • Имя : Codelab Key
    • Домены : добавьте localhost и 127.0.0.1 , чтобы вашему локальному серверу Vite было разрешено отправлять запросы.
  4. Нажмите «Сохранить» , чтобы зарегистрировать приложение.
  5. После регистрации в консоли Firebase отобразится ваш ключ сайта . Скопируйте эту строку.
  6. В редакторе кода снова откройте src/firebase.ts .
  7. В самом начале добавьте следующие импорты: 
    import { initializeAppCheck, ReCaptchaEnterpriseProvider } from "firebase/app-check";
  8. Добавьте инициализацию App Check сразу после вызова initializeApp(firebaseConfig) и вставьте скопированный вами ключ сайта: 
    // Initialize App Check
const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaEnterpriseProvider('YOUR_RECAPTCHA_ENTERPRISE_SITE_KEY'),
  useLimitedUseAppCheckTokens: true
});
  9. Обновите вызов функции getAI() , чтобы использовать эти токены. Внесите следующее изменение:
    const ai = getAI(app, { backend: new VertexAIBackend(), useLimitedUseAppCheckTokens: true });
    Установив значение параметра useLimitedUseAppCheckTokens равным true, вы гарантируете применение кратковременных токенов, что поможет ограничить злоупотребления в вашей серверной части.

8. Запустите приложение

После настройки Firebase и подключения виджета чата поддержки, можно запускать приложение.

  1. В терминале запустите сервер разработки Vite: 
    npm run dev
  2. Откройте указанный локальный URL (обычно http://localhost:5173/ ).
  3. Нажмите плавающую кнопку тактической поддержки (FAB) в правом нижнем углу.
  4. Попробуйте задать вопросы о товарах, например:
    • "Мне нужна непромокаемая куртка".
    • «Моя шапка для минусовых температур бракованная, что мне делать?»
    • Продолжайте оказывать сопротивление, чтобы запустить логику «бюджета умиротворения» ИИ!

9. (Необязательно) Очистка ресурсов из Codelab.

Чтобы избежать возможных списаний средств с вашего счета Google Cloud Billing, вы можете удалить ресурсы, созданные в ходе этого практического занятия.

  1. Перейдите в консоль Firebase .
  2. Выберите проект rugged-terrain-ai .
  3. Перейдите в настройки проекта (значок шестеренки).
  4. Прокрутите страницу вниз и нажмите «Удалить проект» .
  5. Следуйте инструкциям на экране, чтобы подтвердить удаление.

10. Поздравляем!

🎊 Миссия выполнена! Вы успешно интегрировали мощный, основанный на шаблонах, агент поддержки клиентов на основе искусственного интеллекта.

Чего вы достигли:

  • Инициализировали Firebase и бэкэнд Vertex AI в клиентском приложении.
  • Настроен защищенный шаблон запроса на стороне сервера с использованием Handlebars и строгих схем ввода для определения сложного поведения агента.
  • Динамически вызываемый LLM обеспечивает безопасную передачу истории чата и контекстных идентификаторов продуктов без раскрытия внутренней логики запросов клиенту.

Что дальше?

  • Firebase App Check : Защитите свои конечные точки ИИ от злоупотреблений.