Deploy an AI chatbot with the AI SDK

import type { UIMessage } from "ai";
import { Pool } from "pg";

const pool = new Pool({ connectionString: process.env.DB_URL });

export async function loadChat(id: string): Promise<UIMessage[]> {
  const { rows } = await pool.query("SELECT messages FROM chats WHERE id = $1", [id]);
  return rows[0]?.messages ?? [];
}

export async function saveChat(id: string, messages: UIMessage[]) {
  await pool.query(
    `INSERT INTO chats (id, messages) VALUES ($1, $2)
     ON CONFLICT (id) DO UPDATE SET messages = $2, updated_at = now()`,
    [id, JSON.stringify(messages)],
  );
}

import pg from "pg";

const client = new pg.Client({ connectionString: process.env.DB_URL });
await client.connect();
await client.query(`
  CREATE TABLE IF NOT EXISTS chats (
    id text PRIMARY KEY,
    messages jsonb NOT NULL,
    updated_at timestamptz NOT NULL DEFAULT now()
  )
`);
await client.end();
console.log("The chats table is ready");

import { anthropic } from "@ai-sdk/anthropic";
import {
  convertToModelMessages,
  createUIMessageStreamResponse,
  generateId,
  isStepCount,
  streamText,
  toUIMessageStream,
  tool,
  validateUIMessages,
  type UIMessage,
} from "ai";
import { z } from "zod";
import { loadChat, saveChat } from "@/lib/chat-store";

const tools = {
  getTime: tool({
    description: "Get the current date and time in an IANA time zone, such as Europe/Berlin",
    inputSchema: z.object({ timeZone: z.string() }),
    execute: async ({ timeZone }) =>
      new Date().toLocaleString("en-US", { timeZone, dateStyle: "full", timeStyle: "short" }),
  }),
};

export async function POST(req: Request) {
  const { id, message }: { id: string; message: UIMessage } = await req.json();
  const messages = await validateUIMessages({
    messages: [...(await loadChat(id)), { ...message, role: "user" }],
    tools,
  });

  const result = streamText({
    model: anthropic("claude-haiku-5-5"),
    system: "You are a concise assistant. Use the getTime tool for questions about the current date or time.",
    messages: await convertToModelMessages(messages),
    tools,
    stopWhen: isStepCount(5),
  });
  result.consumeStream(); // finish and save the reply even if the browser disconnects

  return createUIMessageStreamResponse({
    stream: toUIMessageStream({
      stream: result.stream,
      originalMessages: messages,
      generateMessageId: generateId,
      onEnd: ({ messages }) => saveChat(id, messages),
    }),
  });
}

import { Suspense } from "react";
import { loadChat } from "@/lib/chat-store";
import { Chat } from "./chat";

export default function Page({ params }: PageProps<"/chat/[id]">) {
  return (
    <Suspense>
      <ChatWithHistory params={params} />
    </Suspense>
  );
}

async function ChatWithHistory({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  return <Chat id={id} initialMessages={await loadChat(id)} />;
}

"use client";

import { useChat } from "@ai-sdk/react";
import { DefaultChatTransport, type UIMessage } from "ai";
import { useState } from "react";

export function Chat({ id, initialMessages }: { id: string; initialMessages: UIMessage[] }) {
  const [input, setInput] = useState("");
  const { messages, sendMessage, status, error } = useChat({
    id,
    messages: initialMessages,
    transport: new DefaultChatTransport({
      api: "/api/chat",
      prepareSendMessagesRequest: ({ id, messages }) => ({
        body: { id, message: messages.at(-1) },
      }),
    }),
  });
  const busy = status === "submitted" || status === "streaming";

  return (
    <main className="mx-auto flex w-full max-w-2xl flex-1 flex-col gap-4 p-6">
      {messages.map((message) => (
        <div key={message.id} className={message.role === "user" ? "self-end rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-800" : ""}>
          {message.parts.map((part, i) =>
            part.type === "text" ? (
              <p key={i} className="whitespace-pre-wrap">{part.text}</p>
            ) : part.type.startsWith("tool-") ? (
              <p key={i} className="text-sm text-zinc-500">Called {part.type.slice(5)}</p>
            ) : null,
          )}
        </div>
      ))}
      {error && <p className="text-red-600">{error.message}</p>}
      <form
        className="mt-auto flex gap-2"
        onSubmit={(e) => {
          e.preventDefault();
          if (!input.trim()) return;
          sendMessage({ text: input });
          setInput("");
        }}
      >
        <input
          className="flex-1 rounded border px-3 py-2"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Ask something"
        />
        <button className="rounded bg-black px-4 py-2 text-white disabled:opacity-50" disabled={busy}>
          Send
        </button>
      </form>
    </main>
  );
}

import { timingSafeEqual } from "node:crypto";
import { NextResponse, type NextRequest } from "next/server";

export function proxy(request: NextRequest) {
  const { CHAT_USERNAME, CHAT_PASSWORD } = process.env;
  const expected = Buffer.from(`Basic ${Buffer.from(`${CHAT_USERNAME}:${CHAT_PASSWORD}`).toString("base64")}`);
  const given = Buffer.from(request.headers.get("authorization") ?? "");
  if (!CHAT_PASSWORD || given.length !== expected.length || !timingSafeEqual(given, expected)) {
    return new NextResponse("Sign in required", {
      status: 401,
      headers: { "WWW-Authenticate": 'Basic realm="Support chat"' },
    });
  }
  if (request.nextUrl.pathname === "/") {
    return NextResponse.redirect(new URL(`/chat/${crypto.randomUUID()}`, request.url));
  }
}

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: "standalone",
  outputFileTracingIncludes: { "/api/chat": ["./scripts/migrate.mjs"] },
  cacheComponents: true,
  partialPrefetching: true,
  turbopack: {
    rules: {
      "*.css": {
        loaders: ["@tailwindcss/turbopack"],
        as: "*.css",
      },
    },
  },
};

export default nextConfig;

FROM node:24-trixie AS build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:24-trixie-slim
WORKDIR /app
ENV NODE_ENV=production HOSTNAME=0.0.0.0 PORT=8080
COPY --from=build /app/public ./public
COPY --from=build /app/.next/standalone ./
COPY --from=build /app/.next/static ./.next/static
RUN mkdir .next/cache .next/server/route-cache \
    && chown 1000:1000 .next/cache .next/server/route-cache
USER 1000:1000
EXPOSE 8080
CMD ["node", "server.js"]

.git
.next
node_modules
.env*
*.log
Dockerfile
.dockerignore