为Next.js应用程序添加RAG驱动的在线聊天工具

718 0

일반 소개

Upstash RAG Chat Component是一个专为Next.js应用程序设计的React组件，旨在提供基于RAG（检索增强生成）技术的AI聊天界面。该组件结合了Upstash Vector用于相似性搜索、Together AI用于大语言模型（LLM）、以及Vercel AI SDK用于流式响应。通过这一组件，开发者可以轻松地在他们的应用中集成强大的聊天功能，支持实时上下文检索和持久聊天记录。

기능 목록

流式响应支持：提供即时的聊天响应，提升用户体验。
服务器操作：支持在服务器端执行操作，确保数据安全和性能。
响应式设计：适配各种设备，提供一致的用户体验。
实时上下文检索：根据用户输入实时检索相关信息，提供精准回答。
持久聊天记录：支持聊天记录的持久化存储，方便用户查看历史对话。
完全自定义UI组件：开发者可以根据需求自定义聊天界面的外观和功能。
暗/亮模式支持：适应用户的视觉偏好，提供舒适的使用体验。

도움말 사용

설치 프로세스

使用npm安装::

   npm install @upstash/rag-chat-component

使用pnpm安装::

   pnpm add @upstash/rag-chat-component

使用yarn安装::

   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 Chat Component集成到您的应用中：

使用独立组件文件（推荐）：创建一个独立的组件文件，并在应用中使用：

   // 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 Chat Component，提供强大的AI聊天功能。