Transcript
00:00:00[BLANK_AUDIO]
00:00:30[BLANK_AUDIO]
00:01:00.
00:01:20>> Hi, everyone. Welcome to this week's
00:01:22Vercel Community session. I'm Anshuman from the Vercel Community Platforms team. You have probably seen me around in the community space. For those of you watching this on X, you can join us on community.vercel.com to interact and ask questions in the live chat. If this is your first time joining one of our sessions and you cannot find the chat box, no worries, just use the sign in button to sign into Vercel Community with your Vercel account.
00:01:52And you'll be able to chat with us. We'll have some time at the end of the session for Q&A. So be sure to keep your questions ready and post them into the chat box so we can discuss them at the end. Just a reminder, if you're using the chat box, be respectful and follow our code of conduct to create a safe space for everyone. Today, I have Benning, who is a content engineer at Vercel, and he will be showing us how to build a form board with chat SDK.
00:02:22Hello, everyone.
00:02:23Hi, Benning.
00:02:24Yeah, welcome.
00:02:25Hello.
00:02:26And, yeah, great to have you on chat.
00:02:30Thank you so much for inviting me. Like my wonderful colleague mentioned, I'm a content engineer here at Vercel, and I'm also one of the lead engineers on our open source chat SDK, one of our newest open source solutions, which you can use to build a chat bot from a single code base and deploy it to Slack, Teams, DSP, and many others.
00:02:49And over a dozen other platforms with our official and community adapters.
00:02:59For today, I'll be showing you our open source form bot template, which uses upstash, reddish, resend, and, of course, a chat SDK under the hood to forward your form submissions to Slack, where you can then either edit the submissions, mark them as spam, or forward them to whoever you would like on your team, allowing anyone on your team to manage your form submissions right from Slack.
00:03:28Oh, nice.
00:03:32Yeah, get into it.
00:03:34All right.
00:03:42So this is our template here, which we'll link to in the chat, so you can even follow along here on the live stream and clone the template and set it up for yourself on Vercel right now or afterwards as well.
00:03:58If you have any issues, our community team, including myself amongst others, are available to assist as well, and you're welcome to open a GitHub issue on the chat SDK repo too if you experience any bugs or if you even just need any help setting up your bot, whether it's with this template or something else.
00:04:22One thing that we always integrate with all of our open source templates at Vercel is a one-click deploy button, where you quite literally just press the button with a single click, and it'll bring up a UI just like this, where it'll ask you to choose your GitHub organization and which Vercel team that you'd like to create a project on.
00:04:50So I'll just type it in here, just a random name.
00:04:56And then after you click create, it'll fetch the details of the template behind the scenes.
00:05:06And then as the next step, this is where you'll set your environment variables for your chat SDK bot.
00:05:17One other thing that we also have is our guide on the knowledge base, which follows along with this template too.
00:05:27So either, again, during the live stream now or after the live stream, you can leverage this guide while you're building your very own form bot. And one thing that the template does also include as well is what's called a Slack app manifest.
00:05:47So when you do go to create your Slack app like here, and you click create new app and go onto from a manifest and choose your workspace, you're able to paste the manifest right here so that you can then generate your entire Slack app configurations without having to do anything manually or by hand.
00:06:13So going back onto here, for obvious reasons, I won't be filling these fields right onto the live stream.
00:06:27The facile project has already been set up and integrated with recent and upstash Redis, which is one of our providers on the facile marketplace, which allows you to set up your Redis storage without, again, having to manage any API keys or other configurations manually.
00:06:53And we handle all the billing for you as well too. So instead of getting separate bills from upstash and Vercel, all the billing is handled through Vercel.
00:07:05You can find more information on our marketplace by going to vecel.com/marketplace and you can see our other providers that we have available, which includes the generic Redis provider. And if you are required to use Redis as well, you can take the template and build on top of it and use, say, a Superbase database as your backend, which is another one of our marketplace partners.
00:07:34Jumping into more the template itself, you'll see here, this is where I've set up my little demo Slack workspace and I'll send in a test submission now.
00:08:04So you see, once the submission comes through, this is how it looks. All the form data is broken down in such a way where it's easily readable by you and your team.
00:08:21Any applicable links, whether it's an email link or a website link, is easily clickable. And if you want to edit a submission, say a lead made a typo or someone on your team completed an internal form and used the wrong team name, or you just want to even add a quick note onto the form body, you're able to click this edit and forward button here,
00:08:49which then opens up a module here, and then you can change any of the data here. So if you want to change Jane Smith's name to Jane Jones, or if you want to use Benny Triangle, you can then click forward.
00:09:09And then the chat SDK using our Slack adapter will then update the card for you. So you can see here, the submission was forwarded to BennyFSL.com by Ben.
00:09:23And this is where you'll see the form submission itself. So the email is styled using recent built-in HTML handling, and you can also actually design your emails using React as well.
00:09:40recent maintains an open source library called React email, where you can have cloud code or codex or v0, or your other preferred AI agent design you a set of beautiful emails using React email, which then gets parsed and converted to HTML for all the right email service providers by recent,
00:10:04and then you can plug that right into the recent chat SDK adapter in just a few lines of code.
00:10:16Now, we can open it up to some questions.
00:10:22Yeah, I think this quite shows how capable chat SDK is. You can just use any adapter that you like. And speaking of adapters, do you think we can use Slack, like instead of Slack, we can use Telegram or something else like Discord?
00:10:40You can, yes. So we do have a set of official adapters, which are maintained by the chat SDK team ourselves, which includes not only myself, but also our CTO, Malta.
00:10:54So these are a set of official adapters that we maintain. So you can use Slack, Microsoft Teams, Google Chat, Discord, GitHub, Linear, Telegram, WhatsApp, and rolling out tomorrow is a new web adapter where you can also have a chat UI, whether you embed it on your website, or you have it internally for your team.
00:11:19So you're able to extend a single codebase approach for the chat SDK to a web UI too. So from one single codebase, you have a bot that runs on your website in a live chat and on Slack and everywhere else.
00:11:37We also have a set of vendor official adapters. These are adapters not maintained by us, but as the name suggests, by the vendors themselves.
00:11:48So recent has their own adapters, so you can create a bot that responds to emails either automatically or using for cell cron jobs.
00:11:59Photon and Deeper both maintain their own respective adapters that allows you to connect a bot to iMessage. So you can send an iMessage asking your bot to create a GitHub pull request.
00:12:14You could integrate it with the cursor agent SDK and have your cursor agent sitting right inside your iMessage app.
00:12:23And you can code by just sending a simple iMessage using the cursor agent SDK and the chat SDK.
00:12:30And then one of the more recent vendor official adapters that we have is called Zurnio, which is essentially a unified social media API, which allows you to connect to Instagram, Facebook, Telegram, Reddit, and so on from a single API endpoint.
00:12:51So your bot could even be running on Reddit as well. So if you run your own subreddit and you need help maintaining it, you can use our SDK and Zurnio to manage it with AI.
00:13:06And then we have lastly our community adapters, which again, as the name suggests, these are not adapters maintained by the platforms themselves, but by individual developers.
00:13:22So in the case of SunBlue, it's not maintained by the SunBlue team, but by an individual developer. And if you want to contribute your own adapter, we have a set of extensive documentation available, which breaks down for you exactly how to do that.
00:13:42And you can either build it yourself manually or feed our documentation, which is included within the child SDK skill and the child SDK package itself from MPM and have an agent walk you through sending up your own adapter, whether you want to do it for your company/platform,
00:14:04or if you want to add an adapter for say X or for Twitch or any number of platforms that can potentially support an adapter and you want to see it on the directory.
00:14:18Oh, nice. I think, yeah, this all covers it very well. Similarly, the chat SDK, as you said, when we install it, the agents are able to really pick it up with the skill and you don't really have to understand every deep diving details.
00:14:35You can learn it on the go, but agents can do it a lot faster. So as you can see on the landing page also, we have the four humans and four agents. So you can get started very quickly.
00:14:46One question that we had from the chat is the Slack channel that the message goes to, it is pre-configured. Can we also configure it dynamically so the users can select where the message goes?
00:15:00You can, you can, yes. So one use case that we've seen with the template is a sales team use the template to build essentially a dynamic workflow where when new sales come in, they have an agent analyze the submission and then it's routed then to one of five Slack channels with each of the individual Slack channels having a different sales team.
00:15:27So think routing enterprise leads to specific channel and nonprofit leads, startup leads, and so on. So in just about two or three lines of code, you can adjust the template to have the channel change on the flow based on what's contained in the form submission or based on what an AI agent says.
00:15:52Yeah, I think, yeah, I think that explains because you can configure your own channels and even in your code side, you can have a list of channels, right?
00:16:02So it really depends on the permissions that your Slack app has, which again, because you make the Slack app, you can configure it. And then based on that, your forms, your code logic can figure out where to send the message.
00:16:14Yeah, that really sums it up. Apart from this, I think another question from the chat is, how much amount of code will I have to replace if I just want to use Telegram instead of Slack in this template? So how much effort would that be?
00:16:29It would be just quite literally changing about a single line of code. So I can show you here on our landing page, we have an example here where if you want to, for example, not use WhatsApp, not use GitHub, it's just a matter of changing one line of code.
00:16:48And then if you later change your mind and you want to add Google chat, WhatsApp, GitHub and Microsoft Teams, again, it's just a matter of adding one line of code. There is, of course, some configurations to do behind the scenes, like setting up your GitHub app and then adding the credentials as sensitive credentials to give a sub project.
00:17:10But aside from that, the code itself remains the same. You're only just importing the adapter and that's all you really need to do.
00:17:21The only time you need to change more code than this is if you wanted to have platform specific features built in. Like, for example, if someone takes your bot on GitHub and you want to fetch the current content of the repo or PR or GitHub issue.
00:17:41And similarly, if the bot is taken on a linear ticket, fetch the details of the ticket. But aside from that, adding and removing platforms is just the matter of changing a single line of code.
00:17:58Yeah, I think that's really the utility of the chat SDK. I think one thing that you touched on briefly was how the sales team has their form set up and has agent there.
00:18:12I think it really brings up the conversation around using chat SDK with workflows and having the human in the loop agent flow. So would you like to talk a little bit about that use case and how can users implement it?
00:18:28Yes, that is one thing that we are working on and planning on releasing this week and over the coming weeks is enhancing the chat SDK's compatibility with Vercel workflows, which is our solution for creating durable TypeScript workflows for running essentially any type of TypeScript function over an unlimited duration of time.
00:18:56So you'll be able to connect your chat bot to Vercel workflows and then leverage that to have human in the loop approvals so that when you do say get a new lead that comes in and you confirm it's a valid lead, you can click approve right on the card on Slack and that lead and get sent, for example, and onboard an email.
00:19:19Or you can click decline and they're then sent a different email flow and so on. And because it's connected to Vercel workflows, it remains fully durable as well so you don't have to worry about anything timing out or your serverless function crashing or anything along those lines.
00:19:43And you're able to bake in timeouts as well too. So you can, for example, click approve and then have a wait 30 minutes and then send the lead an email and so on.
00:19:58Yeah, I think that really adds. Another thing I would also, I'm curious to discuss with you, what other use cases you have seen off chat SDK, like something that you yourself observed or you have seen other customers or people on X or other social media are using chat SDK for?
00:20:19One of our customers, Sanity, which provides a CMS solution amongst others, recently used the chat SDK to essentially rewrite/restructure their content agent so their customers are able to add the Sanity content agent to their own Slack and then use the Sanity agent that's baked within that chat SDK bot to manage their entire CMS.
00:20:48And the Sanity team was able to do it in just a few hundred lines of code, a project that would normally take dozens of files, months of engineering, and thousands of lines of code.
00:21:03So now everyone of Sanity's customers are able to manage their CMS by just prompting an agent from Slack. And aside from that, we've also seen other use cases where open source maintainers are using chat SDK bots to help them triage GitHub issues.
00:21:22One of the biggest things that open source maintainers, especially solo maintainers, are struggling with is staying on top of GitHub issues and pull requests since dozens pile up every day.
00:21:36And that's something we ourselves sometimes struggle with as well, too. So that is another great use case that we've seen out in the wild is open source maintainers being able to automatically triage GitHub issues, whether that's closing them or automatically opening PRs, all by using chat SDK, the AI SDK, and the AI Gateway, all powered by Vercel's ecosystem.
00:22:04Yeah, I think another use case that I can think of, in real life, if you are a small business runner, right, and you have like a refund request, or someone wants to return an order, or you want to verify some legitimacy of a customer, the request, then you can have agents running before your request, and then you can act as a moderator to that.
00:22:26A similar use case can be around communities. So for example, we work in communities, and we would love to help out customers, but we also want to make sure that, you know, people who are creating, you know, hustle on the platform and people who are spamming are not prioritized.
00:22:44So we use that for moderation as well. Like that's a very good use case of the chat SDK to really, you know, simplify your workflows, while also supporting the team that you work in or the community that you are working with.
00:22:57So yeah, I think these are really good use cases. Apart from that, in terms of the UI that goes into, for example, we saw the Slack. And so the UI that was coming up there, how do we build that? Is that something that you can customize between platforms?
00:23:12It is, yes. So what chat SDK does is to further reduce the amount of code either you or your agent need to write, is when you send in, say, a card or a button or any sort of UI, we automatically convert it for you to the platform's native format.
00:23:33So when you send a button in Slack, it renders as a native Slack button. Similarly, if you send a button on Teams or Google Chat, they both support buttons as well.
00:23:44And then if you use a platform that doesn't support that particular UI element, like a tenure on with example of a button, linear, for example, isn't able to render buttons, we convert that to markdown for you.
00:23:59And similar thing with other providers. This allows you to avoid having to write custom logic on top of platforms. So you don't have to worry about handling any conversions under the hood.
00:24:15We handle that all for you. And we're working on further enhancing that as well too, so that you're able to create powerful agents that work across dozens of platforms while writing very little code, again, either yourself or via your agent.
00:24:34We've seen individuals being able to create powerful multiplatform bots with just a single prompt with an agent using the Vercel plugin and using the Chat SDK skill.
00:24:51Yeah. Another thing that I am kind of interested in, and I think other people watching would be interested too, is can we port Chat SDK? I know it is a TypeScript library, so can we port it in between TypeScript projects?
00:25:06Like this template that you shared is Honu. So can I use it in Next.js, for example, or Nuxt, right? So how does that work?
00:25:15You can, yes. So on our Chat SDK website, we have a set of resources which covers building different agents.
00:25:25So when you visit the Chat SDK website, you'll see we have guides that show you how to create a Slack agent that lets you deploy your GitHub projects with the push of a button, which is powered by Next.js.
00:25:40You have the form bots, which I demonstrated briefly today, that's powered by Honu. And then we have a Discord support bot that uses Nuxt.
00:25:50So with these guides, you can then take these and then the associated templates with them and build on top of it.
00:26:00There is no restriction in terms of which framework you can use Chat SDK with. You can use it with Next.js, Honu, Nuxt, or whatever framework you would like.
00:26:12And if there is a framework that you're trying to use Chat SDK with and you're running into issues or it isn't supported, feel free to open a GitHub issue or even a pull request and we'd be more than happy to patch any associated bugs or extend the framework support that already exists so that you can use Chat SDK in your preferred framework.
00:26:41Oh, that's great. I think Chat SDK with workflows, you can have infinite duration of whatever you want to achieve. So it really is an amazing combination.
00:26:53So yeah, I think these were all the questions that we had right now. And if you're watching and you come across questions later on, you can always drop them into the community.worcel.com forum, ask your questions, showcase your projects, whatever you're building with Chat SDK.
00:27:08So I think that's really great. And yeah, thanks, Benny, for joining us today. It was really great demo and really good template that you shared here.
00:27:18Thank you so much everyone for joining. And like I said, if you have any questions, feel free to drop into the GitHub repo or on the Warcel community website as well. And we are always welcoming new contributions to Chat SDK as well, too. We've already nearly reached 60 contributors in just a few months time.
00:27:41And there's no such thing as too small or too large of a contribution as well, too. So if you see something you'd like to have added in terms of a feature, or if you spot a bug, feel free to add it in. We'd be more than happy to have a look at it.
00:28:01Yeah, and similarly, if you have a use case that you want implemented, but you need help with, do let us know in the community, I would love to build something like that. So nice to have you here, Benny.
00:28:12Thank you to our community for spending time with us. And I hope you really enjoyed it and you learn something new today. If you want to join us for future sessions, just like this one, you can find all the details on community.worcel.com/life.
00:28:27We also have meetups, so you can also check out the community.worcel.com/meetups for that if you are into in-person events. Similarly, we have tickets for Warcel Ship out now. So it's all happening all across the world.
00:28:42So you can check out where it is happening and you can get yourself a ticket from warcel.com/ship. That's all for today, and I see you in the community.
00:28:57We'll see you in the community.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video