Repolode
제출하기
OvidijusParsiunas

OvidijusParsiunas/deep-chat

HTML 한 줄로 웹사이트에 추가하고 LLM API나 자체 백엔드에 연결할 수 있는 커스터마이즈 가능한 AI 채팅 UI 컴포넌트입니다.

GitHub에서 보기웹사이트
스타
3,743
포크
459
열린 이슈
44
마지막 커밋
14일 전

어떤 프로젝트인가요?

Deep Chat은 웹 페이지에 AI 챗봇 인터페이스를 추가하는 프런트엔드 채팅 컴포넌트입니다. npm으로 설치해 일반 HTML 요소로 사용하거나 React, Vue, Svelte, Angular, Solid 등의 프레임워크에 래핑해 사용할 수 있습니다.

자체 서비스로 요청을 보내거나 브라우저에서 OpenAI, Claude 등 20개 이상의 AI API에 직접 연결할 수 있습니다. 직접 연결은 API 키가 브라우저에 노출되므로 프로토타이핑 용도로 적합합니다. 프로덕션 환경에서는 프록시 서버를 통해 요청을 전달하도록 권장하며, Express, NestJS, Flask, Spring, Go, SvelteKit, Next.js용 서버 템플릿도 제공합니다.

텍스트 외에도 파일 송수신, 웹캠 사진 촬영, 마이크 녹음, 음성-텍스트 변환과 텍스트-음성 변환, OpenAI Realtime API를 통한 음성 간 변환을 지원합니다. 브라우저에서 실행되는 웹 모델 옵션을 사용하면 서버 없이 LLM을 로컬로 구동할 수 있습니다. 메시지를 Markdown으로 렌더링할 수 있으며 스타일, 아바타, 버튼, 모달도 커스터마이즈할 수 있습니다.

핵심 기능

  • 01npm으로 설치하거나 React, Vue, Svelte 등의 프레임워크에서 사용할 수 있는 바로 추가 가능한 채팅 요소
  • 02커스텀 API 또는 20개 이상의 AI 제공업체에 직접 연결
  • 03파일 업로드, 웹캠 촬영, 마이크 녹음 지원
  • 04음성-텍스트 입력 및 텍스트-음성 출력
  • 05Markdown 렌더링 및 메시지 스타일 커스터마이즈
  • 06서버 없이 브라우저에서 모델 실행

활용 사례

  • 회사 웹사이트에 AI 고객 지원 챗봇 추가
  • LLM API를 기반으로 채팅 인터페이스 프로토타이핑
  • 브라우저에서 음성 기능을 지원하는 어시스턴트 구축
  • 브라우저에서 실행되는 로컬 모델로 데모 챗봇 운영

빠른 시작

  1. 1

    npm으로 패키지를 설치합니다

    npm install deep-chat
  2. 2

    React를 사용하는 경우 대신 React용 패키지를 설치합니다

    npm install deep-chat-react
  3. 3

    마크업에 컴포넌트를 추가합니다

    <deep-chat></deep-chat>

사용 전 알아둘 점

  • 직접 연결하면 브라우저에서 API 키가 노출되므로 프로토타입이나 데모에서만 사용해야 합니다.
  • 커스텀 백엔드에 연결하려면 서비스가 Deep Chat의 요청 및 응답 형식과 일치해야 합니다.

포함된 컬렉션

AI 영상·오디오 도구AI 챗봇 및 채팅 클라이언트정적 사이트 생성기 및 문서 도구

토픽

#chatbot#ui-component#llm#openai#web-components#markdown#speech-to-text#frontend-chat#ai#ai-chatbot

자주 묻는 질문

deep-chat은(는) 무엇인가요?
HTML 한 줄로 웹사이트에 추가하고 LLM API나 자체 백엔드에 연결할 수 있는 커스터마이즈 가능한 AI 채팅 UI 컴포넌트입니다. Deep Chat은 웹 페이지에 AI 챗봇 인터페이스를 추가하는 프런트엔드 채팅 컴포넌트입니다. npm으로 설치해 일반 HTML 요소로 사용하거나 React, Vue, Svelte, Angular, Solid 등의 프레임워크에 래핑해 사용할 수 있습니다.
deep-chat은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
deep-chat은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
deep-chat은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. deep-chat의 마지막 커밋은 2026년 10월 24일입니다.
deep-chat은(는) 어디에 사용할 수 있나요?
회사 웹사이트에 AI 고객 지원 챗봇 추가 LLM API를 기반으로 채팅 인터페이스 프로토타이핑 브라우저에서 음성 기능을 지원하는 어시스턴트 구축 브라우저에서 실행되는 로컬 모델로 데모 챗봇 운영
deep-chat는 어떻게 설치하나요?
npm으로 패키지를 설치합니다: npm install deep-chat React를 사용하는 경우 대신 React용 패키지를 설치합니다: npm install deep-chat-react 마크업에 컴포넌트를 추가합니다: <deep-chat></deep-chat>
deep-chat은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/OvidijusParsiunas/deep-chat

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트