Intent-Driven UI Framework

Nexar is the AI layer between business intent and rendered UI. Instead of writing screens, you define what the user needs to accomplish. The engine composes the right UI from a validated component registry, adapting to user context, device, and business rules at runtime.

Modern apps manage hundreds or thousands of screen definitions. Each user segment, each platform, each A/B test variant is a separate artifact someone has to create, test, and maintain. Server-Driven UI (SDUI) moved the definitions from client to server, but didn't reduce the number of definitions. The maintenance scales linearly with the number of user types.

Nexar replaces pre-built screen definitions with intents and composition rules. One intent can produce thousands of unique flows based on context. No screen files. No routing table. The flow emerges from the user's context at runtime.

Traditional:  60,000 flow files → Router picks one → Renderer displays it
Nexar:        1 intent + context → Engine composes → Renderer displays it

┌─────────────────────────────────────────────┐
│              Developer Layer                 │
│  Component Registry │ Intent Definitions     │
│  Design Tokens      │ Composition Rules      │
└────────────────────────┬────────────────────┘
                         ↓
┌─────────────────────────────────────────────┐
│              Composition Engine              │
│                                             │
│  Rules Strategy (deterministic)             │
│  AI Strategy (LLM-powered, pluggable)       │
│  RAG Engine (knowledge-augmented)           │
│  Validation Pipeline (constraints, a11y)    │
└────────────────────────┬────────────────────┘
                         ↓
┌─────────────────────────────────────────────┐
│              Runtime Layer                   │
│  State Store │ Action Executor │ Event Bus  │
│  Expression Engine │ Conditional Rendering  │
└────────────────────────┬────────────────────┘
                         ↓
┌─────────────────────────────────────────────┐
│              Renderer Layer                  │
│  React (web) │ React Native │ SwiftUI │ ... │
└─────────────────────────────────────────────┘

Components are the building blocks. Each declares its constraints, accessibility requirements, and platform support.

engine.registry.register({
  type: 'ssn-input',
  category: 'input',
  description: 'Social Security Number input with masking',
  constraints: {
    a11y: { requiresLabel: true },
  },
  platforms: { web: { supported: true }, mobile: { supported: true } },
});

An intent describes what the user needs to accomplish, not what the screen looks like.

const intent: Intent = {
  id: 'onboard-user',
  label: 'User Onboarding',
  description: 'Collect user information and set up account',
  requires: ['name', 'email', 'password'],
};

Rules map intents to component trees based on context. The same intent produces different UI for different users.

strategy.addRule('onboard-user', (intent, context) => {
  const steps = [
    { type: 'input', id: 'name', props: { label: 'Full Name', bind: '$form.name' } },
    { type: 'input', id: 'email', props: { label: 'Email', bind: '$form.email' } },
  ];

  // Premium users get additional options
  if (context.data?.tier === 'premium') {
    steps.push(
      { type: 'input', id: 'company', props: { label: 'Company', bind: '$form.company' } },
    );
  }

  return { type: 'wizard', id: 'onboard', props: {}, children: steps };
});

The renderer maps the composed tree to platform-specific components. The tree is platform-agnostic.

<NexarRenderer
  tree={composedTree}
  components={componentMap}
  state={stateSnapshot}
  onAction={handleAction}
  onStateChange={handleStateChange}
/>

Basic demo with 4 intents (dashboard, login, profile, contact) showing state binding, conditional rendering, and live state inspector.

cd apps/example && pnpm dev  # http://127.0.0.1:4100

Dynamic tax workflow engine demonstrating context-driven composition. One intent produces 3-6 step wizards based on user profile. Includes tax computation engine and AI insights.

cd apps/tax-demo && pnpm dev  # http://127.0.0.1:4200

See apps/tax-demo/README.md for details.

# Prerequisites: Node 22+, pnpm 9+
pnpm install
pnpm build
pnpm test

# Run a demo
cd apps/tax-demo && pnpm dev

Apache 2.0. See LICENSE.

Alex Husniddinov