AI SDK의 시대: Vercel AI SDK와 LangChain을 활용한 지능형 UI 구축 패턴

이제 LLM(Large Language Model)은 단순히 텍스트 응답을 주는 단계를 넘어섰습니다. 사용자의 의도를 파악하고, 직접 함수를 실행하며(Function Calling), 그 결과에 최적화된 UI를 실시간으로 렌더링하는 **지능형 UI(Intelligent UI)**의 시대가 도래했습니다.

오늘은 이 여정의 핵심 도구인 Vercel AI SDK와 LangChain을 활용하여 현대적인 AI 기반 인터페이스를 구축하는 패턴을 살펴보겠습니다.

1. 왜 다시 ‘SDK’인가?

과거에는 OpenAI API를 직접 호출하여 응답을 기다리는 단순한 방식을 사용했습니다. 하지만 프로덕션 수준의 AI 기능을 만들려면 다음과 같은 복잡한 문제들을 해결해야 합니다.

Streaming: 텍스트가 한 자씩 출력되는 자연스러운 UX 제공
State Management: 대화 기록 관리 및 UI 동기화
Generative UI: 모델의 응답에 따라 일반 텍스트가 아닌 리액트 컴포넌트를 직접 렌더링

Vercel AI SDK는 프론트엔드 관점에서 이 문제를 해결하고, LangChain은 백엔드 로직(체인, 에이전트 설계)에서 강력한 추상화를 제공합니다.

2. 지능형 UI 구축을 위한 핵심 패턴

패턴 A: 스트리밍 데이터 기반 인터페이스

사용자가 질문을 던지면 모델은 데이터를 생성합니다. Vercel AI SDK의 useChat 훅은 이 스트리밍 과정을 단 몇 줄로 구현하게 해줍니다.

'use client';

import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();
  
  return (
    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
      {messages.map(m => (
        <div key={m.id} className="whitespace-pre-wrap mb-4">
          {m.role === 'user' ? '👤 User: ' : '🤖 AI: '}
          {m.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
          value={input}
          placeholder="질문을 입력하세요..."
          onChange={handleInputChange}
        />
      </form>
    </div>
  );
}

패턴 B: Generative UI (RSC 결합)

단순 텍스트 응답 대신, 날씨 정보를 물으면 날씨 카드를, 주가 정보를 물으면 차트를 보여주는 방식입니다. streamUI 기능을 활용하면 LLM이 특정 함수(Tool)를 실행할 때 실제 리액트 컴포넌트를 스트림 응답에 포함시킬 수 있습니다.

// 서버 액션 예시
import { streamUI } from 'ai/rsc';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

export async function submitQuestion(question: string) {
  const ui = await streamUI({
    model: openai('gpt-4o'),
    prompt: question,
    tools: {
      getWeather: {
        description: '특정 지역의 날씨를 가져옵니다.',
        parameters: z.object({ location: z.string() }),
        generate: async ({ location }) => {
          // 실제 날씨 데이터 호출 로직
          return <WeatherCard location={location} temp={24} />;
        }
      }
    }
  });
  return ui.value;
}

3. Vercel AI SDK + LangChain 조합의 위력

두 도구를 조합하면 다음과 같은 강력한 아키텍처를 만들 수 있습니다.

LangChain으로 백엔드에서 복잡한 에이전트 로직(RAG, API 도구 연동)을 작성합니다.
Vercel AI SDK의 LangChainAdapter를 사용하여 해당 로직의 스트림을 프론트엔드로 즉시 연결합니다.
사용자는 지연 시간(Latency) 없이 AI가 사고하고 행동하는 과정을 시각적으로 경험하게 됩니다.

4. 마치며: AI-Native 개발자로의 전환

이제 UI 개발자는 단순히 ‘데이터를 보여주는 사람’이 아닙니다. 사용자의 의도(Intent)를 어떻게 시각적 상태(State)로 전환할 것인가를 고민하는 오케스트레이터가 되어야 합니다.

Vercel AI SDK와 LangChain은 그 복잡한 다리를 놓아주는 가장 강력한 도구입니다. 지금 바로 여러분의 프로젝트에 AI를 단순한 기능을 넘어 ‘경험’으로 녹여내 보세요.