Show your work

pnpm add glove-react glove-next zod

import { createChatHandler } from "glove-next";

export const POST = createChatHandler({
  provider: "anthropic",
  model: "claude-sonnet-4-20250514",
});

import { GloveClient, defineTool } from "glove-react";
import { z } from "zod";

const change = z.object({ number: z.number(), title: z.string(), labels: z.array(z.string()) });

// Shows the notes and keeps going: pushAndForget.
const showNotes = defineTool({
  name: "show_release_notes",
  description: "Show draft release notes to the user. Use after drafting them.",
  inputSchema: z.object({ version: z.string(), changes: z.array(change) }),
  displayPropsSchema: z.object({ version: z.string(), changes: z.array(change) }),
  async do(input, display) {
    await display.pushAndForget(input);
    return { status: "success", data: "Shown to the user." };
  },
  render({ props }) {
    return (
      <section>
        <h3>Release {props.version}</h3>
        <ul>{props.changes.map((c) => <li key={c.number}>#{c.number} {c.title}</li>)}</ul>
      </section>
    );
  },
});

// Asks and waits: pushAndWait. The model never sees the button, only the outcome.
const tagRelease = defineTool({
  name: "tag_release",
  description: "Tag and publish a release. Always confirms with the user first.",
  inputSchema: z.object({ version: z.string() }),
  displayPropsSchema: z.object({ version: z.string() }),
  resolveSchema: z.object({ confirmed: z.boolean() }),
  displayStrategy: "hide-on-complete",
  unAbortable: true,
  async do({ version }, display) {
    const { confirmed } = await display.pushAndWait({ version });
    if (!confirmed) return { status: "error", data: null, message: "The user cancelled." };
    const res = await fetch("/api/releases", { method: "POST", body: JSON.stringify({ version }) });
    return { status: "success", data: await res.json() };
  },
  render({ props, resolve }) {
    return (
      <div>
        <p>Tag and publish {props.version}?</p>
        <button onClick={() => resolve({ confirmed: true })}>Publish</button>
        <button onClick={() => resolve({ confirmed: false })}>Cancel</button>
      </div>
    );
  },
});

export const gloveClient = new GloveClient({
  endpoint: "/api/chat",
  systemPrompt: "You help a software team ship releases. Use tools for facts; never guess.",
  tools: [
    {
      name: "list_merged_changes",
      description: "List pull requests merged on or after a date, newest first.",
      inputSchema: z.object({ since: z.string() }),
      async do({ since }) {
        const changes = await (await fetch(`/api/changes?since=${since}`)).json();
        return { status: "success", data: changes }; // plain tools return ToolResultData
      },
    },
    showNotes,
    tagRelease,
  ],
});

"use client";
import { GloveProvider, Render, useGlove } from "glove-react";
import { gloveClient } from "@/lib/glove";

function Chat() {
  const glove = useGlove();
  return (
    <Render
      glove={glove}
      renderMessage={({ entry }) => <p><b>{entry.kind === "user" ? "You" : "Ship"}:</b> {entry.text}</p>}
      renderStreaming={({ text }) => <p style={{ opacity: 0.7 }}>{text}</p>}
      renderInput={({ send, busy }) => (
        <form
          onSubmit={(e) => {
            e.preventDefault();
            const input = e.currentTarget.elements.namedItem("msg") as HTMLInputElement;
            if (input.value.trim()) send(input.value.trim());
            input.value = "";
          }}
        >
          <input name="msg" disabled={busy} placeholder="Draft notes for 2.4.0" />
        </form>
      )}
    />
  );
}

export default function Page() {
  return <GloveProvider client={gloveClient}><Chat /></GloveProvider>;
}