Vanna 웹 컴포넌트 — 기존 웹페이지에 삽입하기

Vanna 2.0은 미리 만들어진 **웹 컴포넌트(<vanna-chat>)**를 제공해요. 이 컴포넌트를 기존 웹페이지에 <script> 한 줄로 넣으면, 스트리밍 응답·표·차트를 갖춘 채팅 UI가 그대로 렌더링돼요. React·Vue·순수 HTML 어디에서든 동작해요.

출처: https://github.com/vanna-ai/vanna

삽입

<!-- 기존 웹페이지 어디든 삽입 -->
<script src="https://img.vanna.ai/vanna-components.js"></script>
<vanna-chat
  sse-endpoint="https://your-api.com/chat"
  theme="dark">
</vanna-chat>

sse-endpoint는 당신의 Vanna 백엔드(Server-Sent Events) 엔드포인트예요. 기존 쿠키/JWT를 그대로 사용해 인증과 권한이 유지돼요.

무엇을 받나

자연어 질문을 하면 실시간으로 스트리밍되어 돌아오는 것들이 있어요.

진행 상태 업데이트(스트리밍)
SQL 코드 블록 (기본적으로 "admin" 사용자에게만 노출)
인터랙티브 데이터 표
차트 (Plotly 시각화)
자연어 요약

이 모든 것이 실시간으로 웹 컴포넌트에 스트리밍돼요.

어디에 쓰나

프로덕션 채팅 인터페이스
자체 DB를 다루는 커스텀 에이전트
웹페이지 어디든 임베드

내부 도구·고객 대시보드에 "데이터 질문" 기능을 넣을 때 이 컴포넌트 하나면 충분해요.

더 알아보기

웹 컴포넌트 백엔드와 통합하는 전체 방법은 공식 Vanna Docs와 GitHub 저장소 README에서 확인할 수 있어요.