harness-ui

Universal React generative UI system for AI agents.

npm

Installation

bun add @swarmify/harness-ui

Peer dependencies: react >= 18.0.0

Tailwind CSS (required)

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/harness-ui/src/**/*.{js,ts,jsx,tsx}',
  ],
}

What makes harness-ui different

• Dual-path action routing — sync actions execute tools directly; agent actions route to LLM reasoning
• Universal React — works in CSR, SSR, RSC, Electron, React Native
• Schema-first — Zod schemas validate LLM output before render
• Registry pattern — LLM outputs component names, client renders from registry
• MCP discovery — components auto-exposed to LLM as tools
• Bandwidth efficient — JSON payloads (~50 bytes), not streamed components

Quick Start

import { getComponent } from '@swarmify/harness-ui';

const Component = getComponent(llmOutput.component);
if (Component) {
  return <Component {...llmOutput.props} onAction={handleAction} />;
}

Documentation

| Doc | Content | |-----|---------| | 01-component-system | Registry, schemas, catalog, authoring best practices | | 02-action-routing | Dual-path actions, sync vs agent, rendering models, protocol comparison | | 03-design-language | Colors, typography, animations, card rules, accessibility | | 04-infrastructure | MCP server, streaming, host integration, themes |

Components

60+ components across 8 categories:

| Category | Count | Examples | |----------|-------|---------| | Core | 25 | email_card, ask_permission, collect_form_data, review_artifacts | | Data Display | 3 | chart_card, table_card, link_card | | Domain | 14 | event_card, contact_card, twitter_post, places_map | | Animation | 4 | fade_in, stagger, pulse, shimmer | | Healthcare | 6 | patient_card, vitals_metric, prescription_card | | Legal | 6 | case_card, court_date_card, contract_summary | | Finance | 3 | stock_card, earnings_card, financials_table |