JavaScript, Mastra, Elasticsearch로 에이전트 RAG 어시스턴트 구축하기

Elasticsearch는 업계 최고 수준의 생성형 AI 도구 및 다양한 공급업체와 기본적으로 연동됩니다. Elastic 벡터 데이터베이스를 활용해 진행 중인 RAG 기본 넘어서기 또는 프로덕션 수준 앱 구축 웨비나를 확인해 보세요.

사용 사례에 가장 적합한 검색 솔루션을 구축하려면 무료 클라우드 체험판을 시작하거나 로컬 기기에서 Elastic을 지금 사용해 보세요.

이 아이디어는 열띤 경쟁이 벌어지는 판타지 농구 리그에 참여하던 중 떠올랐습니다. 궁금했습니다: 주간 매치업에서 우위를 점하는 데 도움이 되는 AI 에이전트를 만들 수 있을까요? 물론 가능합니다!

이 글에서는 Mastra와 경량 JavaScript 웹 애플리케이션을 사용하여 에이전트 RAG 어시스턴트를 구축하여 상호 작용하는 방법을 살펴봅니다. 이 에이전트를 Elasticsearch에 연결하면 구조화된 플레이어 데이터에 액세스하고 실시간 통계 집계를 실행할 수 있는 기능을 제공하여 플레이어 통계에 기반한 추천을 제공할 수 있습니다. GitHub 리포지토리로 이동하여 애플리케이션을 직접 복제하고 실행하는 방법에 대한 지침을 읽어보세요.

모든 것이 합쳐지면 어떤 모습일까요?

참고: 이 블로그 게시물은 "AI SDK와 Elastic으로 AI 에이전트 구축하기"를 기반으로 합니다. AI 에이전트를 처음 접하고 어떤 용도로 사용할 수 있는지 궁금하다면 여기서부터 시작하세요.

아키텍처 개요

시스템의 핵심에는 에이전트의 추론 엔진(두뇌) 역할을 하는 대규모 언어 모델(LLM)이 있습니다. 사용자 입력을 해석하고, 호출할 도구를 결정하며, 관련 응답을 생성하는 데 필요한 단계를 오케스트레이션합니다.

에이전트 자체는 자바스크립트 에코시스템의 에이전트 프레임워크인 Mastra에 의해 스캐폴드됩니다. Mastra는 LLM을 백엔드 인프라로 래핑하여 API 엔드포인트로 노출하고 도구, 시스템 프롬프트 및 에이전트 동작을 정의하기 위한 인터페이스를 제공합니다.

프론트엔드에서는 Vite를 사용하여 에이전트에게 쿼리를 보내고 응답을 받기 위한 채팅 인터페이스를 제공하는 React 웹 애플리케이션을 빠르게 스캐폴딩합니다.

마지막으로 에이전트가 쿼리하고 집계할 수 있는 플레이어 통계 및 매치업 데이터를 저장하는 Elasticsearch가 있습니다.

배경

몇 가지 기본 개념을 살펴보겠습니다:

에이전트 RAG란 무엇인가요?

AI 에이전트는 다른 시스템과 상호 작용하고, 독립적으로 작동하며, 정의된 매개변수에 따라 작업을 수행할 수 있습니다. 에이전틱 RAG는 AI 에이전트의 자율성과 검색 증강 생성의 원칙을 결합하여 LLM이 응답을 생성하기 위해 호출할 도구와 컨텍스트로 사용할 데이터를 선택할 수 있도록 합니다. 여기에서 RAG에 대해 자세히 알아보세요.

프레임워크 선택, 왜 AI-SDK를 넘어야 할까요?

사용 가능한 AI 에이전트 프레임워크는 여러 가지가 있으며, CrewAI, AutoGen, LangGraph와 같은 인기 있는 프레임워크에 대해 들어보셨을 것입니다. 이러한 프레임워크는 대부분 다양한 모델 지원, 도구 사용, 메모리 관리 등 공통된 기능 세트를 공유합니다.

다음은 해리슨 체이스(LangChain의 CEO)가 작성한 프레임워크 비교표입니다.

Mastra에 관심을 갖게 된 이유는 풀스택 개발자가 에이전트를 에코시스템에 쉽게 통합할 수 있도록 구축된 자바스크립트 우선 프레임워크라는 점입니다. Vercel의 AI-SDK도 이 작업의 대부분을 수행하지만, 프로젝트에 더 복잡한 에이전트 워크플로가 포함될 때 Mastra가 빛을 발합니다. Mastra는 AI-SDK에서 설정한 기본 패턴을 개선하며, 이 프로젝트에서는 이 두 가지를 함께 사용할 예정입니다.

프레임워크 및 모델 선택 고려 사항

이러한 프레임워크는 AI 에이전트를 빠르게 구축하는 데 도움이 될 수 있지만 고려해야 할 몇 가지 단점이 있습니다. 예를 들어, AI 에이전트나 일반적인 추상화 계층이 아닌 다른 프레임워크를 사용하면 제어권을 약간 잃게 됩니다. LLM이 도구를 올바르게 사용하지 않거나 원치 않는 작업을 수행하는 경우 추상화로 인해 디버깅이 더 어려워집니다. 하지만 제 생각에는 이러한 프레임워크가 모멘텀을 얻고 있고 지속적으로 반복되고 있기 때문에 구축할 때 얻을 수 있는 쉽고 빠른 속도를 고려하면 이러한 절충안은 가치가 있습니다.

다시 말하지만, 이러한 프레임워크는 모델에 구애받지 않으므로 다양한 모델을 플러그 앤 플레이할 수 있으며, 학습된 데이터 세트에 따라 모델이 달라지고 그에 따라 응답도 달라진다는 점을 기억하세요. 일부 모델은 도구 호출도 지원하지 않습니다. 따라서 여러 모델을 전환하고 테스트하여 어떤 모델이 가장 좋은 응답을 제공하는지 확인할 수 있지만 각 모델에 대해 시스템 프롬프트를 다시 작성해야 할 가능성이 높다는 점에 유의하세요. 예를 들어, Llama3.3 사용 보다 훨씬 더 많은 프롬프트와 구체적인 지침을 통해 원하는 응답을 얻을 수 있습니다.

NBA 판타지 농구

판타지 농구는 친구 그룹과 함께 리그를 시작하는 것으로, 보통 약간의 돈을 걸고 진행합니다(그룹의 경쟁 정도에 따라 우정의 상태에 영향을 미칠 수 있습니다). 그런 다음 각자 10명의 플레이어로 팀을 구성하여 매주 번갈아 가며 다른 친구의 10명의 플레이어와 경쟁합니다. 전체 점수에 기여하는 포인트는 주어진 주에 각 플레이어가 상대 플레이어를 상대로 어떤 성적을 거두었는지에 따라 결정됩니다.

팀에 소속된 선수가 부상, 출장 정지 등을 당한 경우 팀에 추가할 수 있는 자유 계약 선수 목록이 있습니다. 판타지 스포츠에서는 픽업 횟수가 제한되어 있고 모두가 최고의 선수를 뽑기 위해 끊임없이 노력하기 때문에 이 부분에서 많은 고민이 일어납니다.

특히 어떤 선수를 뽑을지 빠르게 결정해야 하는 상황에서 NBA AI 어시스턴트가 빛을 발하는 부분입니다. 어시스턴트는 플레이어가 특정 상대와의 경기력을 수동으로 조회할 필요 없이 해당 데이터를 빠르게 찾아 평균을 비교하여 정보에 입각한 추천을 제공합니다.

이제 에이전트 RAG와 NBA 판타지 농구에 대한 기본 사항을 알아봤으니 실제로 확인해 보겠습니다.

프로젝트 구축

어느 지점에서 막히거나 처음부터 빌드하고 싶지 않다면 리포지토리를 참조하세요.

다룰 내용

프로젝트 발판 마련하기:
1. 백엔드(마스트라): 백엔드를 스캐폴드하고 에이전트 로직을 정의하려면 npx create mastra@latest를 사용하세요.
2. 프런트엔드(Vite + React): 상담원과 상호작용할 수 있는 프론트엔드 채팅 인터페이스를 구축하려면 npm create vite@latest를 사용하세요.
환경 변수 설정
1. 환경 변수를 관리하려면 dotenv를 설치하세요.
2. .env 파일 만들기 파일을 열고 필요한 변수를 입력합니다.
Elasticsearch 설정
1. (로컬 또는 클라우드에서) Elasticsearch 클러스터를 스핀업합니다.
2. 공식 Elasticsearch 클라이언트를 설치합니다.
3. 환경 변수에 액세스할 수 있는지 확인합니다.
4. 클라이언트에 연결을 설정합니다.
NBA 데이터를 Elasticsearch로 대량 수집하기
1. 적절한 매핑으로 인덱스를 생성하여 집계를 활성화합니다.
2. CSV 파일에서 플레이어 게임 통계를 Elasticsearch 인덱스로 일괄 수집합니다.
Elasticsearch 집계 정의
1. 특정 상대에 대한 과거 평균을 계산하기 위한 쿼리입니다.
2. 특정 상대에 대한 시즌 평균을 계산하기 위한 쿼리입니다.
플레이어 비교 유틸리티 파일
1. 도우미 기능과 Elasticsearch 집계를 통합합니다.
에이전트 구축하기
1. 상담원 정의 및 시스템 프롬프트를 추가합니다.
2. zod를 설치하고 도구를 정의합니다.
3. CORS를 처리하기 위한 미들웨어 설정을 추가합니다.
프론트엔드 통합
1. AI-SDK의 useChat을 사용하여 상담원과 상호 작용합니다.
2. 적절한 형식의 대화를 담을 수 있는 UI를 만듭니다.
애플리케이션 실행
1. 백엔드(Mastra 서버)와 프론트엔드(React 앱)를 모두 시작하세요.
2. 샘플 쿼리 및 사용법.
다음 단계 에이전트의 지능 향상
1. 시맨틱 검색 기능을 추가하여 더욱 통찰력 있는 추천을 지원합니다.
2. 검색 로직을 Elasticsearch MCP(모델 컨텍스트 프로토콜) 서버로 이동하여 동적 쿼리를 활성화합니다.

필수 구성 요소

Node.js 및 npm: 백엔드와 프론트엔드 모두 Node에서 실행됩니다. Node 18+ 및 npm v9+가 설치되어 있는지 확인합니다(Node 18+에 번들로 제공됨).
Elasticsearch 클러스터: 로컬 또는 클라우드에 있는 활성 Elasticsearch 클러스터입니다.
OpenAI API 키: OpenAI 개발자 포털의 API 키 페이지에서 생성하세요.

프로젝트 구조

1단계: 프로젝트 발판 마련

먼저 nba-ai-assistant-js 디렉토리를 생성하고 다음을 사용하여 내부로 이동합니다:

백엔드:

다음 명령과 함께 Mastra 생성 도구를 사용합니다:

2. 터미널에 몇 가지 메시지가 표시되는데, 첫 번째 메시지는 프로젝트 백엔드의 이름을 지정하는 것입니다:

3. 다음으로, Mastra 파일을 저장하는 기본 구조를 유지하므로 src/ 을 입력합니다.

4. 그런 다음 기본 LLM 공급자로 OpenAI를 선택합니다.

5. 마지막으로 OpenAI API 키를 입력하라는 메시지가 표시됩니다. 지금은 건너뛰는 옵션을 선택하고 나중에 .env 파일로 제공하겠습니다.

프론트엔드:

다시 루트 디렉토리로 이동하여 다음 명령을 사용하여 Vite 생성 도구를 실행합니다: npm create vite@latest frontend -- --template react

이렇게 하면 React용 특정 템플릿이 포함된 frontend 이라는 이름의 경량 React 앱이 생성됩니다.

모든 것이 정상적으로 진행되었다면 프로젝트 디렉토리 내부에 Mastra 코드가 있는 백엔드 디렉토리와 React 앱이 있는 frontend 디렉토리가 있을 것입니다.

2단계: 환경 변수 설정

민감한 키를 관리하기 위해 dotenv 패키지를 사용하여 .env에서 환경 변수를 로드합니다. 파일을 만듭니다. 백엔드 디렉토리로 이동하여 dotenv 을 설치합니다:

2. 백엔드 디렉토리에 적절한 변수를 입력할 수 있는 example.env 파일이 제공됩니다. 직접 생성하는 경우 다음 변수를 반드시 포함하세요:

참고: .gitignore 에 .env 을 추가하여 이 파일이 버전 관리에서 제외되었는지 확인하세요.

3단계: Elasticsearch 설정하기

먼저 활성 Elasticsearch 클러스터가 필요합니다. 두 가지 옵션이 있습니다:

옵션 A: Elasticsearch Cloud 사용
- Elastic Cloud에가입하기
- 새 배포 만들기
- 엔드포인트 URL 및 API 키(인코딩된) 가져오기
옵션 B: 로컬에서 Elasticsearch 실행하기
- 로컬에 Elasticsearch 설치 및 실행
- 엔드포인트로 http://localhost:9200 사용
- API 키 생성

백엔드에 Elasticsearch 클라이언트 설치하기:

먼저, 백엔드 디렉터리에 공식 Elasticsearch 클라이언트를 설치합니다:

2. 그런 다음 재사용 가능한 함수를 저장할 디렉터리 라이브러리를 만들고 그 안으로 이동합니다:

3. 내부에 elasticClient.js라는 새 파일을 생성합니다. 이 파일은 Elasticsearch 클라이언트를 초기화하고 프로젝트 전체에서 사용할 수 있도록 노출합니다.

4. ECMAScript 모듈(ESM)을 사용하고 있으므로 __dirname and __파일명을 사용할 수 없습니다. .env 파일에서 환경 변수가 올바르게 로드되었는지 확인하려면 파일에서 이 설정을 파일 맨 위에 추가합니다:

5. 이제 환경 변수를 사용하여 Elasticsearch 클라이언트를 초기화하고 연결을 확인합니다:

이제 이 클라이언트 인스턴스를 Elasticsearch 클러스터와 상호 작용해야 하는 모든 파일로 가져올 수 있습니다.

4단계: NBA 데이터를 Elasticsearch로 대량 수집하기

데이터 세트:

이 프로젝트에서는 리포지토리의 백엔드/데이터 디렉터리에서 사용 가능한 데이터 세트를 참조하겠습니다. NBA 어시스턴트는 이 데이터를 지식 베이스로 사용하여 통계 비교를 실행하고 추천을 생성합니다.

sample_player_game_stats.csv - 선수의 전체 NBA 커리어에 대한 경기당 득점, 리바운드, 스틸 등 선수별 게임 통계 샘플입니다. 이 데이터 집합을 사용하여 집계를 수행합니다. (참고: 이 데이터는 데모 목적으로 미리 생성된 모의 데이터이며 공식 NBA 소스에서 가져온 것이 아닙니다.)
playerAndTeamInfo.js - 에이전트가 플레이어 및 팀 이름을 ID와 일치시킬 수 있도록 일반적으로 API 호출을 통해 제공되는 플레이어 및 팀 메타데이터를 대체합니다. 샘플 데이터를 사용하기 때문에 외부 API에서 가져오는 데 따른 오버헤드를 피하기 위해 에이전트가 참조할 수 있는 몇 가지 값을 하드코딩했습니다.

구현:

backend/lib 디렉터리에서 플레이어데이터인입.js라는 파일을 생성합니다.
가져오기를 설정하고, CSV 파일 경로를 확인하고, 구문 분석을 설정합니다. 다시 말하지만, ESM을 사용하고 있으므로 __dirname 을 재구성하여 샘플 CSV의 경로를 확인해야 합니다. 또한 Node.js의 기본 제공 모듈인 fs 및 readline 을 사용하여 주어진 CSV 파일을 한 줄씩 구문 분석합니다.

이렇게 하면 대량 수집 단계에 도달했을 때 CSV를 효율적으로 읽고 구문 분석할 수 있습니다.

3. 적절한 매핑으로 인덱스를 생성합니다. Elasticsearch는 동적 매핑을 통해 필드 유형을 자동으로 추론할 수 있지만, 여기서는 각 통계가 숫자 필드로 처리되도록 명시적으로 처리하고자 합니다. 이 필드는 나중에 집계에 사용할 것이므로 중요합니다. 또한 득점, 리바운드 등과 같은 통계에는 float 유형을 사용하여 소수점 값을 포함하도록 합니다. 마지막으로, 매핑 속성 dynamic: 'strict' 을 추가하여 Elasticsearch가 인식할 수 없는 필드를 동적으로 매핑하지 않도록 하려고 합니다.

4. CSV 데이터를 Elasticsearch 인덱스에 대량 수집하는 기능을 추가합니다. 코드 블록 내부에서는 헤더 줄을 건너뜁니다. 그런 다음 각 줄 항목을 쉼표로 분할하고 문서 개체에 밀어 넣습니다. 이 단계는 또한 이들을 정리하고 올바른 유형인지 확인합니다. 다음으로, 문서를 인덱스 정보와 함께 bulkBody 배열에 밀어넣고, 이 배열은 Elasticsearch로의 대량 수집을 위한 페이로드 역할을 하게 됩니다.

5. 그런 다음 elasticClient.bulk() 와 함께 Elasticsearch의 대량 API를 사용하여 단일 요청으로 여러 문서를 수집할 수 있습니다. 아래의 오류 처리는 수집에 실패한 문서 수와 수집에 성공한 문서 수를 알려주는 구조로 되어 있습니다.

6. 아래 main() 함수를 실행하여 createIndex() 및 bulkIngestCsv() 함수를 순차적으로 실행합니다.

대량 수집이 성공했다는 콘솔 로그가 표시되면, Elasticsearch 인덱스에서 빠른 확인을 수행하여 문서가 실제로 성공적으로 수집되었는지 확인합니다.

5단계: Elasticsearch 집계 정의 및 통합하기

이는 플레이어의 통계를 서로 비교하기 위해 AI 에이전트의 도구를 정의할 때 사용되는 주요 기능이 될 것입니다.

1. backend/lib 디렉터리로 이동하여 elasticAggs.js라는 파일을 생성합니다.

2. 아래 쿼리를 추가하여 특정 상대에 대한 플레이어의 기록 평균을 계산합니다. 이 쿼리는 player_id 과 일치하는 조건과 opponent_team_id 의 두 가지 조건이 포함된 bool 필터를 사용하여 관련 게임만 검색합니다. 우리는 문서를 반환할 필요가 없고 집계만 중요하므로 size:0 로 설정합니다. aggs 블록에서는 points, rebounds, assists, steals, blocks 및 fg_percentage 같은 필드에서 여러 메트릭 집계를 병렬로 실행하여 평균값을 계산합니다. LLM은 계산에 적중하거나 실패할 수 있으며, 이렇게 하면 해당 프로세스가 Elasticsearch로 오프로드되어 NBA AI 어시스턴트가 정확한 데이터에 액세스할 수 있습니다.

3. 특정 상대를 상대로 한 플레이어의 시즌 평균을 계산하기 위해 과거 기록과 거의 동일한 쿼리를 사용합니다. 이 쿼리의 유일한 차이점은 bool 필터에 game_date 에 대한 추가 조건이 있다는 것입니다. game_date 필드는 현재 NBA 시즌 범위 내에 있어야 합니다. 이 경우 범위는 2024-10-01 에서 2025-06-30 사이입니다. 아래의 추가 조건은 다음 집계에서 이번 시즌의 게임만 격리되도록 합니다.

6단계: 플레이어 비교 유틸리티

코드를 모듈식으로 유지 관리하기 위해 메타데이터 도우미 함수와 Elasticsearch 집계를 통합하는 유틸리티 파일을 만들겠습니다. 이렇게 하면 상담원이 사용하는 기본 도구에 전원이 공급됩니다. 이에 대해서는 나중에 자세히 설명합니다:

1. backend/lib 디렉토리에 비교플레이어.js 파일을 새로 만듭니다.

2. 아래 함수를 추가하여 메타데이터 헬퍼와 Elasticsearch 집계 로직을 에이전트가 사용하는 기본 도구를 강화하는 단일 함수로 통합하세요.

7단계: 에이전트 구축하기

이제 프론트엔드 및 백엔드 스캐폴딩을 생성하고, NBA 경기 데이터를 수집하고, Elasticsearch에 대한 연결을 설정했으므로 에이전트 구축을 위해 모든 조각을 조합하기 시작할 수 있습니다.

상담원 정의하기

1. backend/src/mastra/agents 디렉터리 내의 index.ts 파일로 이동하여 상담원 정의를 추가합니다. 다음과 같은 필드를 지정할 수 있습니다:

이름: 이름: 프런트엔드에서 상담원을 호출할 때 참조할 수 있는 이름을 지정합니다.
지침/시스템 프롬프트: 시스템 프롬프트는 상호 작용 중에 따라야 할 초기 컨텍스트와 규칙을 LLM에 제공합니다. 사용자가 채팅창을 통해 보내는 메시지와 비슷하지만, 이 메시지는 사용자가 입력하기 전에 먼저 표시됩니다. 이 역시 선택한 모델에 따라 달라집니다.
모델: 사용할 LLM(Mastra는 OpenAI, Anthropic, 로컬 모델 등을 지원합니다).
도구: 도구: 상담원이 호출할 수 있는 도구 기능의 목록입니다.
메모리: (선택 사항) 상담원이 대화 기록 등을 기억하도록 하려는 경우 선택합니다. 간단하게 하기 위해 영구 메모리 없이 시작할 수 있지만, Mastra는 이를 지원합니다.

도구 정의

backend/src/mastra/tools 디렉터리 내의 index.ts 파일로 이동합니다.
명령을 사용하여 Zod를 설치합니다:

3. 도구 정의를 추가합니다. comparePlayers.js 파일 내의 함수를 에이전트가 이 도구를 호출할 때 사용할 기본 함수로 가져옵니다. Mastra의 createTool() 기능을 사용하여 playerComparisonTool 을 등록합니다. 필드에는 다음이 포함됩니다:

id: 상담원이 도구의 기능을 이해하는 데 도움이 되는 자연어 설명입니다.
input schema: 도구의 입력 형태를 정의하기 위해 Mastra는 타입스크립트 스키마 유효성 검사 라이브러리인 Zod 스키마를 사용합니다. Zod는 에이전트가 올바른 구조의 입력을 입력하는지 확인하고 입력 구조가 일치하지 않으면 도구가 실행되지 않도록 방지하여 도움을 줍니다.
description: 상담원이 언제 전화를 걸어 도구를 사용해야 하는지 이해하는 데 도움이 되는 자연어 설명입니다.
execute: 도구가 호출될 때 실행되는 로직입니다. 저희의 경우 가져온 헬퍼 함수를 사용하여 성능 통계를 반환하고 있습니다.

CORS 처리를 위한 미들웨어 추가

Mastra 서버에 미들웨어를 추가하여 CORS를 처리합니다. 인생에서 피할 수 없는 세 가지가 있다면 죽음, 세금, 그리고 웹 개발자에게는 CORS라고 합니다. 간단히 말해, 교차 출처 리소스 공유는 프론트엔드에서 다른 도메인이나 포트에서 실행되는 백엔드에 요청을 하지 못하도록 차단하는 브라우저 보안 기능입니다. 로컬호스트에서 백엔드와 프론트엔드를 모두 실행하지만 서로 다른 포트를 사용하므로 CORS 정책이 트리거됩니다. 백엔드에서 프론트엔드의 요청을 허용할 수 있도록 Mastra 문서에 지정된 미들웨어를 추가해야 합니다.

1. backend/src/mastra 디렉터리 내의 index.ts 파일로 이동하여 CORS에 대한 구성을 추가합니다:

origin: ['http://localhost:5173']
- 이 주소(Vite 기본 주소)에서만 요청을 허용합니다.
allowMethods: ["GET", "POST"]
- 허용되는 HTTP 메서드입니다. 대부분의 경우 POST를 사용합니다.
allowHeaders: ["Content-Type", "Authorization", "x-mastra-client-type, "x-highlight-request", "traceparent"],
- 요청에 사용할 수 있는 사용자 정의 헤더를 결정합니다.

8단계: 프론트엔드 통합

이 React 컴포넌트는 @ai-sdk/react 에서 useChat() 훅을 사용하여 Mastra AI 에이전트에 연결되는 간단한 채팅 인터페이스를 제공합니다. 또한 이 훅을 사용하여 토큰 사용량, 도구 호출을 표시하고 대화를 렌더링할 것입니다. 위의 시스템 프롬프트에서 상담원에게 마크다운으로 응답을 출력하도록 요청하므로 react-markdown 을 사용하여 응답 형식을 올바르게 지정합니다.

1. 프론트엔드 디렉터리에서 @ai-sdk/react 패키지를 설치하여 useChat() 훅을 사용합니다.

2. 같은 디렉토리에 있는 동안 에이전트가 생성하는 응답의 형식을 올바르게 지정할 수 있도록 React Markdown을 설치합니다.

3. useChat() 을 구현합니다. 이 훅은 프론트엔드와 AI 에이전트 백엔드 간의 상호작용을 관리합니다. 메시지 상태, 사용자 입력, 상태를 처리하고 통합 가시성을 위한 라이프사이클 훅을 제공합니다. 전달되는 옵션에는 다음이 포함됩니다:

api: 이는 Mastra AI 에이전트의 엔드포인트를 정의합니다. 기본값은 포트 4111이며 스트리밍 응답을 지원하는 경로도 추가하려고 합니다.
onToolCall: 상담원이 도구를 호출할 때마다 실행되며, 상담원이 어떤 도구를 호출하는지 추적하는 데 사용합니다.
onFinish: 상담원이 전체 응답을 완료한 후에 실행됩니다. 스트리밍을 활성화하더라도 onFinish 은 각 청크가 아닌 전체 메시지가 수신된 후에 실행됩니다. 여기서는 토큰 사용량을 추적하는 데 사용하고 있습니다. 이는 LLM 비용을 모니터링하고 최적화할 때 유용할 수 있습니다.

4. 마지막으로 frontend/components 디렉토리에 있는 ChatUI.jsx 컴포넌트로 이동하여 대화를 담을 UI를 만듭니다. 그런 다음 응답을 ReactMarkdown 컴포넌트로 래핑하여 상담원의 응답 형식을 올바르게 지정합니다.

9단계: 애플리케이션 실행

축하합니다! 이제 애플리케이션을 실행할 준비가 되었습니다. 백엔드와 프론트엔드를 모두 시작하려면 다음 단계를 따르세요.

터미널 창에서 루트 디렉토리에서 시작하여 백엔드 디렉토리로 이동하여 Mastra 서버를 시작합니다:

2. 다른 터미널 창에서 루트 디렉토리에서 시작하여 프론트엔드 디렉토리로 이동하고 React 앱을 시작합니다:

3. 3. 브라우저로 이동하여 다음으로 이동합니다:

http://localhost:5173

채팅 인터페이스가 보일 것입니다. 이 샘플 프롬프트를 사용해 보세요:

"르브론 제임스와 스테픈 커리 비교"
"제이슨 테이텀과 루카 돈치치 중 누구를 선택해야 하나요?"

다음 단계 에이전트의 지능 향상

어시스턴트의 에이전트 기능과 추천 기능을 더욱 강화하기 위해 다음 버전에서는 몇 가지 주요 업그레이드 기능을 추가할 예정입니다.

NBA 뉴스 시맨틱 검색

플레이어 성과에 영향을 줄 수 있는 요소는 무수히 많으며, 그 중 상당수는 원시 통계에 나타나지 않습니다. 부상 보고서, 라인업 변경 또는 경기 후 분석과 같은 내용은 뉴스 기사에서만 볼 수 있습니다. 이러한 추가적인 맥락을 파악하기 위해 시맨틱 검색 기능을 추가하여 에이전트가 관련 NBA 기사를 검색하고 해당 내러티브를 추천에 반영할 수 있도록 할 것입니다.

Elasticsearch MCP 서버를 사용한 동적 검색

MCP(모델 컨텍스트 프로토콜)는 상담원이 데이터 소스에 연결하는 방법의 표준으로 빠르게 자리 잡고 있습니다. 에이전트가 우리가 제공하는 사전 정의된 검색 기능에 의존하지 않고 동적으로 쿼리를 작성할 수 있도록 검색 로직을 Elasticsearch MCP 서버로 마이그레이션할 것입니다. 이를 통해 보다 자연스러운 언어 워크플로우를 사용할 수 있고 모든 검색 쿼리를 수동으로 작성할 필요성을 줄일 수 있습니다. 여기에서 Elasticsearch MCP 서버와 에코시스템의 현재 상태에 대해 자세히 알아보세요.

이러한 변경 사항은 이미 진행 중이니 계속 지켜봐 주세요!

결론

이 블로그에서는 JavaScript, Mastra 및 Elasticsearch를 사용하여 판타지 농구 팀에 맞춤형 추천을 제공하는 에이전트 RAG 어시스턴트를 구축했습니다. 저희가 다뤘습니다:

에이전트 RAG의 기본 사항과 AI 에이전트의 자율성과 RAG를 효과적으로 사용할 수 있는 도구를 결합하여 보다 미묘하고 역동적인 에이전트를 만드는 방법에 대해 알아보세요.
데이터 저장 기능과 강력한 기본 집계 기능을 갖춘 Elasticsearch가 어떻게 LLM의 지식 베이스로서 훌륭한 파트너가 되는지 알아보세요.
자바스크립트 에코시스템에서 개발자를 위해 이러한 에이전트 구축을 간소화하는 Mastra 프레임워크와 그 방법을 소개합니다.

농구광이든, AI 에이전트를 구축하는 방법을 모색 중이든, 저처럼 두 가지 모두에 관심이 있는 분이라면 이 블로그가 시작을 위한 몇 가지 기본 요소를 제공했으면 합니다. 전체 리포지토리는 GitHub에서 사용할 수 있으며, 자유롭게 복제하고 수정할 수 있습니다. 이제 판타지 리그에서 우승하세요!

문제 신고하기