Claude APIをはじめる

なぜ学ぶか： Phase 06まで学んだあなたなら、AI機能を安全に組み込む準備ができています。Claude APIはアプリに知性を足す最短ルート。まずは「APIキーを取り、最初のリクエストを送る」ところから始めます。そして最初の一歩からセキュリティを効かせます。

Claude API＝アプリからClaudeを呼ぶ仕組み

リクエストを送るとテキストが返ります。要約・分類・対話など、AIの能力をアプリの機能として使えます。

APIキー＝利用の鍵（＝秘密情報）

Anthropicのコンソールで発行します。これはセキュリティのフェーズで学んだ『漏れたら悪用される秘密』そのものです。扱いは最初から厳重に。

最初の一歩からサーバー側で

テストでもキーをブラウザに置きません。Next.jsならRoute Handlerの中で呼びます。『あとで直す』は事故のもとです。

使うほど課金される

リクエストは無料ではありません。最初は短いプロンプトで動作確認し、いきなり大量に投げません。

コード例

// app/api/hello-claude/route.ts — サーバー側（キーは環境変数から）
import Anthropic from "@anthropic-ai/sdk";

// process.env.ANTHROPIC_API_KEY を自動で読む（無印＝サーバー専用）
const client = new Anthropic();

export async function POST() {
  const message = await client.messages.create({
    model: "claude-opus-4-8",
    max_tokens: 1024,
    messages: [{ role: "user", content: "こんにちは！一言で自己紹介して。" }],
  });

  // 応答はブロックの配列。type: "text" を取り出す
  const text = message.content.find((b) => b.type === "text");
  return Response.json({ reply: text?.type === "text" ? text.text : "" });
}

キーはコードに書かず環境変数から。このroute.tsはサーバーで動くので、キーはブラウザに一切出ません。

ステップ 1 / 2

← カリキュラム一覧へ戻る

※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。