Introducing Chat SDK

VVercel
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00(upbeat music)
00:00:02- Hey everyone, my name is Malte, I'm the CTO of Vercel.
00:00:16Thanks for joining us today.
00:00:18In early January, we gave everyone in our company a mandate,
00:00:21figure out how to multiply your output.
00:00:24And seeing what people built continues to blow us away.
00:00:27Almost every team built an agent to handle complex works,
00:00:30and most of them are Slack bots that anyone can use.
00:00:34But we ran into a problem.
00:00:35Everyone was doing the same degradation work
00:00:38over and over again.
00:00:40Someone would build an agent,
00:00:41then you had to figure out the complexity of Slack,
00:00:43and that's harder than it seems.
00:00:45You need to understand threats and reactions,
00:00:47how the boss matches his, how to handle state.
00:00:50Then someone would ask,
00:00:51"Hey, can you wire up that agent's GitHub?"
00:00:53And the process would start all over again
00:00:55with GitHub's APIs.
00:00:56It was the same logic, but different platform code.
00:00:59We quickly learned that that chat API
00:01:01seems similar on the surface,
00:01:03but completely different under the hood.
00:01:05Slack supports native streaming.
00:01:06You can stream tokens directly into a message
00:01:09as the LLM generates them.
00:01:10Discord, you have to post, edit, post, edit.
00:01:14GitHub, no streaming at all.
00:01:16Slack has modals, Discord doesn't.
00:01:18Microsoft Teams gives you read-only reactions.
00:01:21These aren't quirks, they're fundamental differences
00:01:23in how each platform works.
00:01:26So even for a single, simple agent,
00:01:28you end up with a huge amount of logic
00:01:31just to make it usable in different tools.
00:01:33It's a nightmare.
00:01:34And it isn't just a Vercel problem.
00:01:36Every company is going to have to figure out
00:01:38how to deliver their agents across the surfaces
00:01:40where work already happens.
00:01:42That means chat, code review, issue tracking, and more.
00:01:45AI SDK solves a similar problem for model providers.
00:01:48You write the code once and it handles
00:01:50all the API differences,
00:01:51whether you're calling GPT, CLOT, or Gemini.
00:01:54Chat SDK does the same thing for interactive agents.
00:01:58It's a single API for agent interactions across platforms
00:02:01like Slack, GitHub, Linear, Discord, Telegram,
00:02:04WhatsApp, and more.
00:02:06You build the agent and Chat SDK will deliver it to users
00:02:09in the apps they already use.
00:02:11So Fernando has been building V0 background agents
00:02:15for the last few weeks,
00:02:16and he's going to tell you why Chat SDK
00:02:18was a critical part for that stack.
00:02:21(upbeat music)
00:02:24(upbeat music continues)
00:02:28When I started building V0 background agents,
00:02:34my goal was to let you tag V0 from Slack
00:02:36to open pull requests.
00:02:38I wanted a general purpose coding agent
00:02:40that can run in the background,
00:02:42in any code base, with any language.
00:02:45So I started building,
00:02:47and I sent the first version of the V0 Slack app
00:02:49to my friends.
00:02:51And the first thing they asked was,
00:02:53"Can I also use this in linear issues?
00:02:56And can I tag it from a GitHub PR comment?"
00:02:58It reminded me of the first time I shipped a mobile app,
00:03:02when people started asking if they can also use it on web.
00:03:05It became clear that V0 has to work everywhere.
00:03:09Expectations have changed.
00:03:11So I had to make a choice.
00:03:14Do we build V0 background agents platform by platform?
00:03:18Or could we build it once with a unified API
00:03:22across every platform?
00:03:24Like a React Native for chat agents?
00:03:27Well, it turns out that I've spent years
00:03:30building cross-platform apps with React Native.
00:03:34This problem is nothing new to me.
00:03:36And that's where the Chat SDK came in.
00:03:39With the Chat SDK,
00:03:40I can focus on building V0 background agents,
00:03:43and spend less time
00:03:45worrying about each platform's unique APIs.
00:03:48So how does this look under the hood?
00:03:50Here's Matt to show you more.
00:03:53(upbeat music)
00:03:55- Hi, everyone.
00:04:11Just like Fernando, let's start with Slack.
00:04:14I mentioned my bot,
00:04:16and I get a very simple hello world response.
00:04:21Game changing, I know.
00:04:23And if you look at the code,
00:04:24you can see how easy it was for me to create this bot.
00:04:28All I had to do was create a new chat instance,
00:04:32and add an on mention listener,
00:04:35and post hello world back to the thread.
00:04:38That's it.
00:04:39But we don't want developers building plain text bots.
00:04:43We want rich native experiences
00:04:45that take full advantage of each platform.
00:04:48And developers love JSX.
00:04:51So we brought JSX to the Chat SDK.
00:04:55Now you build with components just like you're used to.
00:04:58Let's add two buttons.
00:04:59So down here, you can see,
00:05:03I'm gonna change our hello world message
00:05:05to a hello world card with a continue button,
00:05:10and a cancel button.
00:05:11We're also gonna add an action listener
00:05:14that will say the user's full name,
00:05:17clicked continue when we click it.
00:05:19Back in Slack, I'm gonna mention my bot again.
00:05:24And as you can expect, we get exactly what we built.
00:05:29The components render natively.
00:05:32I click continue, and the bot handles the action instantly.
00:05:36But now here's where things get interesting.
00:05:41What if I want this same exact experience on Discord?
00:05:45I add the Discord adapter.
00:05:47That's it.
00:05:48Now, if I go back to my Discord channel,
00:05:55I can mention my bot,
00:05:57and the same exact UI renders natively in Discord.
00:06:02Zero code changes to support a whole new platform.
00:06:07This is cool.
00:06:08But let's talk agents.
00:06:10So here's a simple agent I built using the AISDK.
00:06:14And agents need streaming.
00:06:17With the Chat SDK, streaming is trivial.
00:06:20I create a stream and post it to the thread.
00:06:23That's it.
00:06:24I didn't have to look up how Slack handles streaming
00:06:27or how Discord handles partial updates.
00:06:30I used one API.
00:06:32And back in Slack, if I mention the bot,
00:06:35we'll see it stream back its response to us natively.
00:06:40But why stop there?
00:06:42What if I want to send direct messages to my agent
00:06:45on platforms like WhatsApp or Telegram?
00:06:49With the Chat SDK, it's easy.
00:06:52I add a On Direct Message listener and the adapter needed.
00:06:56Now anyone who DMs the agent gets the same experience.
00:07:02If I open WhatsApp on the web and say,
00:07:06"Hi, how are you doing?"
00:07:08We'll see the agent respond to our direct message
00:07:12using the agent we built.
00:07:14Now that we've built an agent,
00:07:16why don't we open up a pull request?
00:07:18But before we do that,
00:07:20what if the same agent I chatted with on WhatsApp
00:07:24could review my code?
00:07:25All it takes is the GitHub adapter.
00:07:28I come here, I add the GitHub adapter,
00:07:32and I've brought my agent to a whole new platform.
00:07:35If I open up GitHub and I look at this pull request,
00:07:39I can mention the agent in the comments
00:07:42and it will respond with the same direct message listener
00:07:45we built before.
00:07:46Slack, Discord, WhatsApp, Telegram, GitHub.
00:07:51Take a second to think about how different these APIs are.
00:07:56But with one file and a few lines of code,
00:07:59we brought our agent to all of them.
00:08:01With the Chat SDK, you build agentic experiences once
00:08:06and deploy them everywhere with a single API.
00:08:09Head to chat-sdk.dev to check out the docs and templates.
00:08:14Thanks for listening.
00:08:15And I'm excited to see what you build.
00:08:17(upbeat music)

Key Takeaway

Chat SDK is a cross-platform framework that allows developers to build AI agents once using a unified API and JSX, then deploy them natively to various platforms like Slack, Discord, and GitHub.

Highlights

Vercel introduced Chat SDK to solve the fragmentation of building AI agents across multiple communication platforms.

The SDK provides a unified API and JSX components to handle native UI elements like buttons and cards across different services.

Platform-specific complexities such as streaming tokens in Slack versus the post-edit cycle in Discord are abstracted away.

Developers can deploy the same agent logic to Slack, Discord, WhatsApp, Telegram, and GitHub with minimal code changes.

The tool mimics the 'write once, run anywhere' philosophy, similar to how React Native functions for mobile development.

Timeline

The Challenge of Multi-Platform Agent Development

Malte, the CTO of Vercel, explains how an internal mandate to multiply output led to every team building AI agents. However, they quickly discovered that integrating these agents into different platforms like Slack and GitHub required repetitive and complex 'degradation work.' Each platform has fundamental differences, such as Slack supporting native streaming while Discord requires a post-and-edit approach. Malte emphasizes that these aren't just quirks but core architectural differences that make multi-platform deployment a nightmare. Chat SDK is introduced as the solution to provide a single API for interactions across all major productivity tools.

V0 Background Agents and the Need for Ubiquity

Fernando discusses his experience building V0 background agents, which were initially intended to help users open pull requests from Slack. After shipping the first version, users immediately requested the same functionality within Linear issues and GitHub PR comments. This demand highlighted that expectations have shifted and agents must now function everywhere work happens. Fernando compares this dilemma to the early days of mobile development where separate codebases were needed for web and mobile. He explains that Chat SDK acted as a 'React Native for chat agents,' allowing him to focus on logic rather than unique APIs.

Technical Demonstration: Building with JSX and Adapters

Matt provides a technical deep dive into how Chat SDK works under the hood using a simple 'Hello World' bot. He demonstrates how developers can use JSX to create rich native experiences, including interactive components like 'Continue' and 'Cancel' buttons. By using an action listener, the bot can handle user interactions natively within the Slack interface. The power of the SDK is shown when Matt adds a Discord adapter with zero code changes, resulting in the same UI rendering perfectly in Discord. This section illustrates the ease of moving from plain text bots to sophisticated, interactive native components.

Advanced Features: Streaming, DMs, and GitHub Integration

The final section covers advanced agentic capabilities like token streaming, which is made trivial through a single stream API regardless of the platform's backend logic. Matt demonstrates expanding the agent's reach by adding 'On Direct Message' listeners for platforms like WhatsApp and Telegram. He further showcases the versatility of the SDK by integrating the agent into GitHub to review code directly within pull request comments. The demonstration concludes by showing how a single file with a few lines of code can deploy an agent to five different platforms simultaneously. Developers are encouraged to visit the official website to explore documentation and start building their own agentic experiences.

Community Posts

View all posts