API でチャットアプリを作る:Claude / GPT API 入門

AI Navigate Original / 2026/3/24

💬 オピニオンDeveloper Stack & Infrastructure
共有:

要点

  • LLM API は各 SDK 導入後 30 行で動く
  • キー取得・.env 設定、Claude/OpenAI/Vercel AI SDK で初回呼び出し
  • messages 配列でマルチターン、システムプロンプトで役割付与
  • キー漏洩・レート制限・トークン超過に注意、安く試せる

ChatGPT や Claude を自分のアプリに組み込みたい——その入口が LLM API です。ブラウザの ChatGPT は「人が画面で使う」もの、API は「プログラムから呼び出す」もの。両者は同じモデルを別の窓口から使っているだけで、API なら自分のチャットアプリ・社内ツール・自動処理にAIを直接組み込めます。本記事は Claude(Anthropic)GPT(OpenAI) の2大APIを並べ、最初の一歩から会話・料金・つまずきまでを、コピーして動かせる形で解説します。

自分のアプリ リクエスト+APIキー API エンドポイント LLM モデル本体 回答(JSON)が返る

FIG.1 API=アプリが「キー付きの一通の手紙」を送り、回答を受け取る窓口

ブラウザ版と違って、API は人間のログインではなく APIキー で「誰の呼び出しか」を判定し、使った分だけ課金します。だからキーの管理が最初の関門になります(後述)。基本的な使い方は、各社のSDKを入れて十数行。まずはそこから動かしましょう。

01APIキーを取得する

どちらのサービスも、開発者向けのコンソールでキーを発行します。キーは作成直後に一度だけ全体が表示され、以後は再表示されません。その場で安全な場所にコピーしてください。利用には事前のクレジット入金(少額から可)が必要です。

OpenAI(GPT)Anthropic(Claude)
platform.openai.com → 「API keys」console.anthropic.com → 「API Keys」
新規キーを作成 → 一度だけ表示新規キーを作成 → 一度だけ表示
キーは sk-... 形式キーは sk-ant-... 形式
前払いクレジットを入金前払いクレジットを入金

キーは「あなたの財布を開ける合鍵」です。コードに直書きせず、必ず環境変数に逃がします。漏れたと思ったら、コンソールから即座に失効(revoke)させ、新しいキーを発行し直しましょう。

02環境を整える

言語は Node.js(TypeScript)でも Python でも構いません。両社のSDKを入れて、キーを .env に置きます。

# Node.js
npm install @anthropic-ai/sdk openai

# Python
pip install anthropic openai

キーは .env に書き、コードからは環境変数として読み込みます。

ANTHROPIC_API_KEY=sk-ant-...
OPENAI_API_KEY=sk-...

最初の事故の9割はキーの取り扱いで起きる。.env は必ず .gitignore へ。

03初めての呼び出し

SDKは、環境変数 ANTHROPIC_API_KEY / OPENAI_API_KEY を自動で読みます。だからコードにキーは書きません。下は2026年時点の代表モデルでの最小例です(モデル名は新版が出るたびに更新されるので、各社のモデル一覧で最新を確認してください)。

Claude(Anthropic)

import Anthropic from "@anthropic-ai/sdk";
const client = new Anthropic();

const msg = await client.messages.create({
  model: "claude-opus-4-8",       // 2026年時点の最上位。用途次第で sonnet / haiku も
  max_tokens: 1024,
  messages: [{ role: "user", content: "東京の今日の見どころは?" }],
});

console.log(msg.content[0].text);

Claude では max_tokens(出力の上限トークン数)が必須です。「役割」を与えるシステム指示は、messages ではなく独立した system パラメータで渡します(05節)。

GPT(OpenAI)

続きを読むには無料登録が必要です

アカウントを作成すると、オリジナル記事の全文をお読みいただけます。