프로젝트 설정 파일 가이드

AI 개발 도구가 VChatCloud 문서를 더 효과적으로 활용하도록 프로젝트에 설정 파일을 추가할 수 있습니다. 이 페이지에서는 Claude Code, Cursor, Windsurf 등에서 사용할 수 있는 설정 파일 샘플을 제공합니다.

처음부터 시작하기

VChatCloud SDK를 사용하여 채팅 앱을 처음 만드는 경우, 아래 샘플 CLAUDE.md를 프로젝트 루트에 추가하면 AI가 프로젝트 설정부터 채팅 기능 구현까지 모든 과정을 안내해줍니다.

이 샘플은 React, TypeScript, Tailwind CSS v4, shadcn/ui를 사용하는 최신 웹 개발 환경을 기준으로 작성되었습니다.

프로젝트 루트에 CLAUDE.md 파일을 생성하고 아래 내용을 추가하세요.

markdown

# VChatCloud 채팅 웹 애플리케이션

이 프로젝트는 VChatCloud SDK를 사용하여 실시간 채팅 기능을 제공하는 웹 애플리케이션입니다.

## 기술 스택

- **React** (v18+)
- **TypeScript**
- **Vite** 빌드 도구
- **Tailwind CSS v4** - 유틸리티 우선 CSS 프레임워크
- **shadcn/ui** - 재사용 가능한 React 컴포넌트 라이브러리

## VChatCloud 문서

VChatCloud 개발 문서는 다음 주소에서 확인할 수 있습니다.

- 전체 문서 목차: https://www.vchatcloud.com/doc/llms.txt
- JavaScript SDK: https://www.vchatcloud.com/doc/javascript/quick-start
- React UIKit: https://www.vchatcloud.com/doc/react/quickStart/quickStart
- REST API: https://www.vchatcloud.com/doc/rest_api/overview
- MCP 서버: https://www.vchatcloud.com/mcp

**MCP 서버 연결을 적극 권장합니다.** MCP 서버를 연결하면 AI가 필요할 때마다 VChatCloud 문서를 자동으로 검색하여 더욱 정확한 코드를 작성할 수 있습니다. 설정 방법은 https://www.vchatcloud.com/doc/ai/ai-tools.html 를 참고하세요.

## AI 도구 사용 시 주의사항

1. **MCP 서버 연결 확인**
   - VChatCloud 관련 작업을 시작하기 전에 MCP 서버 연결 상태를 먼저 확인합니다
   - MCP 서버가 연결되지 않은 경우, 다음 메시지를 사용자에게 표시합니다

     > VChatCloud 작업을 더 정확하게 수행하기 위해 MCP 서버 연결을 권장합니다.
     > MCP 서버를 연결하면 최신 VChatCloud 문서를 실시간으로 검색할 수 있습니다.
     >
     > 설정 방법: https://www.vchatcloud.com/doc/ai/ai-tools.html
     >
     > 연결하시겠습니까?

   - 사용자가 연결을 완료한 후 작업을 진행합니다

2. **VChatCloud SDK 메서드**
   - 공식 문서의 API 명세를 정확히 따릅니다
   - MCP 서버를 활용하여 최신 문서를 참조합니다

3. **shadcn/ui 컴포넌트**
   - 새로운 컴포넌트 추가 시 `npx shadcn@latest add [component]` 명령을 사용합니다
   - 컴포넌트 스타일은 Tailwind CSS 유틸리티 클래스로 커스터마이징합니다

4. **React 패턴**
   - 최신 React Hook 패턴을 사용합니다
   - 클래스 컴포넌트는 사용하지 않습니다

빈 폴더에서 시작하기

위 CLAUDE.md 파일을 추가한 후, 아무것도 없는 상태에서 프로젝트를 시작하려면 다음 프롬프트를 사용하세요:

markdown

React와 Tailwind CSS v4, shadcn/ui를 사용하여 VChatCloud 채팅 기능을 구현하는 프로젝트를 시작하려고 합니다.

1. Vite를 사용하여 React + TypeScript 프로젝트를 생성해주세요
2. Tailwind CSS v4를 설치하고 설정해주세요
3. shadcn/ui를 초기화하고 기본 컴포넌트를 추가해주세요
4. 구현된 화면을 그대로 사용하려는 경우 VChatCloud React UIKit을 설치하고, 아닌 경우 JS SDK를 활용해서 기본 채팅 화면을 구현해주세요

프로젝트 구조와 각 단계별 명령어를 알려주세요.

AI가 빈 폴더에서 시작하여 패키지 설치, 환경 설정, VChatCloud SDK 통합, 기본 채팅 UI 구현까지 모든 과정을 단계별로 안내해줍니다.

기존 프로젝트에 통합하기

이미 진행 중인 프로젝트에 VChatCloud를 추가하는 경우, 아래 샘플 설정 파일을 참고하세요. 사용 중인 AI 도구에 맞는 설정 파일을 프로젝트에 추가하면 됩니다.

프로젝트에 맞게 커스터마이징하기

제공된 샘플은 기본 템플릿입니다. 구성하려는 프로젝트의 특성에 맞게 다음 내용을 수정하세요.

사용 중인 플랫폼
팀의 코딩 규칙 및 컨벤션

CLAUDE.md (Claude Code용)

Claude Code는 프로젝트 루트의 CLAUDE.md 파일을 자동으로 읽어 프로젝트 컨텍스트로 활용합니다.

프로젝트 루트에 CLAUDE.md 파일을 생성하고 아래 내용을 추가하세요.

markdown

# VChatCloud 프로젝트 가이드

이 프로젝트는 VChatCloud SDK를 사용하여 채팅 및 영상통화 기능을 구현합니다.

## VChatCloud 문서

VChatCloud 개발 문서는 다음 주소에서 확인할 수 있습니다.

- 전체 문서 목차: https://www.vchatcloud.com/doc/llms.txt
- MCP 서버: https://www.vchatcloud.com/mcp

**MCP 서버 연결을 적극 권장합니다.** MCP 서버를 연결하면 AI가 필요할 때마다 VChatCloud 문서를 자동으로 검색하여 더욱 정확한 코드를 작성할 수 있습니다. 설정 방법은 https://www.vchatcloud.com/doc/ai/ai-tools.html 를 참고하세요.

## 프로젝트 정보

### 사용 중인 VChatCloud SDK

- **플랫폼**: [JavaScript / React / Vue / Flutter / Android / iOS / Unity 중 선택]

### VChatCloud 주요 기능

- 1:1 채팅 및 그룹 채팅
- 실시간 메시지 송수신
- 영상통화 (JavaScript SDK만 해당)
- 메시지 번역, 파일 공유 등 추가 라이브러리

### 개발 가이드

VChatCloud 관련 코드를 작성할 때는 다음 가이드를 따라주세요.

1. **SDK 메서드 사용**: VChatCloud 공식 문서의 API 명세를 참고하여 정확한 메서드를 사용합니다
2. **에러 처리**: 모든 SDK 호출에 적절한 에러 핸들링을 추가합니다
3. **이벤트 핸들러**: 메시지 수신, 채널 변경 등의 이벤트를 적절히 처리합니다
4. **REST API**: 채팅방 관리, 사용자 관리(추방/글쓰기 제한) 등은 REST API를 활용합니다

### AI 도구 사용 시 주의사항

1. **MCP 서버 연결 확인**
   - VChatCloud 관련 작업을 시작하기 전에 MCP 서버 연결 상태를 먼저 확인합니다
   - MCP 서버가 연결되지 않은 경우, 다음 메시지를 사용자에게 표시합니다

     > VChatCloud 작업을 더 정확하게 수행하기 위해 MCP 서버 연결을 권장합니다.
     > MCP 서버를 연결하면 최신 VChatCloud 문서를 실시간으로 검색할 수 있습니다.
     >
     > 설정 방법: https://www.vchatcloud.com/doc/ai/ai-tools.html
     >
     > 연결하시겠습니까?

   - 사용자가 연결을 완료한 후 작업을 진행합니다

2. **문서 참조**
   - MCP 서버가 연결된 경우 필요할 때마다 문서를 검색하여 정확한 API를 사용합니다
   - React/Vue에서는 UIKit과 JS SDK 둘 다 사용 가능합니다

.cursorrules (Cursor용)

Cursor는 프로젝트 루트의 .cursorrules 파일을 읽어 AI 작동 방식을 커스터마이징합니다.

프로젝트 루트에 .cursorrules 파일을 생성하고 아래 내용을 추가하세요.

markdown

# VChatCloud 프로젝트 규칙

이 프로젝트는 VChatCloud SDK를 사용합니다.

## VChatCloud 문서 참조

VChatCloud 관련 질문이나 코드 작성 시 다음 문서를 참조하세요.

- 전체 문서 목차: https://www.vchatcloud.com/doc/llms.txt
- JavaScript SDK: https://www.vchatcloud.com/doc/javascript/quick-start
- React UIKit: https://www.vchatcloud.com/doc/react/quickStart/quickStart
- Vue UIKit: https://www.vchatcloud.com/doc/vue/quickStart/quickStart
- Flutter SDK: https://www.vchatcloud.com/doc/flutter/quickStart/quickStart
- Android SDK: https://www.vchatcloud.com/doc/android/quickStart/quickStart
- iOS SDK: https://www.vchatcloud.com/doc/ios/quickStart/quickStart
- REST API: https://www.vchatcloud.com/doc/rest_api/overview

**중요: MCP 서버 연결을 권장합니다.**
MCP 서버를 연결하면 AI가 실시간으로 VChatCloud 문서를 검색하여 더 정확한 코드를 생성합니다.
설정 방법: https://www.vchatcloud.com/doc/ai/ai-tools.html

## 사용 플랫폼

[JavaScript / React / Vue / Flutter / Android / iOS / Unity 중 선택]

## 코딩 규칙

### MCP 서버 연결 확인

VChatCloud 관련 작업을 시작하기 전에 다음을 확인합니다:
1. MCP 서버가 연결되어 있는지 확인합니다
2. 연결되지 않은 경우, 사용자에게 다음 안내를 표시합니다

   > VChatCloud 작업을 더 정확하게 수행하기 위해 MCP 서버 연결을 권장합니다.
   > MCP 서버를 연결하면 최신 VChatCloud 문서를 실시간으로 검색할 수 있습니다.
   >
   > 설정 방법: https://www.vchatcloud.com/doc/ai/ai-tools.html
   >
   > 연결하시겠습니까?

3. 사용자가 연결을 완료한 후 작업을 진행합니다

### VChatCloud SDK 사용 시

1. 공식 문서의 API 명세를 정확히 따릅니다
2. 모든 SDK 호출에 에러 핸들링을 추가합니다
3. 플랫폼별 API 사용법은 MCP 서버를 통해 문서를 검색하여 확인합니다

### React/Vue 프로젝트

- UIKit과 JS SDK 중 적절한 것을 선택하여 사용합니다
- UIKit 사용 시 공식 컴포넌트를 최대한 활용합니다
- JS SDK 사용 시 React Hook 또는 Vue Composition API 패턴을 따릅니다

### REST API 사용

- 채팅방 관리: 채팅방 목록 조회, 생성, 수정, 삭제
- 사용자 관리: 사용자 목록 조회, 추방/추방 해제, 글쓰기 제한/해제
- 채팅: 공지사항, 귓속말, 커스텀 메시지 전송
- API 키와 토큰은 환경 변수로 관리하고, Git 저장소에 커밋하지 않도록 주의합니다
- 응답 데이터의 에러 코드를 확인합니다

.windsurfrules (Windsurf용)

Windsurf는 .windsurfrules 파일을 읽어 AI 작동 방식을 커스터마이징합니다.

프로젝트 루트에 .windsurfrules 파일을 생성하고 아래 내용을 추가하세요.

markdown

# VChatCloud 개발 가이드

이 프로젝트는 VChatCloud를 사용하여 채팅 및 영상통화 기능을 구현합니다.

## 문서 참조

VChatCloud 개발 문서
- llms.txt: https://www.vchatcloud.com/doc/llms.txt
- 개발자센터: https://www.vchatcloud.com/doc/

**MCP 서버 연결 권장**
AI가 실시간으로 문서를 검색하여 더 정확한 코드를 생성합니다.
MCP 서버 주소: https://www.vchatcloud.com/mcp
설정 가이드: https://www.vchatcloud.com/doc/ai/ai-tools.html

## SDK 정보

**사용 플랫폼**: [JavaScript / React / Vue / Flutter / Android / iOS / Unity]

## 개발 원칙

1. **MCP 서버 연결 확인**: VChatCloud 작업 시작 전 MCP 서버 연결 상태를 확인하고, 연결되지 않은 경우 사용자에게 다음 안내를 표시합니다

   > VChatCloud 작업을 더 정확하게 수행하기 위해 MCP 서버 연결을 권장합니다.
   > MCP 서버를 연결하면 최신 VChatCloud 문서를 실시간으로 검색할 수 있습니다.
   >
   > 설정 방법: https://www.vchatcloud.com/doc/ai/ai-tools.html
   >
   > 연결하시겠습니까?

2. **문서 우선**: VChatCloud 공식 문서를 반드시 참조하여 정확한 API를 사용합니다
3. **에러 처리**: 모든 SDK 호출과 REST API 호출에 적절한 에러 핸들링을 구현합니다
4. **타입 안정성**: TypeScript 프로젝트의 경우 VChatCloud SDK의 타입 정의를 활용합니다
5. **이벤트 관리**: 메시지 수신, 채널 변경 등의 이벤트를 적절히 처리하고 정리합니다

## 플랫폼별 가이드

### JavaScript SDK
- 채팅, 영상통화 지원
- 이벤트 핸들러를 통해 실시간 메시지 수신

### React / Vue
- UIKit 사용: 미리 구현된 채팅 UI 컴포넌트 활용
- JS SDK 사용: 직접 UI를 구현하며 SDK 메서드 호출

### Flutter / Android / iOS
- 네이티브 SDK 사용
- 플랫폼별 이벤트 핸들러 패턴 준수

### REST API
- 채팅방 관리: 목록 조회, 생성, 수정, 삭제
- 사용자 관리: 목록 조회, 추방/해제, 글쓰기 제한/해제
- 메시지 전송: 공지사항, 귓속말, 커스텀 메시지

추가 팁

MCP 서버와 함께 사용하기

위 설정 파일과 함께 MCP 서버를 연결하면 AI가 더욱 정확한 코드를 생성할 수 있습니다.

MCP 서버 설정 방법은 AI 도구와 함께 개발하기를 참고하세요.

팀 프로젝트에서 활용하기

위 설정 파일을 Git 저장소에 커밋하면 팀원 모두가 일관된 AI 지원을 받을 수 있습니다.

bash

git add CLAUDE.md .cursorrules .windsurfrules
git commit -m "Add VChatCloud AI tool configuration"

프로젝트에 맞게 커스터마이징하기

제공된 샘플은 기본 템플릿입니다. 프로젝트의 특성에 맞게 다음 내용을 수정하세요.

사용 중인 플랫폼
팀의 코딩 규칙 및 컨벤션

프로젝트 설정 파일 가이드 ​

처음부터 시작하기 ​

빈 폴더에서 시작하기 ​

기존 프로젝트에 통합하기 ​

프로젝트에 맞게 커스터마이징하기 ​

CLAUDE.md (Claude Code용) ​

.cursorrules (Cursor용) ​

.windsurfrules (Windsurf용) ​

추가 팁 ​

MCP 서버와 함께 사용하기 ​

팀 프로젝트에서 활용하기 ​

프로젝트에 맞게 커스터마이징하기 ​

프로젝트 설정 파일 가이드

처음부터 시작하기

빈 폴더에서 시작하기

기존 프로젝트에 통합하기

프로젝트에 맞게 커스터마이징하기

CLAUDE.md (Claude Code용)

.cursorrules (Cursor용)

.windsurfrules (Windsurf용)

추가 팁

MCP 서버와 함께 사용하기

팀 프로젝트에서 활용하기

프로젝트에 맞게 커스터마이징하기