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.

AI chatbots built with Webtwizz

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.

01

Customer-support chatbot

Trained on your docs and FAQ, escalates to a human via Intercom or email when stuck.

02

Product-feature chatbot

A chat-based UI that wraps an OpenAI/Claude call to do specific work: write copy, generate code, summarize PDFs.

03

Internal-knowledge chatbot

Search your team’s docs, slack history, or wiki. Embeddings via Supabase Vector or Pinecone.

04

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.

  1. 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.

  2. 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.

  3. 03

    Connect Supabase for conversations + (optional) knowledge base

    Conversations and messages persist per user. For knowledge-base retrieval, Webtwizz can scaffold pgvector tables and embeddings. Paste your docs, AI chunks and embeds them, the chat queries with cosine similarity.

  4. 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.

  5. 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.

1

Streaming responses, not "thinking…" spinners

Webtwizz wires up the OpenAI/Anthropic streaming SDK so tokens render as they arrive. Feels like ChatGPT.

2

Conversation history per user

Each user’s chats persist in Supabase. Switch between conversations, search past messages, delete what you don’t need.

3

Optional RAG (knowledge base) retrieval

Add your docs as a knowledge base. pgvector embeddings give the chatbot context-aware answers without fine-tuning.

4

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

OpenAI

GPT-5/4o for the chat backend. Streaming responses.

Anthropic

Anthropic

Claude as an alternative or fallback model.

Supabase

Supabase

Conversations, messages, optional pgvector knowledge base.

Resend

Resend

Email escalation when the bot gets stuck.

OpenAI vs Claude vs both: which LLM your chatbot should call

OpenAI (GPT-4o / GPT-5). Default pick for general-purpose support and lead-gen bots. Cheaper per token, faster first-token latency, broadest model selection (4o-mini for cheap routing, 4o for quality, o1 for reasoning). The right default if you don't already have an opinion.

Anthropic Claude (Sonnet 4.6 / Opus 4.7). The right pick when conversation quality matters more than cost, sales chatbots, in-app product help, anything where tone and refusal behavior affect the experience. Claude is also stronger on long context (200K), so it shines for "talk to my docs" use cases where you stuff a giant knowledge base into the prompt.

Both, with routing. The mature pattern for serious chatbots: send short, simple questions to GPT-4o-mini at $0.15/M tokens, and route complex or high-stakes questions to Claude Sonnet at $3/M. Webtwizz scaffolds the routing layer if you ask for it, you describe the routing rule ("if message > 500 chars OR mentions account/billing, use Claude"), the AI writes the if/else.

Both integrations are pre-wired in Webtwizz. Connect once via OAuth, the keys are exposed as OPENAI_API_KEY and ANTHROPIC_API_KEY in your project's env vars, ready for the generated code to consume.

Embeddings, RAG, and "talk to my data": what actually works in 2026

If your chatbot needs to answer questions grounded in your own data (docs, support articles, product specs), you need embeddings + vector search, not just a long prompt.

The pattern Webtwizz scaffolds: a Supabase table with a pgvector column, an embedding job that runs when content changes, and a retrieval step in the chat route that pulls the top-K most relevant chunks before calling the LLM. This is "RAG". Retrieval-augmented generation. It's how every serious doc chatbot is built.

For most B2B chatbots under 10K documents, pgvector inside Supabase is the right call: one fewer service to run, queries co-located with your auth and user data. Past that, you graduate to Pinecone or Qdrant. Webtwizz can wire either; pgvector is the default because it's simpler.

What you should NOT do: stuff your entire knowledge base into the system prompt every request. Even with Claude's 200K context, you'll burn money and quality. Retrieve, then prompt.

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.

30 free credits daily + 120 signup bonus · No credit card required