Forem: Salmen Hichri

The Future is Conversational ― Crafting Next-Gen User Experiences With AI

Salmen Hichri — Thu, 11 Jan 2024 19:33:46 +0000

Imagine a world where any software, app, or device intuitively understands your requests, actions, preferences ― without complex menus or rigid commands.

Over the past few months, I’ve been quietly working on making this world a reality through a project called NLUX: A React JS / Javascript library I architected to enable developers to seamlessly build conversational interfaces.

In this post, I will reveal insights into the coming wave of transformative AI chatbots and voice assistants. I will share my perspective on what will soon drive the future of frontend software design. I will also uncover how developers and product owners can readily embrace conversational interfaces and start building the next generation of effortless, intuitive user experiences.

{a} The Future (Present) of Knowledge Work 🔮

― And how AI creeped into my screen.

Over the past 12 months, AI assistants have become an integral part of my work. At any given time, one of my dual screens is dedicated to conversing with Claude or ChatGPT-4. I estimate that 50% of my screen time now involves AI collaboration.

These AI assistants help me in various ways:

When tackling customer issues, I'll have Zendesk software open on one display while using Claude AI chat window on the other to summarise the issue and to jog my memory about prior discussions and suggest potential solutions.
While communicating and producing documents, I leverage AI to help structure content, create initial drafts that I then elaborate on, tweak, and refine before going back to AI for final polishing recommendations.
While coding, my main code editor occupies one screen with its AI pair programmer activated. The second screen runs Claude to help me navigate complex codebases, recommend design patterns, or brainstorm algorithms.
When learning something new, I often start by querying my AI assistant to prime my knowledge. If I need more depth, I'll turn to Google or reference sites ― then go back to the AI to summarise key points and answer follow-up questions.
Even in meetings, I would sometimes have an AI chat window open to feed questions about topics that arise and get promptings for relevant talking points or ideas I can contribute.

About half of my working time now involves AI collaboration of some kind ― whether reading chatbot responses or asking questions via typed conversations, or other AI-enhanced productivity applications.

While my heavy usage of AI assistants may be slightly ahead of the curve today, I believe it soon will become the norm among most knowledge workers as these tools continue advancing rapidly.

{b} From Hyper-links to Hyper-ideas 💡

― How the Web (and User Interfaces) are changing with AI.

The early internet languished in obscurity for over a decade. While invented in 1983, it remained complex and boring until the World Wide Web arrived in the early 1990s. The Web popularised concepts we now take for granted ― like web pages, URLs, and hyperlinks.

URLs enabled unique addresses to find information again later. Hyperlinks connected relevant content across pages. Together, they let users fluidly navigate the expanding online landscape by hopping from page to page.

The page-centric browsing defined the web experience for decades. Even modern single-page web apps largely mimic this model of consuming atomised information spread across disparate screens. But this paradigm is now poised for disruption by Conversational AI. Instead of clicking links between pages, users now engage in contextual conversations centred around ideas.

With AI chatbots, we are moving from hyper-links to hyper-ideas. Users no longer transition across pages, but fluidly move from one relevant idea to another within a single paged conversation. The focus becomes pulling insights, recommendations, and answers from the assistant versus hunting for them across sites.

With conversational interfaces, there are no pages ― only an intelligent assistant ready to respond to users’ natural language intents and dialogue context. Behind the conversational facade hides the complexity of aggregating, connecting and reasoning over information. But for users, it feels like a familiar chat informed by the history and current needs.

And this new paradigm requires a radical re-thinking of how user-interfaces should be designed and built.

{c} Patterns of Conversational UI 📣

As we transition to conversational interfaces powered by AI, new UX design paradigms emerge across various embodiments. Here are some key patterns I see gaining traction:

(i) AI Chatbots ― The Baseline

Text-based chatbots are becoming a key user interface layer. Every major application will soon feature a conversational assistant, allowing fluid toggling between clicking menus and chatting in natural language.

These AI companions handle text queries, offer smart suggestions based on what the user types, and generate relevant content like text, images and more. Think of them a custom ChatGPT component embedded in each app.

Examples:

A standalone ChatGPT pane for commentary, analysis and content creation.
Customer support bots fielding product questions.

(ii) Co-Pilots ― The Smart Integration

Beyond standalone chatbots lies an even tighter AI integration: Smart co-pilots that can integrate within existing interfaces.

Embedded co-pilots inherently understand the application context, user goals and work-in-progress. They follow along in real-time and stand ready to offer proactive suggestions, answer questions, and execute actions precisely aligned to each moment's needs ― no lengthy explanations required.

Example:

Imagine an inventory management application used daily by warehouse staff. An AI co-pilot could integrate directly into the interface to assist human users through natural conversations.

For example, instead of clicking through menus and configuring filters to check low stock items, staff could simply type "Show me all stationary products with low inventory levels." The co-pilot would automatically translate this to the appropriate data query and display the results.

Rather than navigating through reorder workflows, staff could tell the assistant: "Reorder these 7 products to regular levels." It would then execute the full workflow autonomously based on one plain language command.

With these AI capabilities woven seamlessly into existing UIs, workers can focus purely on high-value business decisions rather than manual processes.

With AI co-pilots, the applications almost begin to understand and operate like human team members ― smart assistants who can comprehend instructions and take action based on user needs.

(iii) Voice Assistants ― The Hand-Free Horizon

While text chatbots provide a baseline, AI-infused voice assistants like OpenAI's Whisper API promise far more natural and ambient interactions. We stand at the cusp of perpetual ambient computing ― with always-available vocal assistants permeating our environments through smart speakers, headphones, car dashboards and more.

You may counter that you have tried solutions like Alexa or Siri before to disappointing results. But the latest wave of voice generation AI like Whisper, combined with generative powerhouses like ChatGPT, unlock game-changing capability. With its human-like vocalisations and strong contextual reasoning, such technology finally delivers on the promise of truly smart voice assistants.

Rather than stilted vocal commands, you can have free-flowing multi-turn dialogues about nuanced topics. No longer limited by narrow skills and rigid intents. And the system learns your preferences, vocabulary and requests patterns over time for personalisation.

While I frequently use smart assistants via speech at home, in professional office settings I still find it awkward to openly speak to my devices with colleagues around me. A useful hybrid model would be to prompt requests via text and listen to voiced responses through a headset. This allows discreet immersive listening while keeping focused externally.

The technology is nearly ready for seamless voice invocation in any context. But until social comfort catches up, hybrid interaction modes balance functionality with professional etiquette.

(iv) Augmented Reality Assistants ― The Merge

While chatbots, voice assistants and co-pilots are only aware of context within a limited screen or device, augmented reality will massively expand contextual understanding to a user's full surrounding space.

For office / knowledge workers, this expanded physical context awareness may not hugely aid AI assistance capabilities at first. But for many industrial, manual or spatially complex jobs, it stands to provide a game-changing boost.

Imagine maintenance technicians able to summon holographic diagrams pinned to real machinery, with AI guides tailored to each repair situation, or factory workers getting in-situ optimisation recommendations based what they are looking at mid-assembly.

Augmented reality long seemed a distant dream, but With Apple Vision Pro now shipping, blending atoms and bits is nearing reality. No longer a toggle between physical and digital ― but occupying hybrid spaces where information and AI agency manifest all around.

{d} Embedding Conversational AI Into Apps 🎬

If you haven't already begun embedding AI, now is the ideal time. Here's my advice on taking the first steps:

Audit Workflows - Analyse existing app and identify exactly where AI could simplify processes through faster access to information, smart recommendations, automated content generation, and workflow automation.
Evaluate AI Services - Research conversational AI services like OpenAI (powerful models/APIs) or Google Vertex AI (access to Google’s AI portfolio). Both have accessible options. Other leaders include Anthropic and AWS.
Jumpstart With Conversational UI - Embed smart chatbot and co-pilot UIs into your web and mobile apps using tools like, NLUX. It blends chat and UI intuitively while integrating with leading language models. Check nlux.ai for examples and documentation.

The key is to start small but think big. Identify some narrow yet high value assistance capabilities that conversational AI can deliver quickly - whether bolstering customer service, unlocking employee productivity, or streamlining user flows.

Adding natural conversations is newly accessible for all levels of products if you leverage existing building blocks thoughtfully. This is just the dawn of the AI age - but you can get a head start today. Reach out if you want to discuss strategies for embedding intelligence!

About The Author

Salmen Hichri is a seasoned software architect with over a decade of experience leading engineering teams at companies like Amazon and Goldman Sachs. He is also an open-source contributor and the founder of NLUX, a library for building conversational user interfaces that integrate with AI backends like ChatGPT.

5 React / JS ⚛️ Libraries To Integrate ChatGPT Into Your Web App

Salmen Hichri — Fri, 15 Dec 2023 16:09:54 +0000

Adding an AI-powered conversational interface will soon become a must-have for any compelling web or mobile application user experience. Chatbots enable personalised and natural interactions, provide intelligent support, and improve user engagement. And React JS developers have more options than ever to embed incredibly smart capabilities into their apps.

Here are 5 top open-source React / Javascript libraries for rapidly integrating feature-rich AI chatbots:

⭐️ Don't forget to show support and star them on GitHub ⭐️ 😊

NLUX ⚛️ 🟨 – NLUX provides React components and adapters to build AI chatbots and seamlessly connect to LLMs such as ChatGPT, LLAMA2, and more. Whether creating a smart knowledge base, virtual support agents, or feature-rich AI assistants, it will handle the heavy lifting so developers can deliver next-gen conversational AI to customers faster.
Botanic ⚛️ - Botonic is a react framework to build a conversational app. It is more than creating simple text-based chatbots. It is built for developers and offers a full-stack serverless solution. It allows the developer to create chatbots and modern conversational apps that work on multiple platforms like web, mobile and messaging apps such as Messenger, Whatsapp, and Telegram.
Bottender 🟨 - Bottender is a framework for building conversational user interfaces and is built on top of Messaging APIs. This framework has an easy setup, it has been optimized for real-world use cases, automatic batching requests, and dozens of other compelling features such as intuitive APIs.
React Chatbot Kit ⚛️ - React-chatbot-kit was designed as a way to get started building chatbots on the frontend in a quick and easy manner. The chatbot works by importing it and giving it a messageparser, a config and an actionprovider.
OpenAI JS SDK 🟨 - OpenAI provides an official JavaScript SDK to access their industry-leading LLM ChatGPT. While intended for backend usage, developers can build a lightweight Node.js server and React front-end to deliver fast and integrated conversational experiences. For those wanting maximum control, the uncomplicated OpenAI JS API could be a good option.

Happy coding! 🧑‍💻🙂

⚛️ → React JS Library
🟨 → Vanilla Javascript Library

Develop AI Apps with React and Javascript

Salmen Hichri — Tue, 21 Nov 2023 01:04:38 +0000

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:

import { AiChat } from '@nlux/react';
import { useAdapter } from '@nlux/openai-react';
import '@nlux/themes/kensington.css';

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:

  const adapter = useAdapter({
    apiKey: 'YOUR_OPEN_AI_API_KEY',
    initialSystemMessage:
      'I want you to act as a travel assistant. ' +
      'I want you to give advice to the user and help them ' +
      'plan their upcoming trip. I want you to be creative ' +
      'and funny, and suggest some original ideas.' +
      'The user is 22 years old and they are full of ' +
      'energy and looking for something exciting to do.',
  });

And finally, we pass than adapter to the <AiChat /> UI component, that will display the ChatBot:

<AiChat adapter={adapter} />

And the result is a funny chatbot that can help you plan any future trip ✈️👇

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.

Run It Yourself ⚙️

You can find below a similar Codesandbox example. It uses a custom adapter that connect to NLUX's demo API instead of the ChatGPT adapter suggested above.

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

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

Salmen Hichri — Mon, 13 Nov 2023 08:35:42 +0000

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 — The Game Changer JS Lib

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

As You Type Streaming: We treat every character with the respect it deserves, delivering it hot and fresh to the user.
Vivid Visuals with Markdown: Pretty lists, bold statements, and italics so fine they’d make a typewriter jealous.
Smooth and Speedy: Like a Tesla in ludicrous mode, NLUX’s performance is both high-speed and enviably smooth.
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!'
            }}
        />
    );
}

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.

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

How To Build AI Chatbots Using React JS in Minutes

Salmen Hichri — Wed, 08 Nov 2023 14:00:33 +0000

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