Añadir una herramienta de chat en línea basada en RAG a las aplicaciones Next.js

Introducción general

Upstash RAG El componente Chat es un componente React diseñado para aplicaciones Next.js para proporcionar una interfaz de chat AI basada en la tecnología RAG (Retrieval Augmented Generation). El componente combina Upstash Vector para la búsqueda de similitudes, Together AI para Large Language Modelling (LLM) y Vercel AI SDK para respuestas en streaming. Con este componente, los desarrolladores pueden integrar fácilmente una potente funcionalidad de chat en sus aplicaciones, soportando búsquedas contextuales en tiempo real y transcripciones de chat persistentes.

Lista de funciones

• Soporte de respuesta de streaming: Proporcione una respuesta instantánea al chat para mejorar la experiencia del usuario.
• Funcionamiento del servidor: Apoya la ejecución de operaciones del lado del servidor para garantizar la seguridad de los datos y el rendimiento.
• diseño adaptableAdaptación a diversos dispositivos para ofrecer una experiencia de usuario coherente.
• Búsqueda contextual en tiempo real: Recupera información relevante en tiempo real basándose en la información introducida por el usuario y proporciona respuestas precisas.
• Registros de chat persistentesPermite el almacenamiento persistente de los registros de chat, lo que facilita a los usuarios la visualización del historial de conversaciones.
• Componentes de interfaz de usuario totalmente personalizablesLos desarrolladores pueden personalizar el aspecto y la funcionalidad de la interfaz de chat según sus necesidades.
• Compatibilidad con los modos oscuro/brillante: Se adapta a las preferencias visuales del usuario y proporciona una experiencia cómoda.

Utilizar la ayuda

Proceso de instalación

1. Instalación con npm::

   npm install @upstash/rag-chat-component

2. Instalación con pnpm::

   pnpm add @upstash/rag-chat-component

3. Instalación con hilo::

   yarn add @upstash/rag-chat-component

Configuración de variables de entorno

Es necesario configurar las siguientes variables de entorno antes de utilizar el componente:

UPSTASH_VECTOR_REST_URL=
UPSTASH_VECTOR_REST_TOKEN=
OPENAI_API_KEY=
TOGETHER_API_KEY=

La configuración también es necesaria si necesita mantener los registros de chat:

UPSTASH_REDIS_REST_URL=
UPSTASH_REDIS_REST_TOKEN=

Estilo de configuración

existetailwind.config.tspara añadir la siguiente configuración:

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

Implementación del componente de chat

Hay dos maneras de integrar el componente de chat RAG en su aplicación:

1. Uso de archivos de componentes independientes (recomendado): Cree un archivo de componente independiente y utilícelo en la aplicación:

   // 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. Integración directa en los componentes cliente: Importa y utiliza ChatComponent directamente en la página cliente:

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

ejemplo de uso

A continuación se muestra un sencillo ejemplo de su uso:

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

Con los pasos anteriores, puedes integrar y utilizar fácilmente Upstash RAG Chat Component en tu aplicación Next.js para proporcionar una potente funcionalidad de chat AI.