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 bunu nasıl yapacağınız gösterilmektedir.

Şartlar

Node.js 20 veya sonraki sürümler.

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 uygulamanız yoksa bir uygulama 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ılan işleviniz için kullanılabilir hale getirin. 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ıma sunmanız gerekir. Uygulanması gereken adımlar platforma göre değişir.

    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 sonraki adımda olduğu gibi bazı 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ğıttığınızda aşağıdakileri yapmanız gerekir:

      1. Dağıtılan ortamda GCLOUD_PROJECT ve GCLOUD_LOCATION değişkenlerini ayarlayın. Uygulanması gereken adımlar platforma göre değişir.

      2. Firebase veya Google Cloud ortamına dağıtım yapmıyorsanız İş Yükü Kimlik Federasyonu (önerilir) veya hizmet hesabı anahtarı kullanarak Vertex AI API için yetkilendirme ayarlayın.

      3. Google Cloud konsolunun 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 işlem hizmeti hesabı'dır.
        • Firebase App Hosting'de uygulamanızın arka uç hizmet hesabıdır.
        • Diğer platformlarda ise önceki adımda ayarladığınız kimlik budur.

    Bu eğitim için ayarlamanı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 işlem yapmanız gerekir.

  5. genkit init komutunun örnek akış oluşturmasına izin verdiyseniz bu komut, sunucu işlemi olarak kullanabileceğiniz Genkit akışı içeren bir dosya (genkit.ts) oluşturur. Ş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 bir 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 çalıştırıp keşfedebilirsiniz:

    genkit start