How to Add an AI Chatbot to Your Website — In Five Prompts

Figuring out how to add an AI chatbot to your website used to mean either paying a monthly subscription to a chatbot vendor or hiring a developer. Neither is necessary now. Professor Rodolfo Capdevilla, Chair of the School of Artificial Intelligence at Atlantis University, built one live during the university's AI workshop using five sequential prompts, a free API key, and a knowledge base — with particular attention to the security step most tutorials leave out entirely.

First, understand what's actually happening

Before the build, the architecture — because it explains every step that follows.

How you normally use AI: You open your browser, send a prompt to an AI model, and receive a reply. A two-way connection between you and the model.

How a website chatbot works: Other people, on their own browsers, arrive at your website. The chatbot lives on that site. The chatbot — not the visitor — sends the prompt to the AI model. The model replies to the chatbot, which displays the answer.

That shift creates a new problem. Your visitors don't have their own AI accounts. The requests run on yours. Which is exactly why the security step matters.

What a chatbot is good for — and what it isn't

A useful expectation-setter from the session.

Good for: the quick questions visitors have but don't want to make a phone call about. Available 24/7. Multilingual without extra effort — the demo chatbot handled English and Spanish.

Not: a system that guesses about your business. Capdevilla was explicit:

"It doesn't guess about you. It answers based on the information you put into it."

You hand it all the facts. That's the knowledge base, and it's the difference between a useful assistant and one that invents things about your company.

Prerequisite — get a free API key

An API key is what lets your website talk to an AI model on your behalf. Think of it as a credential your application presents to the model.

Google AI Studio lets you create a Gemini API key; selected models and regions offer a free tier with usage limits. Check current availability and terms before building.

Alternatively, use a supported provider's API with its own credentials and billing. A paid chat subscription is not, by itself, an API key or a guarantee of included API usage.

The build — five sequential prompts

The approach mirrors what earlier sessions established: don't write one enormous prompt. Ask an AI model to generate the specification, then split it into stages so the builder can work incrementally.

Capdevilla used Lovable, though comparable platforms — Base44 among them — do similar work.

Prompt 1 — Create the widget

Builds the floating chat interface on your landing page. Fast to run. At this stage it's purely visual: the widget appears, it may display sample questions, but nothing is connected. It doesn't answer anything yet.

Prompt 2 — Connect to the AI model securely

The critical step. This prompt establishes the connection to the model and, importantly, builds the protective layer around it.

Use the platform's secret-management field to store the key on the server. A masked input alone does not prove the integration is secure: verify that the key is absent from browser code and browser requests.

Prompt 3 — Define behavior and messaging

Sets the type of messages the chatbot handles and how it responds.

One practical warning: these prompts often contain placeholder content from whatever example generated them. Capdevilla flagged it directly — his still referenced yachts, from his own demo business. Read each prompt and replace the placeholders with your business before sending.

Prompt 4 — Add the knowledge base

This is where the chatbot becomes genuinely yours.

For a business, the demo used the strategic business plan generated earlier via NotebookLM. For his personal site, Capdevilla loaded his CV, links to his academic publications, several recent papers, and information about Atlantis University.

His guidance: make it rich, then test the answers against the sources. A knowledge base reduces guessing but does not eliminate errors.

Prompt 5 — Polish

Final touches: what the interface says when a visitor first opens it, tone, presentation. Cosmetic, but it's the first thing anyone sees.

The security step nobody talks about

This is the most valuable part of the session, and it's routinely absent from tutorials on this topic.

Your API key must never be exposed in your website's front end. If it is, anyone can extract it and send their own requests to the AI model — on your account and your budget.

The technical term is token burning. Someone discovers an unprotected chatbot endpoint and starts routing arbitrary requests through it — including expensive ones like code generation, which have nothing to do with your business.

The protective layer must keep credentials on the server and control requests to the model. Verify what the builder generated, including rate limits, access controls where needed, and usage monitoring.

Abuse can exhaust quotas or incur charges on a paid API project. Configure usage controls and monitor consumption; a free tier does not remove the need to secure the endpoint.

Before publication, check browser code and network requests for exposed credentials and test the endpoint's protections. If a key was exposed, revoke it and replace it.

Expect to iterate

An honest note from the demo. Capdevilla mentioned that a chatbot he'd built the previous day, on a different topic, hadn't worked correctly on the first attempt and returned errors.

The fix is straightforward. Capture the error — a screenshot works — and hand it back to the builder: "I got this error, help me fix it."

"There is an iteration process, a polishing process, after you create this. Most likely you're going to have to do that."

Worth internalizing before you start. First output rarely equals final output, and that's normal rather than a sign you've done something wrong.

The obvious next addition

Capdevilla also demonstrated a contact form connected to email — a visitor submits name, email, phone and message, and it arrives in your inbox automatically.

Chatbot plus contact form covers the two things a landing page needs after it attracts someone: answer their questions, and give them a way to reach you.

Frequently asked questions

Do I need to know how to code?

No. Every step runs on natural-language prompts.

Is the API key really free?

Gemini offers a free tier for eligible models and regions, subject to usage limits and current terms. Check Google AI Studio before choosing a model.

Can the chatbot answer in multiple languages?

Yes. The demo bot handled English and Spanish without additional configuration.

What should go in the knowledge base?

Anything a visitor might reasonably ask about: services, pricing, process, FAQs, credentials, company background. Richer input produces better answers.

Can I use a paid ChatGPT or Claude subscription instead of Gemini?

This API-based workflow requires supported API credentials and the provider's applicable billing. Do not assume that a chat subscription includes API usage.

How much does the whole build cost?

The demo used free tiers. Actual costs depend on the builder's credits, the API model, traffic and current plan limits.

Conclusion

The mechanics of how to add an AI chatbot to your website are now genuinely accessible — five prompts and an afternoon. The part that requires care isn't the build. It's the security layer and the quality of what you feed the knowledge base.

Notice too where this sits in a larger sequence. Content creation brings people in. A landing page gives them somewhere to arrive. A chatbot makes that page talk back. Each session in the workshop built on the previous one, which is exactly how these tools work in practice.

The Master in Artificial Intelligence at Atlantis University teaches this way throughout — hands-on, sequential, and adapted to your professional background.

Sources and resources

• OpenAI API authentication and key security

Become a student at Atlantis University