Develop AI Apps with React and Javascript

Conversational AI is revolutionizing how users interact with technology. Chatbots like ChatGPT and voice assistants like Siri are becoming ubiquitous, providing more natural and intuitive ways for people to get information or accomplish tasks.

As conversational AI continues improving, developers have an immense opportunity to create next-generation web applications with seamless voice and text-based conversational experiences. Integrating a conversational interface enables apps to understand what users say, ask clarifying questions, and have personalized dialogs to help users accomplish goals.

React JS ⚛️ Is An Ideal Web Framework For Building Such AI-Powered Apps. With its component architecture and rich ecosystem of tools, React makes it easy to create dynamic and interactive user interfaces. And by leveraging natural language understanding systems like ChatGPT, those interfaces can now have intelligent conversations.

Why Conversational AI + React ?

There are so many reasons that I can think about, but here are just a few:

• Enhanced User Experience 💎 - More intuitive and human-like interactions using natural language conversations.
• Personalization 👩‍🎤 - Chatbots can be adapted to web app use-case and can remember user context and have customized dialogs.
• Time Savings - 🏎️ Automate common questions and requests to save people time.
• Scalability - 🚀 Bots don't get overwhelmed by increasing users. Scale conversational capabilities easily.
• Rapid Innovation - 💡 Quickly build prototypes and MVPs with conversational UI libraries like NLUX. Test ideas faster.

NLUX - Conversational UI Library for React JS

To make AI integration even simpler for React developers, I built NLUX, an open source Javascript / React JS library for rapidly building conversational interfaces. NLUX provides React components like chat widgets, text inputs, and soon microphones and avatars, so you can focus on creating great experiences versus building UI elements from scratch.

The library also handles all the complexity of communications with backend AI systems. It has adapters for ChatGPT and other language models, abstracting away the APIs and data formatting.

Key Capabilities:

• Drop-in React chat widget with theming and customization options
• Send system messages to language models to provide context, guidance, and instructions
• Streaming responses for real-time conversations
• Easy integration with ChatGPT and other language models
• Framework agnostic JavaScript version available too

With NLUX, developers can have rich conversational UIs up and running incredibly fast. And as more third-party AI backends emerge, NLUX makes it simple to experiment and leverage different language models.

Example ⭐️

A Travel Assistant AI Bot In Few Lines

To demonstrate how simple it is to build AI apps with NLUX, let's create a basic travel assistant bot.

This bot will let users ask about travel recommendations, understand natural language queries, and ask follow-up questions to provide more details.

We start by importing NLUX dependencies:

import { AiChat } from '@nlux/react';
import { useAdapter } from '@nlux/openai-react';
import '@nlux/themes/kensington.css';

We create and configure a ChatGPT adapter. We instruct it to act as a travel assistant, we do that by providing instructions to ChatGPT through the systemMessage attribute, as shown below:

  const adapter = useAdapter({
    apiKey: 'YOUR_OPEN_AI_API_KEY',
    initialSystemMessage:
      'I want you to act as a travel assistant. ' +
      'I want you to give advice to the user and help them ' +
      'plan their upcoming trip. I want you to be creative ' +
      'and funny, and suggest some original ideas.' +
      'The user is 22 years old and they are full of ' +
      'energy and looking for something exciting to do.',
  });

And finally, we pass than adapter to the <AiChat /> UI component, that will display the ChatBot:

<AiChat adapter={adapter} />

And the result is a funny chatbot that can help you plan any future trip ✈️👇

The Possibilities are Endless!

This example just scratches the surface of what’s possible when combining React with modern NLU systems. You could build a personal tutor bot, a vocabulary teaching app, a conversational shopping assistant, and way more.

Run It Yourself ⚙️

You can find below a similar Codesandbox example. It uses a custom adapter that connect to NLUX's demo API instead of the ChatGPT adapter suggested above.

Learn More About Nlux 💬

NLUX is an open-source project created to make embedding the power of large language model easy and attainable for all Javascript and React JS developers.

To learn more:

• NPM Packages for React JS here and for Vanilla JS here.
• GitHub Repository: github.com/nluxai/nlux - You can ask questions or get help in the GitHub Discussions section.
• Website for documentation and updates: nlux.ai

And if you like the idea, please star ⭐️ the repo on GitHub to show your support! 🙏️ 🙂 🧡

Thank you so much!
Salmen