DEV Community

Cover image for How To Build AI Chatbots Using React JS in Minutes
Salmen Hichri
Salmen Hichri

Posted on • Updated on

How To Build AI Chatbots Using React JS in Minutes

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
Enter fullscreen mode Exit fullscreen mode
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?'}}
        />
    );
}
Enter fullscreen mode Exit fullscreen mode

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!

How to build Conversational AI with NLUX

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

And if you like the idea, please star ⭐️ the repo on GitHub to show your support! πŸ™οΈ πŸ™‚ 🧑

Thank you so much!
Salmen

Top comments (6)

Collapse
 
michaeltharrington profile image
Michael Tharrington

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.

Collapse
 
salmenus profile image
Salmen Hichri

Thanks for the support @michaeltharrington πŸ™Œ
Sure I'll include #showdev in future posts πŸ‘Œ

Collapse
 
paztek profile image
Matthieu Balmes

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.

Collapse
 
salmenus profile image
Salmen Hichri

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 ..

Collapse
 
salmenus profile image
Salmen Hichri

Good call @paztek πŸ’‘ I updated our doc page to mention that:
docs.nlux.ai/learn/chat-gpt/api-keys

Collapse
 
paztek profile image
Matthieu Balmes

Perfect πŸ˜€