주요 콘텐츠로 건너뛰기
AI 튜토리얼

Liveblocks로 멀티플레이어 Jev 및 LLM 워크플로 빌더 구축하기

Jev 워크플로 빌더 데모 설치, Liveblocks·Typesafe·Vercel AI Gateway 인증 정보 구성, 개발 서버 실행, Jev와 LLM을 연결하는 워크플로 구축, 테스트 실행 미리보기, REST API를 통한 워크플로 호출, 멀티플레이어 상태 및 커서 기능을 살펴보는 방법을 알아봅니다.

약 6분 소요
Liveblocks로 멀티플레이어 Jev 및 LLM 워크플로 빌더 구축하기

Jev 워크플로 빌더의 기능

Jev 워크플로 빌더는 멀티플레이어 AI 워크플로를 만들기 위한 데모 애플리케이션입니다. Jev를 대규모 언어 모델과 결합하고 Liveblocks를 사용해 공유 상태와 협업 커서를 제공합니다.

애플리케이션을 시작하면 Jev와 LLM을 연결하고, 워크플로 테스트 실행을 미리 보고, REST API를 통해 워크플로를 호출하며, 같은 협업 환경에서 작업하는 다른 참여자를 확인할 수 있습니다.

주요 기능

  • 시각적 워크플로 구축: Jev 및 LLM 구성 요소를 워크플로로 연결합니다.
  • 멀티플레이어 협업: Liveblocks를 통해 공유 애플리케이션 상태와 다른 사용자의 커서를 확인합니다.
  • 워크플로 테스트: 외부에서 워크플로를 호출하기 전에 테스트 실행을 미리 봅니다.
  • REST API 액세스: 구성된 워크플로를 프로그래밍 방식으로 호출합니다.
  • AI 서비스 통합: 각 API 자격 증명을 사용해 Typesafe와 Vercel AI Gateway를 이용합니다.

사전 요구 사항

프로젝트를 설정하기 전에 컴퓨터에서 Node.js와 npm을 사용할 수 있는지 확인하세요. 데모에서 사용하는 다음 세 가지 외부 서비스의 계정도 필요합니다.

설치 및 설정

1. 종속 항목 설치

프로젝트 루트에서 터미널을 열고 필요한 모든 패키지를 설치합니다.

npm install

2. Liveblocks 비밀 키 발급

  1. Liveblocks 대시보드에서 계정을 만들거나 로그인합니다.
  2. API 키 페이지를 엽니다.
  3. secret 키를 복사합니다.

3. Typesafe API 키 발급

  1. typesafe.ai에서 계정을 만들거나 로그인합니다.
  2. Typesafe 키 콘솔을 엽니다.
  3. API 키를 복사합니다.

4. Vercel AI Gateway 키 발급

  1. Vercel에서 계정을 만들거나 로그인합니다.
  2. Vercel AI Gateway 대시보드를 엽니다.
  3. AI Gateway 키를 복사합니다.

5. 환경 변수 설정

프로젝트 루트에 .env라는 파일을 만듭니다. 애플리케이션에서 요구하는 환경 변수 이름을 사용해 세 가지 자격 증명을 추가합니다.

LIVEBLOCKS_SECRET_KEY=your_liveblocks_secret_key
TYPESAFE_API_KEY=your_typesafe_api_key
AI_GATEWAY_API_KEY=your_vercel_ai_gateway_key

각 자리 표시자를 해당 키로 바꿉니다. 이 파일에는 외부 서비스에 대한 액세스 권한을 부여할 수 있는 자격 증명이 포함되어 있으므로 비공개로 유지하세요.

6. 개발 서버 시작

로컬 개발 명령을 실행합니다.

npm run dev

서버가 준비되면 브라우저에서 http://localhost:3000을 엽니다.

기본 사용법

워크플로 구축

빌더 인터페이스에서 Jev를 LLM 구성 요소와 연결합니다. 테스트하려는 동작에 따라 사용 가능한 워크플로 요소를 배치하고 연결하세요.

테스트 실행 미리 보기

워크플로 미리 보기 기능을 사용해 애플리케이션에서 테스트를 실행합니다. 실행을 미리 보면 빌더에서 계속 작업하면서 워크플로 동작을 확인할 수 있습니다.

REST API를 통해 워크플로 호출

이 데모는 REST API를 통한 워크플로 호출을 지원합니다. 요청을 보낼 때 프로젝트에서 제공하는 API 세부 정보를 사용하세요. README에는 고정된 엔드포인트, HTTP 메서드 또는 요청 스키마가 지정되어 있지 않으므로 일반적인 형식을 가정하지 말고 실행 중인 애플리케이션에 필요한 경로와 페이로드를 사용하세요.

멀티플레이어 협업 사용

여러 참여자가 애플리케이션을 열어 협업 기능을 확인합니다. Liveblocks는 멀티플레이어 상태를 동기화하고 커서를 표시하므로 공유 워크플로 환경에서 다른 사용자의 활동을 확인할 수 있습니다.

고급 팁

자격 증명 보호

비밀 값을 소스 파일에 직접 넣거나 클라이언트 측 예제에 노출하지 마세요. .env에 저장하고 해당 파일을 공유하지 않으며, 실수로 키가 공개된 경우 제공업체 대시보드에서 키를 교체하세요.

서비스별로 설정 확인

애플리케이션은 시작되지만 기능이 작동하지 않는다면 각 환경 변수가 존재하고 올바른 자격 증명을 포함하는지 확인하세요. Liveblocks는 멀티플레이어 동작을 담당하고, Typesafe 및 Vercel AI Gateway 키는 프로젝트의 AI 관련 통합을 지원합니다.

환경 변수 편집 후 재시작

개발 서버가 실행 중일 때 키를 추가하거나 교체했다면 npm run dev를 중지한 후 다시 시작하여 애플리케이션이 환경 설정을 다시 불러오도록 하세요.

워크플로 실행과 별도로 협업 테스트

먼저 여러 참여자에게 공유 상태와 커서가 표시되는지 확인합니다. 그런 다음 워크플로 미리 보기와 REST API 호출을 테스트하세요. 이 영역을 독립적으로 확인하면 설정 문제를 더 쉽게 분리할 수 있습니다.

미리 보기 실행으로 반복 개선

Jev 및 LLM 구성 요소의 연결 방식을 조정할 때는 미리보기 실행을 사용하세요. 빌더에서 워크플로가 예상대로 작동하면 REST API를 통해 호출하는 단계로 진행하세요.

결론

Jev 워크플로 빌더는 AI 워크플로 구성, REST 기반 실행, 테스트 미리보기, 실시간 협업을 하나의 애플리케이션에서 결합하는 방법을 보여 줍니다. 종속 항목을 설치하고 필요한 세 가지 서비스 키를 구성하면 프로젝트를 로컬에서 실행하고, Jev 및 LLM 워크플로를 구성하며, 동기화된 상태와 멀티플레이어 커서를 살펴볼 수 있습니다.