반응형
AIKit — 5분 챗봇 튜토리얼
목표
프레임워크 없이, HTML 파일 하나로 AI 챗봇을 만든다. React도 Vue도 필요 없다. AIKit CDN 한 줄이면 된다.
준비물
- 텍스트 에디터
- 웹 브라우저
- AI API 키 1개 (OpenAI, Claude, Gemini 중 아무거나)
1단계: HTML 구조
<!DOCTYPE html>
<html>
<head>
<title>AI ChatBot</title>
<!-- AIKit CDN -->
<script src="https://cdn.jsdelivr.net/npm/@lukaplayground/aikit/dist/aikit.min.js"></script>
</head>
<body>
<div id="chat-container">
<div id="messages"></div>
<div id="input-area">
<textarea id="user-input" placeholder="메시지를 입력하세요"></textarea>
<button id="send-btn">전송</button>
</div>
</div>
</body>
</html><script> 한 줄로 AIKit이 로드된다. 빌드 도구 없이 바로 사용 가능하다.
2단계: AIKit 초기화
// AIKit 인스턴스 생성
const ai = new AIKit({
provider: 'openai',
apiKey: localStorage.getItem('apiKey') || prompt('API Key를 입력하세요'),
options: {
model: 'gpt-4o-mini',
temperature: 0.7,
maxTokens: 500
},
enableCache: true,
enableCostTracking: true
});
// API 키 저장
localStorage.setItem('apiKey', ai.config.apiKey);enableCache: true를 켜면 같은 질문에 대한 응답을 캐시해서 API 호출을 줄인다.
3단계: 메시지 전송
const messageHistory = [];
async function sendMessage() {
const input = document.getElementById('user-input');
const message = input.value.trim();
if (!message) return;
// 사용자 메시지 표시
addMessageToUI('user', message);
messageHistory.push({ role: 'user', content: message });
input.value = '';
try {
// AIKit으로 응답 받기
const response = await ai.chat(message, {
messages: messageHistory.slice(-20) // 최근 20개만 전송
});
// AI 응답 표시
addMessageToUI('ai', response.content);
messageHistory.push({ role: 'assistant', content: response.content });
// 비용 표시
updateCostDisplay();
} catch (error) {
addMessageToUI('error', `오류: ${error.message}`);
}
}
function addMessageToUI(type, text) {
const container = document.getElementById('messages');
const div = document.createElement('div');
div.className = `message ${type}`;
div.textContent = text;
container.appendChild(div);
container.scrollTop = container.scrollHeight;
}messageHistory.slice(-20)으로 대화 이력을 20개로 제한한다. 이력이 길어지면 토큰 사용량이 기하급수적으로 늘어나기 때문이다.
4단계: 비용 추적
function updateCostDisplay() {
const report = ai.getCostReport();
document.getElementById('cost').textContent =
`총 비용: ${report.totalUSD} | 요청: ${report.totalRequests}건`;
}AIKit의 내장 CostTracker가 자동으로 프로바이더별 비용을 계산한다.
커스터마이징
모델 변경
const ai = new AIKit({
provider: 'gemini', // OpenAI → Gemini로 변경
apiKey: 'AIza...',
options: { model: 'gemini-1.5-flash' }
});프로바이더를 바꿔도 나머지 코드는 그대로다. 이게 Adapter Pattern의 효과다.
응답 검증 추가
const response = await ai.chat(message, {
validate: {
language: 'korean', // 한국어 응답 강제
minLength: 10, // 너무 짧은 응답 방지
maxLength: 2000 // 비용 제한
}
});프로바이더 전환
// 실행 중에 프로바이더 변경
ai.updateConfig({
provider: 'claude',
apiKey: 'sk-ant-...'
});삽질 기록
CORS 에러
로컬 파일(file://)로 열면 CORS 에러가 발생한다. 해결 방법:
# 간단한 로컬 서버
npx serve .
# 또는
python3 -m http.server 8000대화 이력 무한 증가
초기에 messageHistory를 제한하지 않았더니, 대화가 길어지면서 토큰 사용량이 폭증했다. slice(-20)으로 최근 20개만 유지하는 것으로 해결.
마무리
HTML 파일 하나, <script> 한 줄로 AI 챗봇이 완성된다. 프레임워크나 빌드 도구 없이 동작하는 게 AIKit의 핵심 가치다. 다음 편에서는 PHP 프로젝트에서 AIKit을 연동하는 방법을 다룬다.
기술 스택: Vanilla JavaScript, AIKit CDN
소스 코드: GitHub
라이브 데모: AIKit Playground
반응형
'프로젝트 > AIKit' 카테고리의 다른 글
| AIKit #6 - React & Vue에서 AIKit 사용하기 (0) | 2026.02.08 |
|---|---|
| AIKit #5 - PHP 프로젝트에서 AIKit 연동하기 (0) | 2026.02.08 |
| AIKit #3 - QA 개발자가 만든 AI 라이브러리 (0) | 2026.02.07 |
| AIKit #2 - Adapter Pattern으로 멀티 프로바이더 지원하기 (0) | 2026.02.06 |
| AIKit #1 - 왜 AI API 통합 라이브러리를 만들었나 (0) | 2026.02.05 |
