pile·
AI / ML·vercel-blogVercel Blog·

AI Gateway에서 실시간 음성 에이전트 구축하기

Vercel AI Gateway가 음성·오디오 기능을 정식 지원한다. 실시간 대화 음성(Realtime Voice), 텍스트→음성(TTS), 음성→텍스트(STT) 세 가지를 기존 텍스트/이미지 모델과 동일한 라우팅·인증·모니터링 체계 위에서 사용할 수 있다. OpenAI gpt-realtime-2·Whisper와 xAI Grok 오디오 모델을 지원하며, AI SDK 7 베타로 제공된다.

핵심 포인트
  • 기존 STT→LLM→TTS 파이프라인 없이 실시간 오디오를 직접 처리해 낮은 지연으로 대화 에이전트를 구성할 수 있다.
  • 서버에서 단기 토큰을 발급하고 클라이언트가 해당 토큰으로 WebSocket 연결을 맺는 2-part 아키텍처로 API 키 노출을 막는다.
  • useRealtime 훅 하나로 마이크 접근, 오디오 스트리밍, 모델 응답 재생을 관리한다.
  • 서버 VAD 설정으로 클라이언트 측 무음 감지 없이 발화 종료 감지와 barge-in(끼어들기) 지원.
  • TTS(generateSpeech), STT(transcribe) 단일 함수 호출로 오디오 파일 변환 가능.
  • AI Gateway의 observability, 예산 제한, BYOK(Bring-Your-Own-Key)가 오디오 호출에도 동일 적용된다.
상세 정리
  • 배경: AI Gateway가 기존에 텍스트/이미지/비디오 모델을 라우팅했는데, 이번에 오디오 모달리티를 추가. 추가 마크업이나 플랫폼 수수료 없이 기존 BYOK 구조 유지.
  • 실시간 음성 동작 방식: STT→LLM→TTS를 순차 파이프라인으로 연결하는 대신 모델이 오디오 입력을 직접 받아 오디오를 출력 — 지연 시간과 품질 면에서 유리하다.
  • 서버 토큰 발급: gateway.experimental_realtime.getToken() 호출로 단기 토큰과 WebSocket URL을 반환. API 키가 클라이언트에 노출되지 않는다.
  • 클라이언트 연결: useRealtime 훅에 model과 api.token 경로를 지정. connect() 후 startAudioCapture(stream) 순서로 세션을 시작.
  • VAD 설정: turnDetection을 server-vad로 설정하면 서버가 발화 종료를 감지. 클라이언트 측 타이머/무음 감지 로직 불필요.
  • Mid-conversation tool call: 모델이 응답 중 도구를 요청할 수 있으며, 개발자가 결과를 클라이언트 이벤트로 반환하면 모델이 이어받아 처리. 대화 흐름을 끊지 않는다.
  • 브라우저 외 환경: getWebSocketConfig, serializeClientEvent, parseServerEvent로 WebSocket을 직접 제어. 서버사이드 및 Edge 환경 대응 가능.
  • TTS: generateSpeech 함수로 모델명, 텍스트, 음성 종류, 출력 포맷(MP3 등)을 지정해 오디오 파일 생성.
  • STT: transcribe 함수로 파일 buffer, base64, URL을 텍스트로 변환. openai/whisper-1 기준으로 동작.
  • 인터랙티브 플레이그라운드: AI Gateway 내 모델 페이지에서 코딩 없이 실시간 음성/TTS/STT 모델을 직접 테스트 가능.
왜 읽나AI SDK를 쓰는 프론트엔드·풀스택 개발자가 실시간 음성 에이전트를 구축할 때 필요한 서버 토큰 발급 패턴과 클라이언트 훅 사용법을 코드 예제로 빠르게 익힐 수 있다.
vercel-blog
Vercel Blog 블로그
원문은 여기서 이어서 읽을 수 있어요
원문 읽기
읽음 (0)

이 글과 비슷한

  1. AI / ML·인프랩 (인프런)인프런 (인프랩)·

    학습 에이전트 — AI 두뇌 구축하기

    인프런이 강의 학습 에이전트를 구축하며 겪은 기술 스택 선정, 컨텍스트·도구 설계, LLM-as-a-Judge 품질 개선, 비용 최적화 전략을 다룬다. LLM SSE 스트리밍 처리를 위해 Spring MVC + Virtual Thread + Spring AI를 선택하고, 명시적 프롬프트 캐싱으로 입력 토큰을 90% 절감하는 과정까지 실전 경험이 담겨 있다.

    #ai-agent#llm#llm-as-a-judge+2
  2. AI / ML·네이버 D2네이버 D2·

    AI 에이전트 회사 차리기: 설립부터 어디서든 동기화까지

    네이버 ENGINEERING DAY 2026 발표. Claude Code를 매일 쓰지만 매번 초기화되는 문제를 해결하기 위해 NaverMadCat이라는 다중 AI 에이전트 조직 프레임워크를 구축한 경험을 다룬다. 비서실장 역할의 에이전트가 10개 부서 에이전트를 조율하며, 어느 환경에서 접속해도 동일한 컨텍스트로 동작하도록 동기화 메커니즘을 구현했다.

    #claude-code#multi-agent#ai-agent+2
  3. AI / ML·dropbox-techDropbox Tech·

    DSPy로 AI 평가를 더 나은 응답으로 전환하기 — Dropbox Dash Chat 사례

    Dropbox가 Dash Chat 에이전트의 응답 품질을 높이기 위해 DSPy 최적화 프레임워크를 도입한 과정을 다룬다. 인간 레이블로 LLM 평가자(judge)를 보정하고, 보정된 judge로 에이전트의 시스템 프롬프트를 자동 최적화하는 두 단계 전략으로 불완전 답변 26% 감소와 토큰 사용 5.4% 절감을 달성했다.

    #ai-agent#llm-evaluation#dspy+2