Firebase Genkit trong ứng dụng Next.js

Bạn có thể sử dụng các luồng Firebase Genkit làm thao tác trên máy chủ trong ứng dụng Next.js của mình. 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 muốn.

  3. Khởi chạy Genkit trong dự án Next.js của bạn:

    cd your-nextjs-project
genkit init
    • Xác nhận có khi được nhắc có tự động định cấu hình Genkit cho Next.js hay không.
    • Chọn nhà cung cấp mô hình bạn muốn sử dụng.

    Chấp nhận chế độ 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 các luồng AI của riêng mình.

  4. Cung cấp thông tin đăng nhập API cho chức năng bạn đã triển khai. Thực hiện một trong 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 hoạt động ở khu vực của bạn.

    2. Tạo khoá API cho Gemini API thông qua Google AI Studio.

    3. Để chạy quy trình của bạn một cách cục bộ, như trong bước tiếp theo bước, 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 bằng 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 (AI Vertex)

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

    2. Để chạy quy trình của bạn một cách cục bộ, như trong bước tiếp theo thiết lập một số biến môi trường bổ sung 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 thực hiện những việc sau:

      1. Đặt các biến GCLOUD_PROJECT và GCLOUD_LOCATION 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.

      2. Nếu bạn không triển khai cho môi trường Firebase hoặc Google Cloud, thiết lập quy trình uỷ quyền cho Vertex AI API, bằng cách sử dụng Liên kết danh tính của Workload (đề xuất) hoặc khoá tài khoản dịch vụ.

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

        • 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 tính năng Lưu trữ ứng dụng Firebase, đây là tài khoản dịch vụ phụ trợ.
        • Trên các nền tảng khác, đó là danh tính mà bạn thiết lập trong .

    Bí mật duy nhất bạn cần để thiết lập cho hướng dẫn này là về mô hình nhưng nhìn chung, bạn phải thực hiện điều tương tự cho từng dịch vụ mà flow 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 đã tạo một tệp genkit.ts có quy trình Genkit mà bạn có thể sử dụng làm máy chủ hành động. 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 chức năng này dưới dạng một thao tác trên máy chủ. Một ví dụ đơn giản là 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 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 trong giao diện người dùng dành cho nhà phát triển Genkit:

    genkit start