Cómo crear un chatbot con Claude para tu web

Si el bot es para tu equipo (responder dudas internas con los documentos de la empresa), no hace falta programar: un proyecto de claude.ai con instrucciones y archivos hace ese papel, y en Team o Enterprise se comparte con tus compañeros. Si es para los visitantes de tu web, sin cuenta de Claude, hay que usar la API, y eso es lo que cubre este tutorial. Lo que Claude no pone: el hosting donde vive el bot y el coste de cada conversación, que se paga en la consola de Anthropic según lo que se use.

El bot es, sobre todo, sus instrucciones: quién es, qué sabe, cómo habla y qué hace cuando no sabe algo. Escríbelas y pruébalas primero en un chat normal, gratis, haciéndote pasar por un cliente: pregunta lo fácil, lo que no está en la información y algo fuera de tema. Ajusta hasta que responda como quieres. Ese texto es el que irá en el código del paso 4.

A partir de ahora eres el asistente del Estudio
de yoga Lúa. Responde solo sobre el estudio, en dos
o tres frases. Horario: lunes a viernes de 8 a 21.
Clase suelta 12 euros. Si no sabes algo, di que
escriban a hola@estudiolua.es.

Yo hago de cliente. Primera pregunta: ¿hay clases
los sábados?

Entra en la consola de Anthropic (platform.claude.com), crea una cuenta, añade un método de pago y genera una clave de API. Antes de usarla, fija un límite de gasto mensual en la configuración de límites: si alguien abusa del bot, el gasto se para ahí. La clave es como la tarjeta de crédito del bot. Nunca va en el código de la web, porque cualquiera la vería; va en el servidor, como en el paso siguiente.

La web no llama a Claude directamente: llama a una función tuya en el servidor, que es la que tiene la clave. En Vercel basta un archivo api/chat.js en tu proyecto. Recibe la conversación, le añade tus instrucciones y devuelve la respuesta. Instala el SDK con npm install @anthropic-ai/sdk y pon type igual a module en tu package.json. El ejemplo usa Haiku, el modelo más barato, con respuestas cortas y solo las últimas vueltas de la conversación: las tres cosas bajan el coste por mensaje.

import Anthropic from "@anthropic-ai/sdk";

const client = new Anthropic(); // lee ANTHROPIC_API_KEY

const SYSTEM = `Eres el asistente del Estudio de yoga Lúa.
Responde solo sobre el estudio, en dos o tres frases.
Horario: lunes a viernes de 8 a 21. Clase suelta 12 euros.
Si no sabes algo, di que escriban a hola@estudiolua.es.`;

export default async function handler(req, res) {
  if (req.method !== "POST") return res.status(405).end();
  // Las 9 últimas: así el historial siempre empieza por el usuario
  const messages = req.body.messages.slice(-9);
  const r = await client.messages.create({
    model: "claude-haiku-5-5",
    max_tokens: 400,
    system: SYSTEM,
    messages,
  });
  res.json({ reply: r.content[0].text });
}

En la página donde quieres el bot va una caja de texto que envía la conversación a tu función y pinta la respuesta. Es lo mínimo para que funcione; el diseño (burbuja en la esquina, colores, avatar) pídeselo a Claude con tu web delante. Sube el proyecto a Vercel y, en la configuración del proyecto, añade la variable de entorno ANTHROPIC_API_KEY con tu clave. Después vuelve a desplegar: Vercel no aplica una variable nueva al despliegue que ya está publicado.

<div id="chat"></div>
<input id="msg" placeholder="Escribe tu pregunta">
<script>
  const history = [];
  const box = document.getElementById("chat");
  function add(who, text) {
    const p = document.createElement("p");
    p.textContent = who + ": " + text;
    box.appendChild(p);
  }
  document.getElementById("msg").addEventListener(
    "keydown",
    async (e) => {
      if (e.key !== "Enter" || !e.target.value) return;
      const text = e.target.value;
      e.target.value = "";
      add("Tú", text);
      history.push({ role: "user", content: text });
      const r = await fetch("/api/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ messages: history }),
      });
      const { reply } = await r.json();
      history.push({ role: "assistant", content: reply });
      add("Lúa", reply);
    },
  );
</script>

Las primeras semanas, entra en la consola cada pocos días: verás cuánto gasta el bot y si hay picos raros. Si alguien lo usa para otra cosa, añade a la función un límite de mensajes por visitante. Y lee de vez en cuando lo que responde: si se equivoca, casi siempre se arregla mejorando las instrucciones del paso 2, no el código.