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

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

Требования

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

Процедура

Установите Genkit CLI, выполнив следующую команду:
```
npm i -g genkit
```
Если у вас еще нет приложения Next.js, которое вы хотите использовать, создайте его:
```
npx create-next-app@latest
```
Выберите TypeScript в качестве языка.
Инициализируйте Genkit в своем проекте Next.js:
```
cd your-nextjs-project
genkit init
```
- Подтвердите да , когда будет предложено автоматически настроить Genkit для Next.js.
- Выберите поставщика модели, которого вы хотите использовать.
Примите значения по умолчанию для остальных запросов. Инструмент genkit создаст несколько примеров исходных файлов, которые помогут вам приступить к разработке собственных потоков ИИ.
Сделайте учетные данные 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 это учетная запись серверной службы вашего приложения.
    На других платформах это удостоверение, которое вы установили на предыдущем шаге.
Единственный секрет, который вам нужно настроить для этого руководства, — это поставщик модели, но в целом вы должны сделать что-то подобное для каждой службы, которую использует ваш поток.

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

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

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

Вы можете получить доступ к этой функции как действию сервера. В качестве простого примера замените содержимое 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>
  );
}

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

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

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

Требования

Процедура

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

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