How do I install the AI Reasoning component in my application?

Run 'npx nnuikit add ai-reasoning' 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 Reasoning 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 Reasoning

AI Reasoning

Tier 2: Light-DOM

Collapsible DeepSeek-R1 and OpenAI o1/o3 style thinking block with dynamic elapsed timer, shimmering state beacon, and code copy

All-In-One Architecture Advantage: The <ui-ai-reasoning> 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-reasoning

copy

Interactive Preview & Code

1. Intent Analysis: Deconstructing user request to migrate the PostgreSQL schema with zero downtime.
2. Index Strategy: Verifying concurrent index creation semantics to avoid table exclusive locks.
3. Synthesized Plan: Generated transactional migration script with automatic rollback points.

        CREATE INDEX CONCURRENTLY idx_users_org_id ON users (organization_id);
      

<ui-ai-reasoning duration="12.4" status="done" open>
  <div data-part="content">
    <p>1. Intent Analysis: Deconstructing user request to migrate the PostgreSQL schema with zero downtime.</p>
    <p>2. Index Strategy: Verifying concurrent index creation semantics.</p>
    <p>3. Synthesized Plan: Generated transactional migration script.</p>
  </div>
</ui-ai-reasoning>

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

export default function ReasoningDemo() {
  return (
    <AiReasoning duration={12.4} status="done" open>
      <div data-part="content">
        <p>1. Intent Analysis: Deconstructing migration request.</p>
        <p>2. Index Strategy: Evaluating lock prevention mechanisms.</p>
      </div>
    </AiReasoning>
  );
}

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

<template>
  <ui-ai-reasoning duration="12.4" status="done" open>
    <div data-part="content">
      <p>1. Intent Analysis: Deconstructing migration request.</p>
    </div>
  </ui-ai-reasoning>
</template>

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

<ui-ai-reasoning duration="12.4" status="done" open>
  <div data-part="content">
    <p>1. Intent Analysis: Deconstructing migration request.</p>
  </div>
</ui-ai-reasoning>

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 { AIReasoning } from 'nnuikit/react';

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

<!-- Automatically registers <ui-ai-reasoning> and <nnui-ai-reasoning> -->
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.