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

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

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

## 記事の対象者

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

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

自分のローカルでClaudeのAPIと通信して、結果がターミナルで確認できます。
![api001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3663346/4dd4d0dc-85f1-3479-8d15-add628404ba0.png)


## 目次

1. 空のファイル作成
2. Reactプロジェクト作成
3. 一旦React起動するか確認
4. 必要なやつ入れる
5. API呼び出し用のファルダ作る
6. anthropic.mjsの中身
7. envフォルダ作成
8. gitignoreに追加

## 1. 空のファイル作成

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

## 2. Reactプロジェクト作成

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

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

※しばらく待つ。
以下のようにファイルが生成されていたらOK
![api002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3663346/a6139c46-e02a-18c7-8626-e4880426816c.png)


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

```bash
cd my-app
npm start
```

確認終わったら Ctrl + Cで一旦終了しておく。
![api003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3663346/f91fff06-f383-1824-7b11-2a5e2303baed.png)



## 4. 必要なやつ入れる

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

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

```bash
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の中身

```javascript
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

```plaintext
ANTHROPIC_API_KEY=sk-ant-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```

## 8. gitignoreに追加

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

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

## 9. 実行

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

```bash
node src/api/anthropic.mjs
```

## 10. 結果

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

## まとめ

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

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

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