Next.js 애플리케이션에 RAG 기반 온라인 채팅 도구 추가하기

37.6K 00

일반 소개

업스타시 RAG 채팅 컴포넌트는 RAG(검색 증강 생성) 기술을 기반으로 AI 채팅 인터페이스를 제공하기 위해 Next.js 애플리케이션용으로 설계된 React 컴포넌트입니다. 이 컴포넌트는 유사성 검색을 위한 Upstash Vector, LLM(대규모 언어 모델링)을 위한 Together AI, 스트리밍 응답을 위한 Vercel AI SDK를 결합합니다. 이 구성 요소를 통해 개발자는 강력한 채팅 기능을 애플리케이션에 쉽게 통합하여 실시간 문맥 검색 및 영구 채팅 기록을 지원할 수 있습니다.

기능 목록

스트리밍 응답 지원사용자 경험을 향상시키기 위해 즉각적인 채팅 응답을 제공합니다.
서버 운영데이터 보안 및 성능을 보장하기 위해 서버 측 작업 실행을 지원합니다.
반응형 디자인다양한 디바이스에 적응하여 일관된 사용자 경험을 제공합니다.
실시간 문맥 검색사용자 입력에 따라 실시간으로 관련 정보를 검색하고 정확한 답변을 제공합니다.
영구 채팅 기록채팅 로그의 영구 저장을 지원하여 사용자가 과거 대화를 쉽게 볼 수 있도록 합니다.
완전히 사용자 정의 가능한 UI 구성 요소개발자는 필요에 따라 채팅 인터페이스의 모양과 기능을 사용자 지정할 수 있습니다.
다크/밝음 모드 지원사용자의 시각적 선호도에 맞게 조정하고 편안한 경험을 제공합니다.

도움말 사용

설치 프로세스

npm으로 설치::

   npm install @upstash/rag-chat-component

pnpm으로 설치::

   pnpm add @upstash/rag-chat-component

원사를 사용한 설치::

   yarn add @upstash/rag-chat-component

환경 변수 구성

컴포넌트를 사용하기 전에 다음 환경 변수를 설정해야 합니다:

UPSTASH_VECTOR_REST_URL=
UPSTASH_VECTOR_REST_TOKEN=
OPENAI_API_KEY=
TOGETHER_API_KEY=

채팅 로그를 유지해야 하는 경우에도 구성이 필요합니다:

UPSTASH_REDIS_REST_URL=
UPSTASH_REDIS_REST_TOKEN=

구성 스타일

존재tailwind.config.ts파일에 다음 구성을 추가합니다:

import type { Config } from "tailwindcss";
export default {
content: ["./node_modules/@upstash/rag-chat-component/**/*.{js,mjs}"],
} satisfies Config;

채팅 컴포넌트 구현하기

RAG 채팅 컴포넌트를 애플리케이션에 통합하는 방법에는 두 가지가 있습니다:

독립형 컴포넌트 파일 사용(권장)별도의 컴포넌트 파일을 생성하여 애플리케이션에서 사용합니다:

   // components/chat.tsx
"use client";
import { ChatComponent } from "@upstash/rag-chat-component";
export const Chat = () => {
return <ChatComponent />;
};
// page.tsx
import { Chat } from "./components/chat";
export default function Home() {
return (
<>
<Chat />
<p>Home</p>
</>
);
}

클라이언트 컴포넌트에 직접 통합: 클라이언트 페이지에서 바로 ChatComponent를 가져와서 사용합니다:

   // page.tsx
"use client";
import { ChatComponent } from "@upstash/rag-chat-component";
export default function Home() {
return (
<>
<ChatComponent />
<p>Home</p>
</>
);
}

사용 예

다음은 간단한 사용 예시입니다:

import { ChatComponent } from "@upstash/rag-chat-component";
export default function App() {
return (
<div>
<h1>Welcome to RAG Chat</h1>
<ChatComponent />
</div>
);
}

위의 단계를 통해 Next.js 애플리케이션에 Upstash RAG 채팅 컴포넌트를 쉽게 통합하고 사용하여 강력한 AI 채팅 기능을 제공할 수 있습니다.