Building the Builder Bar: Challenging Attendees, Built on HubSpot

During UNBOUND this year, we did something different - we gamified actually using the new tools and features to really build on HubSpot for attendees. Attendees came to the Builder Bar and were presented with five mini AI challenges to try out while at the conference.

First, what was the Builder Bar? To help both seasoned builders and those interested in trying out building, we designed an activation space that had three specific sections throughout the day:

• Unblocked - All about connecting people with questions about building on HubSpot with HubSpot experts and getting them on the right pathway to finding a solution.
• Unleashed - Our interactive building on HubSpot gamified demos.
• Unwind - The bar became a real bar with drinks, and bar games like Connect Four and Tic-Tac-Toe.

For Unleashed, we wanted to create bite-sized challenges that highlighted HubSpot’s AI builder features. These challenges took about 5-10 minutes to complete, and demonstrated the HubSpot connector for Claude, the Agent CLI, the developer MCP server, and Agent Builder.

How the Builder Bar was set up during the Unleashed programming time slot

Determining the Challenges

AI has transformed who can become a builder, so we knew most of our challenges needed to be achievable by all attendees. From there, we focused on building challenges around the different AI tools available for HubSpot, with an emphasis on the AI tools created with builders in mind, like the Agent CLI and the developer MCP server.

When picking the challenges, we wanted them to be beginner-friendly. Not everyone is comfortable with AI, and many times, not having a concrete starting point is what keeps people from trying it out.

So, to give attendees a starting point, we created example prompts. We formatted these prompts to give the AI enough context around its task and expected output. It was fun to see that while we were on the show floor, some attendees started to write their own prompts! What we wanted to give all attendees was a place to begin and then let their creativity run wild.

We also knew the challenges had to be thoroughly vetted before UNBOUND because AI can sometimes go a little rogue. Once we had established the prompts, we also gave the AI a detailed skills file that gave it more context on the challenges to try and mitigate hallucinations. Was it 100% perfect? No, but it was gratifying to see people who had never built a HubSpot project before use the developer MCP server to ship their very own app card.

Once we had created the challenges, it was time to build an interface for attendees to interact with them.

Building a Challenge Frontend

Why did we choose to use HubSpot projects?

The challenges needed somewhere to live. A static web page would have worked, but that would send attendees away from HubSpot to learn how to build on HubSpot. So we built the challenge hub as a HubSpot project using app pages, custom pages that live inside HubSpot itself.

• Attendees never left HubSpot. They started a challenge, built something, then opened their HubSpot Portal to find what they’d just shipped.
• We used the same parts we were asking attendees to use. The UI components, serverless functions, the Agent CLI and the developer MCP server were all set up in Claude and ready for use.
• It looked native. The components utilised HubSpot styling.
• It was easy to change. Every challenge’s code lived in one project so fixing a prompt on the show floor meant editing one file and redeploying.

Creating the challenges with app pages

HubSpot App Pages have a pre-defined home page where the challenge home was created containing our challenges. The layout was created using the AutoGrid UI component which allowed for uniform and efficient editing of the rendered cards. Each of these pages were defined and linked to the parent page using PageRoutes and PageBreadcrumbs to allow for clear navigation.

The Builder Bar homepage showing the five challenges

Dedicated pages were created per challenge showing challenge instructions, step-by-step walkthroughs and a completion page. Each flow was suited to that challenge:

• Ship an app card: A short form asked what the card should do, what data it should use, which record type and where it should appear. The page worked out the required scopes and generated a ready-to-paste prompt for the AI interface. The form was really to help the attendee see that they could freely create what they wanted, but gave them ideas and structured the generated prompt so they didn't need to come up with something in that moment.
• HubSpot connector for Claude: The attendee picked a domain of expertise: Marketing, Sales or Service based on what AI feature they want to build using the Claude connector, they got a tailored prompt, and could copy it or use an “Open in Claude” link that deep-linked into Claude with the prompt pre-filled. This prompt contained the instructions that, along with HubSpot’s MCP, allowed Claude to build the requested feature in HubSpot.
• Agent CLI: Similar to our Claude connector challenge, the attendee chose a persona of End User or RevOps/Admin, then a role pertaining to those departments, and got a matching starting prompt to use in Claude. They were then given complex prompts that did real work or gathered real data that the chosen role regularly needs.
• Fix the broken UI extension: The attendee was presented with a broken UI extension that they were tasked with fixing. They saw what the fixed card should look like, got a link to a contact record, and received a prompt telling Claude to download the project, find the bugs and redeploy. Claude then diagnosed the issues with the card via the Claude connector and HubSpot’s MCP, and then presented a solution to fix the card and redeployed to the portal.
• Agent Builder: The attendee picked one of four scenarios based on role-specific requests, such as BDR, CSM, Sales Ops etc. They then got a series of prompts, one for the agent and subsequent prompts to create and edit a workflow. Modals were added alongside the instructions with pop-ups of helpful screenshots. A link was added to deeplink directly into the portal’s Agent Builder .

The challenges ended with a checklist of achievements. The attendee ticked each item to unlock the finish button which was conditionally greyed out based on the steps completed. They then landed on a completion page that recapped what they had learned and built, and to display the prize they had achieved.

An example of a challenge page highlighting the Step Indicator, Checkbox and Button UI components.

Behind the Scenes

In order for the Builder Bar to run smoothly we had to be able to monitor the state of each challenge at any time. We were running the five challenges across 10 laptops that were active throughout the event. In order to monitor this we were sending continuous data to our monitoring system which was also built using UI Extensions on HubSpot via serverless functions. This also allowed us to capture completion data for the events. This data was then sent to a live display that we had in the Builder Bar area.

The live display: Showing building in real-time

In order to show how quickly and easily you can build on HubSpot we thought it would be useful to have a screen showing real-time stats of challenges being completed at the bar. Not just that, but our community has built some really unique and impressive use cases over the years on top of HubSpot and we wanted to help show that off. We created a form to appear on a tablet that users could submit cool projects they've built, and see it up on the same screen with all the stats.

We also felt it was important to ensure folks could see the latest builder focused features and even give folks an easy means to submit feedback.

Lastly we wanted everyone to know that it was all built on HubSpot. That makes for a complicated screen but what made it easy - we used HubSpot's Content Hub which allowed us to:

• Create an editable slide deck: this deck was built using React. It cycled through the dashboard displaying Builder Bar stats and project ideas, useful information slides and a feedback QR link. Upon form entry the display highlighted the new submission and added it to the rolling display.

• View submissions of cool projects folks have built on HubSpot: a form was added to a tablet display on a pedestal in the builder bar area. This was built using HubSpot’s native Form feature. We could then easily call this form on to the template page we created to display it. This flexibility allowed any user to edit the form from the HubSpot UI without having to edit the code for the page. Very useful when working with non-developer teams and enabling flexibility for changes while on the show floor.

The Builder Bar Live Display showing the challenge stats and community idea submissions

Using AI Workflow Actions to Screen Form Entries

We also created an additional feature that screened the entries from the form submissions. Every entry of the form was captured as a Custom Object called ‘Ideas’. When a form submission was captured it entered a workflow that contained an AI agent workflow action. The AI would check for profanity and quarantine the submission based on its assessment.

The workflow then created an Idea object with a quarantine field added. Using GraphQL the front end display was able to call the Ideas objects from the HubSpot portal, provided that they were not flagged as ‘Quarantined’.

Keeping everything running smooth

The challenges were complex, and we were heavily reliant on AI to do the right things to help the users complete their tasks. Testing of the challenges gets much harder when much of the challenge requires an AI agent to non-deterministically complete the task at hand.

Prompt engineering is only a small piece of this puzzle, we needed to have a means to reset the HubSpot accounts these agents were working in. Resetting meant that the UI extensions users created would get wiped, CRM records that were modified/created would get wiped. One challenge involved fixing a broken UI extension. We had to re-break the extension so the next user could do the challenge.

The Builder Bar Admin HubSpot app page we built for managing the accounts and laptops.

As a failsafe which we did actually use once - we built a system just-in-case a challenge stopped working - we had the ability to hide challenges either globally, or for groups or individual laptops. This way if certain challenges were experiencing some sort of issue we could disable them while we worked to fix them. Humorously someone on our team trying to clean up files generated by an agent, accidentally made it so one of the challenges couldn't work on that laptop. Immediately Jon was able to disable the challenge on that laptop, and attendees could continue completing challenges while we worked on the back-end to fix that challenge. When we were ready for that laptop to be able to start that challenge again it was a simple toggle switch to re-enable it.
A screenshot of all the challenges listed, along with the ability to hide or show them on different stations.

We also wanted a way to track in real time the actual success of the Builder Bar's Unleashed phase, and which challenges folks were completing most, and which were completed or tried the least.

Our solution was…more HubSpot:

We created an app page for administrating all of the builder bar stations. We built it with the following features:

• Ability to reset any individual station with 1 button press. Resetting literally meant deleting developer projects, deleting CRM data as well as reverting 1 developer project to a specific build and re-uploading it as quickly as possible.
• Ability to reset all stations at once.
• Realtime charts and stats showing people starting and completing challenges at the bar.
• Ability to group stations and set different challenges to be visible/hidden per group. Basically everytime the challenge interface was loaded or navigated a serverless function would ping our admin account to get a list of the challenges that are intended to be visible for that specific station.
• Ability to globally hide challenges.
• Ability to hide/disable any submissions to the live display that were inappropriate and somehow made it past the AI review.

Setup before folks could try their hand at building

We had a very limited amount of time to actually get all the stations setup and validate that they were working properly with all of the tools they needed like claude code, access to a HubSpot account, the Agent CLI, developer MCP server, all installed. So we threw more AI at the problem. We created Claude skills for setting up all of the tooling, and testing that the challenges were working, this was immensely valuable as it meant the stations themselves were doing the work of getting set up, as we were working on other parts of the tech and builder bar set up.

Some of the HubSpotters that made the Builder Bar possible

What we learned, and how you can get building today

This project was ambitious - five challenges all using AI and demoing the latest capabilities on HubSpot. Just as the challenges were rooted in AI, so was the work we did to create the app pages to run them. Our developer MCP server scaffolded the project for us, including using the HubSpot UI components library to create the basic frontend structure, which sped up development considerably.

Using AI to speed up development meant that scope creep was more difficult to navigate. While we defined our scope of work well at the beginning, AI tools muddied expectations of later scope change requests. If AI can just code it, then the scope can continuously expand, right? That caused some last minute requests that we couldn’t oblige because even though we used AI to help build, everything was manually approved and tested by a human for errors and usability. After-all we needed this to work the first time for each attendee.

As more development is done by AI, this can cause issues down the road, so our recommendation is to align team members at the beginning of the project, allow for extra time if possible, and explain that each significant change needs to be thoroughly tested, some of that testing has to be manual (UI experience flows) - if you don't have the time to hook up an agent to automatically test it. A helpful way of working is to use the same service-level agreements (SLAs) of code work that you would without the help of AI. Yes you can likely move faster - but for you as the human you are limited in how many agents you can reliably manage with efficiency.

We wouldn't have built this another way - the value of really being in HubSpot for real, using the real tools you'd use to do these tasks with real examples based on real life scenarios was an awesome way to demonstrate the power of HubSpot. Even the admin interface being built inside of HubSpot was an easy decision for us, we needed forms, we needed pages, we wanted metrics, we wanted serverless functions. This is all well within HubSpot's wheelhouse. The accounts for completing the challenges were test accounts off of our admin account - offering built-in security, built in ease of management. The whole experience was something anyone with HubSpot's Developer tools could build, and that is an amazing thing.

Overall, we had more than 1,000 attempts between the five challenges and had hundreds of UNBOUND attendees visit the Builder Bar throughout the conference. We accomplished our goal of empowering customers to build on HubSpot with AI and bring it back to their teams and business contexts. One attendee’s feedback summed it up best: “This is awesome. These challenges are going to change how my team goes to market.”

Whether you got to experience the builder bar in-person or not: If you're interested in using AI to build on HubSpot - we highly recommend you check out the new section of our documentation (linked below). Whether you've never coded before, or you're a professional developer there are resources there for you to get started and take your building up a notch. Everything from getting started, which tool to use for what, the foundations of how it all works, how to get better results, example prompts, all the way to advanced concepts like CI/CD and intelligently creating agent skills.