Firebase Genkit trong ứng dụng Next.js

Bạn có thể sử dụng các luồng Firebase Genkit làm hành động trên máy chủ trong các ứng dụng Next.js. Phần còn lại của trang này sẽ hướng dẫn bạn cách thực hiện.

Yêu cầu

Node.js 20 trở lên.

Cách thực hiện

  1. Cài đặt Genkit CLI bằng cách chạy lệnh sau:

    npm i -g genkit

  2. Nếu bạn chưa có ứng dụng Next.js mà bạn muốn sử dụng, hãy tạo một ứng dụng:

    npx create-next-app@latest

    Chọn TypeScript làm ngôn ngữ bạn chọn.

  3. Khởi động Genkit trong dự án Next.js:

    cd your-nextjs-project
genkit init
    • Chọn Next.js làm nền tảng triển khai.
    • Chọn nhà cung cấp mô hình mà bạn muốn sử dụng.

    Chấp nhận giá trị mặc định cho các câu lệnh còn lại. Công cụ genkit sẽ tạo một số tệp nguồn mẫu để giúp bạn bắt đầu phát triển quy trình AI của riêng mình.

  4. Cung cấp thông tin đăng nhập API cho hàm đã triển khai. Thực hiện một trong các thao tác sau, tuỳ thuộc vào nhà cung cấp mô hình mà bạn đã chọn:

    Gemini (AI của Google)

    1. Đảm bảo AI của Google có ở khu vực của bạn.

    2. Tạo khoá API cho APIGemini bằng Google AI Studio.

    3. Để chạy luồng cục bộ, như trong bước tiếp theo, hãy đặt biến môi trường GOOGLE_GENAI_API_KEY thành khoá của bạn:

      export GOOGLE_GENAI_API_KEY=<your API key>

      Khi triển khai ứng dụng, bạn cần cung cấp khoá này trong môi trường được triển khai; các bước chính xác phụ thuộc vào nền tảng.

    Gemini (Vertex AI)

    1. Trong bảng điều khiển Cloud, hãy Bật Vertex AI API cho dự án của bạn.

    2. Để chạy luồng của bạn cục bộ, như trong bước tiếp theo, hãy thiết lập thêm một số biến môi trường và sử dụng công cụ gcloud để thiết lập thông tin xác thực mặc định của ứng dụng:

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

    3. Khi triển khai ứng dụng, bạn sẽ cần làm những việc sau:

      1. Đặt các biến GCLOUD_PROJECT và GCLOUD_LOCATION trong môi trường triển khai; các bước chính xác phụ thuộc vào nền tảng.

      2. Nếu bạn hiện không triển khai cho môi trường Firebase hoặc Google Cloud, hãy thiết lập tính năng uỷ quyền cho Vertex AI API bằng cách sử dụng Workload Identity Federation (nên dùng) hoặc khoá tài khoản dịch vụ.

      3. Trên trang IAM của bảng điều khiển Google Cloud, hãy cấp vai trò Người dùng Vertex AI (roles/aiplatform.user) cho danh tính mà bạn dùng để gọi API Vertex AI.

        • Trên Cloud Functions và Cloud Run, đây là Tài khoản dịch vụ điện toán mặc định.
        • Trên Lưu trữ ứng dụng Firebase, đó là tài khoản dịch vụ phụ trợ của ứng dụng.
        • Trên các nền tảng khác, đó là danh tính mà bạn thiết lập ở bước trước.

    Khoá bí mật duy nhất bạn cần thiết lập cho hướng dẫn này là dành cho trình cung cấp mô hình, nhưng nhìn chung, bạn phải thực hiện thao tác tương tự cho từng dịch vụ mà luồng của bạn sử dụng.

  5. Nếu bạn đã cho phép lệnh genkit init tạo một luồng mẫu, thì lệnh này sẽ tạo một tệp genkit.ts, trong đó có một luồng Genkit mà bạn có thể sử dụng làm hành động trên máy chủ. Hãy thử nói:

    1. Trước tiên, hãy thực hiện một thay đổi nhỏ đối với hàm tbe callMenuSuggestionFlow:

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

    2. Bạn có thể truy cập hàm này dưới dạng một hành động của máy chủ. Ví dụ đơn giản, thay thế nội dung của page.tsx bằng nội dung sau:

      '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. Chạy mã này trong môi trường phát triển Next.js:

      npm run dev

  6. Bạn cũng có thể chạy và khám phá các quy trình của mình trong giao diện người dùng dành cho nhà phát triển Genkit:

    genkit start