Next.js 앱의 Firebase Genkit

Firebase Genkit 흐름을 Next.js 앱의 서버 작업으로 사용할 수 있습니다. 이 페이지의 나머지 부분에서 방법을 확인하세요.

요구사항

Node.js 20 ��상

절차

  1. 다음 명령어를 실행하여 Genkit CLI를 설치합니다.

    npm i -g genkit

  2. 사용할 Next.js 앱이 아직 없는 경우 다음과 같이 만듭니다.

    npx create-next-app@latest

    TypeScript를 원하는 언어로 선택합니다.

  3. Next.js 프로젝트에서 Genkit를 초기화합니다.

    cd your-nextjs-project
genkit init
    • Next.js용 Genkit를 자동으로 구성할지 묻는 메시지가 표시되면 예를 확인합니다.
    • 사용할 모델 제공업체를 선택합니다.

    나머지 프롬프트는 기본값을 수락합니다. genkit 도구는 자체 AI 흐름 개발을 시작하는 데 도움이 되는 몇 가지 샘플 소스 파일을 살펴봅니다.

  4. 배포된 함수에 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

    3. 앱을 배포할 때 다음을 수행해야 합니다.

      1. 다음에서 GCLOUD_PROJECT 및 GCLOUD_LOCATION 변수를 설정합니다. 배포 환경, 정확한 단계는 플랫폼에 따라 다릅니다

      2. Firebase 또는 Google Cloud 환경에 배포하지 않는 경우 다음 중 하나를 사용하여 Vertex AI API에 대한 승인을 설정합니다. 워크로드 아이덴티티 제휴 (권장) 또는 서비스 계정 키를 사용합니다.

      3. IAM에서 페이지에서 Vertex AI 사용자 권한을 부여합니다. 역할 (roles/aiplatform.user)을 Vertex AI API를 사용해 보세요

        • Cloud Functions와 Cloud Run에서 기본 컴퓨팅 서비스 계정.
        • Firebase App Hosting에서는 앱의 백엔드 서비스 계정.
        • 다른 플랫폼에서는 이전 세션에서 설정한 ID입니다. 단계를 거칩니다.

    이 튜토리얼에서 설정해야 하는 유일한 보안 비밀은 모델 제공업체이지만, 일반적으로 흐름에서 사용하는 각 서비스에 대해 유사한 작업을 수행해야 합니다.

  5. genkit init 명령어로 샘플 흐름을 생성하도록 허용했다면 서버로 사용할 수 있는 Genkit 흐름이 포함된 genkit.ts 파일이 생성되었습니다. 있습니다. 한번 말해 보세요.

    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 개발자 UI에서 흐름을 실행하고 탐색할 수도 있습니다.

    genkit start