Project Info
An AI product specialist that runs live, personalized software demos on your website, 24/7.
Inspiration
For most B2B software companies, the live demo is where deals are won, and it is also the biggest bottleneck in the funnel. A visitor lands on the site with real intent, clicks "Book a demo," fills out a form, and then waits days for a calendar slot. By the time a human rep finally jumps on a generic call, the moment of interest is long gone. Demos do not scale: reps are expensive, they sleep, they are not available the instant a prospect is curious, and they cannot be in fifty time zones at once. The result is a leaky funnel where the vast majority of interested visitors never see the product actually work. We wanted to remove that bottleneck entirely. What if every visitor could get a real, live demo the second they wanted one, with a specialist who already knows the product cold, drives the actual app on screen, adapts to who is asking, and remembers them next time? That is Demoless: it sits on a company's site and demos their product for them, around the clock, so sales teams wake up to warm, qualified pipeline with full conversation context instead of cold form fills.
What it does
Demoless is an AI-led product demo platform. A visitor enters a few details, joins a live call, and talks to an AI product specialist named Messi. From the visitor's point of view: They talk, Messi talks back. Messi listens through the microphone (speech to text), thinks, and answers out loud with natural, low-latency voice. The visitor can interrupt mid-sentence and Messi stops and adjusts, the way a real rep would. Messi drives the real product live. Instead of describing features, Messi opens an actual cloud browser session that the visitor watches in real time, navigating the live product, clicking through real flows, and narrating only the value, not the clicks. It grounds every answer in the product. Before stating a fact, Messi retrieves the most relevant product documentation through semantic search, so answers are grounded in the company's real docs rather than guessed. It personalizes to who is asking. The visitor picks their role on the way in, which Messi classifies into a technical or non-technical persona and matches its depth and language to: precise and technical for engineers and builders, plain and outcome-focused for product, ops, and marketing roles. It keeps refining that read as the conversation unfolds. It remembers the buyer. Useful context (pain points, interests, objections, next steps) is saved during the call, and a returning visitor is greeted with a callback to what they cared about last time. It speaks multiple languages. The voice loop supports English, Spanish, and Mandarin, switchable on the fly, and can auto-detect the visitor's language from their first words. It hands off to the team. Every session is saved and analyzed into a post-demo packet for an operator dashboard, so the sales team gets structured, evidence-backed insights instead of a raw transcript. After each demo the agent also reflects on how it went and captures lessons it can apply to future demos. How it works (end to end) A single streaming "brain" owns voice, browser control, and memory at once. As Claude generates a reply, the system speaks it sentence by sentence so the visitor hears the first words before the full answer is finished, and it executes browser and memory actions in the same loop.
How we built it
Frontend: Next.js (App Router) with TypeScript and Tailwind CSS for the buyer-facing demo room and the operator dashboard. Next.js API routes serve the supporting data (agent name, operator info, the live notes feed, and auth), while the live demo itself streams over a WebSocket to the voice backend. Shared types: TypeScript across the whole stack. The frontend and backend share the same types for the voice protocol messages, buyer memory, and session records, which kept the real-time contract between them reliable. Voice backend: A Node WebSocket gateway manages each live conversation: turn-taking, barge-in (interruption handling), session lifecycle, and streaming audio to the browser. Speech: Deepgram for speech to text (nova-3) and text to speech (Aura-2), with a provider-agnostic TTS layer that also supports OpenAI and ElevenLabs voices. Mandarin output routes to OpenAI because it has the voice coverage Aura lacks. Brain and tool use: Anthropic's Claude is the orchestrator, running a streaming native tool-use loop with six tools (navigate, click, look, remember, search the knowledge base, and report sales phase). We run Claude Haiku 4.5 for cheaper token usage at the volume a 24/7 agent demands, and the same model handles post-session analysis and cross-session learnings. The model is configurable. Live browser: Browserbase powers each cloud browser session, using Sessions, an embeddable live view the visitor watches, replay links, persistent pre-authenticated contexts (to demo signed-in products), and a Playwright integration so Messi drives the real product. Stealth and proxy support is available for sites that need it. Memory and storage: Redis and Redis Stack hold two separate layers: per-buyer memory (profile and notes, ranked by importance and recency) and a product knowledge base (a larger document corpus retrieved by semantic search). Redis also backs session and dashboard state. Retrieval: OpenAI embeddings power vector search over the product knowledge base so Messi answers from real docs. Tooling: The project was built and debugged with Claude Code.
Challenges we ran into
Making the agent feel like a sharp rep, not a tour guide. Getting Messi to show rather than narrate, lead with the buyer's biggest pain, and stop selling past a yes took heavy prompt engineering and persona tuning. Solved. Two memories that should not be confused. "Who is this buyer" and "what does the product do" are different problems with different storage and retrieval. We built them as two distinct Redis-backed layers, one ranked by importance and recency, the other by semantic vector search. Solved. Latency in a real-time voice loop. Speech, model output, browser actions, and audio playback all compete for the same seconds. We pipelined text to speech per sentence, cached the model prompt prefix, and tuned endpointing and barge-in so the conversation feels live. Solved.
Accomplishments we're proud of
A single streaming brain that listens, thinks, talks, drives a real browser, and remembers, all in one loop. Persona-aware demos: the visitor's selected role drives a technical or non-technical persona that shifts the agent's depth and language, refined further through the conversation. A complete memory and storage system covering agent memory, grounded knowledge retrieval, and post-demo insights. Real-time voice with interruption handling and multilingual support (English, Spanish, Mandarin). Demonstrably smarter responses through prompt engineering, agent memory, and disciplined tool use, plus the foundation for the agent to learn from each completed demo.
What we learned
We learned how to build an autonomous, agentic system from scratch and make it genuinely useful in real time: coordinating voice, live browser control, retrieval, and memory inside one streaming loop without it falling apart under latency. We learned how much of an agent's quality lives in prompt design, persona shaping, and grounded tool use rather than the model alone, and we designed the storage and knowledge layers with future scaling in mind as the user base grows.
What's next
CRM integration with tools such as HubSpot, Salesforce, and Clay, so qualified pipeline and full conversation context flow straight into the sales team's workflow. Deeper self-improvement for the agent, moving from per-session reflection toward continuous learning loops and reinforcement from outcomes. FAQ and conversion logs that capture recurring questions and the answers that led to buying intent, so the agent responds faster and sells better over time. Additional tool access so the agent can demo more complex workflows.
Demoless
Tagline: Live product demos, run by an AI rep that can listen, talk, browse, remember, and follow up.
Demoless is an AI-led product demo app. A visitor enters a few details, joins a live call, and talks to an AI product specialist named Messi. Messi listens through the microphone, answers with voice, drives a real browser session that the visitor can watch, remembers useful buyer context, and saves the session for the post-demo dashboard.
The reference demo in this repo is for Browserbase, but the project is structured so the target product, prompt, knowledge base, and browser destination can be changed.
What This Project Does
Demoless combines a web app, a voice gateway, a browser automation layer, and memory/session storage into one live demo experience.
- A visitor starts on the landing page.
- The pre-call form collects name and work email so the demo can be attached to a real buyer record.
- The demo room opens and automatically starts the voice session.
- Messi greets the visitor, asks what they want to figure out, and listens for spoken or typed input.
- The server transcribes speech with Deepgram, sends the conversation to the AI orchestrator, and streams spoken replies back to the browser.
- When useful, the orchestrator drives a real Browserbase cloud browser session and sends the live view URL to the demo room.
- Memory and session events are stored so the dashboard can show live activity, past sessions, notes, and recap data.
Core Functionality
Live demo room
The main experience lives in components/DemoRoom.tsx. It shows the watched browser, voice status, captions, chat input, language toggle, and call controls. It uses lib/voice/useVoiceAgent.ts to connect to the voice WebSocket server.
Voice agent
The browser captures microphone audio with public/worklets/pcm-capture.js, sends raw PCM to the voice gateway, and plays streamed TTS audio back through the client. The shared message contract is in lib/voice/messages.ts.
Voice gateway
server/index.ts starts the WebSocket server. Each connection creates a VoiceSession in server/session.ts. A session owns turn-taking, speech-to-text, text-to-speech, barge-in, language switching, buyer identity, browser startup, and session snapshots.
AI brain and orchestration
The orchestrator in server/orchestrator/ decides what to say and what actions to take. It builds prompts from product config, buyer notes, cross-session learnings, and the current page. The lower-level model/tool loop lives in server/brain/.
Browser automation
The server starts a Browserbase cloud browser through lib/browser/session. The live view is embedded in the demo room, so the visitor watches the product being navigated in real time.
Memory and learnings
The memory layer in lib/memory/, lib/knowledge/, lib/learnings/, and lib/sessions/ stores buyer context, product knowledge, session events, replay metadata, and distilled learnings from past demos. Redis is used for this layer.
Dashboard
The dashboard components read saved sessions and buyer context so teams can review what happened after the call.
Tech Stack
TypeScript
Used across the app, server, tests, and shared contracts. The frontend and backend share types for voice messages, demo state, sessions, and memory.
Next.js 15 and React
Power the web app in app/ and components/. Next.js serves the landing page, pre-call flow, demo room, dashboard, and API routes such as /api/agent-name.
Tailwind CSS
Provides the design system and utility styling. Theme tokens live in tailwind.config.ts.
Node.js
Runs the voice gateway, model orchestration, Browserbase session management, memory scripts, smoke tests, and build tooling.
WebSocket (ws)
Connects the browser to the local voice server for low-latency audio, captions, state updates, live browser URLs, and typed chat messages.
Deepgram
Provides speech-to-text and the default text-to-speech voice. The active voice can also determine the agent display name unless AGENT_NAME overrides it.
Anthropic
Used by the orchestrator for the AI demo brain and tool-use flow.
Browserbase and Playwright
Create and control the real cloud browser session that the visitor watches during the demo.
Redis / Redis Stack
Stores memory, product knowledge search data, sessions, dashboard state, and learnings. Redis Stack is recommended because product knowledge search uses RediSearch.
OpenAI
Used for embeddings in the product-knowledge system and for Mandarin TTS fallback when configured.
Vitest
Runs unit tests for the server, orchestration, memory, and session behavior.
Setup
These steps are written for someone who just wants to run the project locally.
1. Install the basics
Install these first:
- Node.js 20 or newer: https://nodejs.org/
- Git: https://git-scm.com/
- A code editor such as VS Code: https://code.visualstudio.com/
Then open a terminal in the project folder.
On Windows PowerShell, this repo is currently at:
cd C:\Users\zhenl\Downloads\demoless
2. Install project packages
npm install
This downloads the libraries listed in package.json.
3. Create your local settings file
Copy the example environment file:
Copy-Item .env.example .env.local
On macOS or Linux:
cp .env.example .env.local
Open .env.local in your editor and fill in the keys you have.
For the full live voice demo, you usually need:
DEEPGRAM_API_KEYANTHROPIC_API_KEYBROWSERBASE_API_KEYBROWSERBASE_PROJECT_IDREDIS_URLOPENAI_API_KEYif you want product-knowledge embeddings or Mandarin TTS fallback
To force the agent name to Messi, add or keep:
AGENT_NAME=Messi
4. Run the web app only
Use this if you just want to see the screens without the voice gateway:
npm run dev
Then open:
http://localhost:3000
5. Run the full voice demo
Use this when your .env.local has the voice, AI, browser, and memory keys:
npm run dev:all
This starts:
- Web app:
http://localhost:3000 - Voice gateway:
ws://localhost:3001
Open http://localhost:3000, start a demo, allow microphone access, and join the call.
6. Optional: Run Redis locally
If you do not already have Redis, you can run Redis Stack with Docker:
docker run -p 6379:6379 redis/redis-stack:latest
Then set this in .env.local:
REDIS_URL=redis://localhost:6379
7. Useful commands
npm run dev # Start the Next.js web app only
npm run dev:voice # Start the voice gateway only
npm run dev:all # Start both web app and voice gateway
npm run build # Create a production build
npm run start # Run the production web server
npm test # Run the test suite
npm run smoke # Run the voice/server smoke test
Project Map
| Path | Purpose |
|---|---|
app/ | Next.js routes and API endpoints |
components/ | Landing page, pre-call form, demo room, dashboard, providers |
lib/voice/ | Browser-side voice hook, audio playback, shared message types |
server/ | Voice gateway, session lifecycle, orchestration, STT/TTS, model loop |
lib/browser/ | Browserbase session helpers |
lib/memory/ | Buyer memory and Redis-backed storage |
lib/knowledge/ | Product knowledge search and embeddings |
lib/learnings/ | Cross-session learning extraction |
lib/sessions/ | Session recording, replay metadata, analysis storage |
public/worklets/ | Browser AudioWorklet for microphone capture |
docs/ | Architecture notes, dogfooding plans, and implementation history |
scripts/ | Utility scripts for memory, knowledge, sessions, and learnings |
Common Problems
The page opens, but voice does not work.
Make sure you ran npm run dev:all, allowed microphone access, and filled in DEEPGRAM_API_KEY.
The agent cannot think or answer normally.
Check ANTHROPIC_API_KEY.
The watched browser does not appear.
Check BROWSERBASE_API_KEY, BROWSERBASE_PROJECT_ID, and DEMO_TARGET_URL.
Memory or dashboard data is missing.
Check REDIS_URL. The demo can still run without some memory features, but saved context and knowledge search may be limited.
Port 3000 or 3001 is already in use.
Stop the other process using that port, or change VOICE_SERVER_PORT for the voice gateway.
Customizing The Demo
To demo a different product, update:
DEMO_TARGET_URLin.env.local- product copy and prompt in
lib/demoConfig.ts - product knowledge data and seeding scripts if you are using knowledge search
- any UI copy that should mention the new product
The app is currently configured around Browserbase and the AI rep name Messi.
Analysis
View
Metric
- 105
- 59
- 39
- 11
- 8
- 3
Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.
Technology
- AnthropicIn code
- CSSIn code
- JavaScriptIn code
- Next.jsIn code
- ReactIn code
- Tailwind CSSIn code
- TypeScriptIn code
- Node.jsClaimed
- OpenAIClaimed
7 of 9 appear in the indexed code. 2 claimed on Devpost could not be matched to code, which may simply mean the tool leaves no trace in the repository.
AI coding agents
- Claude CodeConfig · Commits
- CursorConfig · Commits
Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.
Codebase size
Source size
3.1 MB
Source files
286
Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.
Repository
FisherXZ/demoless
348 files · 8.2 MB · @ f972f86
Structure
Interface
24 files · 7%Screens, components and styles rendered to the user.
+1 moreAPI & routing
48 files · 14%Request entry points: routes, handlers and controllers.
+5 moreApplication logic
74 files · 21%Domain rules, services and shared utilities.
+9 more
Supporting
Layers are inferred from where files sit in the tree, not from reading the code. A project that names its directories unconventionally will read oddly here — open the file browser to check anything the diagram implies.
Languages
- Markdown74%
- TypeScript26%
- CSS0%
- YAML0%
- JavaScript0%
Share of indexed source by file size. Binary and vendored files are excluded.
Dependencies
package.json
npm · 24- @anthropic-ai/sdk
- @browserbasehq/sdk
- @deepgram/sdk
- ioredis
- next
- next-auth
- playwright-core
- react
- react-dom
- ws
- zod
- +13 more
Declared in the repository’s manifests at the indexed commit. A declared package is not proof it is used, and runtime dependencies are listed first.
This project’s features have not been analysed yet.
Export this project's context (description, README, evidence, key source files) to chat with an AI agent elsewhere.