Ajouter un outil de chat en ligne piloté par RAG aux applications Next.js

Introduction générale

Upstash RAG Le composant Chat est un composant React conçu pour les applications Next.js afin de fournir une interface de chat IA basée sur la technologie RAG (Retrieval Augmented Generation). Le composant combine Upstash Vector pour la recherche de similarités, Together AI pour la modélisation des grands langages (LLM) et Vercel AI SDK pour les réponses en continu. Grâce à ce composant, les développeurs peuvent facilement intégrer de puissantes fonctionnalités de chat dans leurs applications, en prenant en charge la recherche contextuelle en temps réel et les transcriptions de chat persistantes.

Liste des fonctions

• Soutien à la réponse à la diffusion en continuLes services d'assistance à la clientèle : Fournir une réponse instantanée au chat pour améliorer l'expérience de l'utilisateur.
• Fonctionnement du serveurLes opérations sont exécutées côté serveur afin d'assurer la sécurité et la performance des données.
• conception réactiveLes services d'aide à la décision : s'adapter à une variété d'appareils pour offrir une expérience cohérente à l'utilisateur.
• Recherche contextuelle en temps réelLes services d'aide à la décision : ils permettent d'obtenir des informations pertinentes en temps réel sur la base des données saisies par l'utilisateur et de fournir des réponses exactes.
• Enregistrements persistants des chatsLes utilisateurs peuvent ainsi consulter facilement l'historique de leurs conversations.
• Composants d'interface utilisateur entièrement personnalisablesLes développeurs peuvent personnaliser l'apparence et les fonctionnalités de l'interface de discussion en fonction de leurs besoins.
• Prise en charge des modes sombre/lumineuxLes services d'aide à la décision : s'adapter aux préférences visuelles de l'utilisateur et lui offrir une expérience confortable.

Utiliser l'aide

Processus d'installation

1. Installation avec npm: :

   npm install @upstash/rag-chat-component

2. Installation avec pnpm: :

   pnpm add @upstash/rag-chat-component

3. Installation avec du fil: :

   yarn add @upstash/rag-chat-component

Configuration des variables d'environnement

Les variables d'environnement suivantes doivent être configurées avant d'utiliser le composant :

UPSTASH_VECTOR_REST_URL=
UPSTASH_VECTOR_REST_TOKEN=
OPENAI_API_KEY=
TOGETHER_API_KEY=

La configuration est également nécessaire si vous souhaitez conserver les journaux de discussion :

UPSTASH_REDIS_REST_URL=
UPSTASH_REDIS_REST_TOKEN=

Style de configuration

existenttailwind.config.tspour ajouter la configuration suivante :

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

Mise en œuvre du composant Chat

Il y a deux façons d'intégrer le composant RAG Chat dans votre application :

1. Utilisation de fichiers de composants autonomes (recommandée)Les fichiers de composants : Créer un fichier de composants séparé et l'utiliser dans l'application :

   // 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. Intégration directe dans les composants du clientImportation et utilisation de ChatComponent directement dans la page du client :

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

exemple d'utilisation

Voici un exemple simple de son utilisation :

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

Avec les étapes ci-dessus, vous pouvez facilement intégrer et utiliser le composant Upstash RAG Chat dans votre application Next.js pour fournir de puissantes fonctionnalités de chat AI.