Introducing HubCode - Vibe Code HubSpot Apps and App Cards

Greetings, friends on the internet. I'm Dharmesh, the co-founder and CTO of HubSpot. And this is the next in my series of videos called Founder to Founder. And this one, we're going to talk about customizing and extending HubSpot so you're not reinventing the wheel. Now, there are a bunch of different ways to customize and extend HubSpot. One is you can customize the data model of HubSpot by adding custom properties to existing object types. You can create your own custom objects. You can also connect third-party systems and applications to HubSpot using our APIs or the Model Context Protocol, MCP. And finally, you can create applications and app cards that live inside the actual HubSpot UI with our UI Extensions SDK. Now, for those of you that have built app cards before, this is likely old hat. So when I say, oh, all you really have to do is open a terminal, install Node and the HubSpot CLI, configure some JSON project files, and write the TypeScript code. You're like, yeah, that's old hat. But for some of you, it's sort of new hat, right? It might cause some anxiety and consternation. And because you're thinking, I'm a RevOps ninja, not a developer, Jim. And so I love agentic coding. And what I thought might be useful, I've been working on this project, is to kind of bring the power of agentic coding to building HubSpot apps and app cards. So I'm thrilled to show you a project I've been working on called HubCode, which this is the first time anyone's seen it, by the way. It's— I've talked about it before, but I've never actually shown it. And HubCode is an agentic coding tool for the number one agentic customer platform, which is of course HubSpot. All right. So we're going to go to HubCode here and it runs as an agent on agent.ai. So I'm in the HubCode application here. And we see some existing dev projects. I'm just going to create new project. I'm going to give this a name. We're going to call it Hubcode Demo 17, demo app for Hubcode. All right. Now when we build app cards in HubSpot, we can choose which object types within HubSpot that app card is going to show up on. And we're going to pick company here for this demo. And let's start off with something super simple. We're going to say Show a heading, Hello World from HubCode. So it doesn't do anything fancy. This is the kind of canonical Hello World application. We click the generate button and what's happening behind the scenes here is HubCode is going to generate the project files. It's going to do the configuration, it's gonna write the TypeScript code to show that heading and then deploy it to HubSpot and all without opening a terminal or doing anything or writing a line of code. Now, in order to install this newly generated application, we have a one-time process to sort of install and authenticate this app in the portal that I'm working in right now, which is my own startups.com personal portal. And I'm going to connect the app. All right, so now our app is connected. So let's go to the companies view in HubSpot. And this will be very familiar to those of you that are regular HubSpot users, but this is basically a list of companies in my account. And I'm going to click on one of them. This is Gusto. Now when we're looking at the company view, we see a bunch of information, but we can also customize it. And so we're going to customize this kind of default view within HubSpot. And what we're going to do is we're going to say let's add a card right to the top of that middle, middle column there. And we're going to go to the card library and we're going to search for the card we just built, which is Hubcode Demo 17, the one we just generated. I'm going to add that card and we're going to save and exit. And as you will see, ta-da, we have Hello World from HubCode that was now added. So whenever we look at a company object, we see our card. Now of course this is not particularly interesting, right? Just having that heading show up. But of course we can do more than that. We can say, so company information including full Address, and we're going to regenerate. And now what it's doing basically is, you know, we're vibe coding or agentic coding. It's going to regenerate that coding file and redeploy to HubSpot, and we won't have to authenticate this time because that's already been done. All right, and now all I'm going to do is refresh the page here, and we will see that it's coming back with the company overview including the full address as we requested. So this kind of demonstrates that we have the ability to get anything off of the, in this case, the company object in HubSpot, including any custom properties. We can sort of bring it all in and show it on this card that shows up. And we can, we could have chosen to put it in the, in the kind of right sidebar, but here we're just for convenience, we're showing it in the main, main column here. All right, so that's pretty cool. But let's say we want to do something fancier than just showing information from within HubSpot. Let's say We want to show related videos for what this company does. Now I could just say show me YouTube videos, you know, blah, blah, blah. And then you might think, well, that's fine, Dharmesh, but I don't even know what to ask for or how to ask for it. It's not a matter of like writing lines of code, but I don't even know how to describe the thing or how to do it within HubCode. Don't worry, I've got you. We've got this cool snippet library. And it has a bunch of little snippets, all English. And we can just say, add this little snippet that says retrieve and show YouTube videos by searching on some search term. And for the search term, instead of the search term, we're going to say by searching on the company description. So it's going to take the company description for whatever company we're looking at. And it's going to pass that to, as it turns out, an agent.ai agent. Because HubCode, and this is a big deal, so I'm going to pause for dramatic effect here. HubCode applications have access to all the agent.ai agents that are on the agent.ai network. So we have 2,000 public agents for all sorts of things, getting social media data, doing Google searches, looking up information, looking up financial details, all of that. You can build your own agent.ai agents and you can kind of build, bring that capability right inside a HubSpot app or app card. So let's take a look at what happens here. So we're gonna do a refresh and it comes back with YouTube videos, which is awesome. We can click on one of these of course and it brings up the YouTube video as you would expect. All right, so that's pretty cool too, I think. So what we're doing here is that we've effectively have the ability to kind of vibe code our own application. Now this, these are kind of simple examples, but we could create a multi-column layout with user input. All sorts of different things, uh, access to agent.ai agents, third-party APIs you have, or your own internal systems. You can kind of bring all of that and kind of vibe code it right within, right within HubCode and generate it. And when you generate it, what's happening behind the scenes here is actually creating the project. So for those of you that have used the UI Extensions SDK before, this will look familiar. And you might be thinking, hey, but wait a second, you know, it's fine for me to start out a project this way, feels awfully convenient. but I want the control, I want to be able to kind of do my thing from there, that's totally fine. You can just kind of download the entire project as one zip file and then take over from there and just use our HS command line tool to take it from there. So that's the ability to generate app cards right now, but you can also generate full-fledged applications within HubSpot. So let's say we come back, we're going to create a new project and we'll call it Hubcode App 17. Some description. And here we'll say show a dropdown of the countries in Central America. I'm not exactly sure why we do that, but we're going to do that. And instead of an app card, we're going to make it a full app just so you kind of see how that works. We're going to generate it. And by the way, in terms of on the kind of agent.ai side, you have access to all the Frontier large language models as well. So you could have an app card that accesses GPT-5.4, Claude Opus 4.6, Google Gemini. You can generate images with Nano Banana. You can do all sorts of things. All right, so we've generated our new app. Now we're going to authenticate like we had to do before. This is a new app. We're going to approve it and connect it. All right, so the thing that's different about building a full App Home, an a full-fledged application is that it's accessible within the HubSpot nav. So we can now access this application that we just built, and it's going to give us a dropdown of the countries in Central America. Now what we could do is we could take it from here, we can say, okay, then I want to invoke a large language model, come back with recent news from the country or the GDP or however many customers we have there. There's a bunch of things we could do, but the kind of idea here is to sort of demonstrate the ability to have an application that sits within the HubSpot nav as a marketplace app that you can sort of access and have the full kind of screen real estate of a full-fledged app. And you'll notice here the icon is this kind of generic icon. It's one of the other cool things in HubCode is we can actually, uh, provide code and icons. So we can say the text HubCode with a programming Themed visual. All right, and we click generate. And behind the scenes here, it's using an agent.ai agent to actually create an app icon in the style of the HubSpot apps that we have that sort of fit our kind of general design guidelines. And so I created a cool app icon there. I'm going to save that and we're going to regenerate and redeploy. All right, by the way, I hope you find some of these quips that show up while we're waiting entertaining. I've been writing those for ever since HubSpot started. So it's been 20 years now. And most of them I wrote myself. So, all right. So we regenerated it. All we did is updated the icon. You can see we vibe coded an icon. All right. So that's cool. So let's say now, let's come back. We'll do one more thing. We're going to say show Company overview of the most recently added. You know what, we have, there's probably a snippet for this. I just want to bring in the latest, latest company that's been added. So get the most recent company added to HubSpot since we're in an app right now and show it in a heading, the section named recent company. All right, so we're gonna regenerate that. And trust me, there's a method to my madness here in terms of showing you kind of one more thing here. All right, we're gonna refresh. So we see our choose a country dropdown and we see, you know, Augusta, which is the most recent company I added recently. All right, and so that's cool. But the reason I was showing you this, so let's say if we look at this, look at this app right now, And we're like, you know, this is all fine, but it's sort of in the city, state, and country, like it's sort of weird to show that in like 3 different, well, fields here. That's the address. So I'm going to go and take a screenshot. I'm going to screenshot this. And so you've got the screenshot and I'm going to come back to agent.ai and we're going to click this revise button. Okay. and we're gonna paste that screenshot in and we can say combine these fields 'cause it knows what we're talking about into one that shows the full address and we say revise. And so the idea here is as you're vibe coding, you can kind of look at the output of what was built and then sort of point arrows at things, highlight things, rearrange things, add stuff. You can sort of like visually make the app however, make whatever edits you want and we'll generate. And see what happens here. All right, we're back and we are going to refresh this app and we will see that it combined the San Francisco, California, United States into, into one field. So anyway, that's, that's revisions. So as you're making edits and things like that, one thing you might notice here is we have a button that says 4 versions. So we've had 4 versions of this prompt so far. We can see a list of those versions. So let's say you made a change and you're like, you know what, I really don't like that last change, I'm just going to restore it, and it puts it back to that particular version. So you don't really have to worry, worry about experimenting and, uh, and trying out new things. All right, so that is HubCode. So kind of recap, it all runs in the cloud, so there's no terminal needed. We can just kind of do it all within the HubCode application running on agent.ai. You can create both full-fledged apps and app cards. By the way, the full-fledged apps is a beta feature in HubSpot right now. To be released shortly. And you can invoke agent.ai agents within your applications, including access to third-party APIs and HubSpot data and such. So if you're a HubSpot customer, I encourage you to sign up. The app is in private beta right now. I'm going to approve people as, as fast as I can. And if you're not a HubSpot customer, I'm on a personal mission to go into founder mode and try to sell HubSpot. So I have a campaign running at gohubspot.ai, and it would be— it would make my day for you to just sign up, even if it's for the free version, just to try it out. Thanks. I hope you found this useful and see you in the next video. I'm online on Twitter, on LinkedIn, on everywhere, @dharmesh. Feel free to, feel free to message me. Talk to you later. Thank you.