- Anthropic이 JSON API에 대한 CORS 지원을 활성화함
- 즉, 이제 사용자의 브라우저에서 직접 Claude LLM을 호출할 수 있음
- 이 기능은 "anthropic-sdk-typescript: add support for browser usage" PR에 숨겨져 있음
- 뒤져보니, 해당 코드에 대한 Anthropic TypeScript SDK의 변경 사항은 새로운 JSON API 기능을 보여줌
- 다음 HTTP 요청 헤더를 추가하여 Anthropic API에 대한 CORS 지원을 활성화 가능:
anthropic-dangerous-direct-browser-access: true
- 이 헤더를 추가하면 브라우저에서 직접 Anthropic 모델에 대한 호출을 할 수 있음
- API 키를 클라이언트 코드에 포함하면 해당 사이트에 액세스할 수 있는 사용자가 API 키를 훔쳐 대신 요청을 할 수 있기 때문에 Anthropic은 이 기능 추가를 꺼려왔음
- 그럼에도 불구하고 이 기능에 대한 괜찮은 유스케이스가 몇 가지 있음
- 신뢰할 수 있는 사용자에게 노출되는 회사 내부용 도구에는 괜찮음
- 또는 사용자가 클라이언트 측 앱에서 사용할 자신의 키를 제공하는 "BYOK(Bring Your Own Key)" 패턴을 구현도 가능
Haiku - 클라이언트측 앱 예제
- 간단히 만들어본 Haiku 페이지는 CORS 지원이 필요한 클라이언트 측 앱 예제
- 웹캠에 대한 액세스를 요청하고, Anthropic API 키를 요청한 다음(브라우저의 localStorage에 저장), 사진을 찍고 Haiku 모델을 사용하여 하이쿠로 바꾸는 간단한 앱임
- 이전에는 Vercel에서 자체 프록시를 실행하여 Anthropic API에 CORS 지원을 추가해야 했음
- 이제 새 헤더를 보내도록 앱을 업그레이드했고, 프록시 없이 Anthropic과 직접 통신할 수 있음
fetch("https://api.anthropic.com/v1/messages";, {
method: "POST",
headers: {
"x-api-key": apiKey,
"anthropic-version": "2023-06-01",
"content-type": "application/json",
"anthropic-dangerous-direct-browser-access": "true",
},
body: JSON.stringify({
model: "claude-3-haiku-20240307",
max_tokens: 1024,
messages: [
{
role: "user",
content: [
{ type: "text", text: "Return a haiku about how great pelicans are" },
],
},
],
}),
})
.then((response) => response.json())
.then((data) => {
const haiku = data.content[0].text;
alert(haiku);
});