FOLASAYO SAMUEL OLAYEMI for nlux

Posted on Mar 5 • Updated on Mar 13

Unlock the Future: Your Web App With ChatGPT, React JS, and Node.js ⚛️ 🔥 🚀

#webdev #tutorial #ai #chatgpt

This comprehensive guide will walk you through the process of incorporating OpenAI's ChatGPT model and the nlux AI chatbot library into a web application using Node.js for the backend and React JS for the frontend.

Our aim is to make this guide as user-friendly as possible for you, breaking down each step in simple terms and explaining why each library is important.

Understanding the Libraries

Express.js: A fast, unopinionated, minimalist web framework for Node.js, ideal for building web applications and APIs. It simplifies routing, middleware, handling requests, and more.
@nlux/react: A feature-rich library designed to simplify the integration of AI chatbos within React applications, providing components and hooks for building LLM-powered interfaces.
@nlbridge/express: A lightweight Node.js library that provides utilities, middleware, and a development server for building APIs powered by large language models.
React JS: A JavaScript library for building user interfaces, particularly known for its efficient update and render of the right components when data changes.

Step-by-Step Integration

1. Obtaining OpenAI API Key

Sign up at OpenAI and navigate to the API keys section to generate a new key. This key is crucial for authenticating your requests to the ChatGPT model.
Click the Create new secret key button

Give your API key a name and click Create secret key
Copy the API key and save it in a safe place. You will need it to configure the OpenAI nlux adapter.

Creating a Node.js Middleware To Connect to ChatGPT

In the next 2 steps, we will create a simple endpoint that connects to ChatGPT. We will use @nlbridge/express for that prupose.

2. Setting Up an Express.js Server

Installation: Ensure Node.js (preferably the latest LTS version) is installed, then initialize a new Node.js project. Install Express.js and its types for TypeScript support.
Server Creation: Write a simple server in TypeScript that listens for requests. This server acts as the backbone of your application, facilitating communication with the OpenAI API.

Example Code:

import express from 'express';
import cors from 'cors';

const app = express();
const port = 8080;

app.use(cors());
app.use(express.json());

app.get('/', (req, res) => {
  res.send('Welcome to our NLUX + Node.js demo server!');
});

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

Run the Express.js server
Run your Express.js application using the following command:

npx ts-node index.ts

Then navigate to this URL: http://localhost:8080 in your browser, you should see the following in your browser:

3. Integrating `nlbridge` Middleware

Incorporate @nlbridge/express to bridge the OpenAI API with the NLUX library, facilitating the creation of a server endpoint for AI interactions.

Example Code:

import { defaultMiddleware } from '@nlbridge/express';

app.post('/chat-api', defaultMiddleware('openai', {
  apiKey: 'YOUR_OPENAI_API_KEY',
  chatModel: 'gpt-3.5-turbo',
}));

Explanations to the code sample above:

This snippet of code demonstrates how to set up a server endpoint in a Node.js application using Express and the @nlbridge/express library, specifically for creating an AI chat functionality powered by OpenAI's ChatGPT model.

Creating an AI chatbot Interface

4. Installing NLUX Packages

With the backend in place, move on to the frontend by setting up a ReactJS project and installing NLUX packages for creating AI chat components.

Quick Setup with Vite: The commands:

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

Quickly scaffold a new React project using Vite, selecting a template that supports both React and TypeScript. This setup allows for rapid development and testing.

Once you have your React JS app set up, let's go and install the nlux dependencies:

npm install @nlux/react @nlux/nlbridge-react

5. Crafting the AI Chat Component

Utilize the useChatAdapter hook and AiChat component from NLUX to develop your chat interface, ensuring seamless communication with the backend server.

Example Code:

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

const adapterOptions = {
  url: 'http://localhost:8080/chat-api',
};

const App = () => {
  const nlbridgeAdapter = useChatAdapter(adapterOptions);

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

export default App;

6. Styling of the Chat UI

Install and import NLUX's default CSS theme to ensure your chat interface is visually appealing.

npm install @nlux/themes

Then in your main chat component, import it as following:

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

Output:

🌟 Support NLUX on GitHub 🌟

NLUX is an open-source project, dedicated to bridging the gap between web development and conversational AI technologies. If you've found value in this guide or in the NLUX library itself, consider giving us a ⭐ on GitHub.
Your support helps us continue to innovate and provide valuable resources to the developer community. Let's build the future of conversational interfaces together!

Conclusion

This comprehensive guide outlines the steps necessary to integrate cutting-edge AI chatbots into your web applications, from backend setup with Node.js and Express.js to frontend creation with ReactJS and NLUX. By following these steps, developers can unlock new potentials in user interaction, offering more engaging and intelligent conversational experiences.

Thanks for reading...
Happy Coding!