Readme i18n

mckaywrigley/chatbot-ui

Share
English(original)DeutschEspañolfrançais日本語한국어PortuguêsРусский中文
Last translated: 14 Jun 2025

Translation Not Available Yet

This repository's README hasn't been translated yet. Once translated, it will be easier to read and understand in your native language (中文).

After translating, add the links to README so others can view it directly.

Chatbot UI

모두를 위한 오픈소스 AI 채팅 앱.

Chatbot UI

데모

최신 데모는 여기에서 확인하세요.

업데이트 소식

안녕하세요 여러분! 여러분의 피드백을 반영하여 대규모 업데이트를 위해 열심히 작업 중입니다.

더 간편한 배포, 향상된 백엔드 호환성, 개선된 모바일 레이아웃 등이 곧 제공될 예정입니다.

곧 다시 찾아뵙겠습니다.

-- Mckay

공식 호스팅 버전

직접 호스팅하지 않고 Chatbot UI를 사용해 보세요!

Chatbot UI의 공식 호스팅 버전은 여기에서 확인할 수 있습니다.

후원

Chatbot UI가 유용하다면, 오픈소스 작업을 지원하기 위해 후원을 고려해 주세요 :)

이슈

"이슈"는 코드베이스와 관련된 실제 문제로 제한합니다.

기능 요청, 클라우드 제공업체 문제 등과 관련된 과도한 양의 이슈가 접수되고 있습니다.

설정과 같은 문제가 있는 경우 위의 "토론" 탭에 있는 "도움말" 섹션을 참조하세요.

코드베이스와 무관한 이슈는 즉시 종료될 수 있습니다.

토론

위의 "토론" 탭에 참여하는 것을 적극 권장합니다!

토론은 질문을 하고, 아이디어를 공유하며, 도움을 받을 수 있는 좋은 장소입니다.

여러분의 질문은 다른 사람도 같은 질문을 가지고 있을 가능성이 높습니다.

레거시 코드

Chatbot UI는 최근 2.0 버전으로 업데이트되었습니다.

1.0 버전의 코드는 legacy 브랜치에서 찾을 수 있습니다.

업데이트 방법

로컬 Chatbot UI 저장소의 루트에서 다음 명령을 실행하세요:

npm run update

호스팅 인스턴스를 운영 중인 경우 라이브 데이터베이스에 최신 마이그레이션을 적용하기 위해 다음도 실행해야 합니다:

npm run db-push

로컬 빠른 시작

다음 단계를 따라 로컬에서 자신만의 Chatbot UI 인스턴스를 실행하세요.

전체 동영상 튜토리얼은 여기에서 시청할 수 있습니다.

1. 저장소 복제

git clone https://github.com/mckaywrigley/chatbot-ui.git

2. 의존성 설치

로컬 Chatbot UI 저장소의 루트 디렉토리에서 터미널을 열고 다음을 실행하세요:

npm install

3. Supabase 설치 및 로컬 실행

왜 Supabase인가요?

이전에는 로컬 브라우저 저장소를 사용하여 데이터를 저장했습니다. 그러나 이는 몇 가지 이유로 좋은 솔루션이 아니었습니다:

  • 보안 문제
  • 제한된 저장 공간
  • 멀티모달 사용 사례 제한

이제는 사용하기 쉽고, 오픈소스이며, Postgres 기반이며, 호스팅 인스턴스에 무료 티어가 있는 Supabase를 사용합니다.

향후 더 많은 옵션을 제공하기 위해 다른 제공업체도 지원할 예정입니다.

1. Docker 설치

로컬에서 Supabase를 실행하려면 Docker가 필요합니다. 무료로 여기에서 다운로드할 수 있습니다.

2. Supabase CLI 설치

MacOS/Linux

brew install supabase/tap/supabase

Windows

scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
scoop install supabase

3. Supabase 시작

로컬 Chatbot UI 저장소의 루트에서 터미널을 열고 다음을 실행하세요:

supabase start

4. 비밀 정보 입력

1. 환경 변수

로컬 Chatbot UI 저장소의 루트에서 터미널을 열고 다음을 실행하세요:

cp .env.local.example .env.local

다음을 실행하여 필요한 값을 얻으세요:

supabase status

참고: NEXT_PUBLIC_SUPABASE_URL에는 supabase status의 API URL을 사용하세요.

이제 .env.local 파일을 열고 값을 입력하세요.

환경 변수가 설정되면 사용자 설정에서 입력이 비활성화됩니다.

2. SQL 설정

첫 번째 마이그레이션 파일 supabase/migrations/20240108234540_setup.sql에서 위에서 얻은 값으로 다음 두 값을 대체해야 합니다:

  • project_url (53행): config.toml 파일에서 project_id를 변경하지 않는 경우 http://supabase_kong_chatbotui:8000 (기본값)을 그대로 유지할 수 있습니다.
  • service_role_key (54행): supabase status를 실행하여 얻은 값을 사용하세요.

이렇게 하면 저장소 파일이 제대로 삭제되지 않는 문제를 방지할 수 있습니다.

5. Ollama 설치 (로컬 모델 사용 시 선택 사항)

여기의 지침을 따르세요.

6. 앱 로컬 실행

로컬 Chatbot UI 저장소의 루트에서 터미널을 열고 다음을 실행하세요:

npm run chat

이제 로컬 Chatbot UI 인스턴스가 http://localhost:3000에서 실행 중일 것입니다. 호환 가능한 node 버전(예: v18)을 사용하세요.

백엔드 GUI는 http://localhost:54323/project/default/editor에서 확인할 수 있습니다.

호스팅 빠른 시작

다음 단계를 따라 클라우드에서 자신만의 Chatbot UI 인스턴스를 실행하세요.

동영상 튜토리얼은 곧 제공될 예정입니다.

1. 로컬 빠른 시작 따라하기

위의 "로컬 빠른 시작"에서 1-4단계를 반복하세요.

로컬과 호스팅 인스턴스에 대해 별도의 저장소를 사용하는 것이 좋습니다.

GitHub에 호스팅할 Chatbot UI 인스턴스용 새 저장소를 만들고 코드를 푸시하세요.

2. Supabase로 백엔드 설정

1. 새 프로젝트 생성

Supabase로 이동하여 새 프로젝트를 생성하세요.

2. 프로젝트 값 얻기

프로젝트 대시보드에 들어가면 왼쪽 하단의 "Project Settings" 아이콘 탭을 클릭하세요.

여기서 다음 환경 변수에 대한 값을 얻을 수 있습니다:

  • Project Ref: "General settings"에서 "Reference ID"로 찾을 수 있습니다.
  • Project ID: 프로젝트 대시보드 URL에서 찾을 수 있습니다 (예: https://supabase.com/dashboard/project/<YOUR_PROJECT_ID>/settings/general).

여전히 "Settings"에 있는 상태에서 왼쪽의 "API" 텍스트 탭을 클릭하세요.

여기서 다음 환경 변수에 대한 값을 얻을 수 있습니다:

  • Project URL: "API Settings"에서 "Project URL"로 찾을 수 있습니다.
  • Anon key: "Project API keys"에서 "anon public"으로 찾을 수 있습니다.
  • Service role key: "Project API keys"에서 "service_role"로 찾을 수 있습니다 (주의: 이는 비밀번호처럼 취급하세요!).

3. 인증 구성

다음으로, 왼쪽의 "Authentication" 아이콘 탭을 클릭하세요.

텍스트 탭에서 "Providers"를 클릭하고 "Email"이 활성화되어 있는지 확인하세요.

개인 인스턴스의 경우 "Confirm email"을 끄는 것을 권장합니다.

4. 호스팅 DB 연결

호스팅할 Chatbot UI 인스턴스의 저장소를 엽니다.

첫 번째 마이그레이션 파일 supabase/migrations/20240108234540_setup.sql에서 위에서 얻은 값으로 다음 두 값을 대체해야 합니다:

  • project_url (53행): 위에서 얻은 Project URL 값을 사용하세요.
  • service_role_key (54행): 위에서 얻은 Service role key 값을 사용하세요.

이제 로컬 Chatbot UI 저장소의 루트 디렉토리에서 터미널을 엽니다. 여기서 몇 가지 명령을 실행할 것입니다.

다음을 실행하여 Supabase에 로그인하세요:

supabase login

다음으로, 위에서 얻은 "Project ID"를 사용하여 다음 명령을 실행하여 프로젝트를 연결하세요:

supabase link --project-ref <project-id>

이제 프로젝트가 연결되었습니다.

마지막으로, 다음을 실행하여 데이터베이스를 Supabase로 푸시하세요:

supabase db push

이제 호스팅 데이터베이스가 설정되었습니다!

3. Vercel로 프론트엔드 설정

Vercel로 이동하여 새 프로젝트를 생성하세요.

설정 페이지에서 호스팅할 Chatbot UI 인스턴스의 GitHub 저장소를 가져옵니다. 프로젝트 설정의 "Build & Development Settings" 섹션에서 Framework Preset을 "Next.js"로 변경하세요.

환경 변수에 위에서 얻은 다음 값을 추가하세요:

  • NEXT_PUBLIC_SUPABASE_URL
  • NEXT_PUBLIC_SUPABASE_ANON_KEY
  • SUPABASE_SERVICE_ROLE_KEY
  • NEXT_PUBLIC_OLLAMA_URL (로컬 Ollama 모델 사용 시만 필요; 기본값: http://localhost:11434)

API 키도 환경 변수로 추가할 수 있습니다.

  • OPENAI_API_KEY
  • AZURE_OPENAI_API_KEY
  • AZURE_OPENAI_ENDPOINT
  • AZURE_GPT_45_VISION_NAME

전체 환경 변수 목록은 '.env.local.example' 파일을 참조하세요. API 키에 대한 환경 변수가 설정되면 사용자 설정에서 입력이 비활성화됩니다.

"Deploy"를 클릭하고 프론트엔드가 배포될 때까지 기다리세요.

배포가 완료되면 Vercel이 제공하는 URL을 통해 호스팅된 Chatbot UI 인스턴스를 사용할 수 있습니다.

기여하기

기여 가이드를 준비 중입니다.

연락처

Twitter/X에서 Mckay에게 메시지를 보내세요.