Bees Knees AI

AI-powered growth platform for local small businesses.

Custom website, AI chatbot, and AI phone receptionist — bundled into one subscription so SMBs never miss a call, lead, or customer.

---

Overview

Bees Knees AI is a real marketing site for an AI agency serving SMBs in Connecticut and the NYC metro area. The headline feature is Buzz, an AI chatbot built directly into the site that acts as a live product demo — visitors can talk to it, and whatever it does for them is exactly what it would do for a future customer.

This project was built solo end-to-end: design, frontend, AI backend, security, and deployment.

Highlights

• Streaming AI chatbot built on the Claude API (Sonnet 4) with server-sent events for token-by-token rendering
• Prompt caching cuts input costs by ~90% on repeated requests within a 5-minute window
• Production-grade security: rate limiting, strict input validation, security headers (HSTS, CSP, Permissions-Policy), and patched dependencies
• Cinematic hero with a custom WebGL shader background
• Scroll-aware UX: the chatbot nudges visitors with context-aware tooltips based on which section they're viewing
• Cal.com integration for instant booking — the chatbot can render a "Book a Call" CTA inline during a conversation

Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router, Turbopack)
Language	TypeScript 5
UI	React 19, Tailwind CSS v4, shadcn/ui (base-nova)
Animation	Framer Motion 12, @paper-design/shaders-react (WebGL)
AI	Claude API (Sonnet 4) via @anthropic-ai/sdk
Scheduling	@calcom/embed-react
Icons	Lucide React
Deployment	Vercel

Architecture

beesknees-website/
├── src/
│   ├── app/
│   │   ├── page.tsx               # Composes all section components
│   │   ├── layout.tsx             # Fonts, metadata, accessibility
│   │   └── api/
│   │       └── chat/route.ts      # Claude streaming endpoint
│   ├── components/
│   │   ├── sections/              # Hero, Pricing, FAQ, Contact, ...
│   │   ├── chat/ChatWidget.tsx    # Floating AI chatbot (Buzz)
│   │   └── ui/                    # shadcn primitives + custom UI
│   └── lib/
│       ├── utils.ts               # cn() helper
│       └── cal.ts                 # Cal.com popup trigger
├── public/
│   └── fonts/                     # Satoshi font files
├── next.config.ts                 # Security headers
├── postcss.config.mjs
├── package.json
├── README.md
└── LICENSE

How the chatbot works

1. User sends a message from the <ChatWidget> client component
2. Message history is POSTed to /api/chat
3. Server validates input (max 50 messages, 4000 char/message, role whitelist) and enforces per-IP rate limiting (10 req/min)
4. A Claude streaming request is opened with a cached system prompt (cache_control: { type: "ephemeral" })
5. Tokens are forwarded to the client as SSE chunks as they arrive from Anthropic
6. The client renders tokens live and detects a [BOOK_CALL] marker to show an inline Cal.com CTA

Security

This project includes production-grade security built in from day one:

• Rate limiting — in-memory per-IP sliding window (10 req/min) on the chat endpoint
• Strict input validation — prevents prompt injection via role: "system", caps message count and length
• Security headers — X-Frame-Options: DENY, X-Content-Type-Options: nosniff, Strict-Transport-Security with 2-year max-age + preload, Referrer-Policy, Permissions-Policy
• Zero known vulnerabilities — all dependencies patched via npm audit fix
• Secrets never committed — root-level .gitignore protects .env, OAuth credentials, and PII data
• Server-side API key — the Anthropic key stays on the server, never shipped to the browser

Performance

• Prompt caching reduces Claude API input costs by ~90% across repeated requests
• Static pages are pre-rendered; only the chat API route is dynamic
• Next.js 16 with Turbopack for faster local development
• Images optimized via next/image, fonts loaded locally via next/font

Getting Started

# Clone the repo
git clone https://github.com/medysaly/beesknees-website.git
cd beesknees-website

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env.local
# Add your ANTHROPIC_API_KEY to .env.local

# Start the dev server
npm run dev

Open http://localhost:3000.

Environment Variables

Variable	Required	Description
ANTHROPIC_API_KEY	Yes	Claude API key for the AI chatbot

Scripts

Command	Description
npm run dev	Start the Turbopack dev server
npm run build	Build for production
npm run start	Run the production build locally
npm run lint	Run ESLint with Next.js + TypeScript

Deployment

Deployed on Vercel. Connect the repo, set ANTHROPIC_API_KEY in project settings, and push to main to deploy.

npx vercel --prod --yes

License

MIT © 2026 Mehdi Salhi

---

Built by Mehdi Salhi — CS student, AI/ML developer, founder of Bees Knees AI