React chat widget

import jwt from "jsonwebtoken";

app.post("/patchwork/mint", requireUser, (req, res) => {
  // Compose the subject from server session state, never from the request body.
  const subject = `${req.user.id}:${req.session.workspaceId}`;

  const token = jwt.sign(
    {
      iss: process.env.PATCHWORK_API_KEY_ID, // key_… — the public id
      aud: ["patchwork", "your-api"],
      sub: subject,
      conn: process.env.PATCHWORK_CONNECTION_ID,
    },
    process.env.PATCHWORK_PRIVATE_KEY,
    { algorithm: "RS256", expiresIn: 120, keyid: "your-app-2026-01" },
  );

  res.json({ token, expires_in: 120 });
});

import { PatchworkProvider, useAgent } from "@usepatchwork/react";

export function App() {
  return (
    <PatchworkProvider
      url="https://api.usepatchwork.co"
      connection={CONNECTION_ID}
      mint={async () => {
        const res = await fetch("/patchwork/mint", { method: "POST" });
        const { token } = await res.json();
        return token;
      }}
    >
      <Chat />
    </PatchworkProvider>
  );
}

function Chat() {
  const { messages, send, threads, openThread, newChat } = useAgent();
  const [draft, setDraft] = useState("");

  return (
    <div className="chat">
      <ol>
        {messages.map((m) => (
          <li key={m.id} data-role={m.role}>{m.content}</li>
        ))}
      </ol>

      <form onSubmit={(e) => { e.preventDefault(); send(draft); setDraft(""); }}>
        <input value={draft} onChange={(e) => setDraft(e.target.value)} />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

async function authHeaders() {
  const { token } = await fetch("/patchwork/mint", { method: "POST" })
    .then((r) => r.json());
  return { Authorization: `Bearer ${token}`, "Content-Type": "application/json" };
}

const thread = await fetch("https://api.usepatchwork.co/v1/loom/threads", {
  method: "POST",
  headers: await authHeaders(),
  body: JSON.stringify({ agent: "agent_4f3c..." }),
}).then((r) => r.json());