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.
![](https://cdn.prod.website-files.com/661e41a3aa4710fc8d56f1c1/6643e10339e6d230ed54f947_developer-and-chatbot%20(1).png)
![](https://cdn.prod.website-files.com/661e41a3aa4710fc8d56f1c1/6656172a41e6ef54b8d5757d_NLKit%20Logomark%402x.png)
NLKit Team
May 14, 2024
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:
β
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:
β
And finally, we pass than adapter to the <AiChat />
UI component, that will display the ChatBot:
β
And the result is a funny chatbot that can help you plan any future trip βοΈπ
![](https://cdn.prod.website-files.com/661e41a3aa4710fc8d56f1c1/6643e063ae78e185b26f4afb_chat-convo-travel-assistant-paris%20(1).gif)
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.
β
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.
And if you like the idea, please star βοΈ the repo on GitHub to show your support! ποΈ π 𧑠Thank you so much!