Conversational AI is taking off, and chatbots powered by large language models (LLMs) like ChatGPT are rapidly becoming a must-have for many apps and websites. As a React developer, you want a simple way to build a great chat interface backed by these incredible LLMs. Thatβs where NLUX, β the open-source Javascript / React JS library, comes in.
Straight To The Point π
Here is all what you need to build a custom AI chatbot using NLUX:
npm install @nlux/react @nlux/openai-react
import {AiChat} from '@nlux/react';
import {useAdapter} from '@nlux/openai-react';
const MyAiChatComp = () => {
const chatGptAdapter = useAdapter({
apiKey: 'YOUR_OPEN_AI_API_KEY',
initialSystemMessage:
'I want you to act Elon Musk, with a twist of humor, teaching ' +
'a web developer about how to make the most out of ' +
'generative AI. Give answers of around 1 paragraph.'
});
return (
<AiChat
adapter={chatGptAdapter}
promptBoxOptions={{placeholder: 'Hi, Elon here! How can I help?'}}
/>
);
}
In this example, weβre instructing ChatGPT to βact asβ Elon Musk, and advise a web developer about how to make the most out of generative AI. All the interactions with the bot will be influenced by that instruction.
You can enter any βact asβ instruction! Your imagination is the limit!
The Result π¬ π€
And now you have added to your web page an AI chat component, with a prompt box, and a Whatβs-App-like UI, connected to OpenAIβs ChatGPT API, and actually behaving like Elon Musk!
And this how the conversation happens:
So What Is NLUX ? π¨βπ»
NLUX (for Natural Language User eXperience) is a new open-source Javascript / React JS library that makes it super simple to integrate powerful large language models (LLMs) like ChatGPT into your web app or website.
As you can see in the example above, with just a few lines of code, you can add conversational AI capabilities and interact with your favourite LLM.
Over the past few weeks, I have dedicated significant time and effort into this project. Moving forward, I am excited to commit even more time and energy toward building a free, open-source, and features-rich JS library to make it super simple for web developers to build AI-powered apps.
Your contributions are welcome. If you have an idea for a new feature or want to fix a bug, feel free to open an issue or submit a pull request. Iβll be very excited to see what you can build with NLUX!
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
Top comments (6)
Very nice!
Sounds like a cool project, Salmen. Appreciate you sharing!
Heads up that we have a tag called #showdev that you can use if you want to show off projects you've created. You don't have to use this one, it's just a suggestion. π
Hope you keep enjoying DEV, and looking forward to hearing more about NLUX.
Thanks for the support @michaeltharrington π
Sure I'll include #showdev in future posts π
Having a ready-to-use full UI for a chatbot is great but suggesting that the API key should be given to the frontend is irresponsible as it becomes trivial to steal it.
Developers can also create their own adapters to integrate their custom backends with NLUX's UI .. I'll try provide some examples + add more doc on that in the coming days ..
Good call @paztek π‘ I updated our doc page to mention that:
docs.nlux.ai/learn/chat-gpt/api-keys
Perfect π