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

일반 소개

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

기능 목록

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

도움말 사용

설치 프로세스

1. npm으로 설치::

   npm install @upstash/rag-chat-component

2. pnpm으로 설치::

   pnpm add @upstash/rag-chat-component

3. 원사를 사용한 설치::

   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 채팅 컴포넌트를 애플리케이션에 통합하는 방법에는 두 가지가 있습니다:

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

   // 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>
</>
);
}

2. 클라이언트 컴포넌트에 직접 통합: 클라이언트 페이지에서 바로 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 채팅 기능을 제공할 수 있습니다.