Firebase Genkit в приложениях Next.js

Вы можете использовать потоки Firebase Genkit в качестве действий сервера в своих приложениях Next.js. Оставшаяся часть этой страницы покажет вам, как это сделать.

Требования

Node.js 20 или новее.

Процедура

  1. Установите Genkit CLI, выполнив следующую команду:

    npm i -g genkit

  2. Если у вас еще нет приложения Next.js, которое вы хотите использовать, создайте его:

    npx create-next-app@latest

    Выберите TypeScript в качестве языка.

  3. Инициализируйте Genkit в своем проекте Next.js:

    cd your-nextjs-project
genkit init
    • Подтвердите да , когда будет предложено автоматически настроить Genkit для Next.js.
    • Выберите поставщика модели, которого вы хотите использовать.

    Примите значения по умолчанию для остальных запросов. Инструмент genkit создаст несколько примеров исходных файлов, которые помогут вам приступить к разработке собственных потоков ИИ.

  4. Сделайте учетные данные API доступными для развернутой функции. Выполните одно из следующих действий в зависимости от выбранного вами поставщика модели:

    Близнецы (ИИ Google)

    1. Убедитесь, что Google AI доступен в вашем регионе .

    2. Создайте ключ API для Gemini API с помощью Google AI Studio.

    3. Чтобы запустить поток локально, как на следующем шаге, установите для переменной среды GOOGLE_GENAI_API_KEY значение вашего ключа:

      export GOOGLE_GENAI_API_KEY=<your API key>

      При развертывании приложения вам необходимо будет сделать этот ключ доступным в развернутой среде; точные шаги зависят от платформы.

    Близнецы (Vertex AI)

    1. В облачной консоли включите API Vertex AI для своего проекта.

    2. Чтобы запустить поток локально, как на следующем шаге, установите некоторые дополнительные переменные среды и используйте инструмент gcloud для настройки учетных данных приложения по умолчанию:

      export GCLOUD_PROJECT=<your project ID>
export GCLOUD_LOCATION=us-central1
gcloud auth application-default login

    3. При развертывании приложения вам необходимо будет сделать следующее:

      1. Установите переменные GCLOUD_PROJECT и GCLOUD_LOCATION в развернутой среде; точные шаги зависят от платформы.

      2. Если вы не выполняете развертывание в среде Firebase или Google Cloud, настройте авторизацию для Vertex AI API, используя Workload Identity Federation (рекомендуется) или ключ сервисного аккаунта .

      3. На странице IAM консоли Google Cloud назначьте роль пользователя Vertex AI ( roles/aiplatform.user ) удостоверению, которое вы используете для вызова API Vertex AI.

        • В Cloud Functions и Cloud Run это учетная запись вычислительной службы по умолчанию .
        • На хостинге приложений Firebase это учетная запись серверной службы вашего приложения.
        • На других платформах это удостоверение, которое вы установили на предыдущем шаге.

    Единственный секрет, который вам нужно настроить для этого руководства, — это поставщик модели, но в целом вы должны сделать что-то подобное для каждой службы, которую использует ваш поток.

  5. Если вы разрешили команде genkit init генерировать образец потока, она создаст файл genkit.ts , в котором есть поток Genkit, который вы можете использовать в качестве действия сервера. Попробуйте:

    1. Сначала внесите небольшое изменение в функцию callMenuSuggestionFlow :

      export async function callMenuSuggestionFlow(theme: string) {
  const flowResponse = await runFlow(menuSuggestionFlow, theme);
  console.log(flowResponse);
  return flowResponse;
}

    2. Вы можете получить доступ к этой функции как действию сервера. В качестве простого примера замените содержимое page.tsx следующим:

      'use client';

import { callMenuSuggestionFlow } from '@/app/genkit';
import { useState } from 'react';

export default function Home() {
  const [menuItem, setMenu] = useState<string>('');

  async function getMenuItem(formData: FormData) {
    const theme = formData.get('theme')?.toString() ?? '';
    const suggestion = await callMenuSuggestionFlow(theme);
    setMenu(suggestion);
  }

  return (
    <main>
      <form action={getMenuItem}>
        <label>
          Suggest a menu item for a restaurant with this theme:{' '}
        </label>
        <input type="text" name="theme" />
        <button type="submit">Generate</button>
      </form>
      <br />
      <pre>{menuItem}</pre>
    </main>
  );
}

    3. Запустите его в среде разработки Next.js:

      npm run dev

  6. Вы также можете запускать и исследовать свои потоки в пользовательском интерфейсе разработчика Genkit:

    genkit start