이번 글에서는 Upstash Redis, Upstash Vector, 그리고 Vercel AI SDK를 활용해 만들 수 있는 AI 애플리케이션을 깊이 있게 살펴봅니다. 각 도구가 지닌 고유한 기능과 특성을 짚어보고, 이들을 유기적으로 결합했을 때 어떤 강력하고 효율적인 AI 솔루션을 만들 수 있는지 확인하겠습니다. 또한 각 기능에 대한 설명과 함께 실제 예제 애플리케이션도 함께 소개합니다.
Upstash Vector란?
먼저 벡터와 벡터 데이터베이스의 개념부터 이해할 필요가 있습니다.
벡터 데이터베이스는 데이터를 숫자 배열 형태, 즉 '벡터'로 저장하고 검색하도록 설계된 전문 데이터 저장 시스템입니다. 대량의 고차원 벡터를 효율적으로 처리하기 때문에 복잡한 데이터 구조를 다루는 데 매우 적합합니다. 벡터 데이터베이스의 주요 장점은 다음과 같습니다.
효율성: 고차원 벡터의 저장과 검색을 효율적으로 처리하여 연산 부담을 줄이고 AI 애플리케이션의 쿼리 응답 속도를 크게 높입니다.
정확성: 최적화된 검색 알고리즘 덕분에 가장 관련성 높은 데이터 포인트를 정확하게 찾아냅니다. 이는 추천 엔진이나 사기 탐지 시스템처럼 데이터 분류가 중요한 시스템의 성능 향상으로 직결됩니다.
실시간 처리: 데이터를 실시간으로 처리할 수 있어 즉각적인 응답이 필요한 챗봇, 실시간 분석 등의 애플리케이션에 이상적입니다.
AI에서 벡터는 보통 임베딩(embedding) 기반 모델을 통해 객체의 핵심 특징이나 속성을 담아냅니다. 예를 들어 자연어 처리(NLP) 기반 AI 애플리케이션에서는 벡터가 특정 텍스트, 음성 또는 문서의 의미를 나타내고, 이미지 처리 애플리케이션에서는 해당 이미지의 특징을 표현합니다.
그렇다면 Upstash Vector를 자세히 살펴보겠습니다.
Upstash Vector는 서버리스(serverless) 벡터 데이터베이스로, 벡터 유사도 검색 알고리즘인 DiskANN을 사용하며 코사인(Cosine), 유클리드 거리(Euclidean distance), 내적(dot product)이라는 세 가지 유사도 함수를 제공합니다. 서버리스 방식이기 때문에 사용한 만큼만 지불하는 종량제 요금제를 적용하며, 처음 시작하는 사람들을 위한 무료 티어도 마련되어 있습니다.
알고리즘과 유사도 함수에 대한 자세한 내용은 Upstash 공식 문서에서 확인할 수 있습니다.
저렴한 비용으로 뛰어난 검색 성능을 제공할 뿐만 아니라, REST API와 TypeScript·Python용 SDK를 함께 제공해 코드베이스에 Upstash Vector를 손쉽게 통합할 수 있습니다.
Upstash Vector를 사용하려면 먼저 콘솔에 로그인해야 합니다. 로그인 후 Create Index 버튼을 클릭해 벡터 인덱스를 생성합니다. 팝업 창에서 인덱스 이름을 지정하고 인덱스가 위치할 리전(region)을 선택합니다. 다음으로, 객체를 Upstash Vector 인덱스에 저장하기 전에 임베딩을 추출할 임베딩 모델을 선택합니다. Upstash에는 바로 사용할 수 있는 오픈소스 임베딩 모델이 여러 개 미리 정의되어 있으며, 직접 외부 임베딩 모델을 사용하고 싶다면 Custom을 선택해 벡터 차원(dimension)을 원하는 값으로 설정할 수도 있습니다.
마지막으로 벡터 간 거리를 계산할 유사도 함수를 선택합니다. Upstash에는 코사인, 유클리드 거리, 내적 세 가지 함수가 정의되어 있으며, 자세한 내용은 공식 문서를 참고하시기 바랍니다.
다음 화면에서 자신에게 맞는 요금제를 선택하면 됩니다.
인덱스 생성이 완료되면 코드베이스에 Upstash Vector를 통합할 수 있습니다. 이 글에서는 TypeScript를 사용하지만, Python이나 Go SDK 역시 동일하게 활용할 수 있습니다. Upstash Vector 콘솔의 Details 탭에 있는 통합 가이드를 따라 진행하면 되는데, 우선 @upstash/vector 패키지를 설치합니다.
npm i @upstash/vector
이제 아래 메서드를 통해 간단히 연결하고, 데이터를 저장하고, 쿼리할 수 있습니다.
import { Index } from "@upstash/vector"
const index = new Index({
url: <UPSTASH-VECTOR-ENDPOINT>,
token: <UPSTASH-VECTOR-TOKEN>,
})
await index.upsert({
id: "id1",
vector: […],
metadata: { metadata_field: "metadata_value" },
});
await index.query({
vector: […],
topK: 1,
includeVectors: true,
includeMetadata: true,
});Vercel AI SDK란?
Vercel AI SDK는 웹 애플리케이션에 AI 기능을 손쉽게 통합할 수 있도록 돕는 TypeScript 툴킷입니다. React, Next.js, Vue, Svelte, Node.js 등 다양한 프레임워크를 지원하여 개발자가 효율적으로 AI 기반 애플리케이션을 구축할 수 있게 해줍니다. Vercel AI SDK는 크게 세 가지 핵심 개념으로 구성됩니다.
AI SDK Core
AI SDK Core는 Vercel AI SDK의 핵심 모듈로, 웹 애플리케이션에 AI 기능을 통합하는 과정을 단순화합니다. 이 모듈은 통합된(unified) API를 제공하여 대규모 언어 모델(LLM)을 활용해 텍스트, 구조화된 객체, 도구 호출(tool call)을 손쉽게 생성할 수 있게 해줍니다.
가장 많이 사용되는 예시는 generateText 또는 streamText API입니다. TypeScript로 빠르게 살펴보겠습니다.
먼저 터미널에서 아래 명령어를 실행해 Vercel AI SDK를 설치합니다.
`npm i ai`
이후 generateText API를 예제로 사용해 보겠습니다. Vercel AI SDK는 OpenAI, Anthropic, Google, Mistral 등 잘 알려진 모델 프로바이더들과의 통합을 기본 제공합니다. 여기서는 OpenAI를 사용하지만, 다른 프로바이더도 OpenAI만큼 간단하게 연동할 수 있습니다.
import { generateText } from "ai"
import { openai } from "@ai-sdk/openai"
const { text } = await generateText({
model: openai("gpt-4-turbo"),
prompt: "What is love?"
})AI SDK UI
AI SDK UI는 프레임워크에 종속되지 않는(framework-agnostic) 툴킷으로, 대화형 채팅·완성(completion)·어시스턴트 애플리케이션을 개발할 수 있도록 돕습니다. 채팅 인터페이스 생성, 생성형 AI 컴포넌트, 상태 관리 같은 부가 기능도 함께 제공합니다.
대표적인 사용 예는 useChat과 useCompletion 훅(hook)입니다. useChat은 메시지, 로딩 상태, 에러 등 필요한 입력·출력의 상태 관리를 추상화하여 채팅 메시지 스트리밍을 간편하게 처리합니다. useCompletion은 AI 애플리케이션 내 텍스트 완성을 관리하고, 입력 상태를 처리하며, 프로바이더에서 새로운 완성 결과가 도착하면 UI를 자동으로 갱신합니다.
여기서는 AI SDK UI의 사용 예로 useChat을 간단히 살펴보겠습니다.
const { messages, input, handleInputChange, handleSubmit} =
useChat({
api: "api/chat",
initialMessages: […],
onResponse(response) {},
streamMode: "text",
});위 코드에서 볼 수 있듯이, 메시지가 전송될 때 호출할 API 엔드포인트와 응답 수신 시 실행할 함수를 넘겨주면 나머지 상태 관리는 훅이 알아서 처리합니다.
AI SDK RSC
Vercel AI SDK의 이 부분은 서버 사이드 렌더링을 위한 것입니다. AI SDK RSC의 목적은 React Server Components(RSC)를 통해 LLM이 생성한 UI를 서버에서 클라이언트로 직접 생성·스트리밍할 수 있도록 지원하는 것입니다.
AI SDK RSC에는 서버 사이드 렌더링 UI의 스트리밍 출력을 지원하는 여러 함수가 있습니다. 자세한 내용은 Vercel AI SDK RSC 공식 문서를 참고하세요. 여기서는 작동 방식을 이해하기 위해 streamUI 함수 하나만 살펴보겠습니다.
const result = await streamUI({
model: openai('gpt-4o'),
prompt: 'Get the weather for San Francisco',
text: ({ content }) => <div>{content}</div>,
tools: {},
});보시다시피 streamUI도 AI SDK Core의 함수들과 비슷하게 작동합니다. 가장 큰 차이점은 렌더링된 UI를 서버에서 스트리밍한다는 점입니다.
요약하면, Vercel AI SDK는 백엔드부터 프론트엔드까지 소프트웨어 개발 전 과정에서 AI 애플리케이션 구축을 도와주는 강력한 도구입니다.
Upstash Redis 활용하기
AI 애플리케이션에서 Upstash Redis는 주로 API와 LLM 모델 사용량을 보호하기 위한 레이트 리밋(rate limiting), 캐싱, 그리고 AI 챗봇 애플리케이션의 메시지 히스토리 저장 용도로 활용됩니다.
먼저 Upstash 콘솔에서 Redis 데이터베이스를 생성해야 합니다.
Redis 데이터베이스를 생성했다면, 이제 코드베이스에 통합하여 캐싱 데이터, 메시지 히스토리, 대화 상태 등의 데이터를 저장하고 조회할 수 있습니다. 이를 위해 먼저 Upstash Redis SDK를 설치합니다.
npm i @upstash/redis
그런 다음 코드에서 Redis 데이터베이스에 연결할 수 있습니다.
import { Redis } from '@upstash/redis'
const redis = new Redis({
url: <UPSTASH-REDIS-ENDPOINT>,
token: <UPSTASH-REDIS-TOKEN>,
})
const data = await redis.set('foo', 'bar');레이트 리밋 목적으로 Redis를 사용한다면, Upstash가 제공하는 레이트 리밋 전용 SDK를 활용하는 것이 좋습니다. 이 경우 설치해야 할 의존성이 다릅니다.
npm install @upstash/ratelimit
이제 레이트 리밋을 구현해 보겠습니다.
import { Ratelimit } from "@upstash/ratelimit";
import { Redis } from "@upstash/redis";
// 10초당 10개의 요청을 허용하는 새 레이트 리미터 생성
const ratelimit = new Ratelimit({
redis: Redis.fromEnv(),
limiter: Ratelimit.slidingWindow(10, "10 s"),
analytics: true,
/**
* Redis 키에 사용할 선택적 접두사.
* 다른 애플리케이션과 Redis 인스턴스를 공유하면서
* 키 충돌을 피하고 싶을 때 유용합니다.
*/
prefix: "prefix",
});
// 모든 요청에 하나의 레이트 리밋을 적용하려면 고정 문자열을 사용하고,
// 개별 제한이 필요하면 userID, apiKey, IP 주소 등을 사용하세요.
const identifier = "identifier";
const { success } = await ratelimit.limit(identifier);
if (!success) {
return "Unable to process at this time";
}
// 나머지 코드Upstash Redis · Vector와 Vercel AI SDK의 결합
그렇다면 지금까지 살펴본 도구들로 어떤 것을 만들 수 있을까요? 가능성은 무궁무진합니다.
RAG 챗봇은 Vercel AI SDK와 Upstash Vector 데이터베이스로 구축할 수 있는 가장 대표적인 생성형 AI 애플리케이션입니다. 검색 증강 생성(Retrieval-Augmented Generation, RAG)은 챗봇과 대화형 AI 시스템의 능력을 한층 끌어올리는 고급 프레임워크로, '검색(retrieval)'과 '생성(generation)'이라는 두 가지 핵심 요소를 결합해 더욱 정확하고 맥락에 맞는 유익한 응답을 제공합니다. RAG 챗봇은 벡터 데이터베이스를 리트리버(retriever)로 사용하며, 이곳에 대화 히스토리가 임베딩 형태로 저장되어 LLM 모델이 다음 응답을 생성할 때 활용됩니다. 이러한 방식을 통해 LLM은 대화의 맥락에 맞는 응답을 생성하고 과거 대화로부터 학습할 수 있습니다.
이러한 챗봇 애플리케이션에서 Upstash Vector는 리트리버 역할을 하기에 완벽한 벡터 데이터베이스입니다. Upstash Vector와의 통합 위에서 백엔드 쪽에서는 Vercel AI SDK Core의 streamText나 streamObject API를 활용해 OpenAI, Anthropic, Mistral 등 LLM 모델이 생성한 응답을 스트리밍할 수 있습니다. 프론트엔드에서는 채팅 UI와 상태 관리를 강력하게 처리하는 Vercel AI SDK UI의 useChat 훅을 활용하면 됩니다. DegreeGuru 블로그 포스트에서 예제 RAG 애플리케이션을 확인할 수 있습니다.
Vercel AI SDK로 손쉽게 만들 수 있는 또 다른 대표적인 AI 애플리케이션 유형은 추천 시스템입니다. 추천 시스템은 이커머스 플랫폼의 가장 중요한 기능 중 하나로, 사용자의 개인 선호도와 행동 이력을 바탕으로 관심사를 파악하고 유용한 추천을 제공합니다. 추천 시스템을 구축할 때 Vercel AI SDK Core의 embed 함수를 활용하면 사용자 데이터의 임베딩을 손쉽게 추출할 수 있습니다. 아래 예제 코드를 살펴보겠습니다.
import { embed } from 'ai';
import { openai } from '@ai-sdk/openai';
// 'embedding'은 단일 임베딩 객체(number[])
const { embedding } = await embed({
model: openai.embedding('text-embedding-3-small'),
value: 'sunny day at the beach',
});임베딩, 즉 숫자 배열 형태의 의미 데이터를 추출한 후에는 그 결과를 Upstash Vector에 저장할 수 있습니다. 저장된 임베딩은 사용자 습관에 따라 쿼리하고 분류하여 향후 추천에 활용할 수 있습니다.
Vercel AI SDK Core에서 입력값으로부터 임베딩을 추출하는 embed 함수는 시맨틱 검색(의미 기반 검색), 이미지 검색, 콘텐츠 요약 등 어떤 머신러닝 애플리케이션에서든 활용할 수 있습니다. 개발자는 이 함수로 추출한 벡터 임베딩을 Upstash Vector 데이터베이스에 삽입함으로써, AI 알고리즘에 불필요한 원본(raw) 데이터를 따로 저장할 필요 없이 임베딩만으로 입력값을 분석할 수 있습니다.
마지막으로 소개할 예제는 고객 리뷰 AI 요약입니다. 이 애플리케이션에서는 제품에 대한 고객 리뷰 텍스트로부터 임베딩을 추출해 벡터 데이터베이스에 저장합니다. 이후 분석가들은 다시 한번 Vercel AI SDK Core를 활용해 LLM 모델에 프롬프트를 보내고, 벡터를 통해 데이터의 요약을 얻을 수 있습니다.
이번 글에서 다룰 마지막 예제는 사기/이상 탐지 시스템입니다. 가장 기본적인 형태의 이상 탐지에서는 거래나 사용자 행동을 분류하여 비정상적인 움직임이 있는지 감지해야 합니다. 이를 위해 Upstash Vector 데이터베이스를 사용해 n차원 공간에 위치시킬 벡터를 생성할 수 있습니다. 사용자 상호작용이 벡터로 저장되어 공간에 배치되면, 분석 도구는 새로 들어온 상호작용과 기존 상호작용 간의 유사도를 계산합니다. 이 유사도 점수를 통해 해당 상호작용이 정상인지 여부를 판별할 수 있습니다.
지금까지 살펴본 모든 예제 애플리케이션에서 텍스트 생성, 임베딩 추출을 위한 AI 모델 호출 등 무거운 작업에는 Upstash의 레이트 리밋 기능을 활용할 수 있습니다. 덕분에 트래픽 폭증으로부터 운영을 안전하게 보호할 수 있습니다. 더불어 Upstash Redis는 메시지 히스토리, LLM 모델에 사용하는 프롬프트 캐시 등 애플리케이션의 원본 사용자 데이터를 저장하기에도 탁월한 선택입니다.
마치며
이번 글에서 우리는 Upstash Redis, Upstash Vector, Vercel AI SDK가 고급 AI 애플리케이션 구축을 위한 가치 있는 조합임을 확인했습니다. 이 도구들은 함께 작동하여 데이터를 효율적으로 관리하고, 정보를 처리하며, AI 모델을 배포합니다. 소개한 예제들은 이 기술 스택이 다양한 AI 솔루션을 만드는 데 얼마나 유연하게 활용될 수 있는지 잘 보여줍니다.
더 많은 예제가 궁금하다면 Upstash 블로그와 Vercel 템플릿을 확인해 보시기 바랍니다.