GrokのAPIを使った生成AIチャット

2025.03.10

GrokのAPIの使い方

GrokのAPIの使い方の備忘録です。

以下は、xAIが提供するGrok APIを利用して基本的な操作を行うためのステップバイステップのガイドです。

なお、Grok APIは現在REST APIをサポートしており、OpenAIやAnthropicのSDKとも互換性があるため、それらを利用した例も含めて説明します。

スポンサーリンク

1. 前提条件

Grok APIを使用するには、以下の準備が必要です：

  • xAIアカウント: xAIのコンソールにアクセスしてアカウントを作成します。
  • APIキー: アカウント作成後、「API Keys」セクションでAPIキーを生成します。
  • 環境: Python 3.8以上がインストールされている環境を推奨します。また、必要に応じてHTTPクライアント（例: requestsライブラリ）を使用します。

2. APIキーの取得

  1. xAIコンソールにログインします。
  2. 上部メニューから「API」を選択し、「Manage API Keys」をクリック。
  3. 「Create API Key」をクリックし、必要に応じてアクセス権限を設定（例: chat:write）。
  4. 生成されたAPIキーをコピーし、安全な場所に保存します。

3. 基本的なAPIリクエスト

Grok APIのエンドポイントは https://api.x.ai/v1 です。以下は、簡単なチャット補完リクエストの例です。

Pythonを使った例（OpenAI SDKを利用）

Grok APIはOpenAIのSDKと互換性があるため、以下の手順で簡単に利用できます。

  1. ライブラリのインストール:
    pip install openai
  2. コード例: 
    from openai import OpenAI
import os

# APIキーを環境変数に設定（または直接コードに記述）
os.environ["XAI_API_KEY"] = "your-api-key-here"

# クライアントの初期化
client = OpenAI(
    api_key=os.environ.get("XAI_API_KEY"),
    base_url="https://api.x.ai/v1"
)

# チャット補完リクエスト
response = client.chat.completions.create(
    model="grok-beta",  # モデル名（例: grok-beta, grok-2など）
    messages=[
        {"role": "user", "content": "Grok APIの使い方を教えてください"}
    ]
)

# レスポンスの表示
print(response.choices[0].message.content)

cURLを使った例

APIを直接呼び出す場合、cURLを使用できます。

curl https://api.x.ai/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer your-api-key-here" \
  -d '{
    "model": "grok-beta",
    "messages": [{"role": "user", "content": "こんにちは、Grok!"}]
  }'

4. 主な機能とパラメータ

Grok APIはさまざまな機能を提供します。以下は主要なエンドポイントと調整可能なパラメータの一部です。

エンドポイント

  • チャット補完: /chat/completions
    対話形式のテキスト生成に使用。
  • その他: マルチモーダル機能（画像処理など）が利用可能な場合、モデルに応じて対応エンドポイントが追加されます。

パラメータ

  • model: 使用するモデル（例: grok-beta, grok-2）。
  • messages: 対話の履歴（roleはsystem, user, assistantなどを指定）。
  • max_tokens: 生成するトークンの最大数。
  • temperature: 応答の創造性（0.0～1.0、デフォルトは1.0）。

例:

{
  "model": "grok-beta",
  "messages": [
    {"role": "system", "content": "あなたは役に立つアシスタントです"},
    {"role": "user", "content": "日本の文化について教えて"}
  ],
  "max_tokens": 100,
  "temperature": 0.7
}

5. 注意点とベストプラクティス

  • レート制限: 現在、1秒あたり1リクエスト、モデルに応じて1時間あたり60または1200リクエストの制限があります。429 Too Many Requestsエラーが出た場合は、バックオフ戦略を実装してください。
  • 料金: トークン単位の従量課金制です（例: grok-betaは入力トークン131,072で$5、出力で$15）。無料クレジット（月$25）は2024年末まで提供されていましたが、現在は有料プランのみの場合があります。
  • セキュリティ: APIキーをソースコードにハードコーディングせず、環境変数やキー管理サービスを使用してください。
  • エラー処理: APIConnectionErrorやRateLimitErrorに対応する例外処理を追加すると良いでしょう。

6. 応用例

チャットボットの作成

上記のコードを拡張し、ユーザー入力を繰り返し受け付ける対話型ボットを作成できます。

while True:
    user_input = input("あなた: ")
    if user_input.lower() in ["/exit", "/quit"]:
        break
    response = client.chat.completions.create(
        model="grok-beta",
        messages=[{"role": "user", "content": user_input}]
    )
    print("Grok:", response.choices[0].message.content)

マルチモーダル対応（画像処理）

モデルが画像対応の場合（例: grok-betaのマルチモーダル版）、以下のように画像URLを含めてリクエストします。

response = client.chat.completions.create(
    model="grok-beta",
    messages=[
        {"role": "user", "content": "この画像について説明してください"},
        {"role": "user", "content": "https://example.com/image.jpg"}
    ]
)

7. ドキュメントとサポート

  • 公式ドキュメント: xAI Docsで最新のAPI仕様を確認できます。
  • コミュニティ: xAIの開発者フォーラムやXでの質問を通じてサポートを受けられます。

まとめ

Grok APIは、シンプルなチャットから高度なAI統合まで幅広い用途に対応可能です。OpenAI互換性のおかげで既存のコードを簡単に移行でき、Python SDKやcURLで柔軟に操作できます。上記の例を参考に、ぜひ自分のプロジェクトで試してみてください。

 

JavaScriptでGrok APIを使ってチャットを作る

サンプル　Kasiko　AIチャット

ai
aiページは終了しました
i6i6.co.jp
2025.06.03

JavaScriptでGrok APIを利用してチャット機能を作成する場合、基本的なAPIの呼び出し方はPythonやcURLの場合と変わりませんが、JavaScript特有の非同期処理やクライアントサイドの実装方法に違いがあります。以下に、JavaScriptでのGrok APIの使い方と簡単なチャットの実装例を説明します。

JavaScriptでのGrok APIの使い方

違いとポイント

  • 非同期処理: JavaScriptではfetchやaxiosを使ってAPIリクエストを非同期で処理します。
  • 環境: ブラウザ環境（フロントエンド）で動作させる場合、APIキーの管理に注意が必要です。セキュリティ上、サーバーサイド（Node.jsなど）で処理する方が推奨される場合もあります。
  • エンドポイントとパラメータ: Pythonと同じくhttps://api.x.ai/v1/chat/completionsを使用し、パラメータ（model, messagesなど）も同じです。

前提条件

  • xAIのAPIキーを取得済み。
  • ブラウザまたはNode.js環境が利用可能。

実装例（JavaScriptでチャット機能）

1. シンプルなブラウザ実装

以下は、HTMLとJavaScriptを組み合わせた簡単なチャットインターフェースの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Grokチャット</title>
</head>
<body>
  <h1>Grokとチャット</h1>
  <div id="chat-container">
    <div id="chat-output"></div>
    <input type="text" id="user-input" placeholder="メッセージを入力...">
    <button onclick="sendMessage()">送信</button>
  </div>

  <script>
    const apiKey = "your-api-key-here"; // 実際のキーに置き換え（サーバーサイド推奨）
    const apiUrl = "https://api.x.ai/v1/chat/completions";

    async function sendMessage() {
      const input = document.getElementById("user-input").value;
      if (!input) return;

      // ユーザーのメッセージを表示
      const output = document.getElementById("chat-output");
      output.innerHTML += `<p><b>あなた:</b> ${input}</p>`;

      try {
        const response = await fetch(apiUrl, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${apiKey}`
          },
          body: JSON.stringify({
            model: "grok-beta",
            messages: [{ role: "user", content: input }],
            max_tokens: 100
          })
        });

        const data = await response.json();
        const grokMessage = data.choices[0].message.content;

        // Grokの応答を表示
        output.innerHTML += `<p><b>Grok:</b> ${grokMessage}</p>`;
      } catch (error) {
        output.innerHTML += `<p><b>エラー:</b> ${error.message}</p>`;
      }

      // 入力欄をクリア
      document.getElementById("user-input").value = "";
    }

    // Enterキーで送信
    document.getElementById("user-input").addEventListener("keypress", (e) => {
      if (e.key === "Enter") sendMessage();
    });
  </script>
</body>
</html>

2. Node.jsでの実装

サーバーサイドで処理する場合、axiosを使った例を以下に示します。

  1. 依存関係のインストール: 
    npm install axios
  2. コード例: 
    const axios = require("axios");

const apiKey = "your-api-key-here";
const apiUrl = "https://api.x.ai/v1/chat/completions";

async function chatWithGrok(message) {
  try {
    const response = await axios.post(
      apiUrl,
      {
        model: "grok-beta",
        messages: [{ role: "user", content: message }],
        max_tokens: 100
      },
      {
        headers: {
          "Content-Type": "application/json",
          "Authorization": `Bearer ${apiKey}`
        }
      }
    );
    console.log("Grok:", response.data.choices[0].message.content);
  } catch (error) {
    console.error("エラー:", error.message);
  }
}

// テスト
chatWithGrok("こんにちは、Grok!");

注意点

  • APIキーの安全性: ブラウザで直接APIキーを記載すると、第三者に盗まれるリスクがあります。本番環境では、サーバーサイドでAPIを呼び出し、結果をフロントエンドに返す形を検討してください。
  • レート制限: Pythonと同じく、1秒あたり1リクエストなどの制限があるため、非同期処理でエラーハンドリングを適切に行う必要があります。
  • CORS: ブラウザから直接APIを呼び出す場合、CORS設定に注意してください（xAI側で対応済みの場合が多いですが）。

これで、JavaScriptを使ってGrok APIを活用したチャット機能を実装できます。ブラウザとNode.jsの両方で動作する柔軟性が特徴です。

 

Grok APIの利用料金

GrokのAPI利用料金について。以下は、2025年3月10日時点での最新情報に基づいた説明です。xAIの公式発表や関連資料を基に、APIの料金体系を分かりやすくまとめます。

Grok APIの利用料金体系

xAIのGrok APIは、トークン単位での従量課金制を採用しています。トークンとは、テキストを処理する際の最小単位で、単語や句読点の一部を指します。料金は「入力トークン」と「出力トークン」で異なり、モデルごとに価格が設定されています。

現在の料金（2024年12月時点の最新更新）

xAIは2024年12月15日にAPIのアップデートを発表し、以下のように価格が改定されました：

  • 入力トークン: 1,000,000トークンあたり $2
  • 出力トークン: 1,000,000トークンあたり $6

この料金は、新たに追加されたモデル「grok-2-1212」や「grok-2-vision-1212」に適用されます。

過去の料金との比較

以前のモデル（例: grok-beta）では、以下の料金が適用されていました：

  • 入力トークン: 131,072トークンあたり $5（約1,000,000トークンで$38計算）
  • 出力トークン: 131,072トークンあたり $15（約1,000,000トークンで$114計算）

最新の料金体系では、トークンあたりのコストが大幅に下がり、よりコスト効率が向上しています。

無料クレジットについて

  • パブリックベータ期間（2024年末まで）: 2024年11月から12月末まで、毎月$25の無料APIクレジットが提供されていました。
  • 2025年以降: 無料クレジットの提供は終了した可能性がありますが、Grok 3が「無料で利用可能」と発表されたことから、APIにも無料枠が残る可能性があります。

X Premium+ および SuperGrok プランとの関連

  • X Premium+: 月額$40（年間$350）で、Grok 3への優先アクセスが含まれます。
  • SuperGrok: 月額$30または年間$300（噂）で、高度な機能とAPI利用枠が提供されます。

料金の具体例

仮の使用シナリオでのコスト計算例です：

  • 入力: 「こんにちは、Grok！」（約10トークン）
  • 出力: 「こんにちは！どうお手伝いしましょうか？」（約15トークン）
  • 1リクエストのコスト: $0.00011
  • 大量使用: 1日1,000リクエスト、入力500トークン、出力1,000トークンで約$7/日（約$210/月）

注意点

  1. レート制限: 無料ユーザーは1秒あたり1リクエスト、1時間あたり60または1,200リクエスト。制限を超えると「429 Too Many Requests」エラーが発生。
  2. 課金単位: トークン数はリクエストごとに計算され、APIレスポンスのヘッダーで確認可能。
  3. 企業向けAPI: 2025年2月より提供開始予定で、詳細は未発表。

以上がGrok APIの利用料金に関する詳細です。最新情報はxAI公式サイトやAPIドキュメントで確認してください。

スポンサーリンク
タイトルとURLをコピーしました