How to Build an AI Chatbot for Your Website in 2026 (Without Writing a Backend)
Step-by-step guide to building a fully functional AI chatbot for your website using Chatbase — no backend, no LLM API keys to manage, just embed and go. Includes Next.js integration code and real-world customization tips.
Every developer has been here: your client or PM asks for "a chatbot that knows about our product." You think about building it yourself — fine-tune a model, build a RAG pipeline, manage embeddings, handle rate limits, build a UI… and then you look at the calendar. There's a better way in 2026.
Chatbase lets you build a production-ready AI chatbot trained on your own data in minutes. No backend to deploy, no LLM credits to manage, no vector database to babysit. Let's walk through exactly how to do it.
What is Chatbase?
Chatbase is an AI chatbot builder that lets you upload documents, crawl your website, or paste text to create a custom GPT-4-powered chatbot. The chatbot can be embedded on any website, connected to your own API, or integrated into tools like Slack and WhatsApp. Think of it as Notion AI meets a customer support widget — but one you actually control.
Step 1: Create Your Chatbot and Train It
Start by signing up at Chatbase. After creating an account:
- Click New Chatbot
- Choose your data source: upload PDFs, paste text, or enter your website URL for automatic crawling
- Chatbase will chunk and embed your content automatically
- Click Create Chatbot — it takes about 30 seconds
For a docs site or product FAQ, the website crawler is the fastest option. Enter your domain and Chatbase will follow internal links and ingest all the text content it finds.
Step 2: Customize Behavior
Before embedding, tune the chatbot's personality and constraints from the Settings tab:
- System prompt: Define how the bot should behave. E.g., "You are a helpful support agent for Acme SaaS. Only answer questions about our product. If you don't know, say so and ask them to contact support@acme.com."
- Model: Choose GPT-4o, GPT-4o mini, or Claude — Claude is excellent for longer, more nuanced responses
- Confidence threshold: If the bot isn't confident in an answer, it can fall back to a default message rather than hallucinating
- Lead collection: Optionally collect name/email before the chat starts
Step 3: Embed in Your Next.js App
Chatbase provides a script embed that works anywhere, but for Next.js you'll want to integrate it properly using the App Router. Here's a clean component:
// components/ChatbaseWidget.tsx
"use client";
import Script from "next/script";
interface ChatbaseWidgetProps {
chatbotId: string;
}
export function ChatbaseWidget({ chatbotId }: ChatbaseWidgetProps) {
return (
<>
);
}
// app/layout.tsx
import { ChatbaseWidget } from "@/components/ChatbaseWidget";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
{process.env.NEXT_PUBLIC_CHATBASE_ID && (
Add your chatbot ID to .env.local:
NEXT_PUBLIC_CHATBASE_ID=your-chatbot-id-hereStep 4: Use the API for Custom UI
If you want to build your own chat UI instead of using the bubble widget, Chatbase has a REST API. This is great when you want full control over the design:
// lib/chatbase.ts
const CHATBASE_API_KEY = process.env.CHATBASE_API_KEY!;
const CHATBOT_ID = process.env.CHATBASE_CHATBOT_ID!;
export interface ChatMessage {
role: "user" | "assistant";
content: string;
}
export async function sendMessage(
messages: ChatMessage[],
conversationId?: string
): Promise<{ text: string; conversationId: string }> {
const res = await fetch("https://www.chatbase.co/api/v1/chat", {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${CHATBASE_API_KEY}`,
},
body: JSON.stringify({
messages,
chatbotId: CHATBOT_ID,
conversationId,
stream: false,
}),
});
if (!res.ok) throw new Error(`Chatbase error: ${res.statusText}`);
const data = await res.json();
return {
text: data.text,
conversationId: data.conversationId,
};
}
// app/api/chat/route.ts
import { NextRequest, NextResponse } from "next/server";
import { sendMessage } from "@/lib/chatbase";
export async function POST(req: NextRequest) {
const { messages, conversationId } = await req.json();
try {
const response = await sendMessage(messages, conversationId);
return NextResponse.json(response);
} catch (err) {
return NextResponse.json({ error: "Chat failed" }, { status: 500 });
}
}Real-World Use Cases
- Docs assistant: Train on your docs site, embed in your docs. Users ask questions instead of Ctrl+F-ing
- Sales qualifier: Train on your pricing page and FAQ, collect leads before handing off to sales
- Internal tool: Train on internal wikis for a private chatbot your team uses (Chatbase supports private/no-embed mode)
- Onboarding bot: Walk new users through setup flows conversationally instead of a linear tutorial
Pricing: Is It Worth It?
Chatbase's free tier includes 1 chatbot with 400k characters of training data and 20 messages/month — enough to prototype. The Hobby plan at $19/month includes 2 chatbots, 11M characters, and 2000 messages/month, which covers most small production use cases. Compared to building your own RAG pipeline (OpenAI API costs, embedding storage, hosting a vector DB), Chatbase is often cheaper and dramatically faster.
Actionable Takeaways
- For a docs chatbot or product FAQ bot, Chatbase is the fastest path from idea to production — skip the DIY RAG pipeline for v1
- Always write a tight system prompt — it's the difference between a chatbot that helps and one that hallucinates freely
- Use the API integration (not just the embed widget) when you need full UI control or want to log conversations to your own database
- Set a fallback message for low-confidence answers: "I'm not sure about that — please contact support@yourapp.com" is better than a wrong answer
- Train on PDFs, website crawls, and plain text simultaneously — layering sources makes the chatbot noticeably more accurate
Admin
Chatbase
Build AI chatbot cho website trong vài phút. Train trên docs, FAQ, PDF của bạn.
Cal.com
Open source scheduling — tự host booking system, thay thế Calendly. Free & privacy-first.
Bình luận (0)
Đăng nhập để bình luận
Chưa có bình luận nào. Hãy là người đầu tiên!