pile·
프론트엔드·vercel-blogVercel Blog·

Chat SDK의 Discord Components V2 지원 추가

Vercel AI SDK의 Chat SDK가 Discord Components V2를 지원하기 시작했다. 기존 임베드 중심 렌더링 대신 텍스트·이미지·버튼을 자유롭게 조합하는 컴포넌트 레이아웃을 Discord 봇 메시지에 적용할 수 있고, 스레드 제목 변경 메서드 추가 및 멘션 오감지 버그 수정도 함께 포함된다.

핵심 포인트
  • 어댑터의 contentFormat 옵션을 ComponentsV2로 설정하면 즉시 활성화, 기존 봇은 임베드 방식 기본 유지로 하위호환
  • 네이티브 컨테이너·섹션·미디어 갤러리·구분선·버튼·스트링 셀렉트 타입으로 메시지 카드 구성
  • Discord의 메시지당 40개 컴포넌트 제한을 SDK가 자동으로 강제해 개발자가 별도 카운트 불필요
  • setThreadTitle() 메서드 신규 추가로 Discord 스레드 채널명을 프로그래밍 방식으로 변경 가능 (Manage Threads 권한 필요)
  • 게이트웨이 모드에서 @everyone/@here 알림을 봇 멘션으로 오인하던 버그 수정
상세 정리
  • 배경: Discord가 출시한 Components V2는 임베드와 달리 다양한 컴포넌트를 임의 순서로 배치할 수 있는 레이아웃 시스템이며, 기존 Chat SDK 어댑터는 이를 지원하지 않았다.
  • 활성화 방법: 어댑터 설정에서 contentFormat을 ComponentsV2로 지정하면 즉시 전환, 기존 봇은 변경 없이 임베드 유지.
  • 지원 컴포넌트 타입: 컨테이너, 섹션(독립 액션 포함), 미디어 갤러리, 구분선, 버튼, 스트링 셀렉트 등 Discord 네이티브 타입 전체 지원.
  • 마크다운 렌더링: 컴포넌트 내부에서 마크다운이 정상 동작하며, 섹션별 독립 액션도 지원된다.
  • 코드 예시: 배포 알림 카드를 텍스트·이미지 미리보기·프로모트/롤백/상세보기 버튼 조합으로 구성하는 샘플이 릴리즈에 포함됐다.
  • 40개 제한 자동 강제: Discord 사양의 메시지당 40 컴포넌트 상한을 SDK 레벨에서 자동 처리해 개발자가 카운트하지 않아도 된다.
  • setThreadTitle() 추가: Discord 스레드 채널명을 프로그래밍 방식으로 변경하는 메서드 신규 추가, Manage Threads 권한 필요.
  • @everyone/@here 오감지 수정: 게이트웨이 모드 봇이 채널 전체 알림을 봇 멘션으로 처리하던 버그 해결, opt-in 설정으로도 동작 가능.
  • 유사 이름 오감지 수정: 동일 이름을 가진 사용자 멘션이 잘못 매칭되던 문제도 함께 패치.
  • 커뮤니티 기여: DeanMauro, onmax, FarazPatankar, sivchari 4명이 이번 업데이트에 기여했다.
왜 읽나Discord 봇에 풍부한 카드 UI를 적용하거나 Vercel AI SDK Chat을 Discord에 통합하는 개발자에게 Components V2 전환 방법과 어댑터 개선 사항을 한눈에 확인할 수 있다.
vercel-blog
Vercel Blog 블로그
원문은 여기서 이어서 읽을 수 있어요
원문 읽기
읽음 (0)

이 글과 비슷한

  1. 프론트엔드·LINE EngineeringLINE Engineering·

    AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기

    LINE Planet 팀의 PM과 Android 엔지니어 두 명이 웹 전문 엔지니어 없이 LINE 앱 내에서 그룹 영상 통화 서비스를 개발한 과정을 다룬다. LIFF(LINE Front-end Framework)와 LINE Planet SDK를 활용해 React/Vite 기반 웹 앱을 구성했고, Firebase Cloud Functions로 별도 서버 인프라 없이 구현을 완료했다.

    #react#webrtc#firebase+2
  2. 프론트엔드·vercel-blogVercel Blog·

    Vercel과 Shopify의 Hydrogen 전면 재설계

    Vercel과 Shopify가 Hydrogen을 오픈소스·런타임 무관 프레임워크로 전면 재설계했다. 기존 Hydrogen은 빠른 헤드리스 스토어프런트 배포를 지원했지만 플랫폼 종속성이 있었고, 새 버전은 Svelte, Nuxt, Next.js 등 어느 JavaScript 프레임워크에서도 동작한다. 3레이어 아키텍처(코어/클라이언트/서버)로 재구성하면서 각 레이어가 명확한 역할을 분담한다.

    #react#nextjs#i18n+2