Next.js uygulamalarında Firebase Genkit

Firebase Genkit akışlarını Next.js uygulamalarınızda sunucu işlemleri olarak kullanabilirsiniz. Bu sayfanın geri kalanında bu işlemi nasıl yapacağınız gösterilmektedir.

Şartlar

Node.js 20 veya üzeri.

Prosedür

  1. Aşağıdaki komutu çalıştırarak Genkit CLI'ı yükleyin:

    npm i -g genkit

  2. Kullanmak istediğiniz bir Next.js uygulaması yoksa bir tane oluşturun:

    npx create-next-app@latest

    Tercih ettiğiniz dil olarak TypeScript'i seçin.

  3. Next.js projenizde Genkit'i başlatın:

    cd your-nextjs-project
genkit init
    • Dağıtım platformu olarak Next.js'yi seçin.
    • Kullanmak istediğiniz model sağlayıcıyı seçin.

    Kalan istemler için varsayılanları kabul edin. genkit aracı, kendi AI akışlarınızı geliştirmeye başlamanız için bazı örnek kaynak dosyalar oluşturur.

  4. API kimlik bilgilerini dağıtılmış işlevinizin kullanımına sunun. Seçtiğiniz model sağlayıcıya bağlı olarak aşağıdakilerden birini yapın:

    Gemini (Google Yapay Zeka)

    1. Google AI'ın bölgenizde kullanılabildiğinden emin olun.

    2. Google AI Studio'yu kullanarak Gemini API için API anahtarı oluşturun.

    3. Akışınızı yerel olarak çalıştırmak için sonraki adımda olduğu gibi GOOGLE_GENAI_API_KEY ortam değişkenini anahtarınıza ayarlayın:

      export GOOGLE_GENAI_API_KEY=<your API key>

      Uygulamanızı dağıttığınızda bu anahtarı, dağıtılan ortamda kullanılabilir hale getirmeniz gerekir. Kesin adımlar platforma bağlıdır.

    Gemini (Vertex AI)

    1. Cloud konsolunda projeniz için Vertex AI API'yi etkinleştirin.

    2. Akışınızı yerel olarak çalıştırmak için bir sonraki adımda olduğu gibi ek ortam değişkenleri ayarlayın ve gcloud aracını kullanarak uygulama varsayılan kimlik bilgilerini ayarlayın:

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

    3. Uygulamanızı dağıtırken aşağıdakileri yapmanız gerekir:

      1. Dağıtılan ortamda GCLOUD_PROJECT ve GCLOUD_LOCATION değişkenlerini ayarlayın. Tam adımlar platforma bağlıdır.

      2. Firebase veya Google Cloud ortamına dağıtım yapmıyorsanız Workload Identity Federasyonu (önerilir) veya bir hizmet hesabı anahtarı kullanarak Vertex AI API için yetkilendirme ayarlayın.

      3. Google Cloud Console'un IAM sayfasında, Vertex AI API'yi çağırmak için kullandığınız kimliğe Vertex AI Kullanıcısı rolünü (roles/aiplatform.user) verin.

        • Cloud Functions ve Cloud Run'da bu, Varsayılan bilgi işlem hizmeti hesabıdır.
        • Firebase App Hosting'de, uygulamanızın arka uç hizmet hesabıdır.
        • Diğer platformlarda, önceki adımda oluşturduğunuz kimliktir.

    Bu eğitim için oluşturmanız gereken tek sır model sağlayıcı içindir ancak genel olarak, akışınızın kullandığı her hizmet için benzer bir şey yapmanız gerekir.

  5. genkit init komutunun örnek bir akış oluşturmasına izin verdiyseniz sunucu işlemi olarak kullanabileceğiniz bir Genkit akışı içeren genkit.ts dosyası (genkit.ts) oluşturdu. Şunları deneyin:

    1. İlk olarak tbe callMenuSuggestionFlow işlevinde küçük bir değişiklik yapın:

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

    2. Bu işleve sunucu işlemi olarak erişebilirsiniz. Basit bir örnek olarak, page.tsx içeriğini şununla değiştirin:

      '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. Bu komut dosyasını Next.js geliştirme ortamında çalıştırın:

      npm run dev

  6. Akışlarınızı, Genkit Geliştirici Kullanıcı Arayüzünde de çalıştırıp keşfedebilirsiniz:

    genkit start