Puter.js로 만드는 서버리스 AI 챗봇

실시간 데모

아래 채팅창에서 직접 AI와 대화해 보세요. 서버 설정이나 API 키 없이도 완전히 동작합니다.

Created using Puter.JS

Puter.js 소개

Puter.js는 브라우저 기반 클라우드 OS인 Puter의 JavaScript SDK입니다. 2022년 캐나다에서 시작된 오픈소스 프로젝트로, AGPL-3.0 라이선스 하에 GitHub에서 개발되고 있습니다.

핵심 특징

오픈소스: GitHub에서 소스 코드 공개 및 커뮤니티 기여 가능
서버리스 백엔드: AI, 스토리지, 인증 등을 프론트엔드에서 직접 사용
브라우저 네이티브: 별도 설치나 빌드 과정 없이 CDN 로드만으로 사용
셀프 호스팅: 원하면 자체 서버에 Puter 플랫폼 구축 가능

기존 방식 vs Puter.js

기존 방식: 백엔드 서버, API 키 관리, 데이터베이스 설정, 배포 환경 등 복잡한 인프라 구성

Puter.js: 프론트엔드 JavaScript 코드만으로 모든 기능 구현 가능

구현 방법

SDK 로드

<script src="https://js.puter.com/v2/"></script>

CDN에서 직접 로드하여 AI, 스토리지, 인증 등 모든 백엔드 서비스에 접근합니다.

메시지 관리

const messages = [];

function addMessage(msg, isUser) {
    const messagesDiv = document.getElementById("messages");
    const messageDiv = document.createElement("div");
    messageDiv.classList.add("message");
    if (isUser) {
        messageDiv.classList.add("user-message");
    }
    messageDiv.textContent = msg;
    messagesDiv.appendChild(messageDiv);
    messagesDiv.scrollTop = messagesDiv.scrollHeight;
}

대화 컨텍스트를 배열로 유지하며 DOM 조작으로 실시간 UI를 업데이트합니다.

AI API 호출

function sendMessage() {
    const input = document.getElementById("input-message");
    const message = input.value.trim();
    if (message) {
        addMessage(message, true);
        input.value = '';
        messages.push({ content: message, role: 'user' });

        puter.ai.chat(messages).then(response => {
            addMessage(response, false);
            messages.push(response.message);
        }).catch(error => {
            console.error("AI response error:", error);
        });
    }
}

사용자 입력을 검증하고 puter.ai.chat()으로 대화 컨텍스트를 전송하여 AI 응답을 받습니다.

결론

Puter.js를 사용하면 복잡한 백엔드 설정 없이 최소한의 코드로 실용적인 AI 애플리케이션을 구현할 수 있습니다.