▲ Community Session: How HubSpot uses Vercel

VVercel
Computing/SoftwareAdvertising/MarketingInternet Technology

Transcript

00:00:00Hi, welcome to this week's Purcell community live stream.
00:00:22I'm Amy Egan.
00:00:23I'm on the community team here at Purcell.
00:00:27A reminder, this is streaming to X and YouTube, but if you want to join the chat, please sign
00:00:33into the community and click going on the event.
00:00:35You'll see the chat pop up on the side and I'll make sure that we catch your comments
00:00:40if you have any questions.
00:00:41Feel free to ask questions throughout the session and we'll just ask those all at the end.
00:00:47And a reminder, if you are hanging out in the chat, please remember to be respectful and
00:00:52follow our code of conduct.
00:00:54And with that out of the way, I would like to welcome our guests to the stage.
00:00:58Last month, my teammate, Jacob, joined the HubSpot team to talk about bringing your own
00:01:02backend to the HubSpot developer program.
00:01:04And this month we are being joined by the HubSpot team to talk about how they use Purcell.
00:01:09So welcome Brooke.
00:01:12Thank you so much, Amy.
00:01:13Hi everybody.
00:01:14My name is Brooke Bond and I am excited to be here on the Purcell community.
00:01:20So I have just a couple of questions that you can answer ahead in the chat, but we would
00:01:26love to know, have you ever used HubSpot before?
00:01:28Do you know who we are?
00:01:30Have you built with us?
00:01:31And if you have, what have you built?
00:01:34I would love to know all of those comments in the chat.
00:01:38That would be so lovely, but we only have 30 minutes.
00:01:42So I want to make sure we get to all of our great content.
00:01:45So today we're going to just quickly go over what is HubSpot?
00:01:48Who are we as a HubSpot DevRel team?
00:01:51How can we use HubSpot and Purcell together?
00:01:54And then we have a couple of examples of how our HubSpot DevRel team has been using Purcell
00:01:59in our different projects that we do at HubSpot.
00:02:02And finally, we'll leave a little bit of time for Q&A.
00:02:04So like Amy said, if you have any questions at all, please put them in the chat and we'll
00:02:09be happy to answer them at the end.
00:02:12So today I'm going to be joined by two of my colleagues, Dennis Edson and Chris Riley.
00:02:18And we are so excited to be here.
00:02:19So first let's set the ground rules, not the ground rules, let's set up what is HubSpot.
00:02:25So HubSpot is a smart CRM for businesses.
00:02:29We have a suite of marketing, sales and service softwares, and we have a unified developer
00:02:36platform for building the integrations.
00:02:39And that's what the DevRel team focuses our efforts on is helping our developers understand
00:02:45how to use the developer platform.
00:02:47The picture up here on the screen that you see is a CRM contact record page.
00:02:53So with the HubSpot developer platform, all of the work that you create is housed within
00:02:58a HubSpot project.
00:03:00And on the HubSpot developer platform, you can build both internal static applications
00:03:06or external OAuth applications.
00:03:09And if you build an external application, you can actually put that on our HubSpot marketplace,
00:03:15and then any person with a HubSpot account can go to the marketplace and download your
00:03:20app.
00:03:21So say you're Vercel and you want to build an integration where people can see their Vercel
00:03:26metrics inside of their HubSpot account.
00:03:29You could go ahead and build that, create the OAuth flow, have people download that into
00:03:34their account, and then they would be able to see their Vercel stuff right inside of HubSpot
00:03:39and vice versa.
00:03:40Now, over the screenshot I have here right now is the development overview page.
00:03:45So we have a dedicated development overview page for the developers when they're in their
00:03:51account so that they can see all of the projects that they're doing.
00:03:54We also have monitoring tools so people can see what the API usage is and all that good
00:04:00stuff.
00:04:01So all of your stuff in one place, very easy for you to just go in.
00:04:05You don't have to worry about the noise of all of that other stuff that is not a part
00:04:09of your HubSpot projects.
00:04:11So now I just want to quickly introduce us as a team.
00:04:15So we are an interdisciplinary group of developers and managers who help our developers thrive
00:04:22in the HubSpot ecosystem, and we help the developer community by building solutions, helping them
00:04:28learn best practices, and creating integrations that they can use.
00:04:32We host live events like this one and on our own channels, attend and speak at conferences,
00:04:39and we also ensure that external developer feedback is taken into account when building
00:04:43and launching new features.
00:04:45So we are very close to our developer engineering counterparts and we give them the feedback
00:04:50from our community to help us make our products better.
00:04:53So this is just a little graph that I created to show you a little bit more.
00:04:57So we have our learning and resources that includes our developer documentation, our blog,
00:05:03our YouTube, and different tutorials that we have both on YouTube, GitHub, different places.
00:05:08Our community and connection, we have a developer Slack that anybody can sign up for.
00:05:13We also have a forum, so people can go and ask questions in the community forums.
00:05:18And we do in-person events throughout the year.
00:05:22We also have some building and development tools.
00:05:25So we have our app quality assessment, that's our ecosystem quality team.
00:05:29They look at all of the applications that go on to our marketplace and ensure that they
00:05:34are up to our standard.
00:05:37And then we also have sample apps.
00:05:39And finally, this is new, but we have our Dev MCP.
00:05:42And we worked very closely with the engineers who built that so that they could understand
00:05:47how we could make a really great MCP product for our developers.
00:05:51And finally, showcasing and growth.
00:05:53We have a case study section where we take great developer programs and we highlight them
00:06:00how they're using HubSpot.
00:06:02We also have marketplace certifications.
00:06:04So when you publish your app on our marketplace, you can become marketplace certified, which
00:06:09means that you'll get a little blue check or just a symbol to let people know that you are
00:06:15quality assured.
00:06:16And finally, we help with GTM coordination.
00:06:19So when we have big launches throughout the year, we help with the marketing materials
00:06:24for that, making sure that we speak to our developer audience in the way that is going
00:06:29to be best for them.
00:06:30So now that we've talked about who we are and what we do, let's talk about how we use HubSpot
00:06:36and Vercel together.
00:06:37So like Amy said, last month we held a webinar all about bringing your own backend.
00:06:43So this is one of the main use cases that I'm going to be talking about here, which is using
00:06:48Vercel as that backend service.
00:06:50So in this case, you have your HubSpot app, which is our front end, and that has UI components
00:06:55that are built with React that you put onto your page so that you can render that for the
00:07:00front end inside of a HubSpot account.
00:07:03And then you have your Vercel backend, which will hold your code.
00:07:06And so what you will do is inside of your code, you're going to use hubspot.fetch to call your
00:07:11backend via the API that you create.
00:07:14And then that is going to return and manipulate the data and then render a response to the
00:07:19front end.
00:07:20So to showcase what that looks like, I'm going to quickly go over an example that I built,
00:07:26and this is an LLMS.txt file generator.
00:07:30Try and say that three times fast.
00:07:32So what this does is the LLMS.txt file generator is a HubSpot app that takes a webpage or a
00:07:40site map URL, parses through that data on the page to create that file.
00:07:45And an LLMS.txt file is a file for AI search crawlers so that they don't have all of that
00:07:54extra HTML.
00:07:55It renders your information in a markdown file format so that they can read it very quickly.
00:08:02And this uses HubSpot fetch to call the Vercel API endpoint and the HubSpot files API to upload
00:08:08that file to your HubSpot account.
00:08:11So the screenshot that I'm showing here is my code, and this is where I'm actually calling
00:08:16the Vercel API.
00:08:18And here, I just wrapped that into a try catch, and then I sent along the endpoint.
00:08:25So now that I've talked about that, let's see how it works.
00:08:28So I'm going to go into the front end so that you can see.
00:08:31So this is inside of our HubSpot account, and here we have the DevRel Labs generator.
00:08:38This is what is known as an app settings page, and the reason specifically why I chose to
00:08:43have this rendered on an app settings page is because this is a very admin-y type of work
00:08:49that people would do for their website.
00:08:51So I didn't want to make it accessible to any person within your HubSpot account.
00:08:55I wanted to make sure that only the right people had access to this so that people weren't generating
00:09:00these and causing issues with the AI search crawlers.
00:09:04So here, you get to choose your type, you can put in a whole sitemap, or you can put
00:09:09in a single URL.
00:09:10Obviously, a sitemap, if your website is very large, will take a while.
00:09:15So the single URL will be a lot faster.
00:09:17So then you can just put in your URL.
00:09:20So I'm just going to do our developers.hubspot.com, and then it will generate ... Oh, I got an
00:09:27error.
00:09:28Okay.
00:09:29Well, that's fun.
00:09:30This is live.
00:09:31So let's see.
00:09:32Let's go into my Vercel settings and see if we get an error message in ... Well, not the
00:09:38build logs.
00:09:39So here in my backend, we can see the stuff.
00:09:43So let's see the runtime logs and see if we can find the error.
00:09:46Well, things are not working, but if it was in a perfect situation, what would happen is
00:09:54that llms.txt file would be generated and it would be uploaded to your HubSpot account using
00:10:01that Vercel serverless function that I created.
00:10:04So now I'm going to pass it on to the rest of my teammates to talk about how we also
00:10:10use HubSpot in other ways, not just bringing Vercel as a backend to HubSpot, but also to
00:10:17different things that we're doing.
00:10:18So I'm going to hand it off to Chris.
00:10:20Thank you.
00:10:22One thing I love about demos that don't end up working 100% perfectly correct is that it
00:10:30certainly allows us to have empathy for all the developers that are watching and our community
00:10:35and so forth.
00:10:37If we could go back to the slides quickly on Brooke's machine.
00:10:42Perfect.
00:10:43Thank you.
00:10:45So of course, we would love all of you to take your creativity and ideas and bring them to
00:10:52HubSpot customers via an integration using our APIs.
00:10:57But how do we also use Vercel inside of DevRel to experiment and run really quick tests and
00:11:08build really quick prototypes so we can test out ideas that we have as a team and bring
00:11:13it to the rest of the organization.
00:11:15So we have something called DevRel Labs and DevRel Labs is a set of rules, is a set of
00:11:21process that spreads all across developer relations, and it gives us an opportunity to have a standard
00:11:28way to experiment, take those experiments, validate them or invalidate them as happens
00:11:35sometimes, and then graduate those.
00:11:39Maybe it's into product or into a more polished solution after the fact.
00:11:46And so what we're going to talk about now are two experiments that I have been leading,
00:11:53and then we'll move to Dennis to talk about the one that he's been working on.
00:11:58But all of these experiments, they have a clear process and a clear goal around them.
00:12:03And one of those is we, like many organizations, have a Slack community for external developers.
00:12:10This is a place for folks who are building solutions on top of HubSpot can come, they
00:12:16can engage and learn and help each other.
00:12:21Because really, the best community is a community that has peer to peer engagement.
00:12:27And so we thought, what can we do to bring solutions and resources more quickly to these
00:12:36community members?
00:12:38And one of the obvious solutions, I'm sure you've interacted with several Slack bots out
00:12:42there was to build a Slack bot.
00:12:45But when we thought about a Slack bot, it's not something that we wanted to just kind of
00:12:49dominate the conversation.
00:12:51We wanted to have it there for engagement.
00:12:53So it should be not too intrusive.
00:12:57And we wanted to have it there to get the quick resources in real time to our external community.
00:13:05And so we built that on Vercel.
00:13:08Because that allows us to very quickly create a prototype, and then evaluate the quality
00:13:15of it, and then take it from there to say, what are we going to do next with this?
00:13:21And right now, we're in the experimentation and validation stage.
00:13:25So working in conjunction with the rest of our community team in DevRel, we'll decide
00:13:30where it goes next.
00:13:31So I wanted to quickly show on my screen, the bots, and what you see here that we have,
00:13:39I actually really like this home screen because it's fun, you know, graphs and charts and numbers
00:13:44are always really fun.
00:13:45But we have a simple screen that gives us some data on the adoption of the bot.
00:13:51But there's two ways to interact with the bot.
00:13:53I can do it via direct message, or we have some channels where the bot will automatically
00:13:58respond to support related questions.
00:14:01So I'm going to go ahead and submit a question just very simply, how do I get started with
00:14:05the HubSpot Dev MCP.
00:14:08And what I wanted to show, because I'm a little bit limited in what I can actually show from
00:14:14our back end, is the real time logging that we get from this in Vercel.
00:14:19So this allows me to, I'm going to say that this one right here is probably the real time
00:14:30chat that I just submitted.
00:14:32And it happened quickly, which is good news.
00:14:35It quickly changes to a thinking message.
00:14:39It goes to open AI to get a response.
00:14:43It comes back via a tool to see are there additional resources curated by the DevRel team, which
00:14:49I might give to this user that might help them move further on.
00:14:53That could be YouTube, it could be documentation, it could be all sorts of resources.
00:14:58And then it will give a response.
00:15:00And so I'm guessing this is the response, it is.
00:15:06So now if I go back into this, and we see everything's 200.
00:15:10So that's best case scenario, right?
00:15:13And it did.
00:15:14So not only did it give me a response, it gave me articles to look at.
00:15:21It told me to join the Dev Slack, I'm already here.
00:15:24But it also gave me tutorials and other information that recommends that would be related to the
00:15:31question that I was presenting here.
00:15:34And it gave me the right response, which is get your dev environment set up, install the
00:15:40CLI, install the MCP server, and you're good to go.
00:15:43And it even gave some ideas on how to get started.
00:15:47And so as you can see, that was a very simple way for us to build tests and the logs are
00:15:54so important here.
00:15:56Test a solution using a custom build Slack bot, where we in DevRel, our primary responsibility
00:16:02is not to build solutions, like we're all developers, but we're not day to day building.
00:16:09So whatever we build on needs to get out of our way and be very seamless.
00:16:15Now this set us up for something that I was kind of surprised by.
00:16:18If we go back to the slides, I'll talk to you how this led to yet another experiment.
00:16:27Sorry, before that, you can go back, Brooke, to the slide with the...
00:16:35So first I wanted to say, what are the things in Vercel that got me really excited?
00:16:39One easy to read logs, like I showed, and I had it set to live.
00:16:43So you saw the log streaming in real time.
00:16:45The starts, we're dealing with a serverless environment.
00:16:49The starts have been surprisingly fast.
00:16:52That's important for Slack.
00:16:53If you've ever built a Slack integration or any other third party tool you're integrating
00:16:58with, which is also serverless, you want quick starts.
00:17:02And on every tier inside of Vercel, there's quick starts.
00:17:06I love the CLI for being able to deploy before I commit or do a pull request to make sure
00:17:13that if I put any sort of janky code in there, I can catch issues faster before I deploy and
00:17:19of course, deploying to various environments.
00:17:22And then also kind of like we have a marketplace, they have connections into services like Neon
00:17:28and Upstash for Redis and Postgres, which make it very, very quick to get a backend
00:17:33database up and running.
00:17:35And that was important.
00:17:37Speaking of backend database, that's what led to what was coming next.
00:17:41So we have all of these interactions now in our Dev Slack.
00:17:48And it turns out to be a really rich source of information.
00:17:52Obviously we could intuit this.
00:17:54But one of the things that I was surprised by is realizing I could probably create another
00:18:00front end interface into this data, such that we could use it to go back to what Brooke said
00:18:06before to educate and inform our feedback process, how we receive information, how we take that
00:18:13information back into product to improve the developer experience.
00:18:18And so we went from building a Slackbot to now suddenly switching over to V0 in a new
00:18:25project, taking that data, creating a very simple password protected front end to expose
00:18:34what are the things that people are asking questions about?
00:18:37What are the types of resources that we surface?
00:18:40So we get a lot of conversations about webhooks, we get a lot of conversations about authentication.
00:18:46It allowed us to show the impact of the experiments we were doing, which is really, really cool
00:18:54because we do have to take this Slackbot somewhere.
00:18:57We didn't want to just build it and let it go.
00:18:59We have to take it to the next step.
00:19:01And the best way to do that if you've been in meetings with anybody in leadership is to
00:19:07show a graph or put some sort of presentation up there.
00:19:10And this will help us make decisions with the community team inside of DevRel to say, what
00:19:17are we going to do?
00:19:18Are we going to keep it?
00:19:19Are we going to advance it?
00:19:21If we advance it, then the infrastructure in the back end of the bot are going to change.
00:19:28But there was no better way for us to get started than to build it in a very easy to use platform
00:19:36like Vercel, have some visualizations, and now we can decide what to do next.
00:19:43So now we get to look at what Dennis built, which is even more advanced than what I built
00:19:48and dare I say better, but also another experiment inside of DevRel Labs.
00:19:55And so, Dennis, you are up.
00:19:57Thank you, Chris.
00:19:59And thank you for saying it's better.
00:20:01My gosh, hopefully everyone's listening to that.
00:20:04So prior to working at HubSpot, I worked at an agency.
00:20:08And when Chris told me about this DevRel Labs things we're doing, I had a very specific problem
00:20:14that I encountered at the agency, and that was I would build something, one of these three
00:20:20things.
00:20:21I'd either build something, I'd be done with it, and it's kind of in maintenance mode.
00:20:24I'm just kind of watching it on occasion.
00:20:25It would break later on because I missed something happening in the HubSpot ecosystem.
00:20:31Or I inherited a whole bunch of projects, and I had no idea what they were doing.
00:20:37And so eventually one of them would hit some sort of breaking change and break itself, and
00:20:42I'd have to figure out where and why and how.
00:20:44And the last thing, and this is probably my biggest one, is there are so many freaking
00:20:47things to pay attention to, I would often just lose track of what I'm doing.
00:20:52I'm not paying attention to any of the change logs, and something breaks.
00:20:56And guess what?
00:20:57You have customers yelling at you at that point.
00:20:59So what I decided was I'm going to build next slide HubSpot developer change log monitoring
00:21:05tool, aka codename Sprocky change dust.
00:21:10What this tool does is actively monitors the HubSpot change log that uses AI to look at
00:21:16those change log entries, decide what type of change it is.
00:21:19Is it a breaking change?
00:21:21Is it an enhancement?
00:21:22Does it affect the CMS?
00:21:23Does it affect the CRM?
00:21:24Does it affect both?
00:21:26And then allows you to use GitHub hosted repos to check those change logs against your repo,
00:21:33allowing you the allowing basically to have an assistant look at the change log for you.
00:21:39So how did we do it?
00:21:40The toolkit we used here is going to be a React framework built with Vercel, obviously next.js,
00:21:46because, you know, peanut butter and jelly, super base for our database, and then we had
00:21:51to build a GitHub app that allows us to connect to those repos there.
00:21:56And then through some serverless functions on Vercel and open AI, I was able to bring
00:22:02back some really good quality data for the user to act on.
00:22:06Why did I choose Vercel?
00:22:07Honestly, it's just super freaking easy to get set up.
00:22:10I didn't have to worry about the front end very much.
00:22:13I had an app up and running in under half an hour easily.
00:22:18With the serverless functions, I was able to really reduce the cost of running that server.
00:22:23It's only on when I need it.
00:22:25I'm sending these batch queues to open AI to do, and it brings it back in, does it quickly.
00:22:31Saved tons of money doing that.
00:22:32And then also just the fact that I can be testing by myself and then just grow to thousands of
00:22:38people using this app, Vercel is just there, scales with me.
00:22:41The whole thing process was great.
00:22:44So moving on to the next slide, you can see this is basically the front end that I built
00:22:47with Next.js.
00:22:50You'll see we bring in all of our changelog entries.
00:22:53Right here, you can see a description of what that changelog is.
00:22:57If you know right here now, you can already create an issue to a specific GitHub repo you
00:23:01have attached, which brings us to the next slide, bring us, we have to connect it to GitHub.
00:23:07This allows you to connect as many repos as you want.
00:23:11On the first scan, it's going to go through and do a programmatic scan just to see if it
00:23:15thinks it is relevant to HubSpot.
00:23:18Remember, you might have inherited repositories, like 50 repositories.
00:23:22You have no idea what they do.
00:23:23You throw them in here.
00:23:24It's going to go do an initial scan.
00:23:26It's going to find anything, file patterns that it can find to say, oh yeah, this might
00:23:31be HubSpot related, at which point you can go in next slide and you'll see that you can
00:23:36click the HubSpot button there, which means it's going to send it off to OpenAI in a batch.
00:23:42It's going to monitor, it's using a rag system to send only the important details that it
00:23:46thinks are related to your repo and HubSpot.
00:23:49It's going to take a little bit of time, and once it's done, it's going to come back and
00:23:53it'll show you all of the possible hits.
00:23:56You get a notification email, I'm working on a Slack notification as well, that says, yo,
00:24:01you better check this out.
00:24:03You then have the option to either say, okay, this is legitimate, I will create an issue
00:24:07on this and we'll start working on it, or I can dismiss it because it doesn't really relate
00:24:11to this.
00:24:12Once you dismiss it, we are smart enough to start realizing, okay, this might not be what
00:24:16we want to be monitoring for this particular repo, so we'll update the usage graph.
00:24:23After that, we are going to continuously monitor each repo, so if you're making changes to any
00:24:29of the repositories, we're watching that.
00:24:32If you do a major change, we're going to go ahead and rescan all of the changelogs against
00:24:37this new change you added to make sure that you didn't do something that you didn't know
00:24:41was an issue.
00:24:43It also allows us to go ahead and I forgot what I was going to say.
00:24:50It allows us to check whenever a new changelog comes through, it allows us to go ahead and
00:24:56go through every connected repo that you have to see if that changelog is specific to you.
00:25:01This allows you to not have to rely on your eyes to go to the changelog and figure out
00:25:06if this is related to you or not.
00:25:08It allows the changelog to come to you into your inbox and you get to action it as you
00:25:12need to.
00:25:14With that being said, I think we are at the Q&A time.
00:25:17I tried to rush through that as quickly as I possibly can so we can have some Q&A if necessary.
00:25:22You did a good job, Dennis.
00:25:23Yeah, great job, Dennis.
00:25:25Rapid, rapid fire.
00:25:26Very quick.
00:25:27All right, so we have a few minutes here.
00:25:31So I have a question to start.
00:25:34I know we saw today demos don't always go perfectly when they're live.
00:25:39And while Vercel does make things easy for people, there's always something that we can
00:25:44do better.
00:25:45Nobody's perfect.
00:25:46So do you have any feature requests that you would like me to share with the engineering
00:25:50team?
00:25:51Is there anything that you'd like to see different or that's just missing entirely?
00:25:55I don't know about missing yet.
00:26:00But honestly, there's some features you just rolled out recently, extending the work time
00:26:06of a serverless function, I believe.
00:26:07I don't remember the name of it that you just rolled out that I'm very interested in because
00:26:11when I'm operating with open AI, waiting for a result might outlive the length of the serverless
00:26:18function.
00:26:19You had a name for it and I apologize, but I forgot it was.
00:26:21But I'm really excited to start using that as well as your AI SDK that you just introduced
00:26:27as well.
00:26:28These aren't feature requests, these are me enjoying the features you're bringing out.
00:26:34I have another one.
00:26:35I actually, I've been using the, I forget the name of the API for deploys because I haven't,
00:26:45it's been kind of annoying to go from front end application I built to like, was the deploy
00:26:51even successful?
00:26:53And so you have an API to get the deploy status.
00:26:56So I don't have to do that.
00:26:58I can wait until it's read before I, cause I actually don't want to look at the interface
00:27:02until there's an issue.
00:27:05And if I have a failed deploy, that's the most frustrating issue that I ever run into.
00:27:09But otherwise having multiple projects and I think some of the interfaces, like there's
00:27:16always places to improve in terms of experience, but there hasn't been like one thing that I've
00:27:22noticed.
00:27:23Yeah, I have one possible gotcha that might be on my end and not Vercel.
00:27:28So if it's a feature quest, great.
00:27:30If it's me, you know, shame on me.
00:27:33I did a ton of testing locally with all my stuff and functions don't die locally.
00:27:38At least they did not for me.
00:27:40So everything was looking like just smooth as butter, you know, it was amazing.
00:27:43Everything's working out.
00:27:44Worked on my machine.
00:27:45Yeah.
00:27:46Worked on my machine.
00:27:47Exactly.
00:27:48Classic.
00:27:49So if you do a, you know, a Vercel and you know, the functions die eventually, I, again,
00:27:55this might be a me thing where I just need to, you know, gate my, put a governor basically
00:28:01on my functions to only be able to allow them to run for a period of time.
00:28:04But if Vercel could offer that out of the box, that'd be pretty amazing.
00:28:08It's like a longer runtime.
00:28:10Yeah.
00:28:11No, no.
00:28:12Like, well, I mean, runtimes matching what they are on production.
00:28:16Locally.
00:28:17Yeah.
00:28:18Okay.
00:28:19Yeah.
00:28:20I've run in, I've run into some of that as well.
00:28:22Good to know.
00:28:23Do you have anything?
00:28:24That's great.
00:28:25I know.
00:28:26I've been through it all my life, banging on next to me helps me remember.
00:28:32I don't have any specific requests, no, but I did want to just call out if you are new
00:28:38to HubSpot, but you liked what you saw and you want to try us out.
00:28:43You can always join our developer Slack.
00:28:45We talked about that and we can, you can also go and check out our developer documentation
00:28:52so that you can try some stuff out for yourself.
00:28:54Indeed.
00:28:55Awesome.
00:28:56Let's see.
00:28:57I have one more question that I like to ask and that's, I know you've covered a lot.
00:29:05So if there's like a key takeaway, any best practice or just key tip that you want to make
00:29:10sure people remember coming away from this?
00:29:14I have one and I didn't follow it and I'm still not following it and I'm mad at my, I'm very
00:29:20mad at myself.
00:29:23Use environments and set them up early.
00:29:27Don't try to like retro it later cause it is so painful.
00:29:32So early on having your environment, that's one thing like in the interface, it's very
00:29:37easy to have your environment variables tethered to an environment.
00:29:43Like get environments set up, use them early.
00:29:48Don't wait because doing it later is so, so painful.
00:29:51And I know like we all just want to build functionality and see it working as quickly as possible.
00:29:57And so having a test environment can be kind of annoying, but yeah, that's, that was what
00:30:01I would recommend.
00:30:03I would plus one to that.
00:30:04I was getting an error and I was asking cursor why my error, why it wasn't working in when
00:30:11I was in my development environment and it was because I didn't toggle on using my environment,
00:30:17my very, my environment secret key inside of my development environment.
00:30:22So it was like it couldn't find the key.
00:30:24So that was kind of silly.
00:30:26But yeah, I see that question about how are you using AI in your workflows?
00:30:30So specifically with me, I like to use our developer MCP.
00:30:35I think it's a really good product and we're always trying to get feedback on how we can
00:30:39make that developer MCP better for HubSpot developers.
00:30:43But I love it because when I ask cursor, like, Oh, I want to do something.
00:30:48What it will do is it will search our docs in real time.
00:30:51So you're always going to get the most up to date information.
00:30:55It's not going to be stale when you ask the MCP a question and it goes to run that search
00:31:00for the docs.
00:31:04My addition is to be, I use AI skeptically.
00:31:07I question everything that it sends back to me because oftentimes, you know, it's still,
00:31:11it's not perfect.
00:31:12Don't, it's so easy.
00:31:14It's like candy.
00:31:15You know, you can just like hit accept, go, go, go, go, go.
00:31:19You are 17 commits deep.
00:31:21And then, you know, that third commit is actually going to break everything.
00:31:26So use Vercel or use Vercel use AI in a, in a skeptical way.
00:31:31Very critical of it.
00:31:33Always, always, always make new branches when you're doing a new thing.
00:31:38That way you can just get rid of it if necessary.
00:31:40Take advantage of Vercel and its preview environment, you know, to do that and yeah, don't rely too
00:31:47much on it.
00:31:50All good advice.
00:31:51I know we're at time and you all are very busy and probably have places to be right after
00:31:57this.
00:31:58So thank you so much for taking the time.
00:32:00I'm going to let you go so you can get back to your day.
00:32:03Appreciate it.
00:32:04Thank you.
00:32:05Thank you to Vercel and everybody who came.
00:32:09Awesome.
00:32:11Just a quick reminder.
00:32:12We do have another session next week.
00:32:14We'll be talking about Python at Vercel.
00:32:18And you can always check the events calendar at community.vercel.com/events to see everything
00:32:23that's coming next.
00:32:24Thank you all.
00:32:25Have a good week.

Key Takeaway

HubSpot's DevRel team extensively uses Vercel to power their applications, build rapid prototypes, and create innovative tools like an AI-driven changelog monitor, leveraging Vercel's serverless functions and development features for efficiency and scalability.

Highlights

HubSpot uses Vercel as a backend for its applications, enabling dynamic UI components to interact with serverless functions.

The DevRel team leverages Vercel for rapid prototyping and experimentation, exemplified by a Slack bot providing real-time resources to their developer community.

Vercel's platform offers benefits like easy-to-read live logs, fast serverless function starts, a powerful CLI, and seamless integration with databases like Neon and Upstash.

A custom HubSpot developer changelog monitoring tool, built on Vercel, uses AI to analyze changelog entries and proactively alert developers about relevant changes to their GitHub repositories.

The DevRel team also created a V0-powered frontend to visualize Slack bot interaction data, informing product feedback and improving the developer experience.

Key advice for developers includes setting up environments early, using AI skeptically, and utilizing Vercel's preview environments for testing.

Timeline

Introduction to Vercel Community Session

Amy Egan from the Vercel community team welcomes viewers to the live stream, outlining how to engage with the session. She explains that the event is streaming to X and YouTube, but encourages viewers to join the community chat for Q&A. A reminder about the code of conduct is also given to ensure a respectful environment. This segment serves as an essential orientation for attendees, setting expectations for participation and conduct. The introduction of Brooke Bond from HubSpot signals the main topic of the session: how HubSpot utilizes Vercel.

HubSpot and DevRel Team Overview

Brooke Bond introduces HubSpot as a smart CRM providing marketing, sales, and service software, featuring a unified developer platform for integrations. She clarifies that the DevRel team's role is to help developers thrive by building solutions, sharing best practices, and creating useful integrations. The presentation details how developers can build internal static or external OAuth applications, with external apps being publishable on the HubSpot marketplace. An illustrative example is provided where Vercel could build an integration to display its metrics directly within a HubSpot account, showcasing the platform's extensibility. The DevRel team's comprehensive activities, including documentation, live events, community forums, and gathering external feedback for product improvement, are also highlighted.

HubSpot + Vercel: Bring Your Own Backend

This section focuses on the primary use case of integrating HubSpot applications with Vercel as a backend service. Brooke explains that HubSpot apps, acting as the frontend with React UI components, can call Vercel backends via the `hubspot.fetch` API. The Vercel backend then processes data and returns a response to the frontend, demonstrating a powerful serverless architecture. An example of an LLMS.txt file generator is presented, a HubSpot app designed to parse webpage data and create a markdown file optimized for AI search crawlers. Despite a live demo error, the functionality described involves calling a Vercel API endpoint and utilizing the HubSpot files API to upload the generated file to a HubSpot account, showcasing practical integration.

DevRel Labs: Slack Bot Experiment

Chris Riley introduces DevRel Labs, HubSpot's framework for conducting rapid experiments and building prototypes using Vercel. He details an experiment involving a Slack bot designed to quickly provide resources and foster peer-to-peer engagement within their external developer community. The bot's design prioritizes being non-intrusive while delivering real-time support. During a live demonstration, Chris showcases the bot's interaction, including its ability to respond to support questions like 'How do I get started with the HubSpot Dev MCP?'. He emphasizes Vercel's benefits, such as easy-to-read live logs, surprisingly fast serverless function starts crucial for Slack integrations, the utility of the Vercel CLI for pre-deployment testing, and seamless connections to backend services like Neon and Upstash.

DevRel Labs: Slack Data Interface & Changelog Monitoring Tool

Chris explains how the rich interaction data from the Slack bot led to a new V0-powered frontend project, designed to visualize this data and inform HubSpot's product feedback process. Dennis Edson then introduces his project, 'Sprocky Change Dust,' a HubSpot developer changelog monitoring tool built with Next.js and Vercel. This tool actively monitors HubSpot's changelog, using AI to classify changes (e.g., breaking, enhancement, CMS/CRM impact) and checks them against connected GitHub repositories. Dennis highlights Vercel's ease of setup, cost reduction through serverless functions, and inherent scalability as key reasons for its selection. The tool notifies users of relevant changes, allowing them to create issues or dismiss alerts, and continuously monitors repositories for updates, ensuring developers stay informed without manual effort.

Q&A and Closing Remarks

The session concludes with a Q&A segment where speakers discuss potential Vercel feature requests, such as extending serverless function runtimes for long-running AI operations and matching local function runtimes to production behavior for more accurate testing. They also express enthusiasm for Vercel's new AI SDK. Key developer best practices are shared, including Chris's advice to set up environments early to avoid future complications, and Brooke's tip on correctly toggling environment secret keys in development. Dennis provides a critical piece of advice: use AI skeptically, always questioning its output, and consistently create new branches for development to leverage Vercel's preview environments effectively. The speakers offer their thanks, and a reminder for an upcoming Vercel community session on Python is given.

Community Posts

View all posts