00:00:00(신나는 음악)
00:00:02안녕하세요 여러분, 저는 Vercel의 CTO인 Malte입니다.
00:00:16오늘 함께해주셔서 감사합니다.
00:00:18지난 1월 초, 저희는 전 직원에게 지시를 내렸습니다.
00:00:21본인의 작업 효율을 몇 배로 높일 방법을 찾아내라고 말이죠.
00:00:24그리고 직원들이 만들어낸 결과물들은 계속해서 저희를 놀라게 하고 있습니다.
00:00:27거의 모든 팀이 복잡한 업무를 처리하기 위한 에이전트를 구축했고,
00:00:30그중 대부분은 누구나 사용할 수 있는 Slack 봇 형태였습니다.
00:00:34하지만 문제에 봉착했습니다.
00:00:35모두가 동일한 기반 작업을
00:00:38계속해서 반복하고 있었기 때문입니다.
00:00:40누군가 에이전트를 만들면,
00:00:41그다음에 Slack의 복잡한 구조를 파악해야 했는데,
00:00:43그게 생각보다 훨씬 어렵습니다.
00:00:45스레드와 반응(reaction)도 이해해야 하고,
00:00:47봇의 메시지 매칭이나 상태 관리 방법도 알아야 하죠.
00:00:50그러면 또 누군가가 묻습니다.
00:00:51"저 에이전트를 GitHub이랑 연결해 줄 수 있어?"
00:00:53그러면 GitHub API를 가지고
00:00:55모든 과정을 처음부터 다시 시작해야 했습니다.
00:00:56논리는 같지만, 플랫폼 코드가 달랐던 것이죠.
00:00:59저희는 곧 채팅 API가
00:01:01겉보기에는 비슷해 보일지 몰라도,
00:01:03내부적으로는 완전히 다르다는 것을 깨달았습니다.
00:01:05Slack은 네이티브 스트리밍을 지원합니다.
00:01:06LLM이 토큰을 생성하는 즉시
00:01:09메시지로 직접 스트리밍할 수 있죠.
00:01:10반면 Discord는 게시하고 수정하고를 반복해야 합니다.
00:01:14GitHub은 스트리밍이 전혀 지원되지 않고요.
00:01:16Slack에는 모달이 있지만, Discord에는 없습니다.
00:01:18Microsoft Teams는 읽기 전용 반응만 제공하죠.
00:01:21이건 단순한 차이가 아니라, 각 플랫폼이 작동하는 방식의
00:01:23근본적인 차이점입니다.
00:01:26그래서 아주 단순한 에이전트 하나라도,
00:01:28서로 다른 도구에서 사용할 수 있게 만드는 데만
00:01:31엄청난 양의 로직이 들어갑니다.
00:01:33정말 악몽 같은 일이죠.
00:01:34이건 비단 Vercel만의 문제가 아닙니다.
00:01:36모든 기업이 업무가 실제로 일어나는 플랫폼에
00:01:38어떻게 에이전트를 배포할지
00:01:40고민하게 될 것입니다.
00:01:42그것은 채팅, 코드 리뷰, 이슈 추적 등을 모두 포함합니다.
00:01:45AI SDK는 모델 제공자들의 이와 비슷한 문제를 해결해 줍니다.
00:01:48코드를 한 번만 작성하면
00:01:50모든 API 차이점을 알아서 처리해 주죠.
00:01:51GPT든 Claude든 Gemini든 상관없이 말입니다.
00:01:54Chat SDK는 대화형 에이전트를 위해 같은 역할을 수행합니다.
00:01:58Slack, GitHub, Linear, Discord, Telegram,
00:02:01WhatsApp 등 다양한 플랫폼에 걸쳐
00:02:04에이전트 상호작용을 위한 단일 API를 제공합니다.
00:02:06에이전트를 구축하기만 하면 Chat SDK가 사용자들이
00:02:09이미 사용 중인 앱으로 에이전트를 전달해 줍니다.
00:02:11Fernando는 지난 몇 주 동안
00:02:15v0 백그라운드 에이전트를 구축해 왔는데요,
00:02:16왜 Chat SDK가 해당 스택에서
00:02:18핵심적인 부분이었는지 설명해 줄 것입니다.
00:02:21(신나는 음악)
00:02:24(신나는 음악 계속)
00:02:28v0 백그라운드 에이전트를 만들기 시작했을 때,
00:02:34제 목표는 Slack에서 v0를 태그해서
00:02:36풀 리퀘스트(PR)를 열 수 있게 하는 것이었습니다.
00:02:38백그라운드에서 실행될 수 있고,
00:02:40어떤 코드베이스나 언어에서도 작동하는
00:02:42범용 코딩 에이전트를 원했죠.
00:02:45그래서 개발을 시작했고,
00:02:47v0 Slack 앱의 첫 번째 버전을
00:02:49친구들에게 보내주었습니다.
00:02:51그랬더니 가장 먼저 물어보는 것이 이것이었습니다.
00:02:53"이거 Linear 이슈에서도 쓸 수 있어?
00:02:56그리고 GitHub PR 댓글에서도 태그할 수 있어?"
00:02:58마치 제가 처음 모바일 앱을 출시했을 때,
00:03:02사람들이 웹에서도 쓸 수 있는지 묻던 때가 생각나더군요.
00:03:05v0가 모든 곳에서 작동해야 한다는 점이 명확해졌습니다.
00:03:09기대치가 달라진 것이죠.
00:03:11그래서 선택을 해야 했습니다.
00:03:14v0 백그라운드 에이전트를 플랫폼별로 하나씩 만들 것인가,
00:03:18아니면 모든 플랫폼을 아우르는 통합 API를 사용해
00:03:22한 번만 만들 것인가?
00:03:24채팅 에이전트를 위한 React Native 같은 것 말이죠.
00:03:27알고 보니 제가 React Native로
00:03:30크로스 플랫폼 앱을 만드는 데 수년을 보냈더라고요.
00:03:34이런 문제는 저에게 전혀 낯설지 않았습니다.
00:03:36그 지점에서 바로 Chat SDK가 등장했습니다.
00:03:39Chat SDK를 사용하면,
00:03:40v0 백그라운드 에이전트를 구축하는 데 집중할 수 있고,
00:03:43각 플랫폼의 고유한 API를
00:03:45고민하는 데 시간을 덜 쓸 수 있습니다.
00:03:48그럼 내부적으로 어떻게 작동하는지 볼까요?
00:03:50Matt이 자세히 보여드리겠습니다.
00:03:53(신나는 음악)
00:03:55- 안녕하세요, 여러분.
00:04:11Fernando처럼 Slack부터 시작해 보죠.
00:04:14제 봇을 멘션하면,
00:04:16아주 간단한 'hello world' 응답을 받게 됩니다.
00:04:21정말 혁신적이죠, 저도 압니다.
00:04:23그리고 코드를 보시면,
00:04:24이 봇을 만드는 게 얼마나 쉬웠는지 확인하실 수 있습니다.
00:04:28제가 한 일이라고는 새 채팅 인스턴스를 만들고,
00:04:32'on mention' 리스너를 추가한 뒤,
00:04:35스레드에 'hello world'를 다시 게시한 게 전부입니다.
00:04:38그게 다예요.
00:04:39하지만 개발자들이 단순히 텍스트만 주고받는 봇을 만들길 원치 않습니다.
00:04:43각 플랫폼의 장점을 최대한 활용하는
00:04:45풍부한 네이티브 경험을 제공하길 원하죠.
00:04:48그리고 개발자들은 JSX를 좋아합니다.
00:04:51그래서 Chat SDK에 JSX를 도입했습니다.
00:04:55이제 익숙한 컴포넌트 방식으로 구축할 수 있습니다.
00:04:58버튼 두 개를 추가해 보죠.
00:04:59여기 아래를 보시면,
00:05:03'hello world' 메시지를
00:05:05계속 버튼과 취소 버튼이 있는
00:05:10'hello world' 카드로 바꿀 것입니다.
00:05:11또한 버튼을 클릭했을 때
00:05:14사용자의 전체 이름을 말하며 계속 버튼을
00:05:17클릭했다고 알려주는 액션 리스너도 추가할 겁니다.
00:05:19다시 Slack으로 돌아가서 제 봇을 멘션해 보겠습니다.
00:05:24예상하신 대로, 우리가 만든 그대로 결과가 나옵니다.
00:05:29컴포넌트들이 네이티브로 렌더링됩니다.
00:05:32계속 버튼을 누르면 봇이 즉각적으로 동작을 처리하죠.
00:05:36하지만 이제부터가 정말 흥미로운 부분입니다.
00:05:41정확히 똑같은 경험을 Discord에서도 구현하고 싶다면 어떨까요?
00:05:45Discord 어댑터를 추가하면 됩니다.
00:05:47그게 끝이에요.
00:05:48이제 제 Discord 채널로 돌아가서
00:05:55봇을 멘션하면,
00:05:57동일한 UI가 Discord에서 네이티브로 렌더링됩니다.
00:06:02새로운 플랫폼을 지원하기 위해 코드를 한 줄도 고칠 필요가 없었죠.
00:06:07정말 멋지죠.
00:06:08이제 에이전트에 대해 이야기해 봅시다.
00:06:10여기 AI SDK를 사용해 만든 간단한 에이전트가 있습니다.
00:06:14에이전트에게는 스트리밍이 필요하죠.
00:06:17Chat SDK를 사용하면 스트리밍 구현은 아주 사소한 일이 됩니다.
00:06:20스트림을 생성하고 스레드에 게시하기만 하면 됩니다.
00:06:23그게 전부예요.
00:06:24Slack이 스트리밍을 어떻게 처리하는지,
00:06:27Discord가 부분 업데이트를 어떻게 하는지 찾아볼 필요가 없었습니다.
00:06:30단 하나의 API만 사용했죠.
00:06:32다시 Slack에서 봇을 멘션하면,
00:06:35응답이 네이티브 방식으로 스트리밍되는 것을 볼 수 있습니다.
00:06:40하지만 여기서 멈출 이유가 없죠?
00:06:42WhatsApp이나 Telegram 같은 플랫폼에서
00:06:45에이전트에게 직접 메시지(DM)를 보내고 싶다면 어떨까요?
00:06:49Chat SDK와 함께라면 쉽습니다.
00:06:52'On Direct Message' 리스너와 필요한 어댑터를 추가하기만 하면 됩니다.
00:06:56이제 누구든 에이전트에게 DM을 보내면 동일한 경험을 할 수 있습니다.
00:07:02웹에서 WhatsApp을 열고
00:07:06"안녕, 어떻게 지내?"라고 말하면,
00:07:08우리가 구축한 에이전트를 사용하여
00:07:12에이전트가 우리의 직접 메시지에 응답하는 것을 볼 수 있습니다.
00:07:14자, 이제 에이전트를 만들었으니,
00:07:16풀 리퀘스트를 하나 열어보는 건 어떨까요?
00:07:18하지만 그전에,
00:07:20WhatsApp에서 대화했던 그 에이전트가
00:07:24제 코드를 리뷰해 줄 수 있다면 어떨까요?
00:07:25GitHub 어댑터만 있으면 가능합니다.
00:07:28여기로 와서 GitHub 어댑터를 추가하면,
00:07:32에이전트를 완전히 새로운 플랫폼으로 가져온 것입니다.
00:07:35GitHub을 열고 이 풀 리퀘스트를 확인해 보면,
00:07:39댓글에서 에이전트를 멘션할 수 있고
00:07:42에이전트는 이전에 만든 것과 동일한
00:07:45직접 메시지 리스너로 응답할 것입니다.
00:07:46Slack, Discord, WhatsApp, Telegram, GitHub.
00:07:51이 API들이 얼마나 다른지 잠시 생각해 보세요.
00:07:56하지만 단 하나의 파일과 몇 줄의 코드로,
00:07:59에이전트를 이 모든 플랫폼에 적용했습니다.
00:08:01Chat SDK를 사용하면 에이전트 경험을 한 번만 구축하고
00:08:06단일 API로 모든 곳에 배포할 수 있습니다.
00:08:09chat-sdk.dev에서 문서와 템플릿을 확인해 보세요.
00:08:14들어주셔서 감사합니다.
00:08:15여러분이 무엇을 만들어낼지 기대되네요.
00:08:17(신나는 음악)