glove-react

import { GloveClient } from "glove-react";

const client = new GloveClient({
  endpoint: "/api/chat",
  systemPrompt: "You are a helpful assistant.",
  tools: [/* ... */],
  compaction: {
    compaction_instructions: "Summarize the conversation so far.",
    max_turns: 20,
  },
  subscribers: [],
});

import { GloveProvider } from "glove-react";

function App() {
  return (
    <GloveProvider client={client}>
      <ChatInterface />
    </GloveProvider>
  );
}

import { useGlove } from "glove-react";

function Chat() {
  const {
    timeline,
    streamingText,
    busy,
    slots,
    tasks,
    stats,
    sendMessage,
    abort,
    renderSlot,
    resolveSlot,
    rejectSlot,
  } = useGlove();

  return (
    <div>
      {timeline.map((entry, i) => (
        <div key={i}>
          {entry.kind === "user" && <p>{entry.text}</p>}
          {entry.kind === "agent_text" && <p>{entry.text}</p>}
          {entry.kind === "tool" && <p>Tool: {entry.name}</p>}
        </div>
      ))}
      {streamingText && <p>{streamingText}</p>}
      {slots.map(renderSlot)}
    </div>
  );
}

function useGlove(config?: UseGloveConfig): UseGloveReturn

import { useGloveClient } from "glove-react";

function DebugPanel() {
  const client = useGloveClient();
  if (!client) return <p>No GloveProvider found.</p>;
  return <pre>{client.systemPrompt}</pre>;
}

function useGloveClient(): GloveClient | null

import { z } from "zod";
import type { ToolConfig } from "glove-react";

const weatherTool: ToolConfig<{ city: string }> = {
  name: "get_weather",
  description: "Get current weather for a city.",
  inputSchema: z.object({ city: z.string() }),
  async do(input) {
    const res = await fetch(`https://api.weather.example/v1?city=${input.city}`);
    return res.json();
  },
};

function defineTool<I extends z.ZodType, D extends z.ZodType, R extends z.ZodType = z.ZodVoid>(
  config: DefineToolConfig<I, D, R>
): ToolConfig<z.infer<I>>

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

const askPreference = defineTool({
  name: "ask_preference",
  description: "Ask the user to pick a preference.",
  inputSchema: z.object({
    question: z.string(),
    options: z.array(z.string()),
  }),
  displayPropsSchema: z.object({
    question: z.string(),
    options: z.array(z.string()),
  }),
  resolveSchema: z.object({ choice: z.string() }),
  displayStrategy: "hide-on-complete",

  async do(input, display) {
    const result = await display.pushAndWait({
      question: input.question,
      options: input.options,
    });
    return { status: "success", data: `User chose: ${result.choice}` };
  },

  render({ props, resolve }) {
    return (
      <div>
        <p>{props.question}</p>
        {props.options.map((opt) => (
          <button key={opt} onClick={() => resolve({ choice: opt })}>
            {opt}
          </button>
        ))}
      </div>
    );
  },
});

const confirmTool: ToolConfig<{ message: string }> = {
  name: "confirm",
  description: "Ask the user to confirm an action.",
  inputSchema: z.object({ message: z.string() }),
  async do(input, display) {
    const confirmed = await display.pushAndWait<{ message: string }, boolean>({
      input,
    });
    return confirmed ? "User confirmed." : "User declined.";
  },
  render({ data, resolve }) {
    return (
      <div>
        <p>{data.message}</p>
        <button onClick={() => resolve(true)}>Yes</button>
        <button onClick={() => resolve(false)}>No</button>
      </div>
    );
  },
};

type TimelineEntry =
  | { kind: "user"; text: string; images?: string[] }
  | { kind: "agent_text"; text: string }
  | { kind: "tool"; id: string; name: string; input: unknown; status: "running" | "success" | "error"; output?: string; renderData?: unknown };

type ToolEntry = Extract<TimelineEntry, { kind: "tool" }>;

type SlotDisplayStrategy = "stay" | "hide-on-complete" | "hide-on-new";

interface EnhancedSlot extends Slot<unknown> {
  toolName: string;
  toolCallId: string;
  createdAt: number;
  displayStrategy: SlotDisplayStrategy;
  status: "pending" | "resolved" | "rejected";
}

import { MemoryStore } from "glove-react";

const store = new MemoryStore("session-1");

import { createRemoteStore } from "glove-react";

const store = createRemoteStore("session-123", {
  async getMessages(sessionId) {
    const res = await fetch(`/api/sessions/${sessionId}/messages`);
    return res.json();
  },
  async appendMessages(sessionId, messages) {
    await fetch(`/api/sessions/${sessionId}/messages`, {
      method: "POST",
      body: JSON.stringify(messages),
    });
  },
});

function createRemoteStore(
  sessionId: string,
  actions: RemoteStoreActions
): StoreAdapter

import { createRemoteModel } from "glove-react";

const model = createRemoteModel("my-model", {
  async prompt(request) {
    const res = await fetch("/api/custom-llm", {
      method: "POST",
      body: JSON.stringify(request),
    });
    return res.json();
  },
});

function createRemoteModel(
  name: string,
  actions: RemoteModelActions
): ModelAdapter

type RemoteStreamEvent =
  | { type: "text_delta"; text: string }
  | { type: "tool_use"; id: string; name: string; input: unknown }
  | { type: "done"; message: Message; tokens_in: number; tokens_out: number };

import { createEndpointModel } from "glove-react";

const model = createEndpointModel("/api/chat");

function createEndpointModel(endpoint: string): ModelAdapter

import { parseSSEStream } from "glove-react";

const response = await fetch("/api/chat", { method: "POST", body: "..." });

for await (const event of parseSSEStream(response)) {
  if (event.type === "text_delta") {
    process.stdout.write(event.text);
  }
}

function parseSSEStream(response: Response): AsyncIterable<RemoteStreamEvent>

import { Render } from "glove-react";

type RenderStrategy = "interleaved" | "slots-before" | "slots-after" | "slots-only";

import { Render, useGlove } from "glove-react";

function Chat() {
  const glove = useGlove();

  return (
    <Render
      glove={glove}
      strategy="interleaved"
      renderMessage={({ entry }) => (
        <div className={entry.kind === "user" ? "user-msg" : "agent-msg"}>
          {entry.text}
        </div>
      )}
      renderToolStatus={({ entry, hasSlot }) => (
        <div className="tool-status">
          <span>{entry.name}: {entry.status}</span>
          {hasSlot && <span> (has UI)</span>}
        </div>
      )}
      renderStreaming={({ text }) => (
        <div className="streaming">{text}</div>
      )}
      renderInput={({ busy, send }) => (
        <form onSubmit={(e) => {
          e.preventDefault();
          const input = e.currentTarget.elements.namedItem("msg") as HTMLInputElement;
          send(input.value);
          input.value = "";
        }}>
          <input name="msg" disabled={busy} placeholder="Type a message..." />
          <button type="submit" disabled={busy}>Send</button>
        </form>
      )}
    />
  );
}