Public beta

UI Components for Agent Harnesses

Schema-based components with bidirectional type safety. Prop schemas define what LLMs send. Action schemas define what users send back. Works across LangChain, Claude, Vercel AI SDK, and more.

Works with

LangChain

Claude

React

Next.js

Electron

React Native

Vercel AI

Browse Components View on GitHub

Schema Architecture

Prop Schema (LLM → UI)

emailCardSchema = z.object({
  messageId: z.string(),
  from: z.object({
    name: z.string(),
    email: z.string()
  }),
  subject: z.string()
})

Defines what data the LLM sends to render components. Zod validation ensures type safety.

Action Schema (User → LLM)

emailCardActions = {
  reply: {
    params: z.object({
      messageId: z.string(),
      threadId: z.string()
    })
  }
}

Defines what data components send back when users interact. Bidirectional type safety.

Schema-First

Prop schemas define LLM outputs. Action schemas define user inputs. Zod validation ensures type safety in both directions.

Framework-Agnostic

Works with LangChain, Claude, CrewAI, Vercel AI SDK. Universal component registry that adapts to any runtime.

Cross-Platform

Next.js, Electron, React Native—anywhere React runs. Server-side, client-side, or native. Your stack, your rules.

Why harness-ui?

Streaming-Aware

Components handle partial data and loading states gracefully out of the box. No more flickering or awkward jumps.

Bidirectional Actions

The agent renders the UI, and the user can act back. Simplified event handling for agent-to-UI loops.

Zero Dependencies

We don't force you into Vercel AI SDK or LangChain. Use whatever LLM orchestrator you want.

// Framework-agnostic streaming

import {
  StreamingProvider,
  useStreamingController,
  ConnectedStreamingText
} from "harness-ui";

// Push chunks from SSE, fetch, or WebSocket
const { pushChunk, complete } = useStreamingController();
const sse = new EventSource("/api/chat");
sse.onmessage = (e) => pushChunk("msg-1", e.data);
sse.onerror = () => complete("msg-1");

// Component auto-updates
<ConnectedStreamingText streamId="msg-1" />

Built for Verticals

Don't waste time building basic data displays for every industry. Use our pre-built, schema-first components tailored for specific verticals.

Healthcare

HIPAA-ready appointment cards, patient charts, and lab result visualizations.

Legal

Document redline viewers, contract status trackers, and case file organizers.

Construction

Blueprint markups, supply chain logistics, and project timeline components.

Creative

Asset browsers, moodboard generators, and style guide tokens.

How we compare

The first UI library built specifically for Agentic workflows.

Feature	Vercel AI Elements	harness-ui	Vercel streamUI
Generative UI	Manual (developer writes conditionals)	Built-in registry pattern	Built-in (server-side only)
CSR support	Yes	Yes	No (RSC only)
SSR support	Yes	Yes	Yes
Cross-platform	Next.js only	Electron, RN, Web	Next.js only
Schema validation	None	Zod built-in	None
MCP discovery	No	Yes	No
Production ready	Yes	Yes	Experimental

Ready to build your next agent?

Start with our industry-organized shortcuts and scale with our composable primitives.

Explore Components Star on GitHub