中級③ アプリにAIを組み込む（Claude API）

今日はこの講座の華、自分のアプリにAIを組み込む回です。メモ帳に「AIにひとことコメントをもらう」ボタンを付けます。保存したメモをClaudeが読んで、励ましや要約をひとこと返してくれる——あなたのサービスがAIをしゃべり出します。

STEP1：チャットのClaudeとAPIのClaudeは“別契約”

まず一番の混乱ポイントから。あなたが普段使っているclaude.aiの有料プランと、API（プログラムから呼ぶ窓口）は別の契約です。APIは使った分だけ払う従量課金で、料金はトークン（AIが読み書きする文字のかけら。日本語はだいたい1文字1〜2トークン）の量で決まります。

1. 1console.anthropic.com（開発者向けConsole）にサインアップ。
2. 2Billing（支払い）でクレジットを購入（最低$5から。今日の実験には十分すぎる額です）。
3. 3同じくBillingの設定で月の上限（スペンドリミット）を低めに設定——これで「気づいたら高額請求」は構造的に起きません。

STEP2：料金感覚をつかむ

「100万トークン」と言われてもピンと来ないですよね。今日作る機能の1回分（入力500・出力300トークンくらい）だと、Opus 4.8で約1.5円、Haiku 4.5なら0.3円程度。個人の実験は数十円の世界です。モデルはコードの1行で差し替えられるので、まず賢いモデルで作り、量が増えたら安いモデルに——が定石です。

STEP3：APIキーを発行して環境変数へ

1. 1Consoleの「API Keys」→「Create Key」。名前は my-app など。
2. 2表示されたキー（sk-ant-…）をコピー——一度しか表示されません。
3. 3Vercelの環境変数に ANTHROPIC_API_KEY として追加→Redeploy。

STEP4：AIに実装してもらう

メモ一覧の各メモに「AIにひとこともらう」ボタンを付けたい。押すと、そのメモの内容をClaude APIに送って、励ましや気づきのひとことコメント（100文字以内）を表示する。実装の条件：@anthropic-ai/sdk を使う。APIを呼ぶのはサーバー側（Route Handler /api/ai-comment）だけにして、ブラウザから直接Anthropicに接続しない。環境変数 ANTHROPIC_API_KEY を使う。モデルは claude-opus-4-8、max_tokens は 300。ログインしているユーザーだけが使えるようにする。連打できないようボタンは処理中は無効に。まず計画を見せて。

実装されたら、コードの心臓部だけ覗いてみましょう。読めなくて大丈夫、形だけ。意味はこのあと説明します。

import Anthropic from "@anthropic-ai/sdk";

// 環境変数 ANTHROPIC_API_KEY を自動で読んでくれる
const client = new Anthropic();

const response = await client.messages.create({
  model: "claude-opus-4-8", // どの“頭脳”を使うか
  max_tokens: 300, // 出力の上限（暴走防止＆コストのフタ）
  messages: [
    { role: "user", content: "このメモに励ましのひとことを：（メモの内容）" },
  ],
});

model

使うモデルの指定。ここを1行変えるだけで頭脳を差し替えられる。

max_tokens

出力の上限。必須項目。長文の暴走を防ぎ、1回あたりのコストにフタをする。

messages

AIへの依頼文。チャットで打っていたことを、プログラムが代わりに送っている。

STEP5：動かして、コストを見る

1. 1公開URLでメモを開き、ボタンを押す→AIのひとことが表示されたら成功！
2. 2何回か遊んだら、Consoleの Usage を開く——使ったトークン数と金額が出ています。
3. 3「この機能を1000人が毎日使ったら？」を概算してみる。コストを見積もれる人は、AI機能を自信を持って公開できます。

おさらい：今日使った“言葉”

API（従量課金）

プログラム向けの窓口。チャットの定額プランとは別契約。

トークン

AIが読み書きする文字のかけら。料金の単位。日本語は1文字1〜2トークン。

スペンドリミット

月の上限額。最初に低く設定しておけば事故が起きない。

サーバー側で呼ぶ

鍵を持つのはサーバーだけ。ブラウザからAIを直接呼ばない構成が鉄則。