Docs

Overview

NUX (Natural User Experience) allows users to interact with web applications using natural language commands. It's implemented as a thin wrapper around UI elements, enabling them to be controlled through a central NUX system.

Basic Usage

To make an element NUX-enabled:

<NUX config={{ name: "element-name", description: "what this element does" }}>
  <YourComponent />
</NUX>

Key Components

1. NUXProvider: The top-level component that manages NUX state and functionality.

   The NUXProvider is the core of the NUX system. It manages the state, handles action processing, and provides context to child components.

   Copy

   import { NUXProvider } from '@/components/nux-provider';
    
   function App() {
     return (
       <NUXProvider>
         {/* Your app components */}
       </NUXProvider>
     );
   }

2. NUX Wrapper: A component that registers UI elements with the NUX system.

   The NUX component is used to wrap individual UI elements that should be accessible via natural language commands.

   Copy

   import { NUX } from '@/components/nux';
    
   function MyComponent() {
     return (
       <NUX config={{ name: "submit-form", description: "submits the form" }}>
         <button type="submit">Submit</button>
       </NUX>
     );
   }

3. useNUX Hook: Provides access to NUX functionality within components.

   The useNUX hook provides access to NUX functionality within your components.

   Copy

   import { useNUX } from '@/hooks/use-nux';
    
   function NUXInput() {
     const { performAction, pending } = useNUX();
    
     const handleSubmit = async (e) => {
       e.preventDefault();
       const query = e.target.query.value;
       const result = await performAction(query);
       console.log(result.message);
     };
    
     return (
       <form onSubmit={handleSubmit}>
         <input name="query" type="text" placeholder="Enter a command..." />
         <button type="submit" disabled={pending}>Execute</button>
       </form>
     );
   }

How NUX Works

1. Element Registration: NUX-wrapped elements are registered with a name and description.
2. User Input: The system receives natural language input from the user.
3. Processing: The input is processed to determine the intended action.
4. Execution: The system performs the identified action on the registered element.

performAction Mechanism

The performAction function is the core of NUX. Here's a pseudocode overview of its operation:

async function performAction(query) {
  if (queryIsInvalid || systemCannotExecute) {
    return failure;
  }
 
  setSystemToBusyState();
 
  try {
    let actionToPerform = checkCache(query);
 
    if (!actionToPerform) {
      actionToPerform = await getActionFromAI(query, registeredElements);
      if (actionToPerform) {
        cacheAction(query, actionToPerform);
      }
    }
 
    if (!actionToPerform) {
      return noActionPerformed;
    }
 
    const result = executeAction(actionToPerform);
    return result;
  } catch (error) {
    handleError(error);
  } finally {
    setSystemToReadyState();
  }
}

Key aspects of the new performAction:

1. Input Validation: Checks if the query is valid and if the system can execute actions.
2. Caching: Uses a caching mechanism to store and retrieve previously processed queries.
3. AI Integration: If no cached result is found, it uses an AI model to interpret the query.
4. Action Execution: Executes the determined action using a map of available actions.
5. Error Handling: Manages errors and ensures the system returns to a ready state.

Advanced Features

Caching

To optimize performance and reduce unnecessary processing, the NUX system implements a caching mechanism for query results.

const cachedResult = cache.current.get(query);
if (cachedResult) {
  // Use cached result
} else {
  // Process query and cache result
}

Custom Actions

The NUX system allows for the definition of custom actions beyond simple element interactions.

const actionMap = {
  trigger: triggerAction,
  navigateTo: navigateAction,
  // Add more custom actions here
};

Best Practices

1. Descriptive Names: Use clear, descriptive names and descriptions for your NUX-wrapped elements to improve matching accuracy.

2. Consistent Language: Maintain consistent language in your NUX configurations to make it easier for users to predict commands.

3. Feedback: Provide clear feedback to users about the success or failure of their NUX commands.

4. Accessibility: Ensure that NUX features don't replace but complement traditional UI interactions to maintain accessibility.

Conclusion

NUX provides a flexible, intuitive way to interact with your web application using natural language. By wrapping your UI elements with NUX components and implementing the NUXProvider, you can quickly add natural language control to your existing React applications.