IGNIS Guardrails Package

A production-ready React guardrails dashboard package for AI safety monitoring, policy compliance tracking, and operational guardrail visibility. Built with TypeScript, Tailwind CSS, and React for easy integration into modern applications.

Perfect for: AI safety operations, guardrail compliance dashboards, runtime policy monitoring, and model risk observability.

Table of Contents

• Key Features
• Installation
• Package Exports
• API Reference
• Configuration
• React Integration Guide
• Next.js Integration
• Styling and Customization
• Troubleshooting
• Additional Resources

Key Features

• Production-Ready - Guardrails dashboard components with TypeScript type safety
• Direct Configuration - Prop-based setup with explicit API URLs and auth token support
• React Components - Drop-in React integration via ReactGuardrailsDashboard
• Optional Filter Controls - Account and flow filters controlled by config
• Flexible Authentication - Supports bearer token and custom headers
• Responsive Design - Adaptive dashboard layout for desktop and mobile
• Callbacks for Integrators - onError and onDataLoad hooks
• npm Publishing Ready - Public package metadata aligned for npmjs publishing

Installation

Install the package from npm:

npm install @tenarai-ignis/guardrails

Peer Dependencies

This package requires React 16.8+ and React DOM 16.8+:

npm install react react-dom

Quick Start

import { ReactGuardrailsDashboard, type GuardrailsConfig } from '@tenarai-ignis/guardrails/react';
import '@tenarai-ignis/guardrails/styles';

function App() {
  const config: GuardrailsConfig = {
    guardrailsApiUrl: 'https://api.example.com/api/v1/observability/guardrails_summary',
    accountsApiUrl: 'https://api.example.com/api/v1/accounts',
    flowsApiUrl: 'https://api.example.com/api/v1/flows/all',
    token: 'your-auth-token',
    enableAccountFlowsFilter: true,
    headers: {
      'content-type': 'application/json',
      'x-tenant-id': 'tenant-001'
    },
    theme: 'light',
    showFilters: true
  };

  return <ReactGuardrailsDashboard config={config} />;
}

export default App;

Package Exports

The following are available as named imports from @tenarai-ignis/guardrails:

| Export | Type | Description | |--------|------|-------------| | ReactGuardrailsDashboard | React Component | Main guardrails dashboard component | | withGuardrailsConfig | HOC | Higher-order config wrapper for React | | GuardrailsConfig | TypeScript Interface | Configuration type definition | | DashboardProps | TypeScript Interface | Props type for dashboard component | | FilterOptions | TypeScript Interface | Account/domain/flow filter options |

import {
  ReactGuardrailsDashboard,
  type GuardrailsConfig,
  type DashboardProps,
  type FilterOptions
} from '@tenarai-ignis/guardrails';

import '@tenarai-ignis/guardrails/styles';

API Reference

Overview

The dashboard works with these endpoints. Requests include Authorization: Bearer {token} when token is provided, plus any custom headers from config.

1. Guardrails Summary API

Method: POST
URL: {guardrailsApiUrl}

Request Body

{
  "start_date": "2026-07-01",
  "end_date": "2026-07-10",
  "flow_ids": ["flow-abc123"],
  "account_ids": ["acc-001"],
  "domains": ["domain-001"]
}

| Field | Type | Required | Description | |-------|------|----------|-------------| | start_date | YYYY-MM-DD string | Yes | Start date for the query window | | end_date | YYYY-MM-DD string | Yes | End date for the query window | | flow_ids | string[] | No | Filter by specific flow IDs | | account_ids | string[] | No | Filter by account IDs | | domains | string[] | No | Filter by domain IDs |

Expected Response (example)

{
  "guardrails_summary": {
    "total_events": 4821,
    "blocked_events": 127,
    "allow_rate": 0.973,
    "block_rate": 0.027,
    "top_violations": [
      { "policy": "PII Detection", "count": 64 },
      { "policy": "Prompt Injection", "count": 31 }
    ]
  }
}

2. Accounts API

Method: GET
URL: {accountsApiUrl}

Expected Response

{
  "data": {
    "items": [
      { "id": "acc-001", "name": "Acme Corp", "status": "active" },
      { "id": "acc-002", "name": "Globex Inc", "status": "active" }
    ]
  }
}

3. Flows API

Method: GET
URL: {flowsApiUrl}

Expected Response

{
  "data": {
    "items": [
      { "id": "flow-abc123", "name": "Customer Support Flow", "status": "active" },
      { "id": "flow-def456", "name": "Data Enrichment Flow", "status": "active" }
    ]
  }
}

Configuration

GuardrailsConfig Reference

interface GuardrailsConfig {
  // Required API endpoints
  guardrailsApiUrl: string;
  accountsApiUrl: string;
  flowsApiUrl: string;

  // Optional authentication
  token?: string;

  // Required behavior flag
  enableAccountFlowsFilter: boolean;

  // Optional custom headers
  headers?: Record<string, string | number | boolean>;

  // Optional UI behavior
  theme?: 'light' | 'dark';
  maxDays?: number;
  title?: string;
  showFilters?: boolean;
  enableRealtime?: boolean;

  // Legacy support
  baseURL?: string;
  guardrailsBaseURL?: string;
}

Configuration Examples

Basic Configuration:

const config: GuardrailsConfig = {
  guardrailsApiUrl: 'https://api.example.com/api/v1/observability/guardrails_summary',
  accountsApiUrl: 'https://api.example.com/api/v1/accounts',
  flowsApiUrl: 'https://api.example.com/api/v1/flows/all',
  token: sessionStorage.getItem('auth_token') || '',
  enableAccountFlowsFilter: true
};

Advanced Configuration:

const config: GuardrailsConfig = {
  guardrailsApiUrl: process.env.VITE_GUARDRAILS_API!,
  accountsApiUrl: process.env.VITE_ACCOUNTS_API!,
  flowsApiUrl: process.env.VITE_FLOWS_API!,
  token: getAuthToken(),
  enableAccountFlowsFilter: true,
  headers: {
    'x-api-key': process.env.VITE_API_KEY!,
    'x-tenant-id': getCurrentTenantId(),
    'x-request-id': crypto.randomUUID()
  }
};

React Integration Guide

Basic Usage

import React from 'react';
import { ReactGuardrailsDashboard, type GuardrailsConfig } from '@tenarai-ignis/guardrails/react';
import '@tenarai-ignis/guardrails/styles';

const GuardrailsPage: React.FC = () => {
  const config: GuardrailsConfig = {
    guardrailsApiUrl: 'https://api.example.com/api/v1/observability/guardrails_summary',
    accountsApiUrl: 'https://api.example.com/api/v1/accounts',
    flowsApiUrl: 'https://api.example.com/api/v1/flows/all',
    token: sessionStorage.getItem('auth_token') || '',
    enableAccountFlowsFilter: true
  };

  return <ReactGuardrailsDashboard config={config} />;
};

export default GuardrailsPage;

Usage with Error Handling

const GuardrailsPage: React.FC = () => {
  const [error, setError] = React.useState<string | null>(null);

  const config = {
    guardrailsApiUrl: process.env.REACT_APP_GUARDRAILS_API!,
    accountsApiUrl: process.env.REACT_APP_ACCOUNTS_API!,
    flowsApiUrl: process.env.REACT_APP_FLOWS_API!,
    token: getAuthToken(),
    enableAccountFlowsFilter: true
  };

  if (error) {
    return <div>{error}</div>;
  }

  return (
    <ReactGuardrailsDashboard
      config={config}
      onError={(err) => setError(err.message || 'Failed to load guardrails dashboard')}
      onDataLoad={(data) => console.log('Guardrails data loaded', data)}
    />
  );
};

Next.js Integration

App Router (Next.js 13+)

'use client';

import { ReactGuardrailsDashboard, type GuardrailsConfig } from '@tenarai-ignis/guardrails/react';
import '@tenarai-ignis/guardrails/styles';

export default function GuardrailsPage() {
  const config: GuardrailsConfig = {
    guardrailsApiUrl: process.env.NEXT_PUBLIC_GUARDRAILS_API!,
    accountsApiUrl: process.env.NEXT_PUBLIC_ACCOUNTS_API!,
    flowsApiUrl: process.env.NEXT_PUBLIC_FLOWS_API!,
    token: process.env.NEXT_PUBLIC_AUTH_TOKEN,
    enableAccountFlowsFilter: true
  };

  return <ReactGuardrailsDashboard config={config} />;
}

Pages Router (Next.js 12 and below)

import dynamic from 'next/dynamic';
import type { GuardrailsConfig } from '@tenarai-ignis/guardrails';
import '@tenarai-ignis/guardrails/styles';

const ReactGuardrailsDashboard = dynamic(
  () => import('@tenarai-ignis/guardrails/react').then(mod => mod.ReactGuardrailsDashboard),
  { ssr: false }
);

export default function GuardrailsPage() {
  const config: GuardrailsConfig = {
    guardrailsApiUrl: process.env.NEXT_PUBLIC_GUARDRAILS_API!,
    accountsApiUrl: process.env.NEXT_PUBLIC_ACCOUNTS_API!,
    flowsApiUrl: process.env.NEXT_PUBLIC_FLOWS_API!,
    token: process.env.NEXT_PUBLIC_AUTH_TOKEN,
    enableAccountFlowsFilter: true
  };

  return <ReactGuardrailsDashboard config={config} />;
}

Styling and Customization

Import styles once in your app:

import '@tenarai-ignis/guardrails/styles';

You can wrap the component in your own container to control layout and spacing.

Troubleshooting

Common Issues

Dashboard does not load:

• Verify API endpoints and network access
• Confirm token is valid and not expired
• Confirm response JSON shape is compatible

401 Unauthorized:

• Ensure token is supplied and refreshed
• Check auth header forwarding through gateway/proxy

Filters are missing:

• Set enableAccountFlowsFilter to true
• Ensure accounts and flows endpoints are reachable

Styles are missing:

• Import @tenarai-ignis/guardrails/styles

Additional Resources

• npm Package: @tenarai-ignis/guardrails
• Website: https://tenarai.com
• Integration Guide: MODULE_INTEGRATION_GUIDE.md

License

MIT License - Use freely in commercial and personal projects.

See LICENSE file for details.

Package Version: 0.0.1 Last Updated: July 2026
Published: @tenarai-ignis/guardrails on npm
Website: https://tenarai.com
Maintained by: Tenarai Ignis Team

Get Started Today: npm install @tenarai-ignis/guardrails