다음을 통해 공유

LangChain.js 사용하여 RAG로 서버리스 AI 채팅 시작

  • 아티클

AI 앱을 만드는 것은 복잡할 수 있습니다. LangChain.js, Azure Functions 및 서버리스 기술을 사용하면 이 프로세스를 간소화할 수 있습니다. 이러한 도구는 인프라를 관리하고 자동으로 크기를 조정하므로 챗봇 기능에 집중할 수 있습니다. 챗봇은 엔터프라이즈 문서를 사용하여 AI 응답을 생성합니다.

이 코드에는 가상 회사에 대한 샘플 데이터가 포함되어 있습니다. 고객은 회사의 제품에 대한 지원 질문을 할 수 있습니다. 데이터에는 회사의 서비스 약관, 개인 정보 보호 정책 및 지원 가이드에 대한 문서가 포함됩니다.

Screenshot of chat app in browser showing several suggestions for chat input and the chat text box to enter a question.채팅 입력에 대한 몇 가지 제안과 질문을 입력할 수 있는 채팅 텍스트 상자를 보여 주는 브라우저의 채팅 앱 스크린샷.

참고 항목

이 문서에서는 문서의 예제 및 지침에 대한 기준으로 하나 이상의 AI 앱 템플릿을 사용합니다. AI 앱 템플릿은 AI 앱의 고품질 시작 지점을 보장하는 데 도움이 되는 잘 유지 관리되고 배포하기 쉬운 참조 구현을 제공합니다.

아키텍처 개요

채팅 앱

사용자가 애플리케이션과 상호 작용합니다.

  • 대화에 대한 클라이언트 웹앱의 채팅 인터페이스입니다.
  • 클라이언트 웹앱은 HTTP 호출을 통해 서버리스 API에 사용자의 쿼리를 보냅니다.
  • 서버리스 API는 Azure AI와 Azure AI Search 간의 상호 작용을 조정하여 답변을 생성하는 체인을 만듭니다.
  • Azure Blob Storage를 사용하여 PDF 문서를 검색합니다.
  • 그런 다음 생성된 응답이 웹앱으로 다시 전송되고 사용자에게 표시됩니다.

다음 다이어그램은 채팅 앱의 간단한 아키텍처를 보여 줍니다.

Diagram showing architecture from client to backend app.클라이언트에서 백 엔드 앱까지의 아키텍처를 보여 주는 다이어그램.

LangChain.js 서비스 간의 복잡성을 간소화합니다.

API 흐름은 상호작용을 추상화함으로써 LangChain.js이 이 시나리오에서 어떻게 유용한지를 이해하는 데 도움이 됩니다. 서버리스 API 엔드포인트:

  • 사용자로부터 질문을 받습니다.
  • 클라이언트 개체를 만듭니다.
    • 포함 및 채팅을 위한 Azure OpenAI
    • 벡터 저장소에 대한 Azure AI Search
  • LLM 모델, 채팅 메시지(시스템 및 사용자 프롬프트) 및 문서 원본을 사용하여 문서 체인을 만듭니다.
  • 문서 체인 및 벡터 저장소에서 검색 체인을 만듭니다.
  • 검색 체인에서 응답을 스트리밍합니다.

개발자의 작업은 Azure OpenAI 및 Azure AI Search와 같은 종속성 서비스를 올바르게 구성하고 체인을 올바르게 구성하는 것입니다. 기본 체인 논리는 쿼리를 확인하는 방법을 알고 있습니다. 이렇게 하면 LangChain.js 요구 사항을 충족하는 한 다양한 서비스 및 구성에서 체인을 생성할 수 있습니다.

이 아키텍처의 Azure는 어디에 있나요?

이 애플리케이션은 여러 구성 요소에서 만들어집니다.

필수 조건

이 문서를 완료하는 데 필요한 모든 종속성을 갖춘 개발 컨테이너 환경을 사용할 수 있습니다. GitHub Codespaces(브라우저)에서 개발 컨테이너를 실행하거나 Visual Studio Code를 사용하여 로컬로 실행할 수 있습니다.

이 문서를 사용하려면 다음 필수 구성 요소가 필요합니다.

개방형 개발 환경

다음 지침을 사용하여 이 문서를 완료하는 데 필요한 모든 종속성을 포함하는 미리 구성된 개발 환경을 배포합니다.

GitHub Codespaces는 사용자 인터페이스로 웹용 Visual Studio Code를 사용하여 GitHub에서 관리하는 개발 컨테이너를 실행합니다. 가장 간단한 개발 환경을 위해서는 GitHub Codespaces를 사용하여 이 문서를 완료하는 데 필요한 올바른 개발자 도구와 종속성을 미리 설치합니다.

Important

모든 GitHub 계정은 2개의 코어 인스턴스를 사용하여 매월 최대 60시간 동안 Codespaces를 무료로 사용할 수 있습니다. 자세한 내용은 GitHub Codespaces 월별 포함 스토리지 및 코어 시간을 참조하세요.

  1. 코드스페이스에서 엽니다.

    Open in GitHub CodespacesGitHub Codespaces에서 열기

  2. codespace가 생성될 때까지 기다립니다. 이 프로세스에는 몇 분 정도 걸릴 수 있습니다.

  3. 화면 하단의 터미널에서 Azure 개발자 CLI를 사용하여 Azure에 로그인합니다.

    azd auth login

    인증 프로세스를 완료합니다.

  4. 이 문서의 나머지 작업은 이 개발 컨테이너의 컨텍스트에서 수행됩니다.

배포 및 실행

샘플 리포지토리에는 서버리스 채팅 앱을 Azure에 배포하는 데 필요한 모든 코드 및 구성 파일이 포함되어 있습니다. 다음 단계에서는 샘플을 Azure에 배포하는 과정을 안내합니다.

Azure에 채팅 앱 배포

Important

이 섹션에서 만들어진 Azure 리소스는 주로 Azure AI 검색 리소스에서 즉각적인 비용이 발생합니다. 이러한 리소스는 명령이 완전히 실행되기 전에 중단하더라도 비용이 발생할 수 있습니다.

  1. 다음 Azure 개발자 CLI 명령을 사용하여 Azure 리소스를 프로비전하고 소스 코드를 배포합니다.

    azd up

  2. 다음 표를 사용하여 프롬프트에 응답합니다.

    prompt 답변
    환경 이름 짧고 소문자를 유지합니다. 이름 또는 별칭을 추가합니다. 예들 들어 john-chat입니다. 리소스 그룹 이름의 일부로 사용됩니다.
    구독 리소스를 만들기 위한 구독을 선택합니다.
    위치(호스팅용) 목록에서 가까운 위치를 선택합니다.
    OpenAI 모델의 위치 목록에서 가까운 위치를 선택합니다. 첫 번째 위치와 동일한 위치를 사용할 수 있는 경우 해당 위치를 선택합니다.

  3. 앱이 배포될 때까지 기다립니다. 배포를 완료하는 데 5~10분이 걸릴 수 있습니다.

  4. 애플리케이션이 성공적으로 배포되면 터미널에 두 개의 URL이 표시됩니다.

  5. 브라우저에서 채팅 애플리케이션을 열려면 Deploying service webapp이라고 표시된 URL을 선택합니다.

채팅 앱을 사용하여 PDF 파일에서 답변 가져오기

채팅 앱은 PDF 파일 카탈로그의 임대 정보로 미리 로드됩니다. 채팅 앱을 사용하여 임대 프로세스에 대한 질문을 할 수 있습니다. 다음 단계에서는 채팅 앱을 사용하는 과정을 안내합니다.

  1. 브라우저에서 환불 정책이란?을 선택하거나 입력 합니다.

    Screenshot of chat app's first question and answer.채팅 앱의 첫 번째 질문과 대답 스크린샷

  2. 후속 질문을 선택합니다.

    Screenshot of chat app's suggested follow-up prompt and answer.채팅 앱의 제안된 후속 프롬프트 및 답변 스크린샷.

  3. 응답에서 인용을 선택하여 답변을 생성하는 데 사용되는 문서를 확인합니다. 그러면 Azure Storage에서 클라이언트로 문서가 배달됩니다. 새 브라우저 탭을 마쳤으면 닫아서 서버리스 채팅 앱으로 돌아갑니다.

    Screenshot of original document containing citation.인용이 포함된 원본 문서의 스크린샷

리소스 정리

Azure 리소스 정리

이 문서에서 만들어진 Azure 리소스는 Azure 구독에 요금이 청구됩니다. 앞으로 이러한 리소스가 필요하지 않을 것으로 예상되는 경우 추가 요금이 발생하지 않도록 삭제합니다.

Azure 리소스를 삭제하고 다음 Azure Developer CLI 명령을 사용하여 소스 코드를 제거합니다.

azd down --purge

GitHub Codespaces 정리

GitHub Codespaces 환경을 삭제하면 계정에 대해 얻을 수 있는 코어당 무료 사용 권한을 최대화할 수 있습니다.

Important

GitHub 계정의 자격에 대한 자세한 내용은 GitHub Codespaces 월별 포함된 스토리지 및 코어 시간을 참조하세요.

  1. GitHub Codespaces 대시보드(https://github.com/codespaces)에 로그인합니다.

  2. Azure-Samples/serverless-chat-langchainjs GitHub 리포지토리에서 제공된 현재 실행 중인 Codespaces를 찾습니다.

    Screenshot of all the running Codespaces including their status and templates.상태 및 템플릿을 포함하여 실행 중인 모든 Codespaces의 스크린샷.

  3. 상황에 맞는 메뉴를 ...열고, 코드스페이스에 대해 삭제를 선택합니다.

도움말 보기

이 샘플 리포지토리는 문제 해결 정보를 제공합니다.

문제가 해결되지 않으면 리포지토리의 문제에 문제를 기록합니다.

관련 콘텐츠