FOLASAYO SAMUEL OLAYEMI for NLKit

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!

Top comments (14)

Kevin • May 21

Thank you for sharing such a great post! I wanted to add some insights from my experience. There are other libraries and technologies I would highly recommend if you want to create an app with the ChatGPT API:

Next.js: Next.js has been my preferred framework for front-end development for the past few years. Built on React, it simplifies many decisions typically faced during application development, such as file structure, routing, and server-side rendering (SSR). It also supports implementing a basic backend and API endpoints alongside your application, offering a comprehensive solution for both front-end and back-end needs.

Clerk: For authentication, I've found Clerk to be an excellent choice. Dealing with authentication has historically been a challenge for me, but Clerk's solution has made the process incredibly straightforward and efficient.

Supabase: Similar to Firebase but built on SQL databases, Supabase offers a fantastic development experience with robust documentation, convenience, and reasonable pricing. It's an ideal choice for back-end storage needs. While Supabase also offers authentication capabilities, I found Clerk to be more user-friendly in this regard.

Tailwind: Although I've experimented with various CSS solutions in the past, Tailwind initially seemed daunting due to its reliance on a new set of classes and longer class names within HTML/JSX files. However, its simplicity eventually won me over. Tailwind is easy to install, implement, and understand, making it particularly suitable for projects with tight deadlines.

If you would like to learn more about the ChatGPT API and how you can implement it in your projects, I highly recommend reading this article from Engin Arslan:
scalablepath.com/machine-learning/...