chat ai samples

빠른 링크 ?

• Stream용 API 키를 받으려면 등록하세요.
• ReactJS 예
• ChatGPT 노드 서버
• Gemini 노드 서버

레포 개요 ?

이 리포지토리에는 Chat 제품에서 Generative AI를 사용할 수 있는 방법을 보여주는 Stream의 공식 샘플 프로젝트가 포함되어 있습니다. 여기에는 Stream과 함께 Gen AI를 사용할 때 참조 가이드로 사용할 수 있는 ChatGPT 및 Gemini용 샘플 백엔드 서버가 포함되어 있습니다.

ReactJS, Android 및 Flutter의 샘플 통합은 "frontends" 디렉터리에 있으며, AI 공급자로부터 전송되는 실시간 메시지 청크를 사용하고 렌더링하는 방법도 보여줍니다.

프로젝트/패키지

• 백엔드
  • ChatGPT 서버: OpenAI와 Stream 채팅에 모두 연결하여 실시간으로 메시지를 가로채고 응답하는 노드 서버입니다.
  • Gemini 서버: 스트림 채팅을 Gemini와 연결하여 메시지 보내기, 받기 및 응답을 허용하는 노드 서버입니다.
• 프런트엔드
  • React/NextJS: ChatGPT와 상호작용하고 스트리밍 응답을 구현하는 NextJs 앱입니다.
  • Android: Google의 Gemini와 Jetpack Compose SDK를 통합하는 Kotlin으로 작성된 Jetpack Compose 앱입니다. 자세한 시작 지침은 하위 디렉토리를 참조하세요.

어떻게 달리나요?

환경 변수 설정

cp .env.example .env

.env 파일에 다음 자격 증명을 추가합니다.

1. 스트림 채팅 앱 API 키 및 비밀
2. 사용자 ID 및 토큰
3. OpenAI API 키
4. 또는 Gemini API 키

백엔드

백엔드 서버를 시작하려면 ChatGPT와 Gemini 중에서 선택할 수 있습니다. 서버는 메시지를 수신하고 AI 생성 응답으로 응답합니다. 이 서버 URL을 스트림 채팅 앱의 웹훅으로 구성해야 합니다.

 cd server
yarn ;

# Start ChatGPT server
yarn start:openai

# Or start Gemini server
yarn start:gemini

Ngrok 웹훅 구성

로컬 서버를 인터넷에 노출하려면 ngrok를 사용할 수 있습니다. ngrok를 설정하고 스트림 채팅 앱에 대한 웹후크 URL을 구성하려면 여기 지침을 따르십시오.

https://getstream.io/chat/docs/react/debugging_with_ngrok/

프런트엔드

 cd react-chat
yarn ; yarn start

AI 가이드

이 가이드에서는 SDK 및 제품 전반에 걸쳐 AI를 사용할 수 있는 방법을 자세히 살펴봅니다.

• 스트림 채팅으로 ChatGPT 구현
• Google의 Generative AI를 사용하여 AI 채팅 Android 앱 구축
• 문서화를 위한 LLM 기반 챗봇 만들기
• 스트림 채팅, HuggingFace 및 DialogGPT를 사용한 대화형 AI

기여?

• 샘플 앱을 제출하려면 어떻게 해야 하나요?
  • 앱 제출은 언제나 환영합니다! ? 적절한 설명이 포함된 홍보 자료를 제출하시면 최대한 빨리 검토해 드리겠습니다.
• 버그를 발견하셨나요? ?
  • 앱을 개선하거나 문제를 해결하는 코드 변경을 환영합니다. Github에 풀 요청을 제출하기 전에 모든 모범 사례를 따르고 해당되는 경우 테스트를 추가하십시오.