Puter.js로 API 키가 필요 없는 AI 채팅을 만들고, BYOK로 여러 AI를 전환하기

Puter.js를 (<script>로 불러오기만 하면 API 키 없이 브라우저에서 GPT / Claude / Gemini 계열을 호출할 수 있는 puter.ai.chat()). 무료의 이면에는 "이용료를 이용자의 Puter 계정이 부담한다"는 User Pays 모델이 있습니다. 정밀도·속도·모델을 직접 제어하고 싶을 때는 **BYOK (Bring Your Own Key, 자신의 API 키 사용)**를 이용합니다. Gemini / Groq / Claude를 동일하게 전환할 수 있도록 callAI() 안에 switch 문 하나로 통합합니다. 스마트폰 Safari는 로그인 팝업이 차단되어 멈추는 현상이 있으므로, 첫 응답에 타임아웃을 설정하여 다른 AI로 유도합니다.

<script src="https://js.puter.com/v2/"></script>
<script>
const reply = await puter.ai.chat("日本の首都はどこ？");
...

스트리밍은 { stream: true }, 모델 지정은 { model: "claude-sonnet-4" }입니다. 반환값은 async iterator이므로 part.text를 연결하기만 하면 됩니다.

const res = await puter.ai.chat(messages, { stream: true });
let full = "";
for await (const part of res) full += part?.text ?? "";

messages는 [{ role, content }] 배열입니다. 대화 이력을 그대로 전달하면 멀티턴 (Multi-turn) 대화가 가능합니다.

호출부를 하나로 통일하고, 내부에서 switch를 사용합니다.

export async function callAI({ provider, model, messages, apiKey }) {
switch (provider) {
case "puter": return callPuter({ model, messages });
...

각 사의 특징은 아래 표와 같습니다. 이를 각 함수 내부에만 가두어 두면, UI 측에서는 callAI()만 알고 있으면 됩니다.

프로바이더	방식	포인트
Puter	키 불필요	puter.ai.chat() 사용. 최초 로그인 필요
Gemini	contents로 전송	role: assistant → model로 변환 필요
Groq	OpenAI 호환	messages를 변환 없이 그대로 전송 가능
Claude	전용 헤더	anthropic-dangerous-direct-browser-access: true 필요

OpenAI 호환인 Groq가 가장 다루기 쉽습니다.

const res = await fetch("https://api.groq.com/openai/v1/chat/completions", {
method: "POST",
headers: {
...

Claude를 브라우저에서 직접 호출할 때는 anthropic-dangerous-direct-browser-access: true를 추가하지 않으면 CORS 에러로 차단됩니다. 키가 노출되는 형태이므로, 자신의 키를 자신의 단말기에서 사용하는 BYOK 방식이기에 허용되는 용도로 한정합니다.

최초 로그인 팝업이 차단되면 응답이 오지 않으므로, 첫 번째 청크 (Chunk)가 일정 시간 동안 오지 않으면 중단하고 안내합니다.

let firstSeen = false;
const timeout = new Promise((_, reject) =>
setTimeout(() =>
{
...

callAI()로 인터페이스가 통일되어 있으므로, 다른 프로바이더로의 전환은 단 한 줄로 끝납니다.

• Puter.js는 <script> + puter.ai.chat()

로 API 키 없이 AI를 호출할 수 있습니다 (User Pays 모델). 여러 AI를 사용하면서도, 각 사의 특성(Gemini의 role 변환 / Groq의 OpenAI 호환 / Claude의 전용 헤더)은 내부에 캡슐화하여 callAI({ provider, ... })로 인터페이스를 하나로 통일합니다. 스마트폰의 팝업 차단 문제는 타임아웃 + 다른 AI로 전환을 통해 회피합니다.

messages의 형식을 모든 프로바이더에 대해 통일해 두면, AI의 추가나 교체도 switch 문을 한 줄 수정하는 것만으로 끝납니다.

이 구현으로 만든 AI 메모 앱: AI로 가볍게 검색하며 메모하기 — 포스트잇에 질문을 쓰면 AI가 답해주는, 등록이 필요 없는 무료 메모 앱.

웹 제작·SEO 도구 개발 기술 정보 사이트: CodeQuest.work