유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

Next.js AI SDK Tutorial - 21 - Web Search Sources

Codevolution

2025. 8. 28.

0

#ai
#frontend
  • AI 검색 시 정보 출처를 명시하여 사용자의 신뢰도를 높이고 검증 가능성을 제공 🧐
  • Next.js AI SDK를 사용하여 웹 검색 결과에 출처를 쉽게 추가 가능 ➕
  • route handler에서 sendSources: true 옵션을 설정하여 출처 활성화 ⚙️
  • UI에서 메시지 파트를 필터링하여 'source URL' 타입의 출처 추출 🔍
  • 추출된 출처 정보를 UI에 표시하여 사용자가 클릭하여 검증 가능하도록 구현 🖱️
  • 출처의 title이 존재하면 title을 사용하고, 없을 경우 URL을 대신 표시 ℹ️
  • React Fragment를 사용하여 Tool call UI와 출처 목록을 함께 렌더링 ⚛️
  • OpenAI 웹 검색의 경우 UI 요구 사항에 따라 출처 표시 위치 조정 가능 🔄
  • 사용자는 AI가 제공한 정보의 출처를 직접 확인하고 신뢰성을 판단할 수 있음 ✅
  • AI에 대한 맹목적인 신뢰 대신 정보 검증, 심층 탐색, 출처 신뢰도 판단 가능 💡

Recommanded Videos