Используйте Genkit в приложении Next.js

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

Прежде чем начать

Вы должны быть знакомы с концепцией потоков Genkit и тем, как их писать.

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

Если у вас еще нет проекта Next.js, в который вы хотите добавить функции генеративного ИИ, вы можете создать его, чтобы следить за этой страницей:

npx create-next-app@latest

Установите зависимости Genkit

Установите зависимости Genkit в свое приложение Next.js так же, как и для любого проекта Genkit:

1. Установите основную библиотеку Genkit:

   npm i --save genkit

2. Установите хотя бы один плагин модели.

   Например, чтобы использовать Google AI:

   npm i --save @genkit-ai/googleai

   Или использовать Vertex AI:

   npm i --save @genkit-ai/vertexai

3. Если вы не установили Genkit CLI глобально, вы можете установить его как зависимость разработки. Также рекомендуется использовать инструмент tsx, поскольку он делает тестирование вашего кода более удобным. Однако обе эти зависимости не являются обязательными.

   npm i --save-dev genkit-cli tsx

Определить потоки Genkit

Создайте новый файл в проекте Next.js, который будет содержать потоки Genkit: например, src/app/genkit.ts . Этот файл может содержать ваши потоки без изменений; однако, поскольку вы можете запускать потоки только с серверной части сервера, вам необходимо добавить директиву 'use server' в начало файла.

Например:

'use server';

import { gemini15Flash, googleAI } from "@genkit-ai/googleai";
import { genkit, z } from "genkit";

const ai = genkit({
  plugins: [googleAI()],
  model: gemini15Flash,
});

export const menuSuggestionFlow = ai.defineFlow(
  {
    name: "menuSuggestionFlow",
    inputSchema: z.string(),
    outputSchema: z.string(),
  },
  async (restaurantTheme) => {
    const { text } = await ai.generate({
      model: gemini15Flash,
      prompt: `Invent a menu item for a ${restaurantTheme} themed restaurant.`,
    });
    return text;
  }
);

Вызовите свои потоки

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

Например:

'use client';

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

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

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

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

Протестируйте свое приложение локально

Если вы хотите запустить свое приложение локально, вам необходимо предоставить учетные данные для выбранной вами службы 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

Затем запустите приложение локально, как обычно:

npm run dev

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

npx genkit start -- npx tsx --watch src/app/genkit.ts

Разверните свое приложение

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

• Облачные функции для Firebase
• Облачный бег
• Другие платформы Node.js