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.
There are so many reasons that I can think about, but here are just a few:
nlux
nlux
. Test ideas faster.nlux
nlux
- Conversational UI Library for React JSTo make AI integration even simpler for React developers, I built nlux
nlux
, an open source Javascript / React JS library for rapidly building conversational interfaces. nlux
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:
With nlux
nlux
, developers can have rich conversational UIs up and running incredibly fast. And as more third-party AI backends emerge, nlux
nlux
makes it simple to experiment and leverage different language models.
To demonstrate how simple it is to build AI apps with nlux
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
nlux
dependencies:
import { AiChat } from '@nlux/react';
import { useAdapter } from '@nlux/openai-react';
import '@nlux/themes/nova.css';
import { AiChat } from '@nlux/react';
import { useAdapter } from '@nlux/openai-react';
import '@nlux/themes/nova.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
systemMessage
attribute, as shown below:
const adapter = useAdapter('openai/gpt', {
apiKey: 'YOUR_OPEN_AI_API_KEY',
systemMessage:
'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.',
});
const adapter = useAdapter('openai/gpt', {
apiKey: 'YOUR_OPEN_AI_API_KEY',
systemMessage:
'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 />
<AiChat />
UI component, that will display the ChatBot:
<AiChat adapter={adapter} />
<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.
You can find below a CodeSandbox that runs that same example. You need to provide your OpenAI API key in order to initiate the ChatGPT connection. You can learn more about how to get an OpenAI API Key here.
nlux
nlux
π¬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:
And if you like the idea, please star βοΈ the repo on GitHub to show your support! ποΈ π 𧑠Thank you so much!
nlux is built and maintained by Salmen Hichri - Copyright Β© 2024 All rights reserved.
The source code of nlux is licensed under Mozilla Public License Version 2.0