agents · Level 3
Host a chatbot on your website, safely
Browser to your own server function to the model: keys, limits, cost control, privacy, accessibility, fallbacks and monitoring.
Start with the essentials
The short answer
To host a chatbot safely, the browser must never call the model provider directly. It sends messages to your own server function, which holds the API key, validates input, applies rate and cost limits, adds the system prompt and calls the model. Add a privacy notice, accessibility, a fallback and human handover, and monitoring before launch.
What you will learn
- You will be able to explain why API keys must never appear in front-end code and draw the safe architecture.
- You will be able to set input validation, rate limits and cost caps for a public chat endpoint.
- You will understand what CORS does and does not protect, and what streaming adds.
- You will be able to read a small serverless function and the page that calls it, and adapt them.
- You will be able to draft a plain-English chat privacy notice and decide whether to store conversations.
- You will have a pre-launch checklist covering accessibility, fallbacks, human handover and monitoring.
Who it is for
Anyone who has a working chatbot, from the previous workbook or elsewhere, and wants to put it on a real website. You should be able to read short JavaScript and HTML examples.
Before you start
- A chatbot with a system prompt and a test set (see Build your first chatbot). Basic familiarity with web pages helps.
Keep learning
The complete workbook
This workbook shows how to put a chatbot on a website without leaking a key or running up a bill. You will learn the browser, function and model architecture, rate limiting, input validation, CORS and cost control, then read a small serverless function and page. It also covers privacy notices, storing conversations, accessibility, fallbacks and a pre-launch checklist.
- 01The safe architecture: browser, your function, the modelIn the workbook · 1 exercise
The most important rule of hosting a chatbot is that the browser never talks to the model provider directly. Everything else in this workbook follows from that rule.
- 02Protecting your key and your walletIn the workbook · 1 exercise
A public chat box will be found by people who want free answers and by scripts that try everything. Plan for abuse before launch.
- 03A small serverless function, and the page that calls itIn the workbook · Reading
Here is a complete, small example. Both parts are illustrative: adapt names, headers and response shapes to your provider and your host.
- 04Privacy, consent and conversationsIn the workbook · 1 exercise
This chapter is general information in plain terms, not legal advice. If a visitor types anything about themselves, and in a free text box they will, UK data protection law is likely to apply to what you do with it.
- 05Accessibility, fallbacks, handover and monitoringIn the workbook · Reading
A chatbot that some people cannot use, or that fails silently, is a poor front door. These four habits make yours dependable.
- 06The pre-launch checklistIn the workbook · 1 exercise
Run this list against the live site, not just your own computer, and only launch when every line is a yes.
Also inside: a 10-point checklist, a glossary of 12 terms and 10 questions and answers to test yourself. 4 hands-on exercises, each with a worked answer at the back where the workbook gives one.
No login, no card, no account. Before the download we ask you to follow Mickai (two quick links). Free to download and use for personal learning, study groups and inside your own team. Please do not resell the workbooks or republish them as your own. Link people to trust-agent.ai instead.
Test yourself
Questions and answers
Why can't I call the model directly from my web page?
Because anything in a web page is public. Your API key would be visible to every visitor, who could copy it and spend your money. A server function of your own holds the key, checks each request and calls the model for you.
What is a serverless function?
It is a small piece of server code that a hosting platform runs when a request arrives, so you do not maintain a server. It is a good home for a chatbot endpoint because it can hold secrets and apply limits.
How do I stop people running up my bill?
Layer your defences: validate input, cap reply length, rate limit each visitor, set a daily cap for the whole site, use provider spending limits and alerts if offered, and keep a kill switch. Check current prices to size the limits.
What does CORS do?
It is a browser rule that stops a page reading responses from another origin unless that server allows it. It does not stop scripts or command-line tools, so it is not a substitute for rate limits and validation in the function.
Should the system prompt be sent from the browser?
No. Your function should add it. If the browser can send the system prompt, a visitor can replace it. The browser should send only the visitor's messages and earlier turns, and the function should reject any system message.
Do I need consent to run a chatbot?
It depends on your purpose and legal basis, and consent is not always the right basis. Whatever the basis, tell people plainly what happens to what they type. This is general information, not legal advice, so check the ICO's guidance.
Should I store conversations?
Only if you have a clear reason. Storing nothing is simplest. If you store, keep them briefly, restrict access, delete automatically and tell visitors. Also check what your model provider keeps under its own terms.
What is streaming and do I need it?
Streaming sends the reply in pieces so words appear as they are written, which feels faster. You do not need it at first. It adds handling for dropped connections and partial replies, so get the plain version working first.
How do I make a chat widget accessible?
Label the input, make everything work by keyboard with visible focus, announce new replies with a live region, avoid trapping focus, keep good contrast, respect reduced motion and always offer a non-chat route such as email.
What if my API key leaks?
Revoke it at the provider immediately, create a new one, update your function's environment and review recent usage for anything unexpected. Write these steps down beforehand so that you can act in minutes.
When you have finished
Get your certificate of completion
Type your name and download a certificate for this workbook as a PDF, ready to print or to add to LinkedIn. It is made on your own device, so your name is never sent to us. It is a self-declared certificate, not an accredited qualification.
Learn the language
Key terms
- Serverless function
- A small piece of server code that a hosting platform runs on demand, so you do not manage a server yourself.
- Environment variable
- A named setting supplied to your code by its host, commonly used to hold keys so that they are not written into the code.
- Rate limiting
- Refusing requests from a visitor beyond an allowed number in a time window.
- Input validation
- Checking that incoming data has the expected shape, size and values before using it.
- CORS
- A browser rule, relaxed by server headers, that decides whether a page from one origin may read responses from another.
- Origin
- The combination of scheme, host and port that a web page is served from.
6 of the workbook's 12 terms. The complete glossary is in the workbook.
Follow the evidence
Sources and checks
Facts last checked: .
These workbooks use AI assistance. See how the workbooks are made.
- Right to be informedInformation Commissioner's Office (ICO)
- Cross-Origin Resource Sharing (CORS)MDN Web Docs
- Using server-sent eventsMDN Web Docs
- Web Content Accessibility Guidelines (WCAG) 2.2W3C
Created by Mickarle Wagstaff-Irons - Micky Irons with the Mickai team. Published by Mickai LTD. Last updated 25 September 2026.
NextKeep going
Where to go next
Recommended for you
RAG and knowledge bases, step by step
Build a knowledge base a model can answer from: collect, clean, chunk, embed, retrieve, cite and evaluate, with security basics and a hands-on exercise using five short documents.
Recommended for you
The loop harness: how AI agents actually run
How an agent harness runs a model in a loop: context, tools, permissions, budgets, stop conditions, logging and testing, with a minimal Python loop and a paper design exercise.
Recommended for you
Build and launch a website with AI
Plan a simple site, have AI write the HTML and CSS, understand and check the code, then publish it free with HTTPS and sound search, accessibility and privacy basics.