AI Tool Call
Tier 2: Light-DOMAutonomous agent tool-calling inspector displaying real-time execution states (running, success, error), runtime latency, syntax payloads, and retry action
All-In-One Architecture Advantage: The <ui-ai-tool-call> 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.
$npx nnuikit add ai-tool-call
copy$npm install nnui-kit
copyInteractive Preview & Code
Query Parameters
SELECT cluster_id, region, node_count FROM clusters WHERE health = 'OPTIMAL';
Execution Result (200 OK)
{"rows_returned": 4, "execution_time_ms": 12.8, "status": "200_OK"}
Manifest Payload
kubectl apply -f ./manifests/canary-v2.yaml --dry-run=server
<ui-ai-tool-call name="database_query" status="success" latency="142ms" open>
<div data-part="payload">
<div data-part="section-title">Query Parameters</div>
<pre>SELECT cluster_id, region FROM clusters WHERE health = 'OPTIMAL';</pre>
</div>
<div data-part="output">
<div data-part="section-title">Execution Result</div>
<pre>{"rows_returned": 4, "status": "200_OK"}</pre>
</div>
</ui-ai-tool-call>
import React from 'react';
import 'nnuikit/css';
import { AiToolCall } from 'nnuikit/react';
export default function ToolCallDemo() {
return (
<AiToolCall name="database_query" status="success" latency="142ms" open>
<div data-part="payload">
<div data-part="section-title">Query Parameters</div>
<pre>SELECT * FROM clusters;</pre>
</div>
<div data-part="output">
<div data-part="section-title">Execution Result</div>
<pre>{"status": "200_OK"}</pre>
</div>
</AiToolCall>
);
}
<script setup>
import 'nnuikit/css';
import 'nnuikit/client';
</script>
<template>
<ui-ai-tool-call tool-name="database_query" status="success" latency="142ms">
<div data-part="payload">
<pre>SELECT * FROM clusters;</pre>
</div>
</ui-ai-tool-call>
</template>
<script>
import 'nnuikit/css';
import 'nnuikit/client';
</script>
<ui-ai-tool-call tool-name="database_query" status="success" latency="142ms">
<div data-part="payload">
<pre>SELECT * FROM clusters;</pre>
</div>
</ui-ai-tool-call>
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 { AIToolCall } from 'nnuikit/react';
Universal Web Components (Vue 3, Svelte 5, Astro, HTMX)
<!-- Automatically registers <ui-ai-tool-call> and <nnui-ai-tool-call> -->
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.
