Attendance Taking AI Chatbot with React Frontend

Calvin,•2 min read
langchainaichatbotopenaireactfastifysqlitefunction-calling
Back

In the previous post #1 and post #2, I built a student attendance chatbot using OpenAI and LangChainJS. The code runs on the server side and features an interactive prompt in the terminal. However, it wasn’t very convenient for users to quickly test the chatbot and see the results. In this post, I’ll demonstrate how I added a minimal ReactJS frontend for the chatbot.

The approach involves (1) converting the original terminal prompt into a RESTful API and (2) integrating a ReactJS frontend to call the API.

I accomplished (1) effortlessly with Fastify, aggregating all console.log outputs into a structured JSON response and setting up the server in CodeSandbox.

The frontend development also progressed quickly, thanks to code snippets from Zeshanshakil with some modifications.

screen capture of the chatbot frontend with reactjs

I successfully ran both frontend and backend projects locally in two separate docker containers, using docker-compose to orchestrate them. The frontend would call the backend API at http://localhost:3001 and display the result.

However, when attempting to run them in CodeSandbox, I encountered some issues. I couldn’t run the server/client as two separate containers since the client didn’t know the hostname of the temporary instantiated API server. I could not find an easy way to obtain the server hostname and pass it to the client container.

As a workaround, I merged the frontend and backend into a single project, running them in a single container. The frontend is served statically by Fastify, and the API is available at /chat on the same host. CORS is not a concern since both the frontend and backend are served from the same host and port.

The latest update is tagged version-5. Please make sure to add OPENAI_API_KEY to the environment variables in the CodeSandbox project settings:

After thoughts

In this demo project, I chose to utilize a server/client design. My intention is to store attendance data in the server-side database, allowing the chatbot to be used across multiple sessions and by different user roles. However, it is also possible to implement the chatbot as a pure frontend application, utilizing Web SQL Database or IndexedDB to store attendance data locally in the browser.