Project: Build a Full-Stack AI Chat App with Next.js and Claude

import { index, integer, jsonb, pgTable, text, timestamp, uuid } from "drizzle-orm/pg-core";
 
export const conversations = pgTable(
  "conversations",
  {
    id: uuid("id").primaryKey().defaultRandom(),
    userId: text("user_id").notNull(),
    title: text("title").notNull().default("New chat"),
    createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
    updatedAt: timestamp("updated_at", { withTimezone: true }).notNull().defaultNow(),
  },
  (t) => [index("conversations_user_idx").on(t.userId, t.updatedAt)],
);
 
export const messages = pgTable(
  "messages",
  {
    id: uuid("id").primaryKey().defaultRandom(),
    conversationId: uuid("conversation_id")
      .notNull()
      .references(() => conversations.id, { onDelete: "cascade" }),
    role: text("role", { enum: ["user", "assistant"] }).notNull(),
    text: text("text").notNull(),
    inputTokens: integer("input_tokens"),
    outputTokens: integer("output_tokens"),
    createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
  },
  (t) => [index("messages_conversation_idx").on(t.conversationId, t.createdAt)],
);

import { drizzle } from "drizzle-orm/node-postgres";
import { Pool } from "pg";
import * as schema from "./schema";
 
export const db = drizzle({ client: new Pool({ connectionString: process.env.DATABASE_URL }), schema });

export interface StoredMessage {
  role: "user" | "assistant";
  text: string;
}
 
/** Rough token estimate for budgeting (about 4 characters per token in English). Use countTokens for exact numbers. */
export const estimateTokens = (text: string) => Math.ceil(text.length / 4);
 
/**
 * Keep the most recent messages that fit in `budget` tokens. The result starts with a user message
 * and alternates roles, as the Messages API expects.
 */
export function trimHistory(history: StoredMessage[], budget: number): StoredMessage[] {
  const kept: StoredMessage[] = [];
  let used = 0;
  for (let i = history.length - 1; i >= 0; i--) {
    const cost = estimateTokens(history[i]!.text);
    if (used + cost > budget && kept.length > 0) break;
    kept.unshift(history[i]!);
    used += cost;
  }
  while (kept.length > 0 && kept[0]!.role !== "user") kept.shift();
  return kept;
}

import { test } from "node:test";
import assert from "node:assert/strict";
import { trimHistory, type StoredMessage } from "./lib/history.ts";
 
const msg = (role: StoredMessage["role"], chars: number): StoredMessage => ({ role, text: "x".repeat(chars) });
 
test("keeps everything when it fits", () => {
  const h = [msg("user", 40), msg("assistant", 40), msg("user", 40)];
  assert.equal(trimHistory(h, 1000).length, 3);
});
 
test("drops the oldest messages first and starts with a user turn", () => {
  const h = [msg("user", 400), msg("assistant", 400), msg("user", 400), msg("assistant", 400), msg("user", 40)];
  const kept = trimHistory(h, 230); // 100 + 100 + 10 tokens fit; the oldest pair does not
  assert.deepEqual(kept.map((m) => m.role), ["user", "assistant", "user"]);
});
 
test("always keeps the newest message, even if it alone exceeds the budget", () => {
  const kept = trimHistory([msg("user", 8000)], 100);
  assert.equal(kept.length, 1);
});

// Replace with your auth provider's session lookup (Auth.js, Clerk, Supabase Auth, or your own).
// This demo version trusts a header, which is only acceptable for local development.
export async function getUserId(headers: Headers): Promise<string | null> {
  return headers.get("x-demo-user") ?? null;
}

import Anthropic from "@anthropic-ai/sdk";
import { and, asc, eq, gt, sql } from "drizzle-orm";
import { z } from "zod";
import { db } from "@/db";
import { conversations, messages } from "@/db/schema";
import { trimHistory } from "@/lib/history";
import { getUserId } from "@/lib/session";
 
const anthropic = new Anthropic();
const Body = z.object({ conversationId: z.uuid().optional(), message: z.string().trim().min(1).max(8000) });
const MESSAGES_PER_MINUTE = 10;
const HISTORY_BUDGET = 30_000;
 
const sse = (event: string, data: unknown) => `event: ${event}\ndata: ${JSON.stringify(data)}\n\n`;
 
export async function POST(request: Request) {
  const userId = await getUserId(request.headers);
  if (!userId) return Response.json({ error: "Sign in to chat" }, { status: 401 });
 
  const parsed = Body.safeParse(await request.json().catch(() => null));
  if (!parsed.success) return Response.json({ error: "Invalid request" }, { status: 400 });
  const { message } = parsed.data;
 
  // Rate limit: user messages in the last minute, across all of this user's conversations.
  const [{ count }] = await db
    .select({ count: sql<number>`count(*)::int` })
    .from(messages)
    .innerJoin(conversations, eq(messages.conversationId, conversations.id))
    .where(and(eq(conversations.userId, userId), eq(messages.role, "user"), gt(messages.createdAt, sql`now() - interval '1 minute'`)));
  if (count >= MESSAGES_PER_MINUTE) {
    return Response.json({ error: "You're sending messages quickly. Try again in a minute." }, { status: 429, headers: { "retry-after": "60" } });
  }
 
  // Load or create the conversation, always scoped to this user.
  let conversationId = parsed.data.conversationId;
  if (conversationId) {
    const owned = await db.query.conversations.findFirst({ where: and(eq(conversations.id, conversationId), eq(conversations.userId, userId)) });
    if (!owned) return Response.json({ error: "Conversation not found" }, { status: 404 });
  } else {
    const [created] = await db.insert(conversations).values({ userId }).returning({ id: conversations.id });
    conversationId = created!.id;
  }
 
  await db.insert(messages).values({ conversationId, role: "user", text: message });
  const stored = await db
    .select({ role: messages.role, text: messages.text })
    .from(messages)
    .where(eq(messages.conversationId, conversationId))
    .orderBy(asc(messages.createdAt));
  const history = trimHistory(stored, HISTORY_BUDGET);
 
  const isNew = !parsed.data.conversationId;
  const id = conversationId;
 
  const body = new ReadableStream<Uint8Array>({
    async start(controller) {
      const encoder = new TextEncoder();
      const send = (event: string, data: unknown) => controller.enqueue(encoder.encode(sse(event, data)));
      send("conversation", { id });
      try {
        const stream = anthropic.messages.stream(
          {
            model: "claude-opus-5-5",
            max_tokens: 4096,
            system: "You are a helpful, concise assistant. Use Markdown for code and lists.",
            cache_control: { type: "ephemeral" },
            messages: history.map((m) => ({ role: m.role, content: m.text })),
          },
          { signal: request.signal },
        );
        stream.on("text", (text) => send("text", { text }));
        const final = await stream.finalMessage();
        const reply = final.content.flatMap((b) => (b.type === "text" ? [b.text] : [])).join("");
 
        await db.insert(messages).values({
          conversationId: id,
          role: "assistant",
          text: reply,
          inputTokens: final.usage.input_tokens + (final.usage.cache_read_input_tokens ?? 0) + (final.usage.cache_creation_input_tokens ?? 0),
          outputTokens: final.usage.output_tokens,
        });
        await db.update(conversations).set({ updatedAt: new Date() }).where(eq(conversations.id, id));
        send("done", { stopReason: final.stop_reason });
 
        if (isNew) void nameConversation(id, message); // runs after the reply; failures are harmless
      } catch (error) {
        if (!request.signal.aborted) {
          console.error("chat stream failed", error);
          send("error", { message: "The reply was interrupted. Please try again." });
        }
      } finally {
        try {
          controller.close();
        } catch {
          // already closed because the client disconnected
        }
      }
    },
  });
 
  return new Response(body, { headers: { "content-type": "text/event-stream", "cache-control": "no-cache, no-transform" } });
}
 
// A small, fast model names new conversations from the first message.
async function nameConversation(conversationId: string, firstMessage: string) {
  try {
    const res = await anthropic.messages.create({
      model: "claude-haiku-4-5",
      max_tokens: 30,
      system: "Write a title of at most 6 words for a chat that starts with this message. Reply with the title only, no quotes.",
      messages: [{ role: "user", content: firstMessage.slice(0, 2000) }],
    });
    const title = res.content.flatMap((b) => (b.type === "text" ? [b.text] : [])).join("").trim().slice(0, 80);
    if (title) await db.update(conversations).set({ title }).where(eq(conversations.id, conversationId));
  } catch (error) {
    console.warn("title generation failed", error);
  }
}

"use client";
 
import { useRef, useState } from "react";
import { useRouter } from "next/navigation";
 
type Message = { role: "user" | "assistant"; text: string };
type Status = "idle" | "streaming" | "error";
 
async function* readEvents(body: ReadableStream<Uint8Array>) {
  const reader = body.getReader();
  const decoder = new TextDecoder();
  let buffer = "";
  for (;;) {
    const { value, done } = await reader.read();
    if (done) return;
    buffer += decoder.decode(value, { stream: true });
    let end: number;
    while ((end = buffer.indexOf("\n\n")) !== -1) {
      const block = buffer.slice(0, end);
      buffer = buffer.slice(end + 2);
      const event = /^event: (.+)$/m.exec(block)?.[1];
      const data = /^data: (.+)$/m.exec(block)?.[1];
      if (event && data) yield { event, data: JSON.parse(data) as Record<string, string> };
    }
  }
}
 
export function Chat({ conversationId, initialMessages }: { conversationId?: string; initialMessages: Message[] }) {
  const router = useRouter();
  const [messages, setMessages] = useState<Message[]>(initialMessages);
  const [input, setInput] = useState("");
  const [status, setStatus] = useState<Status>("idle");
  const [error, setError] = useState<string | null>(null);
  const idRef = useRef(conversationId);
  const abortRef = useRef<AbortController | null>(null);
 
  async function send(text: string) {
    setError(null);
    setStatus("streaming");
    setMessages((m) => [...m, { role: "user", text }, { role: "assistant", text: "" }]);
    const abort = new AbortController();
    abortRef.current = abort;
    try {
      const res = await fetch("/api/chat", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ conversationId: idRef.current, message: text }),
        signal: abort.signal,
      });
      if (!res.ok || !res.body) throw new Error(((await res.json().catch(() => null)) as { error?: string } | null)?.error ?? "Request failed");
      for await (const { event, data } of readEvents(res.body)) {
        if (event === "conversation" && !idRef.current) {
          idRef.current = data.id;
          router.replace(`/chat/${data.id}`, { scroll: false });
        } else if (event === "text") {
          setMessages((m) => [...m.slice(0, -1), { role: "assistant", text: m.at(-1)!.text + data.text }]);
        } else if (event === "error") {
          throw new Error(data.message);
        }
      }
      setStatus("idle");
    } catch (e) {
      if (abort.signal.aborted) return setStatus("idle"); // the user pressed Stop; keep the partial reply
      setError(e instanceof Error ? e.message : "Something went wrong");
      setStatus("error");
    }
  }
 
  return (
    <div className="flex flex-col gap-4">
      <div role="log" aria-live="polite" aria-busy={status === "streaming"} className="flex flex-col gap-3">
        {messages.map((m, i) => (
          <p key={i} className={m.role === "user" ? "self-end rounded-lg bg-muted px-3 py-2" : "whitespace-pre-wrap"}>
            {m.text}
          </p>
        ))}
      </div>
      {error ? <p role="alert">{error}</p> : null}
      <form
        onSubmit={(e) => {
          e.preventDefault();
          const text = input.trim();
          if (!text || status === "streaming") return;
          setInput("");
          void send(text);
        }}
        className="flex gap-2"
      >
        <textarea value={input} onChange={(e) => setInput(e.target.value)} aria-label="Message" className="flex-1 rounded-md border p-2" rows={2} />
        {status === "streaming" ? (
          <button type="button" onClick={() => abortRef.current?.abort()}>Stop</button>
        ) : (
          <button type="submit">Send</button>
        )}
      </form>
    </div>
  );
}

import { and, asc, eq } from "drizzle-orm";
import { headers } from "next/headers";
import { notFound, redirect } from "next/navigation";
import { Chat } from "@/components/chat";
import { db } from "@/db";
import { conversations, messages } from "@/db/schema";
import { getUserId } from "@/lib/session";
 
export default async function ConversationPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const userId = await getUserId(await headers());
  if (!userId) redirect("/sign-in");
 
  const conversation = await db.query.conversations.findFirst({ where: and(eq(conversations.id, id), eq(conversations.userId, userId)) });
  if (!conversation) notFound();
 
  const history = await db
    .select({ role: messages.role, text: messages.text })
    .from(messages)
    .where(eq(messages.conversationId, id))
    .orderBy(asc(messages.createdAt));
 
  return (
    <main className="mx-auto max-w-3xl p-4">
      <h1 className="mb-4 text-lg font-semibold">{conversation.title}</h1>
      <Chat conversationId={id} initialMessages={history} />
    </main>
  );
}