AI Credit Dashboard 🚀

현존하는 주요 AI 서비스(OpenAI, x.ai, OpenRouter, Moonshot AI, RunPod, Tavily)의 사용량과 크레딧 잔액을 한곳에서 쉽고 빠르게 모니터링할 수 있는 프리미엄 대시보드입니다.

주요 기능 (Key Features)

1. OpenAI 지능형 모니터링

• 실시간 데이터: 이번 달 1일부터 현재까지의 사용량을 실시간으로 조회합니다.
• 자동 월별 캐싱: 과거 5개월치의 월별 사용량을 자동으로 가져와 로컬 브라우저에 저장합니다. 이후 접속 시에는 추가 API 호출 없이 즉시 표시되어 매우 빠릅니다.
• 진행 상황 안내: 초기 데이터 로딩 시 "??월 요금 가져오는 중..."과 같은 메시지를 통해 투명하게 진행 상황을 알려줍니다.

2. x.ai (Grok) 밸런스 체크

• Prepaid/Postpaid 지원: 선불형 잔액과 후불형 사용량을 모두 지원합니다.
• 사용량 게이지: 설정된 한도 대비 현재 사용량을 시각적인 게이지로 보여줍니다.

3. OpenRouter 통합 모니터링

• 실시간 잔액 조회: OpenRouter Credits API를 통해 total_credits와 total_usage를 가져옵니다.
• 잔액 계산: 남은 크레딧(Estimated Balance)을 실시간으로 계산하여 표시합니다.
• 사용량 분석: 전체 누적 크레딧 대비 현재 사용량을 시각화하여 보여줍니다.

3. Moonshot AI 상세 잔액

• 하이브리드 잔액 표시: 현금 잔액(Cash)과 바우처(Voucher) 잔액을 구분하여 상세히 표시합니다.
• 만료 안내: 바우처의 경우 만료 기한이 있을 수 있음을 알려주는 안내 메시지를 한국어로 제공합니다.

4. RunPod GPU 클라우드 잔액

• 실시간 잔액 조회: GraphQL API를 통해 현재 계정의 clientBalance를 실시간으로 가져옵니다.
• 통합 모니터링: GPU 및 서버리스 환경에 최적화된 잔액 정보를 대시보드에서 한눈에 확인할 수 있습니다.

5. Tavily 크레딧 조회

• 실시간 크레딧 확인: Tavily Usage API를 통해 남은 크레딧과 사용량을 즉시 확인합니다.
• 플랜/리셋일 표시: 현재 플랜과 크레딧 리셋 일자를 함께 보여줍니다.

6. 보안 및 성능 (Privacy & Performance)

• 로컬 저장: 모든 API Key와 월별 캐시 데이터는 사용자의 브라우저(localStorage)에만 저장됩니다. 서버에는 절대 전송되지 않습니다.
• Vercel Proxy: API Key 노출을 방지하기 위해 Vercel Serverless Functions를 프록시로 사용하여 안전하게 데이터를 요청합니다.

API 설정 가이드 (API Key Requirements)

각 서비스의 정확한 사용량을 조회하기 위해서는 상위 권한이 있는 API Key가 필요할 수 있습니다.

1. OpenAI (Management/Organization Key)

• 필요 권한: 전체 조직의 비용을 조회하려면 Organization 레벨의 권한이 있는 키가 필요합니다.
• 키 발급처: OpenAI API Keys
• 참고: 프로젝트 전용 키가 아닌, 비용 관리 권한이 포함된 키를 사용해 주세요.

2. x.ai (Management Key)

• 키 발급처: x.ai Console
• 참고: 단순히 채팅용이 아닌, 계정 관리 및 잔액 조회가 가능한 관리자용 키를 권장합니다.

3. OpenRouter (Management Key)

• 필요 권한: 크레딧 정보를 조회하려면 Management Key 권한이 활성화된 API 키가 필요할 수 있습니다.
• 키 발급처: OpenRouter API Keys

3. Moonshot AI

• 키 발급처: Moonshot AI Platform

4. RunPod (API Key with GraphQL Permissions)

• 키 발급처: RunPod Console - Settings
• 필요 권한: 반드시 GraphQL (Read 또는 Full Access) 권한이 포함된 API Key여야 잔액 조회가 가능합니다.

5. Tavily

• 키 발급처: Tavily Dashboard
• 필요 권한: Usage 조회가 가능한 일반 Tavily API Key를 사용하면 됩니다.

---

로컬 테스트 (Local Testing)

개발 및 테스트 환경에 따라 다음 명령어를 사용하세요:

1. 프론트엔드 UI 개발

npm run dev

• Vite 기반의 빠른 핫 리로딩을 지원합니다. (기본 UI 작업 및 로컬 API 테스트 시 권장)

2. 전체 기능 테스트 (Backend Proxy 포함)

npx vercel dev

• /api/*.js에 정의된 서버리스 함수를 포함하여 실제 배포 환경과 동일하게 테스트할 수 있습니다. (API 연동 확인 시 권장)

배포 가이드 (Deployment)

이 프로젝트는 Vercel에 최적화되어 있습니다.

방법 1: CLI 배포

npx vercel

• 터미널에서 즉시 배포하고 URL을 생성합니다.

방법 2: GitHub 연동 (권장)

1. Vercel Dashboard에 접속합니다.
2. New Project를 클릭하고 현재 리포지토리(superwhyun/APICredits)를 연결합니다.
3. Deploy를 클릭하면 이후 git push를 할 때마다 자동으로 배포됩니다.

---

크롬 익스텐션 설치 가이드 (Chrome Extension)

이 대시보드를 브라우저 우측 상단에서 팝업으로 편리하게 사용할 수 있습니다.

1. 빌드하기

npm run build

2. 크롬에 로드하기

1. 크롬 브라우저에서 chrome://extensions에 접속합니다.
2. 우측 상단의 **개발자 모드(Developer mode)**를 켭니다.
3. 압축해제된 확장 프로그램을 로드합니다(Load unpacked) 버튼을 클릭합니다.
4. 프로젝트 폴더 내의 dist 폴더를 선택합니다.

3. 사용하기

• 브라우저 툴바의 퍼즐 아이콘을 눌러 AI Credit Dashboard를 고정(Pin)합니다.
• 대시보드 아이콘을 클릭하면 즉시 잔액을 확인할 수 있습니다.
• 하이브리드 통신: 익스텐션 모드에서는 Direct API 호출 방식을 사용합니다.
  • 장점: Vercel 프록시 서버를 거치지 않아 응답이 더 빠르고, API Key가 당신의 브라우저 밖으로 절대 나가지 않아 더 안전합니다.
  • 보안: 모든 통신은 크롬의 보안 권한(host_permissions) 내에서 직접 이루어집니다.

---

---

© 2026 Admin Dashboard Project.