Next.js uygulamasında Genkit'i kullanma

Bu sayfada, Next.js uygulamalarınızda Genkit akışlarını sunucu işlemleri olarak nasıl kullanabileceğiniz gösterilmektedir.

Başlamadan önce

Genkit'in akış kavramı ve bunların nasıl yazılacağı hakkında bilgi sahibi olmanız gerekir.

Next.js projesi oluşturma

Üretken yapay zeka özellikleri eklemek istediğiniz bir Next.js projeniz yoksa bu sayfayı takip etmek için bir proje oluşturabilirsiniz:

npx create-next-app@latest

Genkit bağımlılıkları yükleme

Genkit bağımlılıkları, herhangi bir Genkit projesinde yaptığınız gibi Next.js uygulamanıza yükleyin:

1. Temel Genkit kitaplığını yükleyin:

   npm i --save genkit

2. En az bir model eklentisi yükleyin.

   Örneğin, Google Yapay Zeka'yı kullanmak için:

   npm i --save @genkit-ai/googleai

   Vertex AI'ı kullanmak için:

   npm i --save @genkit-ai/vertexai

3. Genkit CLI'yi global olarak yüklemediyseniz geliştirme bağımlılığı olarak yükleyebilirsiniz. Kodunuzu test etmeyi kolaylaştırdığı için tsx aracı da önerilir. Ancak bu bağımlılıkların ikisi de isteğe bağlıdır.

   npm i --save-dev genkit-cli tsx

Genkit akışlarını tanımlama

Next.js projenizde Genkit akışlarınızı içerecek yeni bir dosya oluşturun: Örneğin, src/app/genkit.ts. Bu dosya, akışlarınızı herhangi bir değişiklik yapılmadan içerebilir. Ancak akışları yalnızca sunucu arka ucundan çalıştırabileceğiniz için dosyanın üst kısmına 'use server' yönergesini eklemeniz gerekir.

Örneğin:

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

Akışlarınızı çağırma

Artık ön uç kodunuzda akışlarınızı içe aktarabilir ve sunucu işlemleri olarak çağırabilirsiniz.

Örneğin:

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

Uygulamanızı yerel olarak test etme

Uygulamanızı yerel olarak çalıştırmak istiyorsanız seçtiğiniz model API hizmeti için kimlik bilgilerini kullanılabilir hale getirmeniz gerekir.

Ardından uygulamanızı normal şekilde yerel olarak çalıştırın:

npm run dev

Genkit'in tüm geliştirme araçları normal şekilde çalışmaya devam eder. Örneğin, akışlarınızı geliştirici kullanıcı arayüzüne yüklemek için:

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

Uygulamanızı dağıtma

Uygulamanızı dağıtırken, kullandığınız tüm harici hizmetlerin (ör. seçtiğiniz model API hizmeti) kimlik bilgilerinin dağıtılan uygulamada kullanılabilir olduğundan emin olmanız gerekir. Seçtiğiniz dağıtım platformuna özel bilgiler için aşağıdaki sayfalara bakın:

• Cloud Functions for Firebase
• Cloud Run
• Diğer Node.js platformları