ClaudeのAPIをローカルで動かす手順（React編）

Posted at 2024-11-11

こんにちは || こんばんは

API使用に苦戦していた経験から、同じように困っている方へ向けてこの手順をまとめました。ブチ切れながらようやく実装できたので、同じように悩んでいる方の参考になれば幸いです。

記事の対象者

ClaudeのAPIがうまくできなくて悩んでいる駆け出しエンジニア
Claudeのドキュメント見たけどよーわからん人

この記事で解決できること

自分のローカルでClaudeのAPIと通信して、結果がターミナルで確認できます。

1. 空のファイル作成

ファイル名：api-test-app
（お好きなやつでどーぞ）

2. Reactプロジェクト作成

作成した「api-test-app」ファイルを開いてターミナルで↓実行。

npx create-react-app my-app --template typescript

※しばらく待つ。
以下のようにファイルが生成されていたらOK

3. 一旦React起動するか確認

cd my-app
npm start

確認終わったら Ctrl + Cで一旦終了しておく。

4. 必要なやつ入れる

この２つないとエラーなるから注意

これないとClaudeのAPI準備ができない
これないと環境変数ってやつが呼べない

npm install @anthropic-ai/sdk
npm install dotenv

5. API呼び出し用のファルダ作る

srcまではデフォルトであると思うので、apiファイルとanthropic.mjsを創る
場所：api-test-app>my-app>src>api>anthropic.mjs

6. anthropic.mjsの中身

import { Anthropic } from '@anthropic-ai/sdk';
import dotenv from 'dotenv';
import { fileURLToPath } from 'url';
import { dirname, resolve } from 'path';

// 現在のファイルのディレクトリを取得
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

// .envファイルのパスを明示的に指定
dotenv.config({ path: resolve(__dirname, '../../.env') });

// APIキーが取得できているか確認
console.log('API Key loaded:', process.env.ANTHROPIC_API_KEY ? 'Yes' : 'No');

// anthropicクライアントをグローバルスコープで初期化
const client = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY
});

async function sendMessage() {
  try {
    // clientを使用してメッセージを送信
    const msg = await client.messages.create({
      model: "claude-3-5-sonnet-20241022",
      max_tokens: 1000,
      temperature: 0,
      system: "短い詩でのみ応答してください。",
      messages: [
        {
          "role": "user",
          "content": [
            {
              "type": "text",
              "text": "なぜ海は塩辛いのですか？"
            }
          ]
        }
      ]
    });
    console.log('Response:', msg.content);
  } catch (error) {
    console.error('Error details:', error);
  }
}

// 関数を実行
sendMessage();

7. envフォルダ作成

公式ドキュメントとか、直接APIキー入れてるから参考にならん。
自分で使うにしても環境変数に入れて蓋しとかないと、あぶないよ。

場所：api-test-app>my-app>.env

ANTHROPIC_API_KEY=sk-ant-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

8. gitignoreに追加

gitignoreはすでに作られているのでそこに追加

# environment variables
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

9. 実行

場所：api-test-app\my-app>ここ↓

node src/api/anthropic.mjs

10. 結果

API Key loaded: Yes
Response: [ { type: 'text', text: '太古より流れ出す\n岩の塩を溶かしつつ\n大地の涙積もりて\n青き海は塩辛し' } ]

まとめ

まぁ今回はざっくりまとめました。正直自分が忘れそうだったのが一番大きい。

「ちょっと試したいのに」とか「自分のUIに組み込みたいのに」とか
もっと簡単にできるはずなのにこんな初歩で止まるとか自分自身腹立たしくてならん。

少しでも参考にしていただければ嬉しいですよん。
何回か自分でも確認したけど、間違ってたらごめんね。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up