glove-next

import { createChatHandler } from "glove-next";

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

function createChatHandler(
  config: ChatHandlerConfig
): (req: Request) => Promise<Response>

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

data: {"type":"text_delta","text":"Hello"}

data: {"type":"text_delta","text":", how"}

data: {"type":"text_delta","text":" can I help?"}

data: {"type":"done","message":{"sender":"agent","text":"Hello, how can I help?"},"tokens_in":42,"tokens_out":8}

import { createChatHandler } from "glove-next";

export const POST = createChatHandler({
  provider: "openai",
  model: "gpt-4o",
});

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

export const gloveClient = new GloveClient({
  endpoint: "/api/chat",
  systemPrompt: "You are a helpful coding assistant.",
  tools: [
    {
      name: "search_docs",
      description: "Search the documentation for a query.",
      inputSchema: z.object({
        query: z.string().describe("The search query."),
      }),
      async do(input) {
        const res = await fetch(`/api/docs/search?q=${encodeURIComponent(input.query)}`);
        return res.json();
      },
    },
  ],
  compaction: {
    compaction_instructions: "Summarize the conversation, preserving any code snippets discussed.",
    max_turns: 40,
  },
});

"use client";

import { GloveProvider } from "glove-react";
import { gloveClient } from "@/lib/glove";

export function Providers({ children }: { children: React.ReactNode }) {
  return <GloveProvider client={gloveClient}>{children}</GloveProvider>;
}

"use client";

import { useGlove } from "glove-react";
import { useRef, FormEvent } from "react";

export default function Chat() {
  const { timeline, streamingText, busy, sendMessage } = useGlove();
  const inputRef = useRef<HTMLInputElement>(null);

  function handleSubmit(e: FormEvent) {
    e.preventDefault();
    const text = inputRef.current?.value?.trim();
    if (!text || busy) return;
    sendMessage(text);
    if (inputRef.current) inputRef.current.value = "";
  }

  return (
    <div>
      <div>
        {timeline.map((entry, i) => (
          <div key={i}>
            {entry.kind === "user" && <p><strong>You:</strong> {entry.text}</p>}
            {entry.kind === "agent_text" && <p><strong>Agent:</strong> {entry.text}</p>}
            {entry.kind === "tool" && (
              <p><em>Tool: {entry.name} ({entry.status})</em></p>
            )}
          </div>
        ))}
        {streamingText && <p><strong>Agent:</strong> {streamingText}</p>}
      </div>
      <form onSubmit={handleSubmit}>
        <input ref={inputRef} disabled={busy} placeholder="Type a message..." />
        <button type="submit" disabled={busy}>Send</button>
      </form>
    </div>
  );
}

OPENAI_API_KEY=sk-your-api-key-here