Inspiration
Every SaaS company promises fast onboarding. Then reality hits: a scheduling link, a 45-minute screen-share, and a customer who is still stuck three days later.
We kept coming back to the same observation - onboarding doesn't scale because it depends on a human being awake. Every customer has a different use case, a different technical setup, and a different timezone. There is no single flow that works for all of them, but no CS team has the bandwidth to run a custom process for each one. So your best people spend their week repeating the same walkthrough, and when a customer hits a step they can't get past, they go quiet. That silence is usually where churn starts.
Support chatbots don't fix this. They answer questions about a product. They can't see that you're on the wrong tab, or that you just picked the wrong tax code. We wanted to build the thing that can.
What it does
Zen is an AI onboarding agent that works directly with your customers instead of your team. It does four things:
- Understands — it opens a session by asking what the customer is actually trying to accomplish, then builds a plan for them. No fixed script.
- Sees — the customer shares their screen with one click, so Zen knows exactly which step they're on and never gives generic instructions that don't match what's in front of them.
- Guides — it spotlights the exact button, explains why it matters, and waits. If the customer takes a wrong turn, it course-corrects in real time.
- Escalates — for the genuinely human problems (pricing, contracts, real bugs) it hands off to your team with the full transcript and completed steps attached.
Meanwhile your team keeps full visibility through an Admin Hub: who's progressing, who's stuck, what Zen couldn't answer, and where customers drop off across the whole funnel.
How we built it
The prototype is deliberately dependency-free: hand-written HTML, CSS and vanilla JavaScript, no framework and no build step. For a hackathon that meant zero setup friction and a demo that deploys anywhere as static files.
Three surfaces:
- Landing page — the product story, with an interactive walkthrough of the four capabilities.
- Live session (
demo.html) — the heart of it. A simulated SaaS product where Zen runs an actual guided flow: it asks the goal, dims the page and spotlights the real target element viagetBoundingClientRect, walks the user through a third-party OAuth screen, catches a configuration mistake, and ticks off a live session plan as steps complete. - Admin Hub (
dashboard.html) — progress tracking, an escalation queue, live session monitoring, and a drop-off funnel with an AI-generated read on why the drop is happening.
We built a small design system first — one purple accent, hairline column rules, 4px radii, one typeface — so three very different pages still felt like one product.
Challenges we ran into
Making guidance feel alive, not scripted. Our first pass dumped all of Zen's messages instantly and it read like a FAQ. Adding typing indicators, staggered delays and a visible session timer changed the entire perception — the same content suddenly felt like a conversation.
Layering. The spotlight works by casting a 9999px box-shadow over the whole page. That's elegant until a modal opens and the highlight vanishes behind it. Getting the z-index stack right across the dimmer, the coach mark, the OAuth dialog and the agent panel took more iterations than we expected.
Choosing the demo moment. A connect-an-integration flow is boring on its own. The scenario only became compelling when we added a mistake for Zen to catch — a health provider whose tax code should be GST-FREE, not GST 10%. That single beat is what separates "chatbot" from "agent that can see."
Scoping honestly. We had one submission window, so we chose depth over breadth: one flow that feels genuinely real, rather than five that feel like mockups.
Accomplishments that we're proud of
The live session is fully interactive, not a video. You can click through it, take a wrong turn and watch Zen redirect you, cancel the OAuth screen and get recovered, type a free-text question and get a contextual answer, or ask for a human and watch the escalation happen. Judges can drive it themselves.
What we learned
Onboarding is not a knowledge problem, it's a context problem. Customers usually aren't missing information — the docs exist. They're stuck on which of the six similar-looking buttons applies to their specific setup, right now. That reframing drove every design decision: screen awareness matters more than a bigger knowledge base, and knowing when to escalate matters more than trying to answer everything.
What's next for Zen - AI Onboarding Agent
This submission focuses on the interaction model — the part we believe is hardest to get right and least understood. With the agent loop and session architecture in place, the roadmap opens up in four directions:
From onboarding to full lifecycle. Onboarding is the wedge, not the product. The same screen-aware agent that gets a customer live can drive feature adoption at day 30, run renewal readiness checks at day 300, and surface expansion moments the CS team would never have spotted manually. One agent, the entire customer journey.
A closed learning loop. Every escalation is a labelled training example — a moment the agent couldn't handle and a human then resolved. Feeding resolved escalations back into the knowledge layer means Zen's coverage compounds automatically, and the escalation rate should fall every week without anyone writing documentation.
Proactive, not reactive. Right now a session starts when a customer opens one. The bigger unlock is Zen noticing that an account has stalled on the same step for four days and reaching out first — in-app, by email, in their language, at a sensible hour for their timezone. The customers who churn are usually the ones who never asked for help.
Product intelligence as an output. Zen sits at the exact point where users struggle, at scale, with full context. That's the best product research signal a company has and today it evaporates into support tickets. We want aggregated friction reports filed straight into Linear or Jira: "31 of 84 customers this month failed at Sync CRM for the same reason — here's the fix."
Alongside those: voice sessions for non-technical users, an agent builder so CS teams can author flows without engineering, cross-app journeys that follow the customer into the tools they connect, and VPC/on-prem deployment for regulated industries.
Built With
- css3
- fontshare
- git
- github
- github-copilot
- html5
- javascript
- langfuse
- llm
- nango
- node.js
- oauth
- pgvector
- postgresql
- prototyping
- responsive-design
- spa
- svg
- ui-ux
- vs-code
- web-animations
Log in or sign up for Devpost to join the conversation.