AI SummaryExpert guide for building AI-powered applications with the Glove TypeScript framework, helping developers create agent-based systems with tools and custom renderers. Ideal for developers working with Glove projects, React integrations, and AI model adapters.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "glove" skill in my project. Please run this command in my terminal: # Install skill into the correct directory (3 files) mkdir -p .claude/skills/glove && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/glove/SKILL.md "https://raw.githubusercontent.com/porkytheblack/glove/main/.claude/skills/glove/SKILL.md" && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/glove/api-reference.md "https://raw.githubusercontent.com/porkytheblack/glove/main/.claude/skills/glove/api-reference.md" && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/glove/examples.md "https://raw.githubusercontent.com/porkytheblack/glove/main/.claude/skills/glove/examples.md" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
Description
Expert guide for building AI-powered applications with the Glove framework. Use when working with glove-core, glove-react, glove-next, tools, display stack, model adapters, stores, or any Glove example project.
Package Overview
| Package | Purpose | Install | |---------|---------|---------| | glove-core | Runtime engine: agent loop, tool execution, display manager, model adapters, stores | pnpm add glove-core | | glove-react | React hooks (useGlove), GloveClient, GloveProvider, defineTool, <Render>, MemoryStore, ToolConfig with colocated renderers | pnpm add glove-react | | glove-next | One-line Next.js API route handler (createChatHandler) for streaming SSE | pnpm add glove-next | Most projects need just glove-react + glove-next. glove-core is included as a dependency of glove-react.
3. Define tools with `defineTool`
`tsx // lib/glove.tsx import { GloveClient, defineTool } from "glove-react"; import type { ToolConfig } from "glove-react"; import { z } from "zod"; const inputSchema = z.object({ question: z.string().describe("The question to display"), options: z.array(z.object({ label: z.string().describe("Display text"), value: z.string().describe("Value returned when selected"), })), }); const askPreferenceTool = defineTool({ name: "ask_preference", description: "Present options for the user to choose from.", inputSchema, displayPropsSchema: inputSchema, // Zod schema for display props resolveSchema: z.string(), // Zod schema for resolve value displayStrategy: "hide-on-complete", // Hide slot after user responds async do(input, display) { const selected = await display.pushAndWait(input); // typed! return { status: "success" as const, data: User selected: ${selected}, // sent to AI renderData: { question: input.question, selected }, // client-only }; }, render({ props, resolve }) { // typed props, typed resolve return ( <div> <p>{props.question}</p> {props.options.map(opt => ( <button key={opt.value} onClick={() => resolve(opt.value)}> {opt.label} </button> ))} </div> ); }, renderResult({ data }) { // renders from history const { question, selected } = data as { question: string; selected: string }; return <div><p>{question}</p><span>Selected: {selected}</span></div>; }, }); // Tools without display stay as raw ToolConfig const getDateTool: ToolConfig = { name: "get_date", description: "Get today's date", inputSchema: z.object({}), async do() { return { status: "success", data: new Date().toLocaleDateString() }; }, }; export const gloveClient = new GloveClient({ endpoint: "/api/chat", systemPrompt: "You are a helpful assistant.", tools: [askPreferenceTool, getDateTool], }); `
`defineTool` (recommended for tools with UI)
`typescript import { defineTool } from "glove-react"; const tool = defineTool({ name: string, description: string, inputSchema: z.ZodType, // Zod schema for tool input displayPropsSchema?: z.ZodType, // Zod schema for display props (recommended for tools with UI) resolveSchema?: z.ZodType, // Zod schema for resolve value (omit for pushAndForget-only) displayStrategy?: SlotDisplayStrategy, requiresPermission?: boolean, unAbortable?: boolean, // Tool runs
Glove Framework — Development Guide
You are an expert on the Glove framework. Use this knowledge when writing, debugging, or reviewing Glove code.
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster