claude ui

클로드 UI

Nuxt.js로 구축된 Anthropic의 Claude AI 모델을 위한 최신 채팅 인터페이스입니다. 깔끔한 사용자 인터페이스에서 Claude와 원활한 대화를 경험해보세요.

전제 조건

• Node.js(v18 이상)
• npm 또는 원사
• 인류학 API 키

? 특징

• ? 대화 기록 관리
• ? 다중 Claude 모델 지원
• 마크다운 및 코드 구문 강조
• ? 어둡게/밝게 모드 전환
• ? 각 채팅에 대한 시스템 프롬프트를 사용하여 행동 개인화
• 각 채팅에 대한 출력 토큰 제한
• 각 채팅의 맞춤 온도(임의성)
• ?? 첨부 파일에 대한 프롬프트 캐싱
• ? 텍스트 추출 및 구문 분석

기술 스택

• Nuxt 3로 구축
• ? Drizzle ORM과 데이터베이스 통합
• ? @nuxt/ui의 UI 구성 요소
• ? @anthropic-ai/sdk와의 AI 통합
• @nosferatu500/texttract를 사용한 텍스트 추출 기능
• markdown-it을 통한 마크다운 지원
• highlight.js를 사용한 코드 강조

설정

종속성을 설치해야 합니다.

 # npm
npm install

# pnpm
pnpm install

# yarn
yarn install

환경

루트 디렉터리에 .env 파일을 생성하고 ANTHROPIC_KEY API 키를 추가하세요.

개발 서버

http://localhost:3000에서 개발 서버를 시작합니다.

 # npm
npm run dev

# pnpm
pnpm dev

# yarn
yarn dev

생산

프로덕션용 애플리케이션을 빌드합니다.

 # npm
npm run build

# pnpm
pnpm build

# yarn
yarn build

데이터 베이스

애플리케이션은 SQLite 데이터베이스를 사용하여 스레드 및 메시지 데이터를 저장합니다.

데이터베이스 관리

이 프로젝트는 데이터베이스 관리를 위해 Drizzle ORM을 사용합니다. 사용 가능한 명령:

 # Generate database schema
npm run db:generate

# Migrate database schema
npm run db:migrate

토도

• 장기 실행 채팅을 위한 스트리밍 지원 추가
• 양식 입력에 대한 서버측 유효성 검사 추가
• 사용자 인증 추가