ElectricCodeGuy/SupabaseAuthWithSSR

Supabase Auth + AI Stack for Next.js 16 with SSR and React Server Components (RSC), Welcome to a production-ready template combining Supabase SSR authentication with AI capabilities: document chat (RAG), web search, and multiple LLM support. Features include secure file storage, vector search (pgvector), and persistent chat history.

SupabaseAuthWithSSR – Next.js용 프로덕션 수준의 AI 채팅 스타터

무엇인가요 – Next.js 16, Supabase SSR 인증, 그리고 Claude (Anthropic) LLM을 결합하여 완전한 기능을 갖춘 AI 채팅 경험을 제공하는 즉시 실행 가능한 웹 앱입니다. 단일 SQL 파일 하나로 전체 데이터베이스 스키마(테이블, RLS 정책, 트리거, 스토리지 정책, 검색 함수, 모델 카탈로그)를 생성합니다. 클론 후 종속성 설치, setup.sql 스크립트 실행, 몇 가지 API 키 추가만으로 다음과 같은 기능을 갖춘 실시간 채팅 제품을 사용할 수 있습니다:

기능	작동 방식
보안 인증	Supabase SSR 회원가입/로그인/매직 링크 흐름, 서버 사이드 세션 처리 및 모든 테이블에 대한 행 수준 보안.
8가지 AI 도구	문서 RAG (PDF OCR → 임베딩 → 하이브리드 벡터/키워드 검색), 웹 검색 (Exa), 아티팩트 워크스페이스 (버전 관리된 마크다운), 장기 메모리, 대화 검색, 인터랙티브 차트 생성, PDF 생성, 로컬 텍스트-이미지 생성 (Qwen-Image-2.1).
비용 인식 사용	각 생성 단계에서 토큰 수와 캐시 메타데이터를 `message_parts` 행의 JSON으로 저장; 대시보드는 사용자별 및 관리자 수준의 KPI, 캐시 히트율, 추정 비용을 집계.
프롬프트 캐싱	두 단계의 Anthropic 캐시(정적 시스템 프롬프트 + 이동 브레이크포인트)로 다단계 도구 전환 시 입력 토큰 비용을 약 10%로 감소.
버전 관리 아티팩트	"아티팩트" 사이드패널은 AI가 작성한 마크다운을 실시간 스트리밍; 생성/수정 시 추가 테이블 없이 버전으로 저장.
PDF 및 차트 렌더링	스타일링된 PDF에는 `@react-pdf/renderer`를 사용하고, 인터랙티브 시각화에는 클라이언트 사이드 차트 라이브러리(Chart.js, ECharts, D3 등)를 사용.
자체 호스팅 이미지 생성	선택적 로컬 서버(Qwen-Image-2.1)가 OpenAI 호환 `/v1/images/generations` 엔드포인트를 노출하여 이미지당 API 수수료를 회피.
관리자 콘솔	`is_admin` 플래그가 설정된 사용자는 조직 전체 사용량, 최고 지출자, 사용자 역할 관리를 볼 수 있음.

기술 스택

프레임워크: Next.js 16 (app 라우터, 서버 액션)
인증 및 DB: Supabase (PostgreSQL, pgvector, RLS, 스토리지 버킷)
LLM: Vercel AI SDK (v7)를 통한 Anthropic Claude 모델
임베딩: Voyage AI (voyage-4-large)
OCR: Mistral OCR 모델 (mistral-ocr-latest)
웹 검색: Exa API
이미지 생성: 로컬에서 실행되는 Qwen-Image-2.1 (FastAPI 또는 vLLM-Omni)
PDF: @react-pdf/renderer
차트: CDN에서 로드하는 클라이언트 사이드 라이브러리 (chart.js, echarts, d3, mermaid, three)
스타일링: Tailwind CSS (Next.js 스타터에서 암묵적으로 제공)

빠른 시작 (README에서)

git clone https://github.com/ElectricCodeGuy/SupabaseAuthWithSSR.git
cd SupabaseAuthWithSSR
npm install
cp .env.local.example .env.local   # 키 입력
npm run dev

Supabase 대시보드에서 database/setup.sql 실행 – 전체 스키마는 재실행 가능(idempotent).
userfiles라는 이름의 프라이빗 스토리지 버킷 생성 (RLS 정책은 이미 정의됨).
.env.local에 필요한 키 입력 (Supabase, Anthropic, Mistral, Voyage, Exa, 선택적 이미지 서버 URL).
http://localhost:3000/signup에서 가입하고 이메일 확인.
(선택 사항) SQL로 관리자 권한 부여: UPDATE public.users SET is_admin = true WHERE email = 'you@example.com';

일반적인 사용 사례

법률 또는 지식 기반 어시스턴트 – PDF 업로드, AI가 문장 검색 및 인용 가능 (이 리포지토리는 덴마크 법적 AI 플랫폼을 구동).
보고서 생성 – 어시스턴트에게 데이터 분석, 차트 생성, 정교한 PDF 내보내기를 요청.
창의적 이미지 생성 – 제3자 비용 없이 온프레미스에서 로고나 일러스트 생성.
다중 도구 워크플로우 – 단일 사용자 프롬프트로 웹 검색, 문서 검색, 차트 생성, PDF 생성을 한 번에 트리거하며, 전체 추론 흐름을 지속.
비용 모니터링 – 토큰 단위 회계를 통해 제품 팀은 비용을 추적하고 캐시 최적화 가능.

라이선스

MIT – 상용 또는 개인 사용에 무료.

위 모든 세부 정보는 리포지토리의 README에서 직접 가져옴. 추가 기능은 추측되지 않음.