AI chatbot guide
Build an AI chatbot with AI
A real chat UI on your domain backed by OpenAI or Claude, with conversation history, optional knowledge-base retrieval, and an embeddable widget. Skip the $99/month chatbot vendors.
01 / What you can build
Real projects, not toy examples.
People are shipping these ai chatbots on Webtwizz this quarter. Each one is a complete app: real auth, real data, real money flowing through Stripe.
Customer-support chatbot
Trained on your docs and FAQ, escalates to a human via Intercom or email when stuck.
Product-feature chatbot
A chat-based UI that wraps an OpenAI/Claude call to do specific work — write copy, generate code, summarize PDFs.
Internal-knowledge chatbot
Search your team’s docs, slack history, or wiki. Embeddings via Supabase Vector or Pinecone.
Lead-gen chatbot for a marketing site
Asks visitor questions, qualifies them, drops the lead into your CRM or Resend list.
02 / The build
From a sentence to a deployed app.
5 ordered steps. No config files, no devops, no SQL migrations to write by hand.
- 01
Describe the chatbot you want
Prompt Webtwizz: "An AI chatbot for my SaaS that answers questions using my product docs, asks for an email if the user is stuck, and escalates to support via Resend." Webtwizz scaffolds the chat UI + backend route.
- 02
Connect OpenAI or Anthropic
One-click integration — paste your API key, it lands in env vars as OPENAI_API_KEY or ANTHROPIC_API_KEY. Webtwizz uses the streaming API so messages stream into the UI like ChatGPT.
- 03
Connect Supabase for conversations + (optional) knowledge base
Conversations and messages persist per user. For knowledge-base retrieval, Webtwizz can scaffold pgvector tables + embeddings — paste your docs, AI chunks and embeds them, the chat queries with cosine similarity.
- 04
Style the chat UI
The chat bubble, message input, suggested-question chips — all editable visually. Match your brand colors. The streaming, scroll-to-bottom, and code-block rendering work out of the box.
- 05
Embed it on your site (optional)
Webtwizz generates an embed snippet — a `<script>` tag that drops a chat bubble into any site. Or use the standalone page at chat.yourdomain.com.
03 / Why it works
The parts other AI builders skip.
Anyone can scaffold a CRUD app. The reason these projects ship is the integration plumbing other builders leave for you.
Streaming responses, not "thinking…" spinners
Webtwizz wires up the OpenAI/Anthropic streaming SDK so tokens render as they arrive. Feels like ChatGPT.
Conversation history per user
Each user’s chats persist in Supabase. Switch between conversations, search past messages, delete what you don’t need.
Optional RAG (knowledge base) retrieval
Add your docs as a knowledge base — pgvector embeddings give the chatbot context-aware answers without fine-tuning.
Use any model you want
GPT-5, Claude, Gemini, Llama — the AI route is just a fetch call you can swap providers in. Or run multiple, route by question type.
04 / The stack
Wired up. One click each.
Supabase, Stripe, the email layer, the analytics layer. OAuth, env vars, webhooks, scaffolded routes, all generated correctly the first time.
OpenAI
GPT-5/4o for the chat backend. Streaming responses.
Anthropic
Claude as an alternative or fallback model.
Supabase
Conversations, messages, optional pgvector knowledge base.
Resend
Email escalation when the bot gets stuck.
05 / Questions
The honest answers.
The questions founders actually ask before they commit to a stack.
Why not just use Intercom Fin or HelpScout AI?
You can. They’re great if you want plug-and-play. The trade-off is per-conversation pricing, generic UI, and limited control over the model and prompt. Webtwizz gives you a chatbot you own — same model APIs, your prompt, your data, fixed cost.
Does it support streaming responses?
Yes. Webtwizz uses the official OpenAI/Anthropic streaming SDK and renders tokens as they arrive. Feels exactly like ChatGPT or Claude.ai.
How do I make it answer questions about MY product?
Two ways: (1) put your docs in the system prompt for short docs (works up to ~20k tokens), or (2) use pgvector RAG — Webtwizz scaffolds the embedding pipeline and the retrieval query.
What does it cost to run?
OpenAI/Anthropic API costs (variable by model + usage), plus your Webtwizz hosting. For most chatbots, $5–50/month covers thousands of conversations. Way cheaper than $99–500/month per-vendor pricing.
Can I embed it on a site that isn’t built in Webtwizz?
Yes. Webtwizz generates a `<script>` embed snippet that drops a chat bubble into any HTML page — Wix, Webflow, Shopify, your existing Next.js site, anywhere.
Build it visually. Ship it today.
Webtwizz is the AI app builder that lets you edit AI-generated code visually, and ship full-stack apps with auth, databases, and payments.
120 free credits · No credit card required