Claude API Test > React

Anthropic API (Claude) 는 비공개 API 키를 이용해서 호출해야 하기 때문에 브라우저(프론트엔드)에서 호출이 금지되어 있다.

 

따라서 백엔드 서버가 반드시 필요하다.

 

Test 개발에서는 Proxy Server 를 이용하는데, 

 

package.json 파일에 다음을 추가한다.

  "proxy": "https://api.anthropic.com"

 

App.js

import React, { useState } from 'react';
import axios from 'axios';
import './App.css';

function App() {
  const [apiKey, setApiKey] = useState('');
  const [message, setMessage] = useState('');
  const [response, setResponse] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const testClaudeAPI = async () => {
    setLoading(true);
    setError('');
    setResponse('');
    
    try {
      const result = await axios.post(
        '/v1/messages',
        {
          model: 'claude-3-sonnet-20240229',
          max_tokens: 1000,
          messages: [
            { role: 'user', content: message }
          ]
        },
        {
          headers: {
            'Content-Type': 'application/json',
            'x-api-key': apiKey,
            'anthropic-version': '2023-06-01',
            'anthropic-dangerous-direct-browser-access': 'true'
          }
        }
      );
      
      setResponse(result.data.content[0].text);
    } catch (err) {
      console.error('Error calling Claude API:', err);
      setError(err.response?.data?.error?.message || err.message || '알 수 없는 오류가 발생했습니다.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Claude API 키 테스트</h1>
        
        <div className="input-group">
          <label htmlFor="api-key">API 키:</label>
          <input 
            id="api-key"
            type="text" 
            value={apiKey} 
            onChange={(e) => setApiKey(e.target.value)}
            placeholder="sk-ant-api03-..."
          />
        </div>
        
        <div className="input-group">
          <label htmlFor="message">메시지:</label>
          <textarea
            id="message"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            placeholder="안녕하세요! 오늘 날씨는 어때요?"
            rows={4}
          />
        </div>
        
        <button 
          onClick={testClaudeAPI}
          disabled={!apiKey || !message || loading}
        >
          {loading ? '로딩 중...' : 'API 테스트'}
        </button>
        
        {error && (
          <div className="error-box">
            <h3>오류:</h3>
            <p>{error}</p>
          </div>
        )}
        
        {response && (
          <div className="response-box">
            <h3>Claude 응답:</h3>
            <p>{response}</p>
          </div>
        )}
      </header>
    </div>
  );
}

export default App;

 

코드를 입력해서 Claude API 키를 입력했을때 동작하는지 테스트 해 볼 수 있다.