Next.js 앱에서 Genkit 사용

이 페이지에서는 Next.js 앱에서 Genkit 흐름을 서버 작업으로 사용하는 방법을 보여줍니다.

시작하기 전에

Genkit의 흐름 개념과 작성 방법을 숙지해야 합니다.

Next.js 프로젝트 만들기

생성형 AI 기능을 추가할 Next.js 프로젝트가 아직 없는 경우 이 페이지의 안내에 따라 프로젝트를 만들 수 있습니다.

npx create-next-app@latest

Genkit 종속 항목 설치

Genkit 프로젝트에서와 동일한 방식으로 Genkit 종속 항목을 Next.js 앱에 설치합니다.

  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 흐름 정의

Genkit 흐름을 포함할 새 파일을 Next.js 프로젝트에 만듭니다(예: 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 './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 서비스의 사용자 인증 정보를 사용할 수 있도록 설정해야 합니다.

Gemini(Google AI)

  1. Google AI를 해당 리전에서 사용할 수 있는지 확인합니다.

  2. Google AI Studio를 사용하는 Gemini API의 API 키를 생성합니다.

  3. GOOGLE_GENAI_API_KEY 환경 변수를 키로 설정합니다.

    export GOOGLE_GENAI_API_KEY=<your API key>

Gemini(Vertex AI)

  1. Cloud 콘솔에서 프로젝트에 대해 Vertex AI API를 사용 설정합니다.

  2. 몇 가지 환경 변수를 설정하고 gcloud 도구를 사용하여 애플리케이션 기본 사용자 인증 정보를 설정합니다.

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

그런 다음 평소와 같이 로컬에서 앱을 실행합니다.

npm run dev

Genkit의 모든 개발 도구는 계속 정상적으로 작동합니다. 예를 들어 개발자 UI에서 흐름을 로드하려면 다음 단계를 따르세요.

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

앱 배포

앱을 배포할 때는 사용하는 외부 서비스 (예: 선택한 모델 API 서비스)의 사용자 인증 정보를 배포된 앱에서 사용할 수 있는지 확인해야 합니다. 선택한 배포 플랫폼에 관한 정보는 다음 페이지를 참고하세요.