DEV Community

Salmen Hichri
Salmen Hichri

Posted on • Updated on

Chatbot Dreams & Markdown Streams: Creating React JS ChatGPT Bots in Minutes

Hey there, fellow travelers on the digital superhighway! If you’ve got a chatbot that feels about as current as a flip phone at a tech conference, it’s time for an upgrade. NLUX is here to rev your chatbot’s engine with text streaming that’s as smooth as your favorite jazz solo — and it comes in markdown!

Why Text Streaming is the Espresso Shot Your Chatbots Need

Imagine unleashing a world where each message from your chatbot doesn’t just pop up — it performs. That’s text streaming, folks. It’s the difference between getting a telegram and having a conversation. Streaming text keeps users glued to the screen, watching your AI’s thoughts unfold in real-time. It’s fresh, it’s captivating, and it’ll make your chatbot the belle of the digital ball.

The Marvel of Markdown

Regular text has its charm, but markdown text in a streaming chatbot is like Shakespeare in a leather jacket — classic with a kick. It lets you strut your content with style; bolds, italics, lists, you name it. Because when your chatbot says:

“Our plans? Basic — five bucks. Premium — double that. VIP? Let’s chat.”

It doesn’t hold a candle to the suave sophistication of:

  • Basic Plan: $5/month
  • Premium Plan: $10/month
  • Enterprise Plan: Let’s talk 😉

Which one’s clearer? Exactly.

Not Your Average Bot Builder

So, what’s NLUX? It’s a sparkling React JS and JavaScript library that’s about to become your chatbot’s BFF. NLUX turbocharges the developer experience with a Javascript library that designed to whip up conversational interfaces with personality and pizzazz. We’re the secret sauce to your chatbot gourmet, and we keep things simple, streamlined, and spiffy.

Now, let’s paint a picture! Here is NLUX markdown streaming in action 👇

NLUX Chatbot with Markdown Streaming

NLUX — The Game Changer JS Lib

So, why is NLUX’s approach the bee’s knees?
We’re glad you asked! Here’s the scoop:

  1. As You Type Streaming: We treat every character with the respect it deserves, delivering it hot and fresh to the user.
  2. Vivid Visuals with Markdown: Pretty lists, bold statements, and italics so fine they’d make a typewriter jealous.
  3. Smooth and Speedy: Like a Tesla in ludicrous mode, NLUX’s performance is both high-speed and enviably smooth.
  4. React And Vanilla JS Today, More Tomorrow: We got you covered with React components and hooks, and Vanilla JS, but we’re just getting warmed up. The future is looking bright and sassy!

Quick-Start Code: Your NLUX Chatbot in a Flash

Under the hood of NLUX’s charm and wit lies an impressive engine of efficiency — one that lets you conjure up an AI chatbot faster than you can say “Abracadabra!” But don’t just take our word for it. Let the code speak for itself. Here’s a sneak peek at just how effortlessly you can set the stage for your very own ChatGPT bot with NLUX:



import {NluxConvo} from '@nlux/nlux-react';
import {useAdapter} from '@nlux/openai-react';

export const MyChatComp = () => {
    const chatGptAdapter = useAdapter({
        apiKey: 'YOUR_OPEN_AI_API_KEY',
        // 👇 Instruct ChatGPT how to behave (optional)
        initialSystemMessage:
            'Act as a Nobel Prize in Physics winner who is ' +
            'helping a PHD student in their research'
    });

    return (
        <NluxConvo
            adapter={chatGptAdapter}
            promptBoxOptions={{
                placeholder: 'Ask me anything about nuclear physics!'
            }}
        />
    );
}


Enter fullscreen mode Exit fullscreen mode

Wait ... is that it? Yes, you bewitching developers, getting started with NLUX really is that simple. Copy this incantation into your React app, insert your API key, and you’re mere moments away from breathing life into your very own chatty creation.

Of course, this is just the tip of the wizard’s hat. NLUX gives you the power to customize, optimize, and accessorize your chatbot to your heart’s content. But as for the basics — well, you could probably teach them to your cat (although we don’t recommend it, as cats are notoriously indifferent students).

Ready to take that deep dive into the arcane arts of conversation and code?

Check the Getting Started Guide on NLUX’s docs website.

Open Source Awesomeness

Oh, and did we mention the best part? No? Well, grab your party hats, because NLUX is as free as an eagle soaring over a mountain range at sunset. That’s right, our top-notch, high-octane, markdown-streaming tech goodness is open-source! Your wallet can breathe a sigh of relief, and your developer heart can do a little salsa dance of joy.

Think of NLUX as your digital toolkit for crafting chatbot experiences that are crafted with the same care a master watchmaker puts into their timepieces — and it won’t cost you a dime. We believe in the power of community and sharing the wealth that is efficient, dynamic communication.

Ready to dive into the code? Check out the GitHub repo and sprinkle your projects with some NLUX fairy dust.

And for the smooth operators who like their packages delivered with NPM finesse, slide on over to our package page and get your download on

NLUX On NPM

Step into the NLUX dimension, where chatbots are zippy, the UI’s snappy, and your content’s got more style than a runway model during fashion week. The future of conversational interfaces is here, and it’s looking markdown marvelous.


An AI Chatbot Built Using NLUX

Take NLUX for a spin and share your thoughts—we're all ears and code! As an open source project still in its dawn, every bit of feedback is like a burst of sunlight.

Join the journey and help shape its tomorrow.
Best,
Salmen

Top comments (0)