Luka's Playground ← Work

Project

AIKit

JS · npm · AI

OpenAI, Claude, Gemini를 단일 인터페이스로 호출하는 경량 JavaScript 라이브러리. CDN 한 줄 또는 npm install로 설치하며, 빌드 도구 없이 순수 HTML에서도 동작한다.

Provider Adapter 패턴으로 각 AI API의 차이를 추상화하고, LocalStorage 캐싱·자동 Fallback·실시간 비용 추적을 내장해 프로덕션 수준의 안정성을 제공한다.

생성자에서 provider 이름을 받아 해당 Adapter 인스턴스를 로드한다. 이후 모든 호출은 동일한 chat() 메서드로 처리된다.

class AIKit {
    constructor(config) {
        this.config  = { autoFallback: false, ...config };
        this.adapter = this.loadAdapter(config.provider);
        this.cache   = config.enableCache !== false
                         ? new CacheManager() : null;
        this.costTracker = new CostTracker();
    }

    loadAdapter(provider) {
        const map = {
            openai:  () => new OpenAIAdapter(this.config),
            claude:  () => new ClaudeAdapter(this.config),
            gemini:  () => new GeminiAdapter(this.config),
        };
        if (!map[provider]) throw new Error(`Unknown provider: ${provider}`);
        return map[provider]();
    }
}

src/core/AIKit.js — constructor & adapter factory

chat() 호출 시 캐시를 먼저 확인하고, API 오류 발생 시 autoFallback 옵션에 따라 다음 provider로 자동 전환한다.

async chat(prompt) {
    // 1. 캐시 히트 → 즉시 반환
    const cached = this.cache?.get(prompt);
    if (cached) return cached;

    try {
        // 2. 어댑터를 통한 API 호출
        const res = await this.adapter.chat(prompt);
        this.cache?.set(prompt, res);
        this.costTracker.record(res.usage);
        return res;
    } catch (err) {
        // 3. 실패 시 자동 Fallback
        if (this.config.autoFallback) {
            return this.tryFallback(prompt);
        }
        throw err;
    }
}

src/core/AIKit.js — chat with cache & fallback

  1. new AIKit({ provider, apiKey })로 인스턴스를 생성하면 해당 Provider Adapter가 초기화된다.
  2. ai.chat(prompt) 호출 시 LocalStorage 캐시에 동일 프롬프트가 있으면 API 없이 즉시 반환한다.
  3. 캐시 미스 시 Adapter가 각 AI API 규격에 맞게 요청을 변환하고 호출한다.
  4. 응답을 캐시에 저장하고, CostTracker가 토큰 사용량을 기록한다.
  5. API 오류 발생 시 autoFallback: true면 다음 우선순위 provider로 자동 전환해 재시도한다.
View Project →