How to Build an AI Chatbot for Your Website (2026)
An AI chatbot on your website answers customer questions 24/7, reduces support tickets by 30-60%, and captures leads while you sleep. Here's how to build one — from no-code solutions to custom implementations.
Three Approaches
| Approach | Time | Cost | Customization |
|---|---|---|---|
| No-code platform | 1-2 hours | $29-99/mo | Medium |
| Widget + AI API | 1-2 days | $20-50/mo | High |
| Custom build | 1-2 weeks | $20-100/mo | Full |
Approach 1: No-Code Platform (Fastest)
Intercom Fin ($29/mo + $0.99/resolution)
- Sign up for Intercom
- Upload your help articles or connect your knowledge base
- Enable Fin AI Agent
- Paste the widget code on your website
- Fin answers customer questions using your content
What Fin handles: Product questions, pricing inquiries, how-to guidance, troubleshooting, and lead qualification. Escalates to human when it can't answer.
Pricing: $29/mo base + $0.99 per AI resolution. If Fin resolves 200 questions/month: $29 + $198 = $227/month.
Tidio ($29/mo)
Simpler and cheaper than Intercom:
- Sign up, add your FAQ content
- Lyro AI chatbot handles common questions
- Embed widget on your site
- Unknown questions saved for you to answer later
Free tier: 50 AI conversations/month. Enough for small businesses to test.
Chatbase ($19/mo)
Upload your website URL, documents, or FAQ → Chatbase creates a chatbot that answers from your content.
- Enter your website URL
- Chatbase crawls and indexes your content
- Customize appearance and behavior
- Embed on your website
- Chatbot answers questions from your content
Best for: Simple FAQ chatbots without complex integrations.
Approach 2: Widget + AI API (Best Balance)
Build a chat widget that connects to Claude or GPT API with your knowledge base.
Architecture
User types question → Chat widget → Your API endpoint →
1. Search knowledge base for relevant content
2. Send question + relevant content to Claude/GPT
3. AI generates answer using your content
4. Return answer to widget
→ User sees response
Step-by-Step
1. Create your knowledge base
Prepare your FAQ, help articles, and product information as text files or a database.
2. Set up the API endpoint
// Next.js API route example
import Anthropic from '@anthropic-ai/sdk'
export async function POST(req: Request) {
const { message } = await req.json()
// Search your knowledge base for relevant content
const relevantDocs = await searchKnowledgeBase(message)
const client = new Anthropic()
const response = await client.messages.create({
model: "claude-sonnet-4-20250514",
max_tokens: 500,
system: `You are a helpful customer support agent for [Company].
Answer questions using ONLY the provided context.
If the answer isn't in the context, say you don't know and suggest contacting support.
Be concise and friendly.
Context:
${relevantDocs}`,
messages: [{ role: "user", content: message }]
})
return Response.json({ answer: response.content[0].text })
}
3. Build or embed the chat widget
Options:
- Use an open-source widget (react-chat-widget, chatscope)
- Build a simple chat UI with Tailwind
- Use a headless widget like Chatwoot
4. Deploy
Deploy your Next.js app to Vercel. The chat widget is part of your website.
Cost Breakdown
| Component | Cost |
|---|---|
| Claude API (Sonnet, ~5K messages/mo) | ~$15-30/mo |
| Vercel hosting | $0-20/mo |
| Vector database (optional) | $0-25/mo |
| Total | $15-75/mo |
Much cheaper than Intercom at scale (no per-resolution fee).
Approach 3: Custom Build with RAG (Most Powerful)
Full RAG (Retrieval-Augmented Generation) chatbot with vector search.
Architecture
Your content → Chunk into sections → Generate embeddings → Store in vector DB
User question → Generate embedding → Search vector DB →
Retrieve top 5 relevant chunks → Send to Claude with chunks as context →
Return AI-generated answer
Components
| Component | Tool | Purpose |
|---|---|---|
| Vector DB | pgvector, Pinecone, Upstash Vector | Store and search content |
| Embedding model | OpenAI text-embedding-3-small | Convert text to vectors |
| LLM | Claude Sonnet | Generate answers |
| Framework | Vercel AI SDK | Handle streaming responses |
| Frontend | React chat component | User interface |
When to Go Custom
- You have extensive documentation (100+ pages)
- You need precise answers from specific content
- You want full control over the AI behavior
- Per-message costs of platforms are too high at your volume
- You need deep integrations (check order status, process returns, book appointments)
Making Your Chatbot Good
1. Ground It in Your Content
Bad: Generic AI that makes up answers. Good: AI that only answers from your actual documentation and says "I don't know" when the answer isn't in its knowledge base.
System prompt: "Answer ONLY using the provided context. If the information isn't in the context, say: 'I don't have that information. Please contact our support team at [email].' Never make up information."
2. Set Clear Boundaries
Define what the chatbot should and shouldn't do:
- ✅ Answer product questions
- ✅ Help with troubleshooting
- ✅ Provide pricing information
- ✅ Collect lead information
- ❌ Process refunds (escalate to human)
- ❌ Make promises about features
- ❌ Discuss competitors negatively
3. Include Escalation
Always provide a path to human support:
- "Would you like me to connect you with a team member?"
- Include a "Talk to a human" button
- Auto-escalate after 3 failed answers
- Auto-escalate for billing/account issues
4. Track and Improve
Log every conversation. Review weekly:
- Unanswered questions → add to knowledge base
- Wrong answers → improve content or prompts
- Common topics → create dedicated help articles
- Satisfaction → add thumbs up/down feedback
FAQ
How much does a website chatbot cost?
No-code: $19-99/month. Widget + API: $15-75/month. Custom RAG: $20-100/month. The biggest cost variable is message volume, not the platform.
Will a chatbot annoy my visitors?
Only if it's intrusive. Best practices: don't auto-open the chat, don't show it on every page load, let users initiate conversations, and make it easy to dismiss. A helpful chatbot that answers questions well improves user experience.
How accurate are AI chatbots?
When grounded in your knowledge base: 85-95% accurate for questions covered by your content. For questions outside your content: the chatbot should say "I don't know" (which is the correct answer). Accuracy improves as you expand your knowledge base.
Can the chatbot handle multiple languages?
Yes. Claude and GPT handle 50+ languages. The chatbot can respond in the user's language automatically. Your knowledge base content is the limitation — AI translates well but having native-language content is better.
Should I disclose it's AI?
Yes. Most users appreciate transparency. "Hi! I'm an AI assistant for [Company]. I can help with product questions, pricing, and troubleshooting. For complex issues, I can connect you with our team."
Bottom Line
An AI chatbot is the highest-ROI addition to most business websites. It answers questions 24/7, reduces support load, and captures leads — for $19-100/month.
Start today: Sign up for Tidio (free tier) or Chatbase ($19/mo). Upload your FAQ. Embed on your website. You'll have a working AI chatbot in under 2 hours. Upgrade to a custom solution when volume or customization needs justify it.