The website chatbot is no longer the "scripted" scam of the 2010s. With Claude API in 2026, it becomes an assistant that understands, qualifies, offers a quote. For an African SME, it's the #1 conversion amplifier in 2026.
TL;DR
- Stack: Claude API (claude-haiku-4-5 or claude-sonnet-4-6) + Next.js + Postgres conversation persistence.
- Monthly cost: 5-30K XOF per traffic.
- Performance: 60-75% questions resolved without human, 25% conversion to WhatsApp/quote.
Target architecture
`
[Site visitor] → [Bottom-right chatbot widget]
↓
[Claude API streaming]
↓
(System prompt with product context + tools)
↓
[Text response + tool calls]
↓
(Tools: booking, quote, WhatsApp transfer)
↓
[Responsive UI]
`
Step 1 — Next.js backend + Claude API
`ts
import Anthropic from '@anthropic-ai/sdk';
import { prisma } from '@/lib/prisma';
const anthropic = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY! });
const SYSTEM_PROMPT = `You are Kolonell's chatbot assistant, digital agency in Dakar.
You help visitors with:
- Service questions (websites, e-commerce, SEO, branding)
- Pricing (Starter from 350K XOF, Pro 750K, Premium 1.5M+)
- Timelines (Starter 7-10 days, Pro 21 days, Premium 6-8 weeks)
- Booking / WhatsApp for in-depth discussion
You respond in French warmly, professionally, concisely (max 3 sentences).
If question is out of scope or needs human, suggest WhatsApp +221 77 596 93 33.
You NEVER give a precise price not listed above.`;
export async function POST(req: Request) {
const { sessionId, messages } = await req.json();
const response = await anthropic.messages.create({
model: 'claude-haiku-4-5-20251001',
max_tokens: 512,
system: SYSTEM_PROMPT,
messages: messages.map((m: any) => ({ role: m.role, content: m.content })),
tools: [
{
name: 'request_quote',
description: "Detailed quote request via WhatsApp",
input_schema: {
type: 'object',
properties: {
project_type: { type: 'string', enum: ['website', 'ecommerce', 'app', 'seo', 'other'] },
budget_estimated: { type: 'string' },
timeline: { type: 'string' },
},
required: ['project_type'],
},
},
{
name: 'transfer_whatsapp',
description: "Transfer conversation to human via WhatsApp",
input_schema: {
type: 'object',
properties: { reason: { type: 'string' } },
},
},
],
});
await prisma.chatbotConversation.upsert({
where: { sessionId },
update: { messages: [...messages, { role: 'assistant', content: response.content }] },
create: { sessionId, messages: [...messages, { role: 'assistant', content: response.content }] },
});
return Response.json({ response: response.content });
}
`
Step 2 — frontend widget
`tsx
'use client';
import { useState } from 'react';
interface Message { role: 'user' | 'assistant'; content: string; }
export function Chatbot() {
const [open, setOpen] = useState(false);
const [messages, setMessages] = useState
{ role: 'assistant', content: "Hello! How can I help? I can answer your questions about our services, pricing, and timelines." },
]);
const [input, setInput] = useState('');
const [loading, setLoading] = useState(false);
const [sessionId] = useState(() => crypto.randomUUID());
async function send() {
const userMsg: Message = { role: 'user', content: input };
const newMessages = [...messages, userMsg];
setMessages(newMessages);
setInput('');
setLoading(true);
Need a professional website?
Kolonell builds websites that attract clients, optimized for the Sénégalese market. Free quote in 2 minutes.
const res = await fetch('/api/chatbot', {
method: 'POST',
body: JSON.stringify({ sessionId, messages: newMessages }),
headers: { 'Content-Type': 'application/json' },
});
const { response } = await res.json();
const assistantText = response.find((c: any) => c.type === 'text')?.text ?? '';
setMessages([...newMessages, { role: 'assistant', content: assistantText }]);
setLoading(false);
}
return (
<>
💬
{open && (
{messages.map((m, i) => ( {m.content} ))} {loading && className="flex-1 border rounded px-3 py-2" value={input} onChange={e => setInput(e.target.value)} onKeyDown={e => e.key === 'Enter' && send()} placeholder="Type your question..." />
)}
);
}
`
Step 3 — monthly costs
| Site traffic | Conversations/mo | Tokens/conv | Monthly cost |
|---|---|---|---|
| 1,000 visits | 80 | 800 | $1.5 (~900 XOF) |
| 10,000 visits | 800 | 800 | $15 (~9K XOF) |
| 50,000 visits | 4,000 | 800 | $75 (~45K XOF) |
| 200,000 visits | 16,000 | 800 | $300 (~180K XOF) |
With Claude Haiku 4.5 ($0.25/MT input, $1.25/MT output). For complex questions needing Sonnet, multiply costs ~5×.
Step 4 — advanced prompt engineering
Prompt caching to cut costs
Long system prompts (catalog, FAQ, pricing) can be cached to save 90% input tokens:
`ts
const response = await anthropic.messages.create({
model: 'claude-haiku-4-5-20251001',
max_tokens: 512,
system: [
{
type: 'text',
text: SYSTEM_PROMPT_LONG, // 5000+ tokens
cache_control: { type: 'ephemeral' },
},
],
messages: [...],
});
`
Cache TTL: 5 min. Cache hit = $0.03/MT instead of $0.25/MT.
Include FAQ + catalog in system prompt
List your 30 FAQs + 50 products in the system prompt. Claude responds accurately without calling your APIs.
Limit temperature
temperature: 0.3 for consistent answers (vs 1.0 = creative).
Common pitfalls
- Price hallucinations — strict system prompt "NEVER give a precise price not listed".
- Too long conversations — cap at 20 messages, archive / summarize.
- No fallback — if Claude API drops, show "Our assistant is temporarily unavailable. Contact us via WhatsApp: ...".
- Sensitive data — NEVER ask for password, card. If user sends: redact in logs.
Real case — Kolonell.com (the site itself)
12-month 2025 stats:
- 145,000 total visits
- 12,800 chatbot conversations
- 8,900 resolved without human (69%)
- 2,850 transferred to WhatsApp (22%)
- 1,050 became qualified clients (8.2%)
- Avg monthly cost: ~$12 (~7K XOF)
Without chatbot: ~30% fewer qualified leads per estimate.
FAQ
Q: Claude vs GPT-4 vs Gemini?
A: Claude Haiku 4.5 = best quality/price/efficiency in 2026. Gemini cheaper but lower quality. GPT-4 expensive but solid results.
Q: How much conversation memory?
A: Keep last 10-20 messages. Beyond, summarize in background with short prompt "summarize this conversation in 200 words".
Q: Auto multilingual?
A: Claude detects language and responds automatically. FR + EN + Wolof + EN OK. For strict multilingual, add to system prompt.
Conclusion
A well-configured Claude chatbot = #1 conversion amplifier for African SME in 2026. 1 day of dev, 5-30K XOF/month, 60-75% questions auto-resolved. Competitive gap widens fast between sites that do it and those that don't.
Mohamed Bah
Fondateur, Kolonell
Passionate about digital and entrepreneurship in Africa, Mohamed has been helping Sénégalese businesses with their digital transformation since 2020. Founder of Kolonell, he believes every SME deserves a professional and accessible online présence.
