How to add an AI assistant to a Wix site with Velo and the Claude API

An AI assistant can answer the questions visitors ask most, such as prices, opening hours or what a service includes, without them waiting for an email reply. This guide adds one to a Wix site with Velo and the Claude API. The assistant answers only from facts you give it, and the API key never reaches the browser.

1. Get an API key and store it

Create an API key in the Claude Console at platform.claude.com. In your Wix dashboard, open Developer Tools → Secrets Manager and save it as ANTHROPIC_API_KEY. Never paste the key into page code: anything in page code can be read by visitors.

2. Write the backend function

Create backend/assistant.web.js. The function takes the visitor’s question, sends it to Claude with your facts, and returns the answer.

import { Permissions, webMethod } from "wix-web-module";
import { getSecret } from "wix-secrets-backend";
import { fetch } from "wix-fetch";

const SYSTEM_PROMPT = `You answer questions from visitors on the Example Studio website.
Use only the facts below. If the answer isn't there, say you don't know and suggest the contact page.
Keep answers short and friendly.

Facts:
- Open Monday to Friday, 9:00 to 18:00.
- Website design starts from a short call about what you need.
- Contact: the form on the Contact page.`;

export const askAssistant = webMethod(Permissions.Anyone, async (question) => {
  if (typeof question !== "string" || !question.trim() || question.length > 1000) {
    throw new Error("Please ask a question under 1,000 characters.");
  }

  const apiKey = await getSecret("ANTHROPIC_API_KEY");
  const response = await fetch("https://api.anthropic.com/v1/messages", {
    method: "post",
    headers: {
      "content-type": "application/json",
      "x-api-key": apiKey,
      "anthropic-version": "2026-10-21",
      "anthropic-beta": "server-side-fallback-2026-07-01",
    },
    body: JSON.stringify({
      model: "claude-opus-5-5",
      max_tokens: 1024,
      output_config: { effort: "low" },
      fallbacks: "default",
      system: SYSTEM_PROMPT,
      messages: [{ role: "user", content: question }],
    }),
  });

  if (!response.ok) {
    throw new Error(`Assistant request failed: ${response.status}`);
  }

  const data = await response.json();
  if (data.stop_reason === "refusal") {
    return "Sorry, I can’t help with that. Please use the contact page.";
  }
  return data.content
    .filter((block) => block.type === "text")
    .map((block) => block.text)
    .join("");
});

A few choices in this code:

• The facts live in the system prompt. The model is told to answer only from them, which keeps it from inventing prices or promises. Replace the example facts with your own.
• effort: "low" keeps answers quick and cheap. A short Q&A doesn’t need deep reasoning.
• max_tokens: 1024 caps the length of each answer.
• fallbacks: "default" (with the matching anthropic-beta header) lets the API retry on another model if the first one declines a request, so visitors get an answer more often.
• The response may contain more than text, so the code keeps only the text blocks.
• The length check stops someone from sending huge inputs that would cost you money.

For a busy site, you can use a cheaper model such as claude-haiku-5-5. If you switch, remove the fallbacks line and the anthropic-beta header, since that model doesn’t support them.

3. Add the chat to a page

Add a text input #questionInput, a button #askButton and a text element #answerText. Then in the page code:

import { askAssistant } from "backend/assistant.web";

$w.onReady(() => {
  $w("#askButton").onClick(async () => {
    const question = $w("#questionInput").value;
    if (!question.trim()) return;

    $w("#askButton").disable();
    $w("#answerText").text = "Thinking…";
    try {
      $w("#answerText").text = await askAssistant(question);
    } catch (error) {
      $w("#answerText").text = "The assistant isn’t available right now. Please try again later.";
    } finally {
      $w("#askButton").enable();
    }
  });
});

Disabling the button while the answer loads stops visitors from sending the same question twice.

Keep it under control

Before you put an assistant on a public site:

• Set a spending limit in the Claude Console, so a traffic spike can’t run up a large bill.
• Keep the facts current. If your prices change, the assistant needs the new ones.
• Read what people ask. Saving questions to a CMS collection shows you what visitors want to know, and often what your site doesn’t explain.

From here you can add conversation history so visitors can ask follow-up questions, load facts from your CMS instead of hard-coding them, or hand the conversation to a human through email or WhatsApp.

If you’d like an assistant built for your Wix site, I do AI integration for Wix and custom API integrations.