Ship 26 NYC - Workshop - From init to deploy in 30 minutes
VVercel
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Hello, everyone. Welcome. My name is Gordon Diggs. I'm an engineering manager at Stripe.
00:00:08And I'm Colin Wren. I'm an engineer also at Stripe.
00:00:11Nice. So in this hackathon, we are going to start from scratch and build a deployed application
00:00:17using various service providers, hopefully in just 30 to 40 minutes. But first, we want to make
00:00:24sure that everyone here has sort of the minimum requirements for working on this. So you need a
00:00:29laptop. You need some kind of like agentic coding environment, whether that's cloud code or codex or
00:00:35cursor is the other one. And it doesn't really work with a phone or a tablet. So if you don't have a
00:00:43laptop, just vibe out and watch. That's fine, too. But cool. So the first sort of 10 minutes or so of
00:00:51this workshop, we're going to talk about Stripe projects, giving you some app ideas, getting you
00:00:56set up in the CLI. And then 30 minutes after that, you will be using your agent to build an application
00:01:02from start to deploy and provisioning services with Stripe projects. At the end, you can submit your
00:01:09deployed app to our leaderboard. And then everyone can vote on, you know, apps that they like. And
00:01:16maybe there'll be a winner. We'll see. So let's start with an overview of what Stripe projects is,
00:01:22which it is a new product from Stripe that allows you or your agent to quickly and securely
00:01:28provision infrastructure. So Stripe projects is a plugin for the Stripe CLI that lets you or your agent
00:01:36provision services such as hosting databases, domain names, that kind of stuff. Most services have both
00:01:44free and paid tiers. So you will not necessarily have to spend any money during this hackathon. But for anything
00:01:51that is paid projects centralizes your payment through Stripe in a unified way so that you are paying for all of
00:01:59your cloud services with one one payment method. Once a provider is connected projects saves their relevant
00:02:09environment variables both to your local machine and the cloud, and they're available to you and you can pull
00:02:15them down onto other machines and all that kind of stuff. So again, for this workshop, perfectly fine just to use free
00:02:21tiers. These are the current provider categories. Colin, I think you might be in the way of the QR code a little
00:02:28bit. And so that's sort of the categories that we have. For a full list of providers, you can just run
00:02:35Stripe projects catalog in the CLI or look at the providers page on this QR code.
00:02:40Cool. Awesome. And then some of you might already have an idea for what kind of project you want
00:02:47to build. That's great. But in case you don't, we wanted to give you some examples of apps that have
00:02:52been built with projects. These apps should give you an idea of what realistically can be built and
00:02:58deployed in around 30 minutes so you don't start off with too ambitious of a plan for the time allotted.
00:03:04So yeah, here are some example apps built by people at Stripe when initially testing projects.
00:03:10All of these apps are deployed live and many of them use hosting, or sorry, database and auth providers.
00:03:17So here we have the GitHub analytics dashboard. This is a custom dashboard for pulling data from the GitHub
00:03:22API. It uses web hosting, a database and an auth provider. We've happiness jar here. It's a delightful
00:03:27way to drop notes to yourself throughout the day to fill your jar with joy. This uses auth, a database
00:03:33and hosting. And then my garden. This is a little gardening app. You can catalog your plants and remind
00:03:40you when water them uses hosting in a database. And then lastly, we have tiny tails. It's a little app
00:03:45that uses an agent to recommend books appropriate for toddlers on different topics. This one uses like AI LM APIs and
00:03:52hosting. So yeah, again, just think about projects that are roughly in this kind of size that you can
00:03:57build within the time we have allotted. And then once you have an idea for your project, we'll spend
00:04:02the rest of the workshop building it using agents. It's important to start with a good prompt when
00:04:08working with agents. Specifically, you want to say what kind of services you want to use. So you'll say,
00:04:13I want to deploy it. I want to use a database, this kind of stuff. You can be specific about
00:04:17a kind of service you want to use. You can say, I want to use Vercel for hosting, or you can let the
00:04:21Stripe, or sorry, or you can let your agent choose from the Stripe projects catalog for you. So you can
00:04:26say, I want a database. Stripe projects will pick one and initialize one for you. And at the very end
00:04:32of this workshop, as Gordon mentioned, we have a projects.dev leaderboard where you'll submit your
00:04:38project and vote on which projects you like the best. And just for even sharing your project on here,
00:04:45you'll get some Stripe credits. Now Gordon's going to walk you through getting started with Stripe
00:04:50projects. Cool. All right. So let's get started. So like I said, to complete this workshop, you need
00:04:58three things. Well, four things if you include the laptop, but an agentic environment, a Stripe account,
00:05:05and the Stripe CLI. So we have a participant guide. It'd be really good to just scan this.
00:05:11This is going to give you all the information that will be in the next few slides, but you'll have it
00:05:15sort of available. So definitely recommend scanning this QR code. I'll give you a minute to do that.
00:05:21It's terrifying when you're giving a talk and everyone pulls their phone out,
00:05:23but I did tell you to do that. So it's okay. So, and if you don't have a Stripe account yet,
00:05:30also free, you can scan this. I think it just goes to the dashboard.stripe.com/register.
00:05:38And that'll be fine. Just give you a minute to scan that if you need it.
00:05:47Cool. And so the next thing you'll need is the Stripe CLI with the Stripe projects plugin.
00:05:52So there's this helpful NPX command that you can run right here. Just make sure you check Stripe
00:05:58best practices and Stripe projects when it asks you for the skills that you want to add. And then this
00:06:05is a prompt that you can use in your agentic environment just to install the Stripe CLI.
00:06:13Or if you want to install it directly on Mac, you can just brew install. On Windows, you can use scoop.
00:06:23And that also works. I've never used scoop because I don't really develop on Windows,
00:06:27but homebrew is great. So I can tell you about that. Sweet.
00:06:33So yeah, when you've run all these commands, you should have the Stripe projects plugin installed.
00:06:40You can test that it's installed correctly by running Stripe projects dash dash help,
00:06:44as shown here. Is anyone having trouble getting set up? Or please raise your hand if you need some
00:06:51more time to get the Stripe projects CLI installed. Okay, we'll give maybe another minute or two,
00:06:57and then we can keep going. But yeah, again, just run Stripe projects dash dash help. If you see
00:07:02helpful output there means you're installed and good to go.
00:07:08And if you're still having trouble, we can come around and help in a few minutes. So don't worry
00:07:13about it too much.
00:07:14All right. Hopefully everyone's got it installed. If not, no worries. Just wave us over later. We're happy to help.
00:07:26So once you have it installed in the directory that you want to create your project, run Stripe projects
00:07:35init. You can optionally pass in the name of your project. If not, it's just going to use the name
00:07:40of the directory. When you run this init command, it's going to create a few key files. It's going to
00:07:45create a .projects folder with a state.json and state.local.json. These files are the source of truth for
00:07:53what accounts you're using, your providers and resources information for your particular project.
00:07:59You'll also see we have a Stripe project CLI skill file. Now this is a skill that will tell your agent
00:08:08how to use the Stripe project CLI. And once you start adding services to your project,
00:08:14we'll get the secret keys for those services and add them to your .env file. We'll also download agent
00:08:24skills for those services to the .agent/skills directory to teach your agent how to best utilize
00:08:31those services. Now you should have all you need to start building. Back to you, Gordon. Cool.
00:08:37Awesome. All right. So now it's your turn. You can go build. You have about 30 minutes to build your
00:08:45project. If anybody has questions about Stripe projects, we're happy to answer them. Just raise
00:08:50your hand. If you want help getting your environment set up, we can come over and try to help with that.
00:08:57But I will leave some things up. So these are some of the commands you can use in the Stripe project.
00:09:03So init we talked about. Catalog we talked about, which is where you can see providers. Use add to add
00:09:10a provider or a service. Open will actually like open the provider's dashboard. Sinking environment
00:09:19variables. If you want to see how much you're spending, we have a command for that. And then
00:09:24towards the end, when you're getting ready to share your project, there's Stripe project share,
00:09:29which will just share the stack that you've selected. So the list of providers that you've selected.
00:09:34And if you need your account ID, you can get it there as well. So yeah, thanks for being here.
00:09:40Thanks for participating. We have about 30 minutes. So build, deploy, raise your hands if you have
00:09:46questions and submit your stuff here. But I will go again to this slide. And that is the actual like
00:09:55participation guide that has all of the information from, from the slide deck. So yeah. Curious if anybody
00:10:01wants to share an app idea that they have that they're building. If you can take like 10 seconds
00:10:08away from building it to share.
00:10:12Yeah. The one that I'm thinking about building is one that I've already tried building on my own,
00:10:22but I want to try doing it with this. It's basically an app to find other training partners for like
00:10:31martial arts, like Jiu Jitsu, for example. I've noticed that's something that doesn't exist. So let's
00:10:36say for example, your gym is closed or it's the weekend or you're traveling and you want to go train,
00:10:40but all the gyms are closed. If there's someone around you that trains, there would be no way to
00:10:43know except with maybe this app that would allow you to, to match with someone else that also is
00:10:48looking for a training partner and then super cool train together. Nice. That would be my idea. I mean,
00:10:52I'm giving a shot. Awesome. Yeah. Good luck. That's amazing. Perfect. Yeah. Yeah. It's a great
00:10:56example because like, you're going to need web hosting, you're going to need a database,
00:11:00you're going to need auth, you're going to need a domain name. Like, yeah, that's really great.
00:11:04Awesome. If you have any more questions about Stripe projects or Stripe in general,
00:11:08we have a booth right out there. I'm going to go hang out there. I'm sure Colin will too.
00:11:12So feel free to come by and talk about Stripe and we have some Stripe swag and stuff. But thank you
00:11:17all for coming out and I hope you enjoyed using Stripe projects. Cool. Thanks everybody. Thanks everyone.