@actionbookdev/json-ui

Universal JSON-to-UI rendering components for AI Agent reports, based on json-render.

AI Agents output structured JSON, json-ui renders it into beautiful HTML reports.

Installation

pnpm add @actionbookdev/json-ui

CLI Usage

# Render JSON and open in browser
json-ui render report.json

# Render to file
json-ui render report.json -o out.html

# Read from stdin (pipe from AI Agent)
cat report.json | json-ui render -

Quick Start

import {
  Report,
  BrandHeader,
  Section,
  MetricsGrid,
  Table,
  Callout,
  BrandFooter,
} from '@actionbookdev/json-ui';

function DashboardReport() {
  return (
    <Report>
      <BrandHeader badge="📊 Weekly Report" />
      <Section title="Overview" icon="chart">
        <MetricsGrid
          metrics={[
            { label: 'Users', value: '12.5K', trend: 'up' },
            { label: 'Revenue', value: '$48K', trend: 'up' },
          ]}
          cols={2}
        />
      </Section>
      <Section title="Alerts" icon="warning">
        <Callout type="tip" title="Performance" content="API latency reduced by 60%" />
      </Section>
      <BrandFooter
        timestamp={new Date().toISOString()}
        attribution="Powered by ActionBook"
      />
    </Report>
  );
}

Components

Layout

| Component | Description | |-----------|-------------| | Report | Top-level container with theme support (light/dark/auto) | | Section | Collapsible section with title and icon | | Grid | Grid layout container | | Card | Card container with padding and shadow |

Text Content

| Component | Description | |-----------|-------------| | Prose | Markdown-like text (bold, italic, code, lists) | | Abstract | Abstract text with keyword highlighting | | Highlight | Blockquote with type styling (quote/important/warning) | | Callout | Colored callout boxes (info/tip/warning/important/note) | | KeyPoint | Key finding card with icon |

Academic / Technical

| Component | Description | |-----------|-------------| | Formula | LaTeX formula rendering | | Theorem | Theorem/lemma/proposition/corollary blocks | | Algorithm | Pseudocode with line numbers and indentation | | CodeBlock | Code block with syntax and line numbers | | DefinitionList | Term/definition pairs |

Data Display

| Component | Description | |-----------|-------------| | MetricsGrid | Metric cards with trend indicators | | Table | Generic table with striped/compact options | | ResultsTable | Results table with cell highlighting | | ContributionList | Numbered items with badges | | MethodOverview | Step-by-step flow visualization | | TagList | Grouped tags |

Media

| Component | Description | |-----------|-------------| | Image | Image with caption | | Figure | Multi-image figure with label and caption |

Interactive

| Component | Description | |-----------|-------------| | LinkButton | Link button with icon | | LinkGroup | Group of link buttons |

Info Headers

| Component | Description | |-----------|-------------| | PaperHeader | Title, ID, date, categories | | AuthorList | People with affiliations | | BrandHeader | Top badge and branding | | BrandFooter | Timestamp and attribution |

Catalog (for json-render)

import { catalog } from '@actionbookdev/json-ui/catalog';

// Use with json-render
const ui = createUI(catalog);

Features

• Light/dark theme auto-detection
• Responsive layout
• Print-optimized styles
• LaTeX basic rendering (Greek letters, superscripts, common symbols)
• All components validated with Zod schemas

License

MIT