Widget Integration

The easiest way to add AI-powered UI generation to your app. Just drop in the widget component and you're ready to go.

Basic Usage

Add the N4iWidget component to your app with just an API key and endpoint.

TypeScript/TSX

import { N4iWidget } from "n4i-genui/react";

function App() {
  return (
    <N4iWidget
      apiKey={process.env.NEXT_PUBLIC_N4I_API_KEY}
      apiUrl="/api/n4i"
      theme="light"
      showInput={true}
      showSuggestions={true}
      placeholder="Describe the UI you want to create..."
    />
  );
}

Live Demo

Try out different widget configurations below.

Preview

Pre-loaded UI

Display pre-generated UI without making API calls. Perfect for static content or cached responses.

TypeScript/TSX

import { N4iWidget } from "n4i-genui/react";

// Pre-generated or cached UI tree
const savedUITree = {
  id: "page-1",
  type: "Page",
  props: { title: "Dashboard" },
  children: [
    {
      id: "card-1",
      type: "Card",
      props: { title: "Welcome" },
      children: [
        { id: "text-1", type: "Text", props: { content: "Hello!" } }
      ]
    }
  ]
};

function App() {
  return (
    <N4iWidget
      ui={savedUITree}
      theme="light"
      showInput={false}  // Hide input when showing pre-loaded UI
      onAction={(actionId, nodeId) => {
        console.log("Button clicked:", actionId, nodeId);
      }}
    />
  );
}

Auto Generate on Mount

Automatically generate UI when the component mounts using initialPrompt.

TypeScript/TSX

import { N4iWidget } from "n4i-genui/react";

function Dashboard() {
  return (
    <N4iWidget
      apiKey={process.env.NEXT_PUBLIC_N4I_API_KEY}
      apiUrl="/api/n4i"
      initialPrompt="Create a sales dashboard with revenue metrics, 
        a line chart showing monthly trends, and a table of recent orders"
      showInput={false}   // Hide input after generation
      theme="dark"
      loadingComponent={<MyCustomLoader />}
      errorComponent={<MyCustomError />}
      onUIGenerated={(ui) => {
        console.log("UI generated:", ui);
        // Save to cache, analytics, etc.
      }}
    />
  );
}

All Widget Props

Complete reference for N4iWidget configuration options.

Prop	Type	Default	Description
apiKey	string	-	Your N4i API key
apiUrl	string	"/api/v1/embed"	API endpoint URL
defaultModel	string	"n4i-default"	AI model to use
ui	UiNode	-	Pre-loaded UI tree
initialPrompt	string	-	Auto-generate on mount
showInput	boolean	true	Show prompt input
showSuggestions	boolean	true	Show suggestion buttons
placeholder	string	"Describe..."	Input placeholder
theme	string \| N4iTheme	"light"	Theme preset or custom
className	string	""	Additional CSS classes
style	CSSProperties	-	Inline styles
onAction	function	-	Button click handler
onUIGenerated	function	-	UI generation callback
onError	function	-	Error callback
loadingComponent	ReactNode	-	Custom loading UI
errorComponent	ReactNode	-	Custom error UI

Handling User Actions

Respond to button clicks and other interactive elements in generated UI.

TypeScript/TSX

import { N4iWidget } from "n4i-genui/react";
import { useRouter } from "next/navigation";

function App() {
  const router = useRouter();

  const handleAction = (actionId: string, nodeId: string) => {
    console.log("Action:", actionId, "from node:", nodeId);
    
    // Handle different actions
    switch (actionId) {
      case "submit-form":
        handleFormSubmit();
        break;
      case "navigate-dashboard":
        router.push("/dashboard");
        break;
      case "open-modal":
        setShowModal(true);
        break;
      default:
        console.log("Unknown action:", actionId);
    }
  };

  return (
    <N4iWidget
      apiKey={process.env.NEXT_PUBLIC_N4I_API_KEY}
      apiUrl="/api/n4i"
      onAction={handleAction}
    />
  );
}

Next Steps

→ Learn about React Hooks for more control
→ Customize appearance with Theming
→ Set up your API endpoint