Sử dụng Genkit trong ứng dụng Next.js

Trang này cho biết cách bạn có thể sử dụng luồng Genkit làm hành động máy chủ trong ứng dụng Next.js.

Trước khi bắt đầu

Bạn phải nắm rõ khái niệm về luồng của Genkit và cách viết các luồng đó.

Tạo dự án Next.js

Nếu chưa có dự án Next.js mà bạn muốn thêm các tính năng AI tạo sinh, bạn có thể tạo một dự án để làm theo trang này:

npx create-next-app@latest

Cài đặt các phần phụ thuộc Genkit

Cài đặt các phần phụ thuộc Genkit vào ứng dụng Next.js theo cách tương tự như bạn thực hiện cho mọi dự án Genkit:

  1. Cài đặt thư viện Genkit cốt lõi:

    npm i --save genkit

  2. Cài đặt ít nhất một trình bổ trợ mô hình.

    Ví dụ: để sử dụng công nghệ AI của Google:

    npm i --save @genkit-ai/googleai

    Hoặc để sử dụng Vertex AI:

    npm i --save @genkit-ai/vertexai

  3. Nếu chưa cài đặt Genkit CLI trên toàn hệ thống, bạn có thể cài đặt Genkit CLI dưới dạng phần phụ thuộc phát triển. Bạn cũng nên sử dụng công cụ tsx vì công cụ này giúp kiểm thử mã của bạn thuận tiện hơn. Tuy nhiên, cả hai phần phụ thuộc này đều không bắt buộc.

    npm i --save-dev genkit-cli tsx

Xác định luồng Genkit

Tạo một tệp mới trong dự án Next.js để chứa các luồng Genkit: ví dụ: src/app/genkit.ts. Tệp này có thể chứa các luồng của bạn mà không cần chỉnh sửa; tuy nhiên, vì bạn chỉ có thể chạy các luồng từ phần phụ trợ của máy chủ, nên bạn phải thêm lệnh 'use server' vào đầu tệp.

Ví dụ:

'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;
  }
);

Gọi luồng

Bây giờ, trong mã giao diện người dùng, bạn có thể nhập các luồng và gọi các luồng đó dưới dạng thao tác của máy chủ.

Ví dụ:

'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>
  );
}

Kiểm thử ứng dụng trên máy

Nếu muốn chạy ứng dụng trên máy, bạn cần cung cấp thông tin xác thực cho dịch vụ API mô hình mà bạn đã chọn.

Gemini (AI của Google)

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

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

  3. Đặ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>

Gemini (Vertex AI)

  1. Trong Cloud Console, hãy Bật API Vertex AI cho dự án của bạn.

  2. Thiết lập 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

Sau đó, hãy chạy ứng dụng trên máy tính như bình thường:

npm run dev

Tất cả các công cụ phát triển của Genkit vẫn hoạt động như bình thường. Ví dụ: để tải luồng trong giao diện người dùng dành cho nhà phát triển:

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

Triển khai ứng dụng

Khi triển khai ứng dụng, bạn cần đảm bảo rằng ứng dụng đã triển khai có thông tin xác thực cho mọi dịch vụ bên ngoài mà bạn sử dụng (chẳng hạn như dịch vụ API mô hình mà bạn đã chọn). Hãy xem các trang sau đây để biết thông tin dành riêng cho nền tảng triển khai mà bạn đã chọn: