Добавление инструмента онлайн-чата на основе RAG в приложения Next.js

Общее введение

Upstash RAG Компонент Chat - это компонент React, разработанный для приложений Next.js и предоставляющий интерфейс чата с искусственным интеллектом, основанный на технологии RAG (Retrieval Augmented Generation). Компонент объединяет Upstash Vector для поиска сходств, Together AI для моделирования больших языков (LLM) и Vercel AI SDK для потоковых ответов. С помощью этого компонента разработчики могут легко интегрировать мощную функциональность чата в свои приложения, поддерживая контекстный поиск в реальном времени и постоянные транскрипты чата.

Список функций

• Поддержка потоковой передачи данных: Обеспечьте мгновенный ответ в чате для повышения удобства пользователей.
• Работа сервера: Поддерживает выполнение операций на стороне сервера для обеспечения безопасности данных и производительности.
• отзывчивый дизайн: Адаптация к различным устройствам для обеспечения стабильного пользовательского опыта.
• Контекстный поиск в реальном времени: Получение необходимой информации в режиме реального времени на основе данных, вводимых пользователем, и предоставление точных ответов.
• Постоянные записи чата: Поддерживает постоянное хранение журналов чата, что позволяет пользователям легко просматривать исторические беседы.
• Полностью настраиваемые компоненты пользовательского интерфейса: Разработчики могут настраивать внешний вид и функциональность интерфейса чата в соответствии со своими потребностями.
• Поддержка темного/яркого режимов: Адаптация к визуальным предпочтениям пользователя и обеспечение комфортного восприятия.

Использование помощи

Процесс установки

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 Chat в ваше приложение:

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

Выполнив описанные выше действия, вы сможете легко интегрировать и использовать Upstash RAG Chat Component в своем приложении Next.js, чтобы обеспечить мощную функциональность чата с искусственным интеллектом.