genui-renderer-shadcn

A React component library with AI-ready schemas for building dynamic UIs. Each component includes JSON Schema definitions and metadata, enabling LLMs to understand and generate valid component configurations.

Installation

npm install genui-renderer-shadcn

Features

• 🎨 shadcn/ui styled components - Beautiful, accessible React components
• 📋 JSON Schema definitions - Each component has a complete schema for validation
• 🤖 AI-ready metadata - Rich descriptions for LLM decision-making
• 📦 Build-time registry - Pre-generated component catalog as JSON
• ⚡ Zero runtime overhead - Registry is built at package publish time

Usage

Using Components

import { MetricsCard } from 'genui-renderer-shadcn';

function Dashboard() {
  return (
    <MetricsCard
      title="Q4 Sales"
      subtitle="Last updated 5 min ago"
      layout="grid"
      cols={3}
      metrics={[
        {
          label: "Revenue",
          value: "$125.4K",
          delta: 12.5,
          hint: "vs last quarter"
        },
        {
          label: "Customers",
          value: "3,421",
          delta: -2.3,
          hint: "30-day active"
        },
        {
          label: "Conversion",
          value: "18.2%",
          delta: 5.8
        }
      ]}
    />
  );
}

Using the Registry

The package includes a pre-built registry of all components with their schemas:

import registry from 'genui-renderer-shadcn/registry.json';

// Registry structure:
{
  "version": "1.0.0",
  "components": [
    {
      "id": "metrics_card",
      "name": "Metrics Card",
      "description": "A single card component that displays multiple KPI metrics...",
      "inputSchema": { /* JSON Schema */ },
      "capabilities": ["kpi", "numbers", "trend-delta"],
      "useCases": ["Business KPIs", "Sales dashboards", ...],
      "dataRequirements": { /* what data the component needs */ },
      "examples": [ /* example configurations */ ]
    }
  ],
  "hash": "sha256..."
}

Integration with AI Systems

Send the registry to your backend/LLM to enable dynamic UI generation:

// 1. Import the registry
import registry from 'genui-renderer-shadcn/registry.json';

// 2. Send to your AI backend
async function initializeAI() {
  await fetch('/api/ui-registry', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Registry-Hash': registry.hash
    },
    body: JSON.stringify(registry)
  });
}

// 3. LLM can now generate valid component props
const aiResponse = await generateUI("Show sales metrics for Q4");
// Returns: { component: "metrics_card", props: { ... } }

// 4. Render dynamically
import { MetricsCard } from 'genui-renderer-shadcn';

function DynamicUI({ config }) {
  if (config.component === 'metrics_card') {
    return <MetricsCard {...config.props} />;
  }
}

Available Components

MetricsCard

Displays KPI metrics in a card format with optional trends and hints.

Props:

• title?: Card title
• subtitle?: Card subtitle
• layout?: "grid" | "list" (default: "grid")
• cols?: 2 | 3 | 4 (default: 3)
• metrics: Array of metric objects:
  • label: Metric name (required)
  • value: Metric value (required)
  • delta?: Percentage change
  • hint?: Additional context
• className?: Additional CSS classes

Use Cases:

• Business KPIs and metrics
• Sales performance dashboards
• Analytics summaries
• System performance stats

Component Discovery

Each component spec includes rich metadata for AI decision-making:

import { metricsCardSpec } from 'genui-renderer-shadcn';

console.log(metricsCardSpec);
// {
//   id: "metrics_card",
//   description: "A single card component that displays...",
//   capabilities: ["kpi", "numbers", "trend-delta", ...],
//   useCases: ["Business KPIs", "Sales dashboards", ...],
//   dataRequirements: {
//     required: ["Array of metrics"],
//     minMetrics: 1,
//     maxMetrics: 12
//   },
//   inputSchema: { /* JSON Schema */ }
// }

TypeScript Support

Full TypeScript support with exported types:

import type { MetricsCardProps, Metric } from 'genui-renderer-shadcn';

const metric: Metric = {
  label: "Revenue",
  value: "$100K",
  delta: 10.5,
  hint: "Monthly"
};

const props: MetricsCardProps = {
  title: "KPIs",
  metrics: [metric]
};

Schema Validation

Use the JSON schemas for runtime validation:

import Ajv from 'ajv';
import registry from 'genui-renderer-shadcn/registry.json';

const ajv = new Ajv();
const metricsSchema = registry.components.find(c => c.id === 'metrics_card').inputSchema;
const validate = ajv.compile(metricsSchema);

const valid = validate({
  metrics: [
    { label: "Revenue", value: "$100K" }
  ]
});

if (!valid) console.log(validate.errors);

Styling

Components use Tailwind CSS classes and expect these CSS variables:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --border: 214.3 31.8% 91.4%;
  /* Add more as needed */
}

Components are designed to work with shadcn/ui themes.

License

MIT