از Genkit در برنامه Next.js استفاده کنید

این صفحه نشان می دهد که چگونه می توانید از جریان های Genkit به عنوان عملکردهای سرور در برنامه های Next.js خود استفاده کنید.

قبل از شروع

شما باید با مفهوم جنکیت از جریان ها و نحوه نوشتن آنها آشنا باشید.

یک پروژه Next.js ایجاد کنید

اگر قبلاً پروژه Next.js ندارید که می‌خواهید ویژگی‌های هوش مصنوعی مولد را به آن اضافه کنید، می‌توانید یکی را برای دنبال کردن همراه با این صفحه ایجاد کنید:

npx create-next-app@latest

وابستگی های Genkit را نصب کنید

وابستگی های Genkit را به همان روشی که برای هر پروژه Genkit انجام می دهید در برنامه Next.js خود نصب کنید:

  1. کتابخانه هسته Genkit را نصب کنید:

    npm i --save genkit

  2. حداقل یک مدل پلاگین نصب کنید.

    به عنوان مثال، برای استفاده از هوش مصنوعی گوگل:

    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 را تعریف کنید

یک فایل جدید در پروژه Next.js خود ایجاد کنید تا شامل جریان های Genkit شما باشد: به عنوان مثال، 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 '@/app/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 مدلی که انتخاب کرده‌اید در دسترس قرار دهید.

جمینی (گوگل هوش مصنوعی)

  1. مطمئن شوید که Google AI در منطقه شما در دسترس است.

  2. با استفاده از Google AI Studio یک کلید API برای Gemini 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 به طور معمول به کار خود ادامه می دهند. به عنوان مثال، برای بارگیری جریان های خود در رابط کاربری توسعه دهنده: 

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

برنامه خود را مستقر کنید

هنگامی که برنامه خود را اجرا می کنید، باید اطمینان حاصل کنید که اعتبار هر سرویس خارجی که استفاده می کنید (مانند سرویس API مدل انتخابی شما) در دسترس برنامه مستقر است. برای اطلاعات مختص به پلتفرم استقرار انتخابی خود به صفحات زیر مراجعه کنید: