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
    • Next.js için Genkit'i otomatik olarak yapılandırıp yapılandırmayacağınız sorulduğunda evet yanıtını onaylayın.
    • 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ıza yardımcı olacak birkaç örnek kaynak dosyası ekleyebilirsiniz.

  4. API kimlik bilgilerini dağıtılan işleviniz için kullanılabilir hale getirin. Aşağıdakilerden birini yapın: seçtiğiniz model sağlayıcıya bağlı olarak aşağıdaki adımları uygulayın:

    Gemini (Google Yapay Zeka)

    1. Google Yapay Zeka'nın bölgenizde kullanılabilir.

    2. Şu öğe için bir API anahtarı oluşturun: Gemini API, Google AI Studio'yu kullanıyor.

    3. Akışınızı sonraki örnekte olduğu gibi yerel olarak çalıştırmak için 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 ortam, doğru adımlar platforma göre değişir.

    Gemini (Vertex AI)

    1. Cloud Console'da Vertex AI API'yi etkinleştirme belirleneceğini konuşacağız.

    2. Akışınızı sonraki örnekte olduğu gibi yerel olarak çalıştırmak için adımında, bazı ek ortam değişkenleri ayarlayın ve Kurulum için gcloud aracı uygulama varsayılan kimlik bilgileri:

      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. GCLOUD_PROJECT ve GCLOUD_LOCATION değişkenlerini dağıtılmış ortam doğru adımlar platforma göre değişir.

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

      3. IAM'de sayfasındaki talimatları uygulayarak Vertex AI User'ı rolünü (roles/aiplatform.user) Vertex AI API'yi keşfedin.

        • Cloud Functions ve Cloud Run'da bu, Varsayılan Compute hizmet hesabı.
        • Firebase App Hosting'de, uygulamanızın arka uç hizmet hesabı ekleyebilirsiniz.
        • Diğer platformlarda, önceki adımına geçelim.

    Bu eğitim için ayarlamanız gereken tek sır model içindir ancak genel olarak her hizmet için benzer bir işlem yapmanız gerekir. size yardımcı olur.

  5. genkit init komutunun örnek akış oluşturmasına izin verdiyseniz sunucu olarak kullanabileceğiniz Genkit akışı içeren bir dosya (genkit.ts) oluşturdu eyleme dökülebilir. Ş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 vermek gerekirse page.tsx içeri��ini şununla değiştir:

      '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