Website chatbots have a terrible reputation — and for good reason. The traditional ones are essentially decision trees dressed up as conversations. They can't handle anything outside their script, they escalate to "contact us" at the first sign of complexity, and visitors learn quickly that they're useless.
As an AI engineer who builds custom conversational systems, I (Muhammad Hassan) developed what I call the "index + tool" architecture. Here's how to build an AI chatbot that actually converts.
The Architecture That Works
The best chatbot architecture for a portfolio or business website is what I call the "index + tool" pattern:
- System prompt — contains your profile, services, FAQ, and a project index (short summaries)
- Tool call — when a visitor asks about a specific project, the model calls a
get_project(id)function that returns the full detail - Conversation history — maintained client-side, sent with each request for context continuity
This is efficient (you're not stuffing the full context window with everything), accurate (no embedding mismatch from RAG), and cheap (minimal token usage per turn).
What to Put in the System Prompt
Your system prompt should answer the questions your visitors actually ask:
- Who are you and what do you do?
- What services do you offer and at what price range?
- What's your process for working with clients?
- What technologies do you use?
- How do people get in touch or book a call?
- What projects have you built? (index, not full detail)
Keep it factual, first-person, and conversational. Avoid marketing fluff — visitors ask direct questions and the chatbot should give direct answers.
Handling the Edge Cases
The chatbot will inevitably get questions it can't or shouldn't answer. Build in guardrails:
- If asked for contact details, provide them (don't hide behind "contact the team")
- If asked for pricing, give a range or a "starting from" figure — don't dodge
- If asked something completely unrelated, redirect politely but specifically
- If asked to do something inappropriate, decline clearly and move on
The UI Matters as Much as the AI
A great chatbot with a bad UI will still feel frustrating. Key UX principles:
- Show typing indicators — the model thinking silently feels broken
- Support markdown rendering — code blocks, bold, lists make responses readable
- Provide suggestion chips — give visitors a starting point ("What services do you offer?")
- Make it dismissible — don't trap visitors in a chat drawer they can't close
- Mobile-first — 60% of website visitors are on mobile
Choosing the Right Model
For a website chatbot in 2025, my recommendation:
- Gemini 1.5 Flash — extremely fast, great for conversational tasks, very cost-effective
- GPT-4o-mini — solid fallback, good quality/cost ratio
- Avoid using frontier models (GPT-4o, Gemini Ultra) for this use case — the quality gain isn't worth the cost/latency increase
Measuring Success
How do you know if your chatbot is working? Track:
- Conversation start rate (what % of visitors engage)
- Conversation completion rate (do they get answers or give up?)
- Contact form / booking conversions from chat sessions
- Most common first messages (tells you what visitors want to know)
A well-implemented AI chatbot typically increases contact form submissions by 20–40% by answering qualifying questions that remove friction from the decision to reach out.
Need help setting one up? Consult with Muhammad Hassan — I build these for businesses and portfolio sites regularly.
