001
We built our own
AI sales agent.
Then we gave it away.
Clara is an AI chatbot that qualifies leads, answers questions, and books discovery calls - 24/7. We deployed it on our own website first. Now it's free for anyone to use.
// WHY WE BUILT THIS
Your website isn't selling while you sleep.
Most B2B service websites do one thing when a prospect visits at 11pm: nothing. No qualification. No answers. No booking. Just a contact form and a hope.
We had the same problem. Prospects would land on Cloud Employee, read for 30 seconds, and leave - never knowing we could source a senior React developer in under 2 weeks, or that our rates are 60-70% below US market.
We needed something that could hold a conversation, handle the real questions - pricing, timelines, tech stacks - and route serious buyers to a discovery call. We didn't want to pay $445/month for Botpress or $600/month for Chatbase for something we'd have to configure from scratch anyway.
So we built Clara.
// HOW WE BUILT IT
4 weeks. 18 build steps. One working AI sales agent.
Week 1
Foundation
- •Next.js 14 (App Router)
- •Supabase (Postgres + pgvector)
- •Supabase Auth
- •AES-256-GCM key encryption
- •Multi-provider LLM support (Claude + OpenAI)
- •Multi-tenant from day one - every workspace is fully isolated
Week 2
The Chat Engine
- •RAG pipeline: vector search over Q&A pairs → semantic match → LLM synthesis → gap detection
- •Smart escalation: when Clara can't answer, she asks for the visitor's name, then email, then surfaces a Calendly booking link
- •Rate limiting
- •Sliding context window
- •Session tokens
Week 3
Dashboard + Settings
- •Full admin dashboard: knowledge base management, transcript extraction (paste a sales call, get Q&A pairs), gap queue, sessions CRM, styled chat playground
- •Five-tab settings panel: content, style, AI, API keys, embed snippet generator
Week 4
Widget + Integrations + Deploy
- •Embeddable widget via script tag (floating bubble → full chat overlay)
- •Shadow DOM isolation
- •HubSpot contact creation on email capture with custom properties: clara_chat_summary and clara_session_url
- •Slack notification to #aa-leads on booking intent
- •Calendly UTM passthrough to link sessions to bookings
// UNDER THE HOOD
The stack, explained plainly.
Bring Your Own Key
Clara never stores your LLM spend. You connect your own OpenAI or Anthropic key. Your usage, your bill, your data.
| Layer | Technology |
|---|---|
| Framework | Next.js 14, TypeScript, App Router |
| Database | Supabase - Postgres + pgvector |
| AI - Chat | Claude (Anthropic) + OpenAI - bring your own key |
| AI - Embeddings | OpenAI text-embedding-3-small |
| Encryption | AES-256-GCM - keys never stored in plaintext |
| Integrations | HubSpot API, Calendly webhooks, Slack |
| Widget | Vanilla JS, Shadow DOM - embeds on any platform |
| Hosting | Vercel |
// WHAT HAPPENED WHEN WE DEPLOYED IT
Clara on cloudemployee.io - what we saw.
Email capture without asking first
Clara detects emails naturally in conversation - no forced form. Visitors who mention their email get added to HubSpot automatically.
Calendly bookings with session context
Every booking link includes a UTM session token. When a prospect books, the HubSpot record already has the full chat summary and a direct link to the session.
Gap detection in real time
Questions Clara couldn't answer were logged automatically. We resolved them the next morning. The knowledge base got smarter with every conversation.
Slack notifications on booking intent
When a visitor signals intent to book, #aa-leads fires instantly. The Slack message includes the session URL, visitor name, email, and chat summary - everything the BD team needs before the call.
Zero developer dependency for ongoing ops
After deploy, the knowledge base is managed from the dashboard. No code changes needed to add Q&A pairs, update the personality prompt, or review session transcripts.
// SEE IT IN ACTION
From zero to live in under 30 minutes.
sign up → connect API key → build knowledge base → customize widget → deploy to Webflow → review HubSpot contact + Slack notification.
Presented by Jake Berry & Seb Berry, Cloud Employee.
// WHAT WE'D DO DIFFERENTLY
Honest lessons from shipping fast with AI.
01
Design the widget separately from the app.
We nearly coupled widget styling with the dashboard build. Instead we prototyped the widget in a standalone HTML file, locked the design, then handed a precise spec to the AI coding agent. Saved hours of spaghetti.
02
Email-first flows kill conversions.
We tried asking for email upfront. Drop-offs spiked. The fix: Clara detects email passively in conversation. When it's missing, she asks for name first - then email naturally follows. HubSpot contact creation triggers on email. The order matters.
03
Vercel serverless functions don't tolerate floating promises.
Background work (HubSpot sync, session summaries, Slack pings) has to use Vercel's after() API - not void asyncFn(). Functions freeze the moment they return a response. We learned this the hard way.
04
Workspace isolation is non-negotiable from day one.
Every database query filters by workspace_id. We enforced this as an architecture rule before writing a single route. It's the reason Clara works as a true multi-tenant SaaS and not a single-tenant demo.
05
The knowledge flywheel is the real product.
Clara's gap detection - logging unanswered questions - created a feedback loop that made the chatbot smarter after every session. The dashboard gap queue became the most useful tool in the whole product.
06
The two-brain model works.
Strategic planning and session briefs in Claude.ai. Technical execution in Claude Code (terminal). Keeping them separate - fresh context per session - prevented the kind of context overload that tanks complex AI-assisted builds.
// TAKE IT. IT'S FREE.
Clara is open source.
Deploy it yourself.
We built Clara to solve our own problem. Now we're handing it to the community. The full codebase is on GitHub under an open-source licence. Deploy it to Vercel in under 30 minutes with your own Supabase project and API keys.
Clara is built and maintained by Cloud Employee. If you'd like help deploying or customising Clara for your business, we're happy to help.