It happened again!!
I'm proud to say that 'Team Sitecorepunk 2077' (...it's still just me) has officially won the 2026 Sitecore Hackathon! 🏆
That's now two years in a row! It's really an unreal feeling.
A day or two after the event, I sifted through the SitecoreHackathon GitHub to pull some stats: 34 teams registered, 20 teams submitted something before the deadline.
I vibed together a submission showcase to digest all of this year's entries.
Check it out here: Sitecore Hackathon 2026 Submission Showcase.
👟 Preparation
In my hackathon prep post, I basically said 'you can practice for this'. Taking my own advice, I spent time leading up to the event building a couple of basic Marketplace applications locally using AI-assisted tools like Claude Code, OpenAI Codex, Microsoft Copilot, Cursor, VS Code, and Perplexity.
After a few days into this deep dive, I wound up with a pretty solid LLM-friendly knowledge base containing relevant public Sitecore Marketplace SDK/Blok documentation, examples, and code samples to give my agents the context they need to successfully build and iterate on a Marketplace app. With these technical barriers eliminated, I could focus on building features for whatever app I'd end up building during the event.
Day of, I'd say I felt...pretty well prepared actually. It wasn't my first rodeo, so I knew what to expect. My workspace was ready, and I felt confident that I had the tools to execute whatever the categories/idea requirements.
I took the afternoon off from work and forced a short nap, enough time to reset, and have dinner with the family.
I had my calendar blocked. Everyone at home knew that I'd be upstairs, locked away in my office for the next 24 hours (with the occasional break in between).
I even had my Hackerspace Hero shirt on!
It was time.
💡 Hackathon Ideas
This year's ideas email came through promptly at 6PM CT.- Best Marketplace App for Sitecore AI - Build something publishable. Not just a demo.
- Applied AI Within the Sitecore Execution Pipeline - Demonstrate how AI can be embedded within Sitecore execution flows to improve quality, governance, personalization, or performance.
- Best Tool Supporting Sitecore Development (Not Built on Sitecore)
I was a bit torn between 1 and 3, so I decided to lean into both since 1) building some kind of useful developer tooling had been a proven winning approach in prior years, and 2) I felt well prepared to build a Marketplace app of some kind.
As is tradition, I kept a running log which I tried to update every couple of hours throughout the event again on X. If you're interested, click the 'Read 1 reply' button below to see the full thread:
The 2026 #SitecoreHackathon is officially underway! pic.twitter.com/uygAEo6G2O
— Gabriel Streza (@GabeStreza) March 7, 2026
✨ What I Built
It's an IDE-esque (think aistudio.google.com) Sitecore Marketplace app builder...built as a Sitecore Marketplace app itself. You describe what you want your Sitecore Marketplace app to do in plain language, and it generates a complete (and, in some cases, near-production-ready) Next.js app with the Marketplace SDK, Blok design system, and best-practice patterns already wired in.
I landed on the name "Vibecore Studio".
Beyond generating an app by just describing it, you can continue refining your app using the built-in refinement chat to create new versions of your app. After making refinements, you can review the updated code using the version comparison feature (or modify the code directly) before downloading the full source code locally or deploying your app directly to Vercel.
👀 How It Works
Vibecore Studio runs as a standalone Marketplace extension inside Sitecore Cloud Portal (the app can technically be used in 'demo mode' at localhost:3000 when you run it locally in a browser).
The main flow starts with a guided 3-step wizard:
- Pick your extension point - Standalone, Context Panel, Custom Field, Dashboard Widget, or Full Screen.
- Describe your app - Give it a name and a description. You can use the optional AI Enhance button that takes a rough description and improves it automatically.
- Select your features - Select the SDK capabilities you expect your app to need: Page context subscriptions, Authoring GraphQL read/write, Experience Edge, or External API integration.
4. Click Generate, and wait for the progress bar to fill.
A couple of minutes later, Vibecore Studio serves up a completed app.
🪄 Key Features
Once an app is generated, you flip over to a Project view, which contains several key features of Vibecore Studio:
The File Tree
The left sidebar shows every file in the project. Generated files (the ones the AI actually wrote) are marked with amber dots, so you can easily see what's new vs. what's template boilerplate. Click any file to view it.
The Code Viewer
Inline Editing
Click the edit button on any file, and it switches to an editable textarea. Make your changes, hit save, and it snapshots a new version. It's intentionally lightweight but flexible enough to make a quick fix yourself.
The Chat Refinement Panel
The right panel has a chat interface where you type what you want changed; "add a search bar," "switch to a table layout," whatever it is. An Enhance button can polish/improve/expand on your typed prompt before sending. Hit Refine, and Vibecore regenerates the affected files in place. A new version of the application is subsequently created.
The 'Deploy to Vercel' Feature
The Vercel Deployments API is directly integrated to provide the ability to deploy your app directly to Vercel. A status bar tracks the deployment in real-time: 'sending files', 'building', and 'ready'. When it's done, you get a live preview URL. Subsequent deploys show a "Redeploy" button that pushes to the same project.
The 'Download ZIP' Button
If you'd rather deploy manually, download the entire project as a ZIP. Unzip it, npm install, npm run dev, and you're running locally.
The Dynamic Installation Guide Panel
Another right panel tab that generates step-by-step instructions tailored to your specific app - which extension point to select, what permissions to configure, and where to plug in the deployment URL. It adapts based on whether you've already deployed or not. All the important values have copy value buttons to ease the process of configuring the generated app in Sitecore AI.
The Version History Panel
The File Difference Comparison Feature
The Debug Panel
A debug panel shows validation errors and warnings (if any), file generation metadata, and the raw LLM response rendered as markdown. Potentially useful for understanding why something generated the way it did, which helped me write better refinement prompts.
Previous Apps
With Vibecore Studio, you can generate and store up to 20 different applications, any of which can be reopened for further revision - or deleted if no longer in development. Click 'Previous Apps' to reveal each of your application projects.
Settings
You can configure API keys and tokens directly in the browser without touching .env.local files. Setting values are obfuscated in localStorage. Server environment variables (.env) always take precedence if they are populated.
- Anthropic API Key: Used for app generation and prompt enhancement when the server env var is not configured.
- Anthropic Model Name: Optional model override. Falls back to claude-sonnet-4-20250514 when unset.
- Vercel Token: Used for one-click deployments when the server env var is not configured.
- Vercel Project Name Prefix: Optional project name prefix for new Vercel deployments when no env var is set.
- Vercel Team ID: Optional Vercel team scope used when deployment protection needs to be disabled.
- Auto Redeploy (Vercel) after refinement: When enabled, automatically redeploy to Vercel after chat refinement when a previous deploy exists. Disable to require manual Deploy clicks.
- Disable Vercel deployment protection: When enabled, disables SSO and password protection on deployed projects so preview URLs are publicly accessible.
📽️ The Demo: Building a Sitecore Changelog Feed widget using Vibecore Studio
For the hackathon video requirement, I wanted to show the full development lifecycle of a Marketplace app using Vibecore Studio - from prompt through installation in SitecoreAI - all in "real-time".
The idea was a to build a Sitecore Changelog Feed a Marketplace application as a Dashboard Widget. Simple.
Step 1: Select the Dashboard Widget Extension Point
I selected Dashboard Widget as the extension point. This generates an app that's sized and configured for the XM Cloud dashboard.
Step 2: Name and description
I typed in "Sitecore Changelog Feed" and gave it a description mentioning the RSS feed URL. Hit AI Enhance, and it gave me a polished version: "Sitecore Changelog Feed Widget" with a cleaner description.
Step 3: External API
Since we're fetching an RSS feed, I checked External API Integration (even though thinking back, I don't think this is was actually necessary).
Generate
Clicked Generate App. This takes about 2-3 minutes while Claude builds out the feature code and the validation pipeline runs. I sped this part up in the video (you're welcome).
Reviewed
The initially generated code appeared to correctly fetch the Sitecore changelog RSS feed, parse the XML, and render a card-based feed with titles, dates, and links (while correctly maintaining Blok UI design princples). The code looked good enough to push out to Vercel, install to a Sitecore AI instance, and configure on a Dashboard.
Deployed to Vercel
With one inviting click (the deploy button glows...), Vibecore Studio pushes the project to Vercel via the Deployments API, polls for build status in real-time, and hands you a preview URL when it's done. The install guide updates automatically with the deployment URL and step-by-step instructions for App Studio.
Installed to SitecoreAI App Studio
I then showcased the end-to-end process of using the dynamic install guide (provided with every generated app) side-by-side with SitecoreAI's App Studio: I created the custom app, selected Dashboard Widget, copy/pasted the provided Vercel URL, uploaded a logo, configured permissions, activated, and installed.
On the Dashboard, I found the newly installed app and dragged it into place.
And there it was...the first version of the Sitecore Changelog Feed widget, live on my XM Cloud dashboard, correctly pulling the latest RSS entries. Built, deployed, and installed without ever leaving the browser!
Iterative refinement
The first version contained a search bar, but I wanted category filters instead. So I went back into Vibecore Studio, opened the Refine panel, and typed something like "add a category filter system to the search; categorize each RSS item." I again hit the Enhance to make my scramble-brained prompt appropriately detailed, then clicked Refine.
Same generation waiting process, and after a couple of minutes, Version 2 was ready. Redeployed to Vercel, and refreshed the Dashboard after completing.
Noted that all that was generated as a "General" category. Just one... 😮💨
So I went back and refined again: "Can we have other categories like bug fixes, breaking changes, new features, improvements?" Clicked 'Enahance'. Clicked 'Refine'. Then waited...
The code for version 3 appeared to pick up on what I had asked. Since Vibecore Studio maintains a history of each app version, I showed off the diff view comparison between v2 and v3 and confirmed that the code looked generally correct for what I was looking for. Redeployed to Vercel. Refreshed the frame in Sitecore.
And there it was...category filter buttons for bug fixes, improvements, security...the works:
Three versions, three prompts, no lines of code written by hand.
Pretty neat!
Check out the full demo video:
💻 Other apps I generated using Vibecore Studio during development and testing
The changelog feed was the main demo, but I had generated several other apps to demonstrate out different extension points.
Some honorable mentions:
Pomodoro Timer (Dashboard Widget): A simple pomodoro timer app that uses localStorage for persistence. Nothing fancy, but it worked perfectly and took maybe two prompts to get right.
Taxonomy Picker (Custom Field): A custom field that pulls from your site's taxonomy structure and lets you multi-select tags. Works just like any multilist field has ever worked in Sitecore. There are a couple of extra steps at the template level (adding the plug-in field type, setting the data source to the application ID), but once it's configured, it all worked.
Icon Picker (Custom Field): Another custom field. Select an icon, apply it, and the field updates. Simple, but it's one of those things people have clearly built before...but this was just my version of it built with Vibecore.
Site Structure Explorer (Standalone): Basically a content tree with multi-select capabilities and bulk operations: change workflow states, bulk publish, bulk move. It pulls item fields, search capabilities, etc (all in just a couple of iterations). Still a proof-of-concept, but the barrier to getting all this code into a working environment and running on Sitecore was remarkably low.
🧰 Under the hood (a quick peek)
The quick and dirty tech stack that makes up Vibecore Studio:
| Layer | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| Language | TypeScript (strict mode) |
| UI | Tailwind CSS + Sitecore Blok (shadcn/ui) |
| AI | Anthropic Claude via API |
| SDK | @sitecore-marketplace-sdk/client + @sitecore-marketplace-sdk/xmc |
| Deployment | Vercel Deployments API |
| Download | JSZip (client) + server-side ZIP assembly |
Full hackathon submission source code: GitHub
A note on the so-called "Solidified Scaffolding" pattern
The most important architectural decision in the whole project is that under the hood, Vibecore Studio uses a solidified scaffolding pattern:
- The template owns all the infrastructure: SDK initialization (with retry logic and race condition protection), error boundaries, routing, layout, hooks, Blok UI components, and config files. These "files" are not generated by any LLM and are effectively locked in place for any application-generated files.
- The AI only generates feature code - specifically
AppFeature.tsxand optionally services, types, and API routes files would be generated to support the request.
I found that this approach led to relatively consistent app builds with a high success rate, since the LLM can't inadvertently break SDK initialization, corrupt the manifest, or overwrite error handling.
The scaffold is...solidified, and the LLM focuses on filling feature gaps using the extended built-in knowledge base alongside the user's inputs.
I also built in a multi-pass validation pipeline that catches errors after generation and auto-repairs them. If something's off, Vibecore (agentically) sends the files and the errors back to Claude for a fix-up pass.
🆕 What's next?
Since the event, I've slowly continued building and improving Vibecore Studio, addressing bugs, issues, and features I either couldn't get to that night or thought through in the weeks following. I hope to release an official non-Sitecore Hackathon repo version of Vibecore Studio soon!
💭 Closing Thoughts
Hackathon was a blast as always. Mentally taxing and a stressful especially toward the end, yes, but another great experience overall. I’m really proud of what I was able to build in such a short amount of time, and honestly a bit blown away by the power that AI-driven development brings. I hope it inspires others to go even bigger next year.
A big congratulations to the honorable mentions (listed below), and all participants who made it to the end - and a HUGE thank you to the Hackathon admins/judges for another successful event!
Ererenderingdering - Anton Tishchenko
Team Solo - Dylan Young
The Paprika Prophets- Mihály Árvai Volha Makarava
🔗 Links
- Hackathon Submission Source Code: https://github.com/Sitecore-Hackathon/2026-Sitecorepunk-2077
- Hackathon prep post: Sitecore Hackathon 2026 Prep: 8 Tips From a Hackathon Vet
- Demo Video: https://www.youtube.com/watch?v=-TbKYo-N_-4
- X Thread: https://x.com/GabeStreza/status/2030086112853606792
- Sitecore Hackathon 2026 Submission Showcase: https://streza.dev/sitecore-hackathon-2026-entry-showcase/showcase.html
Till next year - happy hacking! 👨💻
0 comments:
Post a Comment