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();
  },
};

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 };

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>