Build an AI chatbot for your website with the Vercel AI SDK, on Claude or an open model

npm install @ai-sdk/[email protected] @ai-sdk/[email protected] [email protected]

import { readFile } from "node:fs/promises";
import { createServer } from "node:http";
import type { IncomingMessage, ServerResponse } from "node:http";
import type { AddressInfo } from "node:net";
import { createAnthropic } from "@ai-sdk/anthropic";
import { createOpenAI } from "@ai-sdk/openai";
import { streamText } from "ai";
import type { LanguageModel, ModelMessage } from "ai";

const apiKey = process.env.SAYGM_API_KEY;
if (!apiKey) {
  throw new Error("Set SAYGM_API_KEY to your SayGM key.");
}

const saygm = createOpenAI({ baseURL: "https://api.saygm.com/v1", apiKey });
const anthropic = createAnthropic({ baseURL: "https://api.saygm.com/v1", apiKey });

const MAX_BODY_BYTES = 64_000;
const MAX_MESSAGES = 20;

async function readMessages(request: IncomingMessage): Promise<ModelMessage[]> {
  const chunks: Buffer[] = [];
  let size = 0;
  for await (const chunk of request as AsyncIterable<Buffer>) {
    size += chunk.length;
    if (size > MAX_BODY_BYTES) {
      throw new Error("Request body too large");
    }
    chunks.push(chunk);
  }
  const { messages } = JSON.parse(Buffer.concat(chunks).toString("utf8")) as {
    messages: unknown[];
  };
  return messages
    .filter(
      (message): message is ModelMessage =>
        typeof message === "object" &&
        message !== null &&
        "role" in message &&
        (message.role === "user" || message.role === "assistant") &&
        "content" in message &&
        typeof message.content === "string",
    )
    .slice(-MAX_MESSAGES);
}

function chatRoute(model: LanguageModel) {
  return async (request: IncomingMessage, response: ServerResponse) => {
    // A JSON content type forces a CORS preflight, so other sites cannot post to this route.
    const [contentType] = (request.headers["content-type"] ?? "").split(";");
    if (contentType?.trim() !== "application/json") {
      response.writeHead(415).end();
      return;
    }
    const result = streamText({
      model,
      system: "You are a friendly assistant on an online shop's website. Keep answers short.",
      messages: await readMessages(request),
      maxOutputTokens: 400,
    });
    for await (const part of result.fullStream) {
      if (part.type === "error") {
        console.error(part.error);
        if (response.headersSent) {
          response.destroy();
        } else {
          response.writeHead(502).end();
        }
        return;
      }
      if (part.type === "text-delta") {
        if (!response.headersSent) {
          response.writeHead(200, { "content-type": "text/plain; charset=utf-8" });
        }
        response.write(part.text);
      }
    }
    response.end();
  };
}

const routes: Record<string, ReturnType<typeof chatRoute>> = {
  "/api/chat": chatRoute(saygm.chat("deepseek-v4-flash-0731")),
};

routes["/api/chat/claude"] = chatRoute(anthropic("claude-haiku-4-5"));

const files: Record<string, [string, string]> = {
  "/": ["index.html", "text/html"],
  "/chat.js": ["chat.js", "text/javascript"],
};

const server = createServer(async (request, response) => {
  const route = routes[request.url ?? ""];
  const file = files[request.url ?? ""];
  try {
    if (request.method === "POST" && route) {
      await route(request, response);
    } else if (request.method === "GET" && file) {
      const [name, type] = file;
      response.writeHead(200, { "content-type": type });
      response.end(await readFile(new URL(name, import.meta.url)));
    } else {
      response.writeHead(404).end();
    }
  } catch (error) {
    console.error(error);
    response.writeHead(400).end();
  }
});

server.listen(Number(process.env.PORT ?? 3000), "127.0.0.1", () => {
  const { port } = server.address() as AddressInfo;
  console.log(`Chatbot running at http://localhost:${port}`);
});

/**
 * Sends the conversation to the chat route and calls onText as each piece of the reply arrives.
 *
 * @param {string} url
 * @param {Array<{ role: "user" | "assistant", content: string }>} messages
 * @param {(text: string) => void} onText
 * @returns {Promise<string>} the full reply
 */
export async function streamChat(url, messages, onText) {
  const response = await fetch(url, {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify({ messages }),
  });
  if (!response.ok || !response.body) {
    throw new Error(`Chat request failed with status ${response.status}`);
  }
  const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
  let reply = "";
  for (;;) {
    const { done, value } = await reader.read();
    if (done) {
      return reply;
    }
    reply += value;
    onText(value);
  }
}

<div id="log"></div>
<form id="form">
  <input id="input" autocomplete="off" placeholder="Ask a question" maxlength="1000" required />
  <button id="send">Send</button>
</form>
<script type="module">
  import { streamChat } from "/chat.js";

  const MAX_HISTORY = 20;
  const messages = [];
  const log = document.getElementById("log");
  const input = document.getElementById("input");
  const send = document.getElementById("send");

  document.getElementById("form").addEventListener("submit", async (event) => {
    event.preventDefault();
    send.disabled = true;
    const question = { role: "user", content: input.value };
    messages.push(question);
    log.append(
      Object.assign(document.createElement("p"), { textContent: `You: ${input.value}` }),
    );
    input.value = "";

    const reply = document.createElement("p");
    log.append(reply);
    try {
      const text = await streamChat("/api/chat", messages.slice(-MAX_HISTORY), (chunk) => {
        reply.textContent += chunk;
      });
      messages.push({ role: "assistant", content: text });
    } catch {
      messages.splice(messages.indexOf(question), 1);
      reply.textContent = "Sorry, something went wrong. Please try again.";
    } finally {
      send.disabled = false;
    }
  });
</script>

node main.ts