LangChain 및 Upstash Redis를 사용하여 채팅 기록 유지

LangChain은 인간과 AI 간의 대화를 수행할 수 있는 간단한 인터페이스를 제공합니다. BufferMemory을 사용하도록 쉽게 구성할 수 있습니다. , 대화 내용을 메모리에 저장할 수 있습니다. 이는 일부 사용 사례에서는 만족스러울 수 있지만 앱에 채팅 기록의 장기간 지속성이 필요할 수도 있습니다. 다행스럽게도 이를 Upstash Redis 인스턴스로 교체하는 것도 매우 간단합니다.

LangChain은 ioredis을 포함하여 Redis에 대한 여러 통합을 제공합니다. , node-redis 그리고 Upstash Redis. Upstash Redis 클라이언트는 REST를 통해 작동하므로 이를 사용하여 Vercel, Cloudflare Workers 또는 기타 서버리스 환경에 배포할 수 있는 엣지 지원 애플리케이션을 만들 수 있습니다. 우리는 이를 사용하여 세션 전반에 걸쳐 지속되는 메모리를 갖춘 간단한 채팅 앱을 만들 것입니다.

여기에서 이 데모의 전체 소스 코드를 찾을 수 있습니다.

전제조건

Upstash Redis 데이터베이스
OpenAI API 키

시작하기

프로젝트 생성

Upstash Redis와 함께 LangChain을 사용하는 방법을 보여주기 위해 Vercel AI SDK를 사용하여 기본 Next.js 앱을 구성합니다. 시작하려면 새로운 Next.js 앱을 만드세요:

npx create-next-app@latest

몇 가지 프로젝트 옵션을 선택하라는 메시지가 표시됩니다. 대부분의 앱에서는 기본값이 제대로 작동합니다. 이 데모의 목적을 위해 TypeScript 및 app를 활성화해야 합니다. 디렉터리입니다.

종속성 설치

앱이 생성되면 몇 가지 종속성을 설치해야 합니다:

npm install ai langchain openai @upstash/redis

엄격하게 요구되는 것은 아니지만 Vercel AI SDK를 사용하면 OpenAI에서 Next.js 프런트엔드로 응답을 더 쉽게 스트리밍할 수 있습니다. @upstash/redis만 사용해야 합니다. Redis 클라이언트를 생성하면 나머지는 LangChain이 알아서 처리합니다.

환경 변수 설정

마지막으로 이전 전제 조건의 다음 환경 변수가 필요합니다. 여기에 설명된 대로 정확하게 이름을 지정해야 합니다. 그렇지 않으면 자동으로 읽혀지지 않습니다! .env에 추가할 수 있습니다. 새 프로젝트의 루트에 있는 파일:

UPSTASH_REDIS_REST_URL="https://********.upstash.io"
UPSTASH_REDIS_REST_TOKEN="********"
OPENAI_API_KEY="sk-********"

기본 채팅 클라이언트 생성

Next.js가 우리를 위해 많은 파일을 생성했다는 것을 알 수 있습니다. app에 있는 몇 개의 파일만 작업하겠습니다. 디렉터리이므로 현재 public에 있는 모든 항목을 삭제할 수 있습니다. 및 app .

시작하려면 기본 app/layout.tsx을 생성하겠습니다. 앱을 수용하려면:

import type { PropsWithChildren } from "react";
 
export default function RootLayout({ children }: PropsWithChildren) {
 return (
 <html lang="en">
 <body>{children}</body>
 </html>
 );
}

다음으로 사용자의 메시지를 수락하기 위한 입력이 포함된 기본 양식이 필요합니다. app/page.tsx에 추가할 수 있습니다. :

export default function Home() {
 return (
 <main>
 <form>
 <input placeholder="Enter a message..." />
 <button type="submit">Send</button>
 </form>
 </main>
 );
}

LangChain 및 Upstash Redis를 사용하여 채팅 기록 유지

Vercel AI SDK는 useChat이라는 유용한 후크를 내보냅니다. , 이를 통해 채팅 앱에 대한 기존 사용자 인터페이스를 매우 쉽게 만들 수 있습니다. 채팅 메시지 스트리밍과 채팅 입력 상태 관리를 처리합니다. 후크를 사용하려면 "use client"을 추가하여 이것이 클라이언트 구성 요소임을 React에게 알려야 합니다. 지시어를 파일 상단에 추가하세요. 그런 다음 useChat에서 몇 가지 속성을 분해할 수 있습니다. 후크:

messages 보내고 받은 메시지의 배열입니다.
input 입력 필드의 현재 값입니다.
handleInputChange 입력값을 업데이트하는 함수입니다.
handleSubmit 메시지를 엔드포인트로 보내는 함수입니다.

"use client";
 
import { useChat } from "ai/react";
 
export default function Home() {
 const { messages, input, handleInputChange, handleSubmit } = useChat();
 
 return (
 <main>
 <form onSubmit={handleSubmit}>
 <input
 value={input}
 onChange={handleInputChange}
 placeholder="Enter a message..."
 />
 <button type="submit">Send</button>
 </form>
 </main>
 );
}

내부적으로 useChat 후크가 자동으로 input를 추가합니다. messages로 handleSubmit일 때 호출되어 다시 렌더링을 트리거하므로 UI를 직접 업데이트하는 것에 대해 걱정할 필요가 없습니다. 또한 입력 필드를 지우고 지정된 엔드포인트에 대한 API 호출을 트리거합니다. 기본적으로 /api/chat입니다. .

마지막으로 messages을 렌더링해 보겠습니다. 양식 위에:

<main>
 <section>
 {messages.map((message) => (
 <p key={message.id}>{message.content}</p>
 ))}
 </section>
 
 {/* snip */}
</main>

API 엔드포인트 생성

app/api/chat/route.ts을 만드는 것부터 시작해 보겠습니다. 엔드포인트를 수용할 파일입니다. Next.js는 API 끝점과 페이지에 파일 기반 라우팅을 사용합니다. 이것이 바로 이 새 파일의 폴더 구조가 기본 끝점인 /api/chat과 일치하는 이유입니다. , 예전부터요.

Upstash Redis를 사용하고 있기 때문에 엔드포인트는 엣지와 호환됩니다. const runtime = "edge"를 내보내 이를 지정할 수 있습니다. 우리 끝점에서. 엔드포인트 자체에서 messages를 검색할 수 있습니다. useChat 필드 우리를 위해 후크가 채워졌습니다. 이를 통해 우리는 최신 메시지를 LangChain에 전달할 수 있습니다:

import { type NextRequest } from "next/server";
 
import { LangChainStream, StreamingTextResponse } from "ai";
 
export const runtime = "edge";
 
export async function POST(req: NextRequest) {
 const { messages } = await req.json();
 const { stream, handlers } = LangChainStream();
 
 const latestMessage = messages[messages.length - 1];
 
 return new StreamingTextResponse(stream);
}

useChat처럼 예전부터 LangChainStream 또한 구조를 분해할 수 있는 몇 가지 속성을 반환합니다.

stream ReadableStream입니다 이는 결국 LangChain 프로세스의 결과를 포함하게 됩니다.
handlers LangChain에 전달할 수 있는 LLM 콜백 함수가 포함된 개체입니다.

체인 자체를 구현하기 전에 몇 가지 추가 클래스를 가져와야 합니다:

import { Redis } from "@upstash/redis";
import { ConversationChain } from "langchain/chains";
import { ChatOpenAI } from "langchain/chat_models/openai";
import { BufferMemory } from "langchain/memory";
import { UpstashRedisChatMessageHistory } from "langchain/stores/message/upstash_redis";

이제 Redis 클라이언트를 생성하고 체인용 메모리를 설정할 수 있습니다. 여기서는 ConversationChain를 생성합니다. 모델 자체 대신 호출할 수 있는 것입니다. 인간과 AI 간의 대화를 용이하게 하는 맞춤형 체인입니다. 사용자 정의 BaseMemory를 전달할 수 있습니다. 메시지를 저장하고 검색하는 데 사용되는 체인 구현입니다. 이 경우 BufferMemory를 사용하고 있습니다. UpstashRedisChatMessageHistory으로 Upstash Redis에 메시지를 저장하려면:

// snip
const latestMessage = messages[messages.length - 1];
 
const memory = new BufferMemory({
 chatHistory: new UpstashRedisChatMessageHistory({
 sessionId: new Date().toLocaleDateString(),
 client: Redis.fromEnv(),
 }),
});
 
const model = new ChatOpenAI({
 modelName: "gpt-3.5-turbo",
 streaming: true,
});
 
const chain = new ConversationChain({ llm: model, memory });
// snip

Redis를 사용하여 새로운 Redis 클라이언트를 구성합니다. @upstash/redis에서 탐색된 클래스 . ChatOpenAI의 동작을 반영하는 환경 변수를 자동으로 로드하는 방법을 편리하게 제공합니다. . 환경 변수의 이름을 올바르게 지정했다면 이러한 클래스 중 하나에 추가 인수를 전달할 필요가 없습니다.

앱에서 sessionId에 대해 사용자 ID 또는 기타 고유 식별자를 사용할 수 있습니다. 사용자 간에 메시지가 공유되지 않도록 하기 위해 이 데모에서는 현재 날짜를 사용하겠습니다. UpstashRedisChatMessageHistory sessionTTL과 같은 추가 구성 옵션을 제공합니다. 캐시의 수명을 설정합니다.

streaming을 활성화하는 것이 중요합니다 모델에서 구조 해제된 handlers을 사용할 수 있기 때문입니다. 이전 개체를 사용하여 체인 결과를 stream로 파이프합니다. . 마지막으로 최신 메시지와 handlers를 전달하여 체인을 호출할 수 있습니다. 개체:

// snip
const chain = new ConversationChain({ llm: model, memory });
 
chain.call({
 input: latestMessage.content,
 callbacks: [handlers],
});
 
return new StreamingTextResponse(stream);
// snip

우리 latestMessage 이전 개체는 LLM에 대한 프롬프트로 사용됩니다. handlers도 전달합니다. 결과를 stream으로 파이프하는 데 사용되는 체인에 개체를 추가합니다. .

결론

그게 다야! 이제 npm run dev를 사용하여 앱을 실행할 수 있습니다. AI와 채팅을 시작하세요. 응답은 자동으로 이전에 생성한 클라이언트로 다시 스트리밍되며 대화 기록은 Upstash Redis에 저장됩니다.

LangChain 및 Upstash Redis를 사용하여 채팅 기록 유지