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

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

Comments

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

[Salmen Hichri]

Thanks for the support @michaeltharrington 🙌
Sure I'll include #showdev in future posts 👌

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

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

[Salmen Hichri]

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

[Matthieu Balmes]

Perfect 😀