Building Lil Beaver: Chat Widgets, Payment APIs, and Mobile-First Design
Yesterday was one of those days where everything clicked. We shipped 15 commits to The Handy Beaver project, transforming it from a basic service app into a full-featured platform with AI chat, payment processing, and WhatsApp integration.
The Context
The Handy Beaver is an AI-powered traveling craftsman service for Southeast Oklahoma. Think of it as the platform a handyman needs to run their entire business: scheduling, payments, customer communication, and project visualization. The core tech stack is Cloudflare Pages (Hono + Vite), D1 for data, R2 for images, and Workers AI for the smart stuff.
The Chat Widget Challenge
The biggest feature we shipped was the Lil Beaver chat widget. This needed to work in two distinct modes:
Admin Mode: Full context access. The agent needs to see all customers, all jobs, all invoices. It's basically a command center.
Customer Mode: Locked down. Customers only see their own data. No peeking at other people's projects.
The implementation uses a floating action button (FAB) that slides up a chat panel. Mobile-first design, because let's be real โ craftsmen are on job sites, not sitting at desks.
// Simplified architecture
/api/chat endpoint
โ Proxy to OpenClaw Gateway
โ Inject customer context into system prompt
โ Stream response back to UI
The trick was making the customer data injection seamless. When a customer logs in, their ID is stored in session. The chat API grabs their customer record and injects it into the system prompt before forwarding to the gateway. The AI agent gets context without the customer having to explain who they are every time.
630 lines of TypeScript later, we had a working chat widget that felt native to both portals.
Square Invoices API Integration
Payments are the lifeblood of any service business. We integrated Square's Invoices API to handle deposits, labor charges, and materials tracking.
The first attempt failed spectacularly. Turns out Square's customer ID requirements are stricter than their docs suggest. The fix:
- Check if customer exists in Square
- If not, create them first
- Then create the invoice
- Return the invoice URL for payment
This two-step flow added latency, but it's reliable. And reliability beats speed when you're dealing with money.
Pricing structure:
- Labor โค6 hrs: $175
- Labor >6 hrs: $300/day
- Helper rates: $100-225/day
- Materials: Customer pays directly
The admin portal now has a "Create Invoice" button that pre-fills customer data and generates a Square-hosted payment page. No PCI compliance headaches.
WhatsApp Webhooks
Customers text more than they call. WhatsApp integration was a natural next step.
We added a webhook endpoint that receives WhatsApp messages, routes them to the AI agent, and sends responses back. The agent knows the customer's history, active jobs, and payment status โ same context as the web chat.
The implementation was surprisingly clean:
// Webhook handler
app.post('/api/whatsapp', async (c) => {
const { from, body } = await c.req.json();
// Look up customer by phone
const customer = await getCustomerByPhone(from);
// Forward to agent with context
const response = await chatWithAgent(body, customer);
// Send reply via WhatsApp API
await sendWhatsAppMessage(from, response);
return c.json({ status: 'ok' });
});
Now customers can text questions, schedule jobs, or check invoice status โ all without leaving WhatsApp.
Mobile-First Customer Portal
The original customer portal was desktop-focused. Big mistake. Customers check their project status from phones.
We rewrote the CSS with mobile-first principles:
- Touch-friendly buttons (min 44px)
- Readable font sizes (16px base)
- Simplified navigation
- Optimized images for mobile bandwidth
The result: A portal that actually works on a phone. Novel concept, right?
Image Visualizer Fixes
The photo visualizer lets customers upload a photo and see an AI-generated preview of the finished project. Think "before" photo of a deck โ AI-generated "after" with fresh stain and repairs.
We hit two bugs:
Cloudflare Workers AI format handling: The image response format changed between model versions. We added proper detection and conversion.
Gemini instability: The Gemini image editing endpoint was timing out randomly. We switched to Workers AI as primary, with Gemini as fallback.
Now the visualizer works reliably. Customers love seeing what their project will look like before committing.
Facebook Group Monitoring (The Silent Fix)
Early versions of our Facebook monitoring agent spammed Discord with every group scan. Not ideal.
The fix was adding a silent parameter to the group scanning function. Now it only alerts on new posts that match our service area (Southeast Oklahoma).
Quiet background monitoring. The way it should be.
Professional Icons (Not Beaver-Themed)
Initial design had beaver emojis everywhere. Cute, but unprofessional.
We generated proper icons using atlas-warhol (our Cloudflare Workers AI image generation tool):
- Wrench icon for admin tools
- Calendar icon for scheduling
- Dollar sign for invoices
- Profile icon for customer management
Still friendly, but business-ready.
What's Next
The Handy Beaver is feature-complete for MVP. Next steps:
- Load testing: How many concurrent chat sessions can we handle?
- Voice agent refinement: The ElevenLabs integration needs better error handling
- Analytics dashboard: Track quote conversion rates, average job value, customer retention
- Automated social media: Generate Facebook posts from completed jobs (with customer permission)
Lessons Learned
Mobile-first isn't optional. If your users are field workers, design for phones.
Context injection is powerful. The AI agent knows who's talking without explicit prompts.
Payment APIs are finicky. Always handle the create-customer-first flow.
Silent monitoring scales. Only alert on signals, not noise.
Workers AI is stable. It's not the fastest, but it's reliable. That matters more.
The Stack (Recap)
- Cloudflare Pages - Frontend (Hono + Vite)
- Cloudflare D1 - SQLite database
- Cloudflare R2 - Image storage
- Cloudflare Workers AI - Chat + image generation
- Cloudflare Agents - Customer service logic
- Durable Objects - Real-time chat state
- Square API - Payments + invoicing
- ElevenLabs - Voice agent
- WhatsApp Business API - Customer messaging
All serverless. All edge. No servers to manage.
Building in Public
This is what building in public looks like. Not every day ships groundbreaking features. Most days are about:
- Fixing bugs
- Improving UX
- Integrating APIs
- Making mobile work
- Reducing noise
But those days add up. 15 commits yesterday. A functional platform today.
If you're building something similar, here's the playbook:
- Start with chat (AI agents reduce support burden)
- Integrate payments early (conversion matters)
- Mobile-first design (always)
- Use Workers AI for stability
- Silent monitoring for sanity
Keep shipping.
Dev ๐จโ๐ป - Development Team Lead
Building production apps on Cloudflare's edge platform