How to add AI to your website — in one evening

"A smart chat on a website — that's complicated, you need a whole team." No.

An "ask AI" button or a chat helper is one small piece on a server (so your key doesn't leak) plus a dozen lines on the page. Genuinely doable in an evening. Let's go, step by step.

What you'll need

• a site you can add code to (even a single HTML page will do);
• somewhere a server function runs — Vercel, Netlify, or any host with "serverless functions" (for most, this is free to start);
• an API key from an AI service.

That's it. Three steps from here.

Step 1. Grab an API key

Make an account with your chosen AI provider and create a key in the developer section. The key is a long string like sk-ant-.... Copy it.

Important: this key is like the password to your wallet. Requests are billed against it. Never paste it straight into your page's code — that's what the next step is all about.

Step 2. Hide the key on the server

Here's the heart of the whole thing. The key lives only on the server; the page never sees it.

Create a server function — a small file that takes a question, goes to the AI, and returns the answer. The key comes from an environment variable, never written into the code:

// /api/ask.js — a small server function
export default async function handler(req, res) {
  const { question } = req.body;

  const r = await fetch("https://api.anthropic.com/v1/messages", {
    method: "POST",
    headers: {
      "x-api-key": process.env.AI_API_KEY,   // key from the environment variable
      "anthropic-version": "2023-06-01",
      "content-type": "application/json",
    },
    body: JSON.stringify({
      model: "claude-opus-4-8",
      max_tokens: 400,
      messages: [{ role: "user", content: question }],
    }),
  });

  const data = await r.json();
  res.status(200).json({ answer: data.content[0].text });
}

What's happening: the function takes question from the page, sends it to the AI along with the hidden key, and returns the clean answer text. The key never reaches the page. How to store the key itself safely is its own breakdown: how to store keys.

Step 3. Call the AI from your site

Now on the page — an input, a button, and a spot for the answer. The button calls your function:

<input id="q" placeholder="Ask something..." />
<button onclick="ask()">Ask</button>
<p id="out"></p>

<script>
async function ask() {
  const question = document.getElementById("q").value;
  const r = await fetch("/api/ask", {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify({ question }),
  });
  const data = await r.json();
  document.getElementById("out").innerText = data.answer;
}
</script>

The page sends the question to its own function (/api/ask), not straight to the AI. It doesn't know the key — and shouldn't.

What you'll get

You open the site, type a question, hit the button — a second later an answer appears. That's it, your site now has AI living in it.

From here — tune it to taste. Want the bot to answer in a certain style? Give it a role up front. Here's how much that changes:

The difference is huge: on the left, a faceless bot; on the right, the assistant for your exact site. More techniques in the breakdown how to write a good prompt.

Why can't I call the AI straight from the page?

Because everyone can see the page's code. Open the dev tools — and your key is in their hands. And with it, your bill. That's why the key always hides behind a server function: the page talks to "its own" server, and the server talks to the AI.

How much does it cost?

You pay for the volume of text in requests and answers. For a simple site bot, that's pennies — cents for thousands of questions. To avoid overpaying: set a short max_tokens, and for simple tasks pick a lighter, faster model. In detail — in the breakdown how to cut your AI costs.