# Sous-Chef

The AI chatbot that converts visitors into briefed leads — live on this very site.

## By the numbers

### Results that moved the needle.

01 **<0s**  
Time to first streamed token

02 **-3**  
Inline rich components (services, plans, Calendly, lead badge)

03 **$0**  
Avg. cost per full lead-capture conversation

## Challenge

For a studio claiming “AI-Native”, a generic contact form isn’t a credential — it’s a liability. Visitors needed proof, not promises: a tangible AI experience that demoed the studio’s capability AND moved them through the funnel automatically. The team also wanted the chatbot to function as a portfolio piece, not just a service tool — every visitor interacting with Sous-Chef is also experiencing a live demo of what AppChefs builds.

## Approach & Solution

We built Sous-Chef from scratch: a Claude Haiku 4.5–powered conversational AI agent embedded as a floating widget. It greets visitors, walks them through services with interactive inline cards (services grid, plan tiers, embedded Calendly modal), and uses Claude tool calling to capture qualified leads — emailing them automatically via Resend when intent is real. Sub-second streaming, a chef-themed personality (Cooking… Whisking… indicator), and a custom security layer (rate-limit, origin allowlist, input validation) keep cost and abuse in check. Prompt caching cuts repeat-input cost ~90%.

## Under the hood

### The actual pipes that power Sous-Chef.

Every message you send to Sous-Chef passes through this exact flow. Hover any node for the technical detail — the same architecture we deploy for client agents.

**INPUT**  
User message  
Visitor types a message in the floating Sous-Chef widget. Sent to /api/chat as JSON over HTTPS — response streamed back via Server-Sent Events.

**GUARDS**  
Security gate  
Per-IP rate limit (10/min, 60/hr), origin allowlist, hard input caps. Blocks abuse and API-key drain before the request ever reaches the model.

**CONTEXT**  
System prompt + KB  
Sous-Chef persona + AppChefs knowledge base (services, pricing, FAQs). Marked with cache_control: ephemeral — Anthropic prompt caching drops repeat-input cost ~90%.

**LLM**  
Claude Haiku 4.5  
Anthropic's fastest model. Decides at each turn: chat, call a tool, or emit a UI directive. Sub-second time-to-first-token thanks to caching + Haiku.

**TOOL USE**  
capture_lead  
When the model has name + email + brief in context, it calls this tool with a structured payload (service_interest, budget_range, timeline) — never invented.

**DELIVERY**  
Resend  
Sends an HTML email with the lead to maryl@theappchefs.com. Reply-to set to the lead's email so replies go straight to them. Also logs to leads.log.

**INLINE UI**  
Component directives  
Model emits {{component:services|plans|calendly}} tokens mid-stream. The widget parses them, replacing the directive with an interactive card the user can click.

**STREAM**  
SSE → user  
Server-Sent Events deliver text deltas, tool results, and lead_captured events token-by-token. The cooking-verb indicator (Whisking, Sautéing…) plays while waiting.

## Tech Stack

### Built with care.

Claude Haiku 4.5  
Claude API  
Tool Use  
MCP  
Vercel  
AI SDK  
Resend  
React 19  
Vite  
SSE Streaming  
Glass UI

**Hey — I'm Sous-Chef, The App Chefs' assistant. I can walk you through our services, monthly Agency Plans, or help you book a discovery call. What are you working on?**  
See services  
Build one like me  
Agency Plans  
Book a call

Powered by Claude · [hello@theappchefs.com](mailto:hello@theappchefs.com)