▲ Chat SDK: Build a Form Bot

Hi everyone, welcome to this week's Versel community session. I am Anuman from the Versil community platforms team. You have probably seen me around in the community space. Uh for those of you watching this on X, you can join us on community. 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, uh no worries. Just use the signin button to sign in into Versel community with your Versal account and you'll be able to chat with us. We'll have some uh 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 Beni uh who is a content engineer at Versive and he will be showing us how to build a foam board with chat SDK. Hello everyone. Hi Vinnie. Yeah, welcome. Hello. And yeah, great to have you on chat. Thank you so much for inviting me. Like my wonderful colleague mentioned, I'm a content engineer here at Vaccell, 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 chatbot from a single codebase, and deploy it to Slack, Teams, Discord, GitHub, and over a dozen other platforms with our official and community adapters. For today, I'll be showing you our open source formbbot template, which uses upstand, 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 in your team to manage your form submissions right from Slack. Oh, nice. Yeah. Get into it. All right. So, 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 VLE right now or afterwards as well. And if you run into 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 2 if you experience any bugs or if you even just need any help setting up your B whether it's with this template or something else. One thing that we always integrate with all of our open source templates at Forcell is a one-click deploy button where you quite literally just press the button with the single click and it'll bring up a UI just like this where it'll ask you to choose your GitHub organization and which facel team that you'd like to create a project on. So I'll just type it in here just a random name. And then after you click create, it'll fetch the details of the template behind the scenes. And then as the next step, this is where you'll set your environment variables for your chat SDK bot. One other thing that we also have is our guide on the knowledge base which follows along with this template too. So either again during the live stream now or after the live stream, you can leverage this guide while you're building your very own formbbot. And one thing that the template does also include as well is what's called a Slack app manifest. So when you do go to create your Slack app like here and you click create new app and go on to 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. So, going back onto here, for obvious reasons, I won't be filling these fields right on the right onto the live stream. The Facel project has already been set up and integrated with Resend and Upstish, which is one of our providers on the Facel Marketplace, which allows you to set up your excuse me, which allows you to set up your Reddit storage without again having to manage any API keys or other configurations manually. And we handle all the billing for you as well too. So instead of getting separate bills from Upstash and Versell, all the billing is handled through Versel. You can find more information on our marketplace by going to versell.com/marketplace. And you can see our other providers that we have available which includes the generic Reddus provider. And if you and you are required to use Reddus as well, you can take the template and build on top of it and use say a superbase database as your back end which is another one of our marketplace partners. jumping into more the template itself. You'll see here this is where I've set up my little demo Slack workspace and I'll fill out I'll send in a test submission now. So 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. Any applicable links whether it's an email link or a website link is easily clickable. And if you want to say edit a submission, say a lead made a typo or someone on your team completed an internal form and use 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 which 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 and 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 benny fssl.com by Ben. And this is where you'll see the form submission itself. So the email is styled using resend's built-in HTML handling and you can also actually design your emails using react as well. Recent maintains an open-source library called React email where you can have cloud code or codeex or vzero 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 resend and then you can plug that right into the resend child chat SDK adapter and just a few lines of code. Now we can open it up to some questions. Yeah, I think this um quite shows how capable chat SDK is. You can just use any adapter that you like. Um and speaking of adapters uh do you think we can use uh Slack uh like instead of Slack we can use Telegram or something else like Discord? You can. Yes. So we do have a set of official adapters which are maintained by the Chadis the K team ourselves which includes not only myself but also our CTO Malta. So 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. So 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. We also have a set of vendor official adapters. These are adapters not maintained by us but as the name suggests by the vendors themselves. So we send as their own adapter. So you can create a bot that responds to emails either automatically or using Versel chron jobs. Photon and Beeper 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. So you could integrate it with the cursor agent SDK and have your cursor agent sitting right inside your iMessage app and you can code by just sending a simple iMessage using the cursor agent SDK and the chat SDK. And then one of the more recent vendor official adapters that we have is called Zuno 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. So 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 Zio to manage it with AI. And then we have lastly our community adapters which again as the name suggests these are not adapters maintained by the platforms themselves by but by individual developers. So 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. And you can either build it yourself manually or feed our documentation which is included within the Chad SDK skill. and the chat SDK package itself from MPM and have an agent walk you through setting up your own adapter whether you want to do it for your company/platform or 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. Oh, nice. Um, 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, you know, understand every deep diving details. You can learn it on the go, but agents can do it a lot uh 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. Uh one question that we had from the chat is the Slack channel that uh the message goes to um it is preconfigured. Can we also configure it dynamically? So uh the users can select where the message goes. You 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. So 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. Yeah, I think um yeah, I think that explains because uh you can configure your own channels and even in your code side you can have a list of channels, right? So 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. Uh so yeah that that really uh sums it up. Apart from this, I think another question from the chat is uh can we like 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? It 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 and 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 your VL project. But 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. The 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 tags your bot on GitHub and you want to fetch the current content of the repo or PR or GitHub issue and similarly if the bot is tagged 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. Yeah, I I think that's really the uh util utility of the chat SDK. Um I think one thing that you touched on briefly was how the sales team has their form setup and has a agent there. I think it really brings up the the conversation around using chat SDK with workflows and having that you know the human in the loop agentic flow. So would you like to talk a little bit about that use case u and how can users you know implement it? Yes, 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 Versel workflows which is our solution for creating durable typescript workflows for running essentially any type of TypeScript function over an unlimited duration of time. So you'll be able to connect your chatbot to the cell 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 then gets sent for example an onboarding email or you can click decline and they're then sent a different email flow and so on. And because it's connected to Vel 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. And you're able to bake in timeouts as well, too. So you can for example click approve and then have it wait 30 minutes and then send the lead an email and so on. Yeah, I think um yeah, I I think that really adds um another thing I would also I'm curious to discuss with you what other use cases you have seen of chat SDK like something that you you know yourself observed or you have seen other you know customers or people on X or other social media using uh chat SDK well one of our customers sanity which provides a CMS solution amongst others recently used the chat SDK to essentially rewrite slashrestructure 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 Chad SDKbot to manage their entire CMS. And 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. So now, every one of Sanity's customers are able to manage their CMS by just prompting an agent right 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. One 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. And 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 Val's ecosystem. Yeah, I think uh another use case that I can think of is uh 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 uh their request. Then you can have agents running before your request and then you can act as a moderator to that. Uh a similar use case can be around communities. So for example, we work in communities and uh we would love to help out customers but we also want to make sure that you know uh people who are creating you know hustle on the platform and people who are spamming are not prioritized. So we use that for moderation as well like that's a very good use case of the chat SDK to to really you know simplify your workflows uh while also supporting the team that you work in or the community that you are working with. So yeah, I I think these are really good um use cases. Apart from that, in terms of uh the UI that goes into for example, we saw the Slack and so the UI that was coming up there, how how do we build that? Is that something that you can customize uh between platforms? It it 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. So 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. And then if you use a platform that doesn't support that particular UI element like a tin or for example of a button linear for example isn't able to render buttons, we convert that to markdown for you and 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. We 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. We've seen individuals being able to create powerful multiplatform bots with just a single prompt with an agent using the Vel plugin and using the chat SDK scale. Yeah. Um, another thing that I am uh kind of interested 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 like this uh template that you shared is hono uh so can I use it in XJS for example or next right so how does that work you can yes so on our child SDK website we have a set of resources is which covers building different agents. So when you visit the chatk 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 Nex.js. You have the form bot which I demonstrated briefly today that's powered by Hono. And then we have a Discord support bot that uses Knox. So with these guides, you can then take these and then the associated templates with them and build on top of it. There is no restriction in terms of which framework you can use chat SDK with. You can use it with Nex.js, Horno, Next or whatever framework you would like. And 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 poll 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 Chad SDK in your preferred framework. Oh. Uh that's great. I think chat SDK with workflows like you can have infinite duration of you know whatever you want to achieve. So it really is a amazing combination. So yeah I I think these were all the questions that uh we had right now and if you are watching and you come across questions later on you can always drop them into the community. Forum ask your questions uh showcase your projects whatever you're building with chat SDK. So I think that's really great and yeah thanks um Benny for joining us today. It was really great demo and really good template that you shared here. Thank 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 VEL community website as well. And we are always welcoming new contributions to chatis SDK as well too. We've already nearly reached 60 contributors in just a few months time. And 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. Yeah. 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. Uh so yeah, nice to have you here, Benny. Uh thank you to our community for spending time with us. And I hope you really enjoyed it and you learned something new today. Uh if you want to join us for future sessions uh just like this one, you can find all the details on community.live. Uh we also have meetups. So you can also check out the community. com/meups for that if you are into inerson events. Uh similarly we have tickets for virtual ship out now. So it's all happening all across the world. So you can check out where it is happening and you can get yourself a ticket from vers.com/ship. That's all for today and I see you in the community.