🌟

APIキーでGemini APIを導入する

2024/10/28に公開

Next.js

今回は簡単にGemini APIを導入した時にやったことをまとめたいと思います。 APIキーかアクセストークンのどちらかが認証に使われますが今回はAPIキーを活用しました。

はじめに

この違いは初め知らなかったので、どっちもやってしまいました。結局アクセストークンでは導入までしかわからず、実装はAPIキーで行いました。

APIキーとアクセストークンの違い

APIキーはプロジェクトに直接関連づけられた簡単な認証方法です。セキュリティは低いため、開発段階や特定のシンプルなAPIリクエストに適しています。

OAuth 2.0認証を使用して取得するアクセストークンは、ユーザーやサービスアカウントに対して特定のアクセス許可を付与します。より高度な認証や、APIの制限を解除する場合に使用されます。

開発環境

Next.js, typescript, react, npm

Gemini APIの導入時にやったこと

1. パッケージのInstall

必要なパッケージをterminalでinstallします。

npm install @google/generative-ai

2. GeminiClientファイルの作成

ファイル名はなんでもいいと思います。

geminiClient.ts

import { GoogleGenerativeAI } from '@google/generative-ai';

// Get the API key from environment variables
const apiKey = process.env.GOOGLE_API_KEY;

// Throw an error if the API key is missing
if (!apiKey) {
  throw new Error('GOOGLE_API_KEY is not defined in the environment variables');
}

// Initialize the Google Generative AI with the API key
const genAI = new GoogleGenerativeAI(apiKey);

export const generateKeywords = async (userPreference: string) => {
  try {
    const model = genAI.getGenerativeModel({ model: 'gemini-1.5-flash' });
    const prompt = `Generate trending keywords based on: ${userPreference}`;

    const result = await model.generateContent(prompt);

    const generatedText = result.response.text();
    console.log('Generated text:', generatedText);

    const keywords = generatedText.split(',').map((kw: string) => kw.trim());
    return keywords;
  } catch (error) {
    const err = error as any;
    console.error('Error contacting Gemini API:', err.response?.data || err.message);
    return [];
  }
};

他に作ったファイルは
components/keywordGenerator.tsx
pages/api/generateKeywords.ts
です。

3. APIキーを取得する

1. Google Cloudプロジェクトのセットアップ

Google Cloud Consoleに行く
新規プロジェクトを作成する or もしくは既存のプロジェクトを選択する

2. APIキーを作成する

「APIとサービス > 認証情報」に行く
「認証情報の作成 > APIキー」をクリックし、新しいAPIキーを生成
.env.localファイルに新しいAPIキーを追加

.env.local

GOOGLE_API_KEY=your_new_valid_api_key_here

4. 開発サーバーを起動

npm run dev

おまけ

CurlまたはPostmanでAPIをテストできます。

curl -X POST 'https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent' \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
        "prompt": "Generate keywords for fashion",
        "maxTokens": 50
      }'