How do I install the AI Approval Gate component in my application?

Run 'npx nnuikit add ai-approval' using the CLI to add the component to your codebase, or install 'npm install nnuikit' to import it across React, Vue, Svelte, Astro, or plain HTML.

Does AI Approval Gate work with React 19, Next.js, and SSR without hydration errors?

Yes. NNUI-KIT executes strictly in the Light DOM without Shadow DOM barriers. Its 'Mutate Attributes, Never Nodes' invariant guarantees seamless reconciler compatibility with zero hydration mismatch errors.

Components/AI Approval Gate

AI Approval Gate

Tier 2: Light-DOM

Human-in-the-Loop (HITL) action authorization primitive featuring risk severity classification, diff inspection review, keyboard shortcuts, and settled audit state

All-In-One Architecture Advantage: The <ui-ai-approval> component operates strictly in the Light DOM. It eliminates Shadow DOM encapsulation barriers, supports seamless global styling (Tailwind CSS / design tokens), and integrates natively across React 19, Vue 3, Svelte 5, Astro, and SSR frameworks.

Installation

$npx nnuikit add ai-approval

copy

Interactive Preview & Code

- ALTER TABLE payments DROP COLUMN legacy_auth_token;
+ ALTER TABLE payments ADD COLUMN vault_token_id VARCHAR(64) NOT NULL;
+ CREATE INDEX CONCURRENTLY idx_payments_vault ON payments(vault_token_id);

<ui-ai-approval action-name="Apply Production Migrations" severity="critical" status="pending">
  <div data-part="diff">
    <pre>- ALTER TABLE payments DROP COLUMN legacy_auth_token;
+ ALTER TABLE payments ADD COLUMN vault_token_id VARCHAR(64) NOT NULL;</pre>
  </div>
</ui-ai-approval>

                  import React from 'react';
import 'nnuikit/css';
import { AiApproval } from 'nnuikit/react';

export default function ApprovalDemo() {
  const handleApprove = (e) => {
    console.log('Action approved:', e.detail);
  };

  return (
    <AiApproval 
      actionName="Apply Production Migrations" 
      severity="critical" 
      status="pending"
      onApprove={handleApprove}
    >
      <div data-part="diff">
        <pre>+ ALTER TABLE payments ADD COLUMN vault_token_id VARCHAR(64);</pre>
      </div>
    </AiApproval>
  );
}

                  <script setup>
import 'nnuikit/css';
import 'nnuikit/client';

const onApprove = (e) => console.log('Approved:', e.detail);
</script>

<template>
  <ui-ai-approval 
    action-name="Apply Production Migrations" 
    severity="critical" 
    status="pending"
    @approve="onApprove"
  >
    <div data-part="diff">
      <pre>+ ALTER TABLE payments ADD COLUMN vault_token_id VARCHAR(64);</pre>
    </div>
  </ui-ai-approval>
</template>

                  <script>
  import 'nnuikit/css';
  import 'nnuikit/client';
</script>

<ui-ai-approval 
  action-name="Apply Production Migrations" 
  severity="critical" 
  status="pending"
>
  <div data-part="diff">
    <pre>+ ALTER TABLE payments ADD COLUMN vault_token_id VARCHAR(64);</pre>
  </div>
</ui-ai-approval>

How to Utilize

NNUI-KIT components live directly in the document Light DOM. You can use them via declarative HTML, with our first-class React wrapper, or platform-natively in Svelte, Vue, Astro, and HTMX:

React 18 & 19 (Next.js 15 App Router)

import 'nnuikit/css';
import 'nnuikit/client';
import { AIApprovalGate } from 'nnuikit/react';

Universal Web Components (Vue 3, Svelte 5, Astro, HTMX)

<!-- Automatically registers <ui-ai-approval> and <nnui-ai-approval> -->
import 'nnuikit/css';
import 'nnuikit/client';

Platform Features

Zero Shadow DOM

Element lives in the Light DOM. Tailwind and global CSS apply directly.

persist="url | local"

Add declarative persistence attribute to auto-sync state with URL search params.

sync="cross-tab"

Synchronize changes across all open browser tabs via BroadcastChannel.