Firebase의 Vertex AI SDK를 사용하여 Gemini API 시작하기


이 가이드에서는 선택한 플랫폼의 Vertex AI in Firebase SDK를 사용하여 앱에서 직접 Vertex AI Gemini API를 호출하는 방법을 설명합니다.

이 가이드를 사용하여 Vertex AI in Firebase SDK를 사용하여 Imagen 모델에 액세스하는 작업도 시작할 수 있습니다.

기본 요건

이 가이드에서는 독자가 JavaScript를 사용하여 웹 앱을 개발하는 데 익숙하다고 가정합니다. 이 가이드는 프레임워크와 무관합니다.

  • 개발 환경과 웹 앱이 다음 요구사항을 충족하는지 확인합니다.

    • (선택사항) Node.js
    • 최신 웹브라우저

  • (선택사항) 샘플 앱을 확인합니다.

    샘플 앱 다운로드

    SDK를 빠르게 사용해 보거나 다양한 사용 사례의 전체 구현을 확인하거나 자체 웹 앱이 없는 경우 샘플 앱을 사용할 수 있습니다. 샘플 앱을 사용하려면 Firebase 프로젝트에 연결해야 합니다.

1단계: Firebase 프로젝트 설정 및 앱을 Firebase에 연결

Firebase 프로젝트와 Firebase에 연결된 앱이 이미 있는 경우

  1. Firebase 콘솔에서 Gemini로 빌드 페이지로 이동합니다.

  2. Vertex AI in Firebase 카드를 클릭하여 다음 작업을 완료하는 데 도움이 되는 워크플로를 실행합니다.

  3. 이 가이드의 다음 단계로 진행하여 앱에 SDK를 추가합니다.

아직 Firebase 프로젝트와 Firebase에 연결된 앱이 없는 경우

  1. Firebase Console에 로그인합니다.

  2. 프로젝트 만들기를 클릭하고 다음 옵션 중 하나를 사용합니다.

    • 옵션 1: '프로젝트 만들기' 워크플로의 첫 번째 단계에서 새 프로젝트 이름을 입력하여 완전히 새로운 Firebase 프로젝트 (및 기본 Google Cloud 프로젝트 자동 생성)를 만듭니다.

    • 옵션 2: '프로젝트 만들기' 워크플로의 첫 번째 단계에서 드롭다운 메뉴에서 Google Cloud 프로젝트 이름을 선택하여 기존 Google Cloud 프로젝트에 'Firebase를 추가'합니다.

    메시지가 표시되면 Vertex AI in Firebase SDK를 사용하기 위해 Google Analytics를 설정하지 않아도 됩니다.

  3. Firebase 콘솔에서 Gemini로 빌드 페이지로 이동합니다.

  4. Vertex AI in Firebase 카드를 클릭하여 다음 작업을 완료하는 데 도움이 되는 워크플로를 실행합니다.

  1. Console의 생성형 AI 워크플로를 계속 진행하여 앱을 Firebase에 연결합니다. 여기에는 다음 작업이 포함됩니다.

    • Firebase 프로젝트에 앱 등록

    • 앱에 Firebase 구성 객체 추가

  2. 이 가이드의 다음 단계에서는 앱에 Vertex AI in Firebase SDK를 추가하고 SDK 및 Gemini API 사용과 관련된 필수 초기화를 완료합니다.


2단계: SDK 추가

Firebase 프로젝트가 설정되고 앱이 Firebase에 연결되면(이전 단계 참고) 이제 앱에 Vertex AI in Firebase SDK를 추가할 수 있습니다.

Vertex AI in Firebase 라이브러리는 Gemini 및 Imagen 모델과 상호작용하는 API에 대한 액세스를 제공합니다. 이 라이브러리는 웹용 Firebase JavaScript SDK의 일부로 포함되어 있습니다.

  1. npm을 사용하여 웹용 Firebase JS SDK를 설치합니다.

      npm install firebase

  2. 앱에서 Firebase를 초기화합니다.

      import { initializeApp } from "firebase/app";

  // TODO(developer) Replace the following with your app's Firebase configuration
  // See: https://firebase.google.com/docs/web/learn-more#config-object
  const firebaseConfig = {
    // ...
  };

  // Initialize FirebaseApp
  const firebaseApp = initializeApp(firebaseConfig);

3단계: Vertex AI 서비스 및 생성형 모델 초기화

API를 호출하고 Gemini 모델을 프롬프트하기 전에 Vertex AI 서비스와 생성형 모델을 초기화해야 합니다.

import { initializeApp } from "firebase/app";
import { getVertexAI, getGenerativeModel } from "firebase/vertexai";

// TODO(developer) Replace the following with your app's Firebase configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize FirebaseApp
const firebaseApp = initializeApp(firebaseConfig);

// Initialize the Vertex AI service
const vertexAI = getVertexAI(firebaseApp);

// Initialize the generative model with a model that supports your use case
const model = getGenerativeModel(vertexAI, { model: "gemini-2.0-flash" });

이 시작 가이드를 완료한 후 사용 사례 및 앱에 적합한 모델과 (선택사항) 위치를 선택하는 방법을 알아보세요.

4단계: 모델에 프롬프트 요청 전송

이제 앱을 Firebase에 연결하고, SDK를 추가하고, Vertex AI 서비스와 생성형 모델을 초기화했으므로 Gemini 모델에 프롬프트 요청을 보낼 수 있습니다.

generateContent()를 사용하여 텍스트 전용 프롬프트 요청에서 텍스트를 생성할 수 있습니다.

import { initializeApp } from "firebase/app";
import { getVertexAI, getGenerativeModel } from "firebase/vertexai";

// TODO(developer) Replace the following with your app's Firebase configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize FirebaseApp
const firebaseApp = initializeApp(firebaseConfig);

// Initialize the Vertex AI service
const vertexAI = getVertexAI(firebaseApp);

// Initialize the generative model with a model that supports your use case
const model = getGenerativeModel(vertexAI, { model: "gemini-2.0-flash" });

// Wrap in an async function so you can use await
async function run() {
  // Provide a prompt that contains text
  const prompt = "Write a story about a magic backpack."

  // To generate text output, call generateContent with the text input
  const result = await model.generateContent(prompt);

  const response = result.response;
  const text = response.text();
  console.log(text);
}

run();

또 뭘 할 수 있니?

지원되는 모델 자세히 알아보기

다양한 사용 사례에 사용할 수 있는 모델과 할당량, 가격에 대해 알아보세요.

Gemini API의 다른 기능 사용해 보기

콘텐츠 생성을 제어하는 방법 알아보기

Vertex AI Studio를 사용하여 프롬프트 및 모델 구성을 실험할 수도 있습니다.


Vertex AI in Firebase 사용 경험에 관한 의견 보내기