Next.js chat app

npm install @memsy-io/memsy openai

npm install @vercel/functions

# .env.local — gitignored by default in a create-next-app project
MEMSY_BASE_URL="https://api.memsy.io/v1"
MEMSY_API_KEY="msy_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
OPENAI_API_KEY="sk-..."

// lib/memsy.ts
import { MemsyClient } from "@memsy-io/memsy";

function required(name: string): string {
  const value = process.env[name];
  if (!value) throw new Error(`Missing required env var: ${name}`);
  return value;
}

// Module scope: Next reuses the module across requests in a warm server.
export const memsy = new MemsyClient({
  baseUrl: required("MEMSY_BASE_URL"),
  apiKey: required("MEMSY_API_KEY"),
});

// auth.ts
/**
 * The current user's id, or null if nobody is signed in.
 *
 * This is the one function to replace. Two requirements, and they are the
 * whole security model of the recipe:
 *
 *   1. It runs on the SERVER. A client-supplied id is a field the client
 *      can edit, and editing it reads someone else's memories.
 *   2. The id is STABLE. It becomes `actor_id`, so a value that changes
 *      orphans everything recorded under the old one.
 */
export async function currentUserId(_req: Request): Promise<string | null> {
  throw new Error(
    "currentUserId() is not wired up yet — return your session's user id.",
  );
}

// app/api/chat/route.ts
import { currentUserId } from "@/auth";
import OpenAI from "openai";
import { memsy } from "@/lib/memsy";

const openai = new OpenAI();

export async function POST(req: Request) {
  // The actor id comes from the server-side session — NEVER from the
  // request body. A client-supplied actor_id lets any user read any
  // other user's memories by editing one JSON field.
  const userId = await currentUserId(req);
  if (!userId) {
    return new Response("Unauthorized", { status: 401 });
  }

  const { message, sessionId } = (await req.json()) as {
    message: string;
    sessionId: string;
  };

  // 1. Recall — what has this user told us before that bears on this?
  const recalled = await memsy.search(message, {
    actorId: userId,
    limit: 5,
  });

  const context = recalled.results.length
    ? recalled.results.map((r) => `- ${r.content}`).join("\n")
    : "(nothing on file for this user yet)";

  // 2. Ground.
  const completion = await openai.chat.completions.create({
    model: "gpt-4o-mini",
    messages: [
      {
        role: "system",
        content:
          "You are a helpful assistant with a long memory. Use the facts " +
          "below when they are relevant, and refer to them naturally — " +
          "do not announce that you are consulting your memory.\n\n" +
          `What you know about this user:\n${context}`,
      },
      { role: "user", content: message },
    ],
  });

  const reply = completion.choices[0]?.message?.content ?? "";

  // 3. Record — both sides of the turn, in one batch.
  await memsy.ingest([
    {
      actorId: userId,
      sessionId,
      kind: "user_message",
      content: message,
    },
    {
      actorId: userId,
      sessionId,
      kind: "assistant_message",
      content: reply,
    },
  ]);

  return Response.json({ reply });
}

import { waitUntil } from "@vercel/functions";

// ... after building `reply`:
waitUntil(
  memsy
    .ingest([
      { actorId: userId, sessionId, kind: "user_message", content: message },
      { actorId: userId, sessionId, kind: "assistant_message", content: reply },
    ])
    // A failed write must not take down a reply the user already sees.
    .catch((err) => console.error("[memsy] ingest failed", err)),
);

return Response.json({ reply });

// A stable id per chat thread, created when the thread is created.
const sessionId = `chat_${threadId}`;

"use client";
import { useState } from "react";

export function Chat({ threadId }: { threadId: string }) {
  const [reply, setReply] = useState("");

  async function send(message: string) {
    const res = await fetch("/api/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      // No actor id here — the server reads it from the session.
      body: JSON.stringify({ message, sessionId: `chat_${threadId}` }),
    });

    // Check res.ok before parsing. A 401 returns the plain text
    // "Unauthorized", so res.json() would throw while parsing it and the
    // button would appear to do nothing — which is exactly what a reader
    // hits first, before they are signed in.
    if (!res.ok) {
      setReply(`Request failed (${res.status}).`);
      return;
    }

    const data = await res.json();
    setReply(data.reply);
  }

  // Render `reply`. A component that stores an answer and returns only the
  // button is a component whose button appears to do nothing -- on the 401
  // and on the 200 alike.
  return (
    <>
      <button onClick={() => send("What did we decide about pricing?")}>Ask</button>
      {reply && <p>{reply}</p>}
    </>
  );
}