All projects

AI & data

React AI Chatbot

A single-page React and Vite chatbot powered by OpenAI’s API, with chat bubbles, keyboard shortcuts and light and dark themes.

  • Individual project
View the code on GitHub Talk to me about it

01Starting point

Context & mission

The problem

A good chat interface is judged on the details: scrolling, shortcuts, reset, themes.

The mission

Build a pleasant conversation interface around an LLM, focusing on user experience.

My role

Designed and built on my own.

02Execution

What I did

  1. Conversation

    Distinct user and assistant bubbles, auto-scroll to the latest message, conversation reset.

  2. Typing comfort

    Enter to send, Shift + Enter for a new line.

  3. Themes and behaviour

    Light and dark themes; customisable system instructions per use case.

  4. React state

    Messages, theme and loading handled with React hooks; code checked with ESLint.

03Design

Architecture

A front-end-only app: the React interface manages the conversation and calls the OpenAI API. For a public deployment, calls would go through a backend such as Chatbot API, which keeps the key server-side.

The path of a message
  1. React interface
  2. StateHooks
  3. OpenAI client
  4. ReplyAssistant bubble

04Impact

Results

  • A polished chat interface, from keyboard shortcut to theme.

05Wrap-up

Takeaways

What this project proves

That I care about the user experience around an LLM, and know the security limit of calling it straight from the browser.

Learnings and next steps

Connect the interface to Chatbot API to make a full-stack project where the key stays server-side.

06Technology

Full stack

  • React
  • JavaScript
  • Vite
  • CSS
  • React Hooks
  • ESLint
  • OpenAI API

Explore next