AI를 통한 선

Source: Dev.to

AI 챗봇 만들기는 어렵지 않다 — 유용하게 만드는 것이 관건 (실제 프로젝트에서 얻은 교훈)

한 달 전, Lambda 함수를 사용해 이력서 코치 AI 챗봇을 만들고 Vercel(프론트엔드 개발자를 위한 주요 클라우드 플랫폼)에 배포하면서 테스트 중 Vercel 로그에 타임아웃 오류가 계속 발생했습니다. 문제를 디버깅하던 중 response.json()을 사용하고 있었고, 응답을 스트리밍하지 않아 Vercel에서 타임아웃 ⌛️ 오류가 발생한다는 것을 알게 되었습니다. Lambda 함수를 스트림을 사용하도록 업데이트한 뒤 모든 것이 원활하게 동작했습니다.

💡 챗봇 UI는 React로 구축했습니다: https://buildcv.makeadifference.app.

왜 Lambda에서 스트림을 사용해야 할까요?

스트림은 AI 챗봇이나 대화형 애플리케이션에 이상적입니다. 스트리밍을 통해 사용자는 전체 응답을 기다리지 않고 점진적으로 출력을 받아 보다 인터랙티브한 경험을 할 수 있기 때문입니다.

API를 구축한 경험을 바탕으로 텍스트 응답에는 스트림을, CRUD 작업이나 비즈니스 로직 구현에는 JSON을 사용하는 것을 권장합니다.

Lambda / 서버리스 함수

// Request streamed response from AI model
const stream = AI.generateStream(userPrompt);

res.setHeader("Content-Type", "text/plain; charset=utf-8");
res.setHeader("Cache-Control", "no-cache");

// Return chunks immediately to frontend
for await (const chunk of stream) {
  const text = chunk.text;
  if (text) {
    res.write(text);
  }
}

res.end();

프론트엔드 (React)

const response = await fetch("api/chat");

const reader = response.body.getReader();
const decoder = new TextDecoder();

let fullText = "";

while (true) {
  const { value, done } = await reader.read();
  if (done) break;

  const chunk = decoder.decode(value);
  fullText += chunk;
}

if (!response.ok) {
  throw new Error(`Failed to get response: ${response.status}`);
}

💡 Vercel은 전체 응답이 생성될 때까지 기다리는 대신 데이터를 청크 단위로 클라이언트(프론트엔드)에게 전송할 수 있게 해줍니다.

여러분은 AI를 활용해 무엇을 만들고 있나요?

AI를 사용하면서 겪은 문제는 없었나요? 있었다면 어떻게 해결했는지 공유해 주세요.

행복한 학습 되세요 🎉