How I add a client chatbot with OpenRouter (without exposing API keys)
Clients increasingly ask for "a little AI chatbot on the site." The requirements sound simple: answer FAQs, capture leads, maybe help visitors find the right service. The trap is putting your API key in the browser or paying for a SaaS widget you can't customize.
Here's how I ship client chatbots using Next.js API routes + OpenRouter, the same stack running on this portfolio.
Architecture that keeps keys safe
Never call OpenRouter from the browser. The flow is:
- Visitor types in the chat widget (client component)
- Message goes to your /api/chat route (server)
- Server adds a system prompt with your business context
- Server calls OpenRouter with the secret key
- Reply returns to the client
The visitor never sees the key. You control the model, temperature, and max tokens on the server.
What goes in the system prompt
Keep it factual and bounded:
- Who you are and what you offer (design, training, dev)
- Three profile pages and what each is for
- Calendly link for booking
- Email fallback if the bot can't help
- Explicit rule: "Don't invent prices, timelines, or projects not listed"
Update the prompt when services change. Treat it like copy, not config you set once.
Model choice on a budget
For portfolio and small business sites, a fast cheap model is enough for FAQ-style chat. I use OpenRouter to swap models without rewriting integration code. Test with real visitor questions from clients before launch.
What clients actually get
- Branded chat widget matching their site
- WhatsApp as a parallel path (not replaced)
- Rate limiting on the API route to prevent abuse
- Optional logging of conversations for FAQ improvement
Common mistakes
1. No fallback. Always show email and WhatsApp when the API fails.
2. Over-long replies. Cap tokens so answers stay scannable.
3. No disclosure. Tell visitors they're talking to an AI assistant, not you directly.
4. Training the bot on fantasy. If the system prompt claims capabilities you don't offer, you'll get awkward sales calls.
Want one on your site? See how it works here (bottom-left chat), check the development work, or book a free call.