Ship 26 NYC - Workshop - Build and deploy a Slack Agent to Vercel
VVercel
Computing/SoftwareInternet Technology
Transcript
00:00:00Welcome. Thanks for joining. My name is Josh and I'm on the product team at Slack focused on our
00:00:09platform and developer experience. And today we're going to do an interactive workshop on building a
00:00:14Slack agent that's deployed to Vercel. So the goal is for this to be as interactive as possible. So
00:00:19hopefully you all can follow along with me. I do have a couple of like contextual slides I'll jump
00:00:25into. But before I do that, if you want to follow along and join along, just do one setup thing for me
00:00:33and then I'll get into my slides. So if you follow the directions here to set up your code space,
00:00:39so just head to github.com/jmilus/shipworkshop.
00:00:47Everything is set up using a code space so you can follow along and have all of the
00:00:51environment variables set up and things like that. So if you head to that URL and just click on this
00:00:59code button and spin up a new code space off the main branch, it'll probably take a few minutes.
00:01:07That's why I'm trying to get this started in the background.
00:01:12Leave that up for just a second and then we'll walk through the developer sandbox
00:01:16piece separately. So just worry about the code space for now.
00:01:22Okay, cool. So just to set some context, why are we here? So one of the big topics on everybody's
00:01:30mind right now is everybody's building agents. You're hearing about the agentic infrastructure
00:01:34all day here. And I'm sure in your jobs and in your companies, you're well aware that everybody's
00:01:40building agents, everybody's buying agents. But a big question that I don't think people are
00:01:44answering very well right now is where are all these agents going to be living and how are they going
00:01:49to be useful? So at Slack, our answer to that is that we think that Slack is the home to all of these
00:01:55agents. But the approach that we're taking is, you know, we're not trying to be a walled garden. We're
00:02:00not trying to create a new agentic framework or force you into something. We're simply trying to be the
00:02:04connective tissue between every agent platform, every agent framework. So regardless of where you're
00:02:10building your agents, where you're getting your agents, hopefully they're deployed to Vercel,
00:02:16but they should easily show up in Slack. And that's what we're going to talk about today.
00:02:21So why is that? Why should agents live in Slack? So agents are most powerful where they have the
00:02:25right context and the right ability to be right alongside conversations and context and decisions.
00:02:32And all of that is happening in Slack already today organically. So Slack is already a great surface for
00:02:38agents to interact with users and users interact with agents. And we've been building a lot of new
00:02:43primitives to make it even more so. This is just a quick overview of some of the Slack developer tools
00:02:50that you can use to build agents. We're going to take kind of like the very like foundational
00:02:55fundamental path to building an agent today. There's a lot of other options. But in doing so,
00:03:00we're going to use the Slack CLI. We're going to use our Bolt frameworks, which is our Slack app frameworks,
00:03:06our SDKs and developer sandboxes. I'll show you all of that today. We'll get into all of those
00:03:11different topics and tools. But slack.dev is a great resource for folks if you want to dive deeper
00:03:17into these things at any time. All right. So what are we actually going to do today? So this is going
00:03:23to be a 30-minute experience to actually get from nothing to a working agent in Slack in a developer
00:03:29sandbox that's deployed to Vercel. It's actually going to be hopefully less than 30 minutes if we can
00:03:35make that happen. It's all pretty easy. Some of the things are a little bit time-consuming depending
00:03:40on how the Wi-Fi holds up for us. But basically what we'll do is we'll get set up with the Slack
00:03:44CLI, which is going to come in that code space that you've already set up hopefully. We're going to
00:03:49scaffold a Slack app using the one of our agentic templates. And then we're going to get that up and
00:03:55running and testing in Slack so we can iterate on it and then ultimately deploy it. I do want to
00:04:00highlight I mentioned this is kind of like the foundational fundamental path just to kind of give
00:04:05you a good lay of the land. But there are a lot of other ways to build agents for Slack. Vercel has
00:04:12created a number of really great tools. They've got the Slack agent skill, a number of different templates,
00:04:19Vercel Connect. And then at Slack, we've also got some different developer skills and plugins
00:04:25so if you want to try some of the different ways after this is done, this is a good list to do so.
00:04:32All right. So we'll jump into it. Here's that URL one more time if you want to jump in
00:04:38and create that code space. So hopefully your code space is getting started.
00:04:45The first thing that we need to do is actually create a developer, Slack developer sandbox to
00:04:50connect to this code space. So you can do that by heading to api.slack.com/developerprogram
00:04:58and sign up for one. So the Slack developer sandbox is free, free to sign up for, free for anybody
00:05:05to join our developer program. And what it does, it gives you a fully featured Slack environment with
00:05:11our Enterprise Plus plan. So it has every feature available to you and it's a safe place for you to
00:05:15build, test, and understand how your agent is going to work in Slack. So filling out this quick
00:05:22developer program sign up form and then you'll get a an email hopefully to complete that setup.
00:05:52See, it might be a little bit slow on my side. But once you get that email, all you have to do is
00:06:07click the Activate button and then you should be up and running with the Slack developer program. So I'll
00:06:14give just a second for hopefully those emails to come through for folks and then I will show you
00:06:21what the next step looks like.
00:06:35So once you get that email and you click that
00:06:38Accept button to get up and running with your sandbox, you'll have the ability to provision a new
00:06:43sandbox. And there's going to be an option for you to use an event code. The event code for today is just
00:06:51ship dash NYC if you want to use that. And then all you need to do is create a sandbox name
00:07:00and domain. It can be whatever you want. It does need to be unique so you might get a couple errors to
00:07:05make it more unique. And then just enter ship dash NYC here. And then you can click to set up the default
00:07:14template just so you get a little bit of preloaded data in your sandbox.
00:07:21And then once you complete that step, you should be fully up and running with the Slack developer sandbox.
00:07:28I've already got one set up here just for the sake of time.
00:07:33And you can see here, I've already got some channels and some apps already loaded in.
00:07:38But that completes step two. That's probably the more time consuming step just because we have to go
00:07:44through a couple of those different setup flows. But once we're set up, this is again, like that's
00:07:49a one-time thing. Hopefully you can reuse that sandbox anytime you want. But once you get that set
00:07:55up, you can head back over to your code space and we're going to start interacting with the Slack CLI,
00:08:00which is already preloaded here. So the first thing we're going to do is run Slack login.
00:08:08And Slack login is going to authenticate the Slack CLI with your workspace. You'll get this fancy slash
00:08:15command here. Just copy that over and you can paste it anywhere in your developer sandbox.
00:08:22Just accept those terms and then you'll get a challenge code to bring back over here.
00:08:30And that will complete the authentication. So now the Slack CLI here in this code space
00:08:35is authenticated with our developer sandbox. It knows that's where we want to be working,
00:08:40where we're going to be creating our apps. All right. So next up is creating our agent. So Slack CLI
00:08:47comes preloaded with a number of different templates. So we're going to start by using the Slack create
00:08:54agent command. And again, I mentioned we've got some templates. So we've got a starter agent and we've
00:09:01got a support agent for today. We're actually going to do the support agent. So if you select support
00:09:06agent and then we're going to use JavaScript today just for some simplicity. But we do have support for
00:09:13some of our other different app frameworks there. And then today we're also going to use
00:09:19the OpenAI agents SDK. So all of our templates
00:09:22are meant to be used with sort of any LLM, any agent framework you want. Out of the box we have a
00:09:28couple of samples that use the Cloud Agent SDK and the OpenAI Agents SDK. But you could easily swap out
00:09:34the Vercel AI Gateway or any of the different frameworks that you might want to use.
00:09:40But just for the purposes of getting going quickly with one of these templates, we're going to use
00:09:44OpenAI today. And then it's going to ask us to name our app, name our agent, and it'll suggest
00:09:50something if you want to go with that. Or you can just do whatever name you want.
00:10:00And the SLAX CLI is actually going to pull down that template and install any of the dependencies that we need.
00:10:16All right. Perfect. Took a little bit longer than normal, but that's conference Wi-Fi, I think.
00:10:44Okay. So we did Slack Create Agent. It created our project locally here. It installed a number of
00:10:49different dependencies for us. And as a next step, it's going to guide us to go ahead and change
00:10:54directory into that agent that it's created for. So we'll hop in here to whatever agent you named it.
00:11:03And then we can just go ahead and do Slack Run. And Slack Run is a command that actually does a local run
00:11:11of your app and then connects it to your developer sandbox. So we've already authenticated with the
00:11:16developer sandbox. So Slack Run is going to guide us to get that app into our sandbox. So we just have to
00:11:24grant it permission to do so and give it access to whatever workspaces we want. And then we'll see here
00:11:30now we've got that agent up and running locally here. And we've already got some debug logs and info
00:11:38coming through, so we know it's working. So if we hop over into our developer sandbox, we should actually
00:11:43see this agent show up. If we head over to apps, we see now versell demo local. So local is just we add that
00:11:55suffix there because it's that locally running version. We can open it up. And this is all out of the box.
00:12:02So mind you, we haven't written a line of code yet. This experience is all meant to sort of get you up and
00:12:07running with something that is working out of the box really quickly. And then you can iterate and build
00:12:12and develop from there. So again, out of the box, this is a template for an IT support agent.
00:12:19Actually going to hop over into the chat experience. And so this is all like sort of like those new
00:12:25features that we've been building to make it easy for agents to have a really great experience in Slack.
00:12:30So like one of the things that we've built are these suggested prompts so that when a user encounters
00:12:35an agent for the first time, they're not just met with that sort of like blank state experience.
00:12:38What can this thing do? We really want to make it possible for the agent
00:12:41to sort of communicate, "Hey, this is how I can help you. This is what I can do."
00:12:45And so here it sort of comes preloaded with a couple of options. So we can say, "Hey,
00:12:49I need to reset my password."
00:12:53And it should then reach out using the OpenAI Agents SDK and start to process things.
00:13:00So this is a working running agent in Slack. Haven't written a line of code yet. We can also go ahead
00:13:06and actually add it to a channel if we want to. So if we just app mention it in the channel,
00:13:13it'll prompt us to add the app there. And one of the great things about Agents in Slack is that
00:13:21it can be a really, truly multiplayer experience, which is, I think, very unique compared to other
00:13:25platforms. So when you're in a channel, you can actually just app mention Agent. You can interact
00:13:31with it right here. It doesn't all have to be sort of secluded over into DMs. And then other people
00:13:35can follow along. Other people can interact with it as well. And so I think that's like a really powerful
00:13:40thing that comes with the power of the Slack platform. All right. So this is all our agent running locally.
00:13:48Haven't written any code yet. Let's actually customize our agent. So the beauty of the local run experience
00:13:58here is that it comes with like a live hot reload. So any changes that we make for our app will be
00:14:05automatically picked up and shown in Slack. So if we go over into listeners and then pop into the
00:14:15assistant thread started file here, these are those suggested prompts that I was just showing you.
00:14:22Let's go ahead and change one of them and just sort of see how that iteration and hot reload experience
00:14:28works. So let's actually change this from network issues to hardware requests.
00:14:35And then we can swap this out. Perfect. And you've seen down here at the bottom,
00:14:50it actually is going to pick up the change in the terminal and push that change to our sandbox. And if we
00:15:00pop back over here and open a new chat with the agent, here we see hardware request instead of network
00:15:13request. So that's an example of sort of like the iteration experience that picks it up immediately.
00:15:19You can test it, see it, iterate some more, get a really quick feedback loop as you're making changes as
00:15:25you're building your agent, all in the sort of safe space of your sandbox. So once you've played around
00:15:32with iterating, another couple examples of things that you can play around with and test are
00:15:39your system prompts. So if you want to hop in and change your system prompt to be a little bit more
00:15:44specific to whatever use case you want to drive, you can do that really easily. And that'll take place
00:15:51again, very quickly and very immediately. But let's say we've done some iteration, we're happy with it.
00:15:58We want to actually get this deployed. So Slack run, that local run experience that only works while
00:16:04this terminal is open or whatever terminal you're using. So if you want this to be a long living agent,
00:16:11you want to get it out there into production, you need to deploy it somewhere. And so we're actually
00:16:16going to deploy that to Vercel. So in order to do so, we're going to stop that local run experience.
00:16:24And then there's a little bit of setup that needs to happen. For the sake of time and this workshop,
00:16:29I sort of bundled a bunch of it into this bash script. But I'll walk you through what it's doing
00:16:37so you can understand. So go ahead and grab that and run that script. What that's actually going to do
00:16:44is switch a couple of things on the Slack side so that it's set up to work with the way that Vercel
00:16:50expects this to work. And then it's going to set up all of the different configuration variables between
00:16:56the Slack side and the Vercel side. It's going to create the project on the Vercel side and then get
00:17:02everything ready. So once we do want to actually deploy it, we can do so pretty easily.
00:17:08Perfect. So that's script ran. It configured the project within Vercel. And if you're following
00:17:15along, what's happening is that it's actually using sort of like a shared account just for the sake of
00:17:22the workshop. But there's instructions down here. If you want to use your own, it's pretty easy to just
00:17:27log into your own Vercel and do it that way. But again, just for sake of time and getting something
00:17:32out there and running, this is kind of using a shared environment right now. So we ran that
00:17:36setup script. And then it's going to prompt us to run Slack Deploy. So Slack Deploy is a Slack CLI
00:17:43command that you can fully customize with different deploy hooks and scripts. But a script set up here to
00:17:51do everything it needs to do to get this up and running within Vercel. So let's run Slack
00:17:56Deploy. And it's going to prompt us to create a new app. This is because the local version and the
00:18:03production version are actually separate apps on the Slack side. So we'll just create that app and
00:18:08grant it the same access that we granted earlier. And it'll run that deploy script for us,
00:18:18get everything set up, make sure all the environment variables are brought over.
00:18:26It's just going to verify that everything worked and looks like we have success. So if we hop back over
00:18:47into our developer sandbox, we should now see here the Vercel demo app without that
00:18:58local suffix on the end. We can open that up. And this is all live working and deployed and
00:19:06it's all of the right variables to work and respond to us. So that is now we have gone from absolutely
00:19:16nothing to a working agent in Slack that is deployed to Vercel in, what, 15 minutes here. That is really
00:19:24kind of the extent of getting up and running in this really quick sort of foundational way. So as I
00:19:30mentioned, if you were to do this sort of outside of the context of the workshop, there's a little bit
00:19:34more setup that that you need to do. Again, you can hop into this script and see what's happening
00:19:39behind the scenes. But this is everything working end to end. You can swap out your Vercel account.
00:19:47And then I do want to again sort of hop back over here now that we sort of understand the fundamentals.
00:19:52We've gone from zero to the end and again sort of share all of the other ways.
00:19:59So I think today what we're seeing is most people are actually using coding agents to build and deploy their Slack apps.
00:20:06And so I would definitely recommend checking out the Vercel Slack agent skill as well as
00:20:11Slack's own developer skills and plugins. These things will work really well together
00:20:15to make it easy to make sure you've got everything up and running on both sides.
00:20:19And then definitely check out the different templates, the Vercel Slack agent template,
00:20:24the new Eve Slack agent template, and then Vercel Connect is a really great way to get
00:20:29all of your agents working and up and running in Slack. So I think, I mean, that's it. That's meant
00:20:35to be like very foundational, very quick, zero to agent so you can see exactly how everything works. And then
00:20:42sort of your takeaway is to explore all these other options and all the more advanced options.
00:20:48Any questions, thoughts, concerns?
00:20:56It is ship-nyc.
00:21:00Yeah.
00:21:07Hey. So it seems like Vercel also talks about like Eve has a lot of like custom integration with Slack channel.
00:21:15And then I'm just curious on what you think will be the pros and cons building the Slack agent using the Slack
00:21:22native SDKs versus building through Eve.
00:21:26Yeah. I think that's a, I think that's a great question. I think it's worth exploring both.
00:21:30I mean, if you're already, you know, using Eve for, for other things, I think that's probably a great option.
00:21:35Honestly, I recommend for most people in this room, if you're already sort of like ingrained in the Vercel
00:21:40ecosystem and using all these tools, probably a lot of the Vercel buildings are like the right sort of
00:21:47starting point for you. This option is more for like the perspective of starting from Slack and Slack's
00:21:54primitives. But I know that a lot of the templates that Vercel makes use our SDKs and frameworks under the
00:22:03hood as well. And so I think, you know, you'll get a lot of the same best best practices, same experiences.
00:22:08So my recommendation is start with whatever you're already closest to and just get going that way and then
00:22:15explore the other options as you sort of need to graduate out and figure out other other things.
00:22:22Yeah, I had a similar question. I want to get started with Slack agents. Is there stuff that the native,
00:22:29a native Slack agent could do that an Eve agent with a chat SDK couldn't do, to your knowledge?
00:22:36Um, to my knowledge, no. I mean, I think that, I think that the Eve template should be able to be
00:22:42sort of like morphed and used into sort of whatever you need it to. I'm not sure if it comes with like every
00:22:48single best practice out of the box. I haven't played with it that much yet. But it should be
00:22:53able to, you should be able to get there. So it might not look the exact same to start,
00:22:57but it should be able to leverage all the same underlying Slack APIs, Slack frameworks. I mean,
00:23:02on the Slack side, everything that I've shown is like fully open source anyways. So like these are all
00:23:07just our own open source templates. So regardless of whether you're using our template or their template,
00:23:12you still have all the same access to all the APIs and sort of underlying platform primitives to use.
00:23:18I got to the point where I have the Slack app up and running, but I'm not seeing
00:23:27the bot in Slack. Is there a step that maybe happened after step five that I'm missing?
00:23:36Good question. So you're step five. So you did Slack run and you've got it running in your terminal,
00:23:45but it's not showing up in Slack for you. Interesting. It might have been something in
00:23:52the install, like when you did the authentication and installation, something might have happened in
00:23:57there. Sometimes it also takes a minute to show up. And so it might just be like a refresh in a few
00:24:05minutes. When I was playing with it, when I was on the regular Wi-Fi earlier, things were really slow
00:24:10for me. I'm hardwired, so it's a little bit faster for me. So it might be, might come down to that. But
00:24:15if you've got, if there's no errors in your terminal, if it actually shows like Casey's running,
00:24:19it should be there. It just might be a matter of like refreshing and seeing that way. I can
00:24:24check with you after too. One question more. Hey. Two questions exactly. What exactly is
00:24:39the Slack deploy command doing? Because I saw you are deploying something on Vercel, right? And
00:24:46if I want to make an update, do I need to do that again? Like deploying Vercel and then Slack. Usually,
00:24:52we just like, you know, doing one command and everything gets deployed. So yeah.
00:24:57Yeah. So the Slack deploy is leveraging this. It's fully customizable. So this hook,
00:25:06you can point it to a file. And so it's just pointing to this. Let's see. Where is that?
00:25:16Ah, sorry. So what it's doing is like, it's, it's grabbing like the environment variables,
00:25:27grabbing some of like the Slack specific stuff, and hooking that up, and then deploying that to Vercel.
00:25:33This is again, like this, you might want to tweak this to whatever like specifics are for, you know,
00:25:37where you're deploying it to. But all it's doing is basically grabbing all of the environment variables,
00:25:43grabbing all of the like app specific stuff, and then hooking it up to Vercel. So this deploy script can
00:25:50be whatever you want it to be. This is just like a very quick, quick version of it. A lot of deploy
00:25:57scripts are much more advanced than what this does. But this, this sort of just kind of works and gets it out there.
00:26:07Yeah. Cool. All right. Well, thank you, everybody. The Slack booth is like right on the other side
00:26:12of this glass. I'll be out there if you have other questions or want to come chat with us. But thank
00:26:16you so much for joining. Hopefully, you were able to follow along at least a little bit. I'll leave this
00:26:20repo up if you want to keep up with that.