Your warm, wish-granting Sri Lankan AI personal shopper for Kapruka.com
Shop anything on Sri Lanka's largest store — groceries, gadgets, fashion, flowers & gifts — get island-wide delivery quotes, and complete a guest checkout, all in one beautiful, full-screen conversation.
Kalpa — named after the Kapruka / Kalpavruksha, the celestial wish-granting tree — is a hosted, full-screen AI shopping experience built for the Kapruka Agent Challenge. She isn't a chat widget bolted onto a store — she is the store: a warm, sharp personal shopper for everything Kapruka carries — electronics, groceries, fashion, home, beauty, baby, plus flowers, cakes & gifts. She leads with products (never a wall of questions), shows them as rich cards inline in the conversation, lets you snap a photo of anything to find it, suggests sensible add-ons, quotes delivery to any Sri Lankan city, and — with no forms — gathers your delivery details in chat and hands you a click-to-pay link, in English, Sinhala (සිංහල), Tamil (தமிழ்), or romanised Tanglish/Singlish.
Everyday shopping is the main job; gifting by occasion is one thoughtful mode. Powered by Claude + the Kapruka MCP — every product, price, and delivery quote is real, live catalog data.
- Everything in the chat — products, cart, and checkout all live in one conversation. No drawers, no forms, no page you get dumped to.
- Products-first replies — no interrogation; Kalpa searches immediately and shows a curated set, inviting you to refine (budget, brand, size, city) in one line.
- Shop-by-category landing — tap Electronics, Groceries, Fashion, Home & Living, Beauty, Baby & Kids, Flowers & Cakes, or Gifts and Kalpa pulls real items (a department means products, never a wall of categories).
- Proactive add-ons — a case & screen guard with a phone, batteries with a toy, a card with a gift.
- Buy it again — past orders are saved (in your browser) as one-tap reorders on the welcome screen.
- Product cards with image, price, stock, Add to cart, and a direct View on Kapruka link.
- Find a product from a photo — tap the camera in the message box to take a photo or upload one; Kalpa's vision identifies the item and searches Kapruka for it (or the closest things in stock).
- Powered by Claude's multimodal vision →
kapruka_search_products— no separate image-search service.
- Mention an occasion (birthday, anniversary, Avurudu, get-well, newborn, thank-you…) or buy for someone else and Kalpa switches to thoughtful-gift mode.
- Suggests a short gift-card message and gathers cake icing text — all in chat.
- One centered conversation at every breakpoint — Kalpa fills the screen, she isn't a side widget.
- Chat-first landing — a compact hero with the prompt bar as the centerpiece, then Quick questions, Buy it again, and a quiet browse-by-category grid. Once you start chatting, the composer pins to the bottom.
- Product carousels render inline; the cart is an inline panel above the composer (adjust quantity, remove, check out) — no slide-in drawers or modals.
- Auto-growing composer with a photo attach button (Enter sends, Shift + Enter for a new line), styled tooltips, animated avatar, loading skeletons, graceful image fallback.
- Top-of-page switcher: English · සිංහල · தமிழ் — the entire UI localizes (hero, prompts, cart, tooltips, errors…), and Kalpa replies in the chosen language. Choice is remembered.
- Kalpa also detects and mirrors the language you type — including Singlish (romanised Sinhala) and Tanglish (romanised Tamil) — rendered in a proper Sinhala serif. The Quick-questions row showcases all five.
- One-tap theme toggle in the header, persisted and respecting your OS preference (no flash on load); the whole palette flips via CSS variables.
- Delivery quotes for any Sri Lankan city, with date + perishable-freshness awareness.
- Inline delivery actions — Place order or Change delivery date (with a calendar) right under a quote.
- The whole point: kill the 7-minute form flow. When you're ready, Kalpa gathers the delivery name, address, city and date in chat, confirms, and creates the order.
- Inline cart with quantity controls · real guest-checkout pay link · order tracking.
- New chat without reloading · edit & resend any prompt.
- Fails loudly, never silently — a 55s watchdog and empty-response detection surface a clear reason + Try again instead of hanging.
- Motion respects
prefers-reduced-motion.
Browser (full-screen chat) Vercel / Next.js Anthropic Kapruka MCP
────────────────────────── ──────────────── ───────── ───────────
inline cards · cart · chat ──POST─▶ /api/chat (streaming) ─────▶ Claude ─────▶ mcp.kapruka.com
+ MCP connector (7 tools) (live catalog)
▲ tagged event stream ◀──── mcp_tool_result blocks ◀──────────────────────────┘
app/api/chat/route.tsstreams a tagged event stream to the browser. It calls Claude with the Anthropic MCP connector pointed athttps://mcp.kapruka.com/mcp, so Claude runs the Kapruka tools server-side.lib/kapruka.tsnormalizes tool results into typed products / quotes / orders; the UI renders them as deterministic cards inline in the chat (never hallucinated).- There is no checkout form — recipient and delivery details are collected conversationally and passed straight to
kapruka_create_order. - An attached photo is sent as a multimodal image block; Claude identifies it and calls
kapruka_search_products— no extra image-search service.
| Tool | Powers |
|---|---|
kapruka_list_categories |
Category browsing |
kapruka_search_products |
Product search + curation |
kapruka_get_product |
Product detail |
kapruka_list_delivery_cities |
City resolution |
kapruka_check_delivery |
Delivery quote + freshness |
kapruka_create_order |
Guest checkout → pay link |
kapruka_track_order |
Order tracking |
npm install
cp .env.local.example .env.local # add your ANTHROPIC_API_KEY
npm run dev # → http://localhost:3000Heads-up: if your shell already exports a stale
ANTHROPIC_API_KEY, Next won't let.env.localoverride it — runenv -u ANTHROPIC_API_KEY npm run dev.
npm test # Vitest — pure normalizer + stream-codec unit testsOne click — it clones the repo and prompts for the one required env var:
| Env var | Required | Notes |
|---|---|---|
ANTHROPIC_API_KEY |
✅ | Your sk-ant-… key from console.anthropic.com |
KALPA_MODEL |
– | Override the model (default claude-opus-4-8; e.g. claude-sonnet-4-6 for cheaper/faster public traffic) |
Next.js 14 (App Router) · TypeScript · Tailwind CSS · Anthropic Claude (MCP connector) · Kapruka MCP · Vitest · deployed on Vercel.
app/
api/chat/route.ts Streaming agent endpoint (Claude + MCP connector)
layout.tsx · page.tsx Shell, fonts, theme, metadata
components/
ChatProvider.tsx State: messages, cart, order history, language, streaming + stall watchdog
Chat.tsx Full-screen single-column chat shell
Composer.tsx Message box — photo attach + auto-growing input + send
CanvasHero.tsx Landing: hero, prompt bar, Quick questions, Buy-it-again, browse
LanguageSwitcher · ThemeToggle Header controls (language + light/dark)
KalpaAvatar · Backdrop · CategoryChips · Tooltip
ProductCard · ProductCarousel · DeliveryQuoteCard · DeliveryActions · PayLinkCard · TrackingCard
CartBar · CartPanel · BuyAgain · MessageBubble · Markdown · TypingIndicator · Skeletons
lib/
agent.ts Kalpa persona + Claude/MCP streaming (+ reply-language hint)
i18n.ts UI strings (en/si/ta) + shared multilingual starters
catalog.ts Category tiles (i18n keys + search query)
checkout.ts cartLines() — cart items → conversational order request
message.ts buildUserContent() — text or text+image blocks for the API
image.ts Downscale a picked photo → base64 for the image block
orderHistory.ts localStorage-backed reorder history
kapruka.ts Typed, tolerant tool-result normalizers
stream.ts Tagged server→browser event codec
mcp.ts Minimal server-side Kapruka MCP client
Theme colors are CSS variables in app/globals.css (light :root / .dark), surfaced as Tailwind tokens (bg-surface, bg-card, text-ink, ring-line, bg-brand…).
Built with 💜 in Sri Lanka for the Kapruka Agent Challenge.