Skip to main content
Version: v2.x

Get Started ― NLUX And LangChain LangServe

LangChain is popular framework for building services and backends powered by LLMs. It offers a library called LangServe that exposes a REST API for interfacing with LLMs.

This guide shows you how to get started with NLUX and conversational AI APIs from LangServe.

NLUX is available as a React JS component and hooks, or as a JavaScript library.
The features are identical for both platforms. Use the version that best suits your needs.

NLUX + React JS

This guide will walk you through the steps to add NLUX conversational capabilities to a React JS app.
It assumes that you already have a React JS app set up.

If you don't have a React JS app set up yet, and you are looking for a quick way to get started, you can use Vite's react-ts template to quickly set up a React JS app.

Set up a React JS project with vite

Use the following npm commands to set up a React JS app with TypeScript using Vite's react-ts template:

npm create vite@latest my-ai-chat-app -- --template react-ts
cd my-ai-chat-app
npm install
npm run dev

The last command will start the development server and open the app in your default browser.

1. Install NLUX Packages​

You can start by adding NLUX to your React JS app using your favorite package manager. At the root of your project, run the following command:

npm install @nlux/react @nlux/langchain-react

This will install the @nlux/react and @nlux/langchain-react packages.

2. Import Component And Hook​

Import the useChatAdapter hook and the AiChat component in your JSX file:

import {AiChat} from '@nlux/react';
import {useChatAdapter} from '@nlux/langchain-react';

The AiChat component is the main chat component that you will use to display the chat UI.
The useChatAdapter hook is used to create an adapter for the LangServe API.

3. Create LangServe Adapter​

You can use the useChatAdapter hook to create a LangServe adapter.
You can optionally import ChatAdapterOptions from @nlux/langchain-react to define the type of the options object.

const adapterOptions: ChatAdapterOptions = {
    url: 'https://pynlux.api.nlkit.com/pirate-speak'
};

export const App = () => {
    const langServeAdapter = useChatAdapter(adapterOptions);
}

The ChatAdapterOptions interface has one required property: url. This is the URL of the LangServe Runnable. You can read more about the exact format of the URL in the reference documentation.

In this example, we are connecting a demo API provided by NLUX that runs a LangServe Runnable that translates text to pirate speak. It's based on one the examples from the LangServe documentation.

4. Create Chat Component​

Now that we have the LangServe adapter, we will create the chat component and pass the adapter to it.

import {AiChat} from '@nlux/react';
import {useChatAdapter, ChatAdapterOptions} from '@nlux/langchain-react';

const adapterOptions: ChatAdapterOptions = {
    url: 'https://pynlux.api.nlkit.com/pirate-speak'
};

export const App = () => {
    const langServeAdapter = useChatAdapter(adapterOptions);

    return (
        <AiChat
            adapter={langServeAdapter}
            composerOptions={{
                placeholder: 'How can I help you today?'
            }}
        />
    );
};

The AiChat component can take several parameters:

  • The first parameter adapter is the only required parameter, and it is the adapter that we created earlier.
  • The second parameter that we provide here is an object that contains the composer options. In this case, we are passing a placeholder text placeholder to customize the composer.

For full documentation on how to customize the AiChat component, please refer to the AiChat documentation.

5. Add CSS Styles​

NLUX comes with a default CSS theme that you can use to style the chat UI. There are 2 ways to import the stylesheet, depending on your setup.

Using JSX Bundler​

You can import it in your JSX component file by installing the @nlux/themes package:

npm install @nlux/themes

Then import the default theme nova.css in your React component:

import '@nlux/themes/nova.css';

This will require a CSS bundler such as Vite, or Webpack that's configured to handle CSS imports for global styles. Most modern bundlers are configured to handle CSS imports.

Alternatively, you can include the CSS stylesheet in your HTML file.
We provide a CDN link that you can use to include the stylesheet in your HTML file:

<link rel="stylesheet" href="https://content.nlkit.com/nlux/themes/nova.css" />

This CDN link is not meant for production use, and it is only provided for convenience. Make sure you replace it with the latest version of the stylesheet before deploying your app to production.

6. Run Your App​

Your final code will look like this:

import {AiChat} from '@nlux/react';
import {useChatAdapter, ChatAdapterOptions} from '@nlux/langchain-react';
import '@nlux/themes/nova.css';

const adapterOptions: ChatAdapterOptions = {
    url: 'https://pynlux.api.nlkit.com/pirate-speak',
};

export const App = () => {
    const chatGptAdapter = useChatAdapter(adapterOptions);

    return (
        <AiChat
            adapter={chatGptAdapter}
            composerOptions={{
                placeholder: 'How can I help you today?'
            }}
        />
    );
};

You can now run your app and test the chatbot.
The result is a fully functional chatbot UI:

Since the LangChain endpoint is instructing the LLM to behave like a Parrot (created for this example), the chatbot will respond in a fun and playful manner that mimics the persona that of a parrot.

And NLUX is handling all the UI interactions and the communication with LangChain.