Skip to content

This project is a simple React-based chat interface that uses Next.js and communicates with OpenAI's GPT-4 (or GPT-3.5-turbo) language model to generate responses.

Notifications You must be signed in to change notification settings

hillis/gpt-4-chat-ui

Repository files navigation

GPT 4 Chat UI

This project is a simple React-based chat interface that uses Next.js and communicates with OpenAI's GPT-4 (or GPT-3.5-turbo) language model to generate responses.

Features

  • Responsive chat interface
  • Auto-scroll to the latest message
  • Message input validation
  • OpenAI GPT-4 integration
  • Loading indicator during API requests

Getting Started

These instructions will help you set up the project on your local machine.

Prerequisites

  • Node.js >= 14.x
  • npm

Dependencies

  • @emotion/react: ^11.10.6
  • @emotion/styled: ^11.10.6
  • @mui/material: ^5.11.14
  • @types/node: 18.15.10
  • @types/react: 18.0.29
  • @types/react-dom: 18.0.11
  • eslint: 8.36.0
  • eslint-config-next: 13.2.4
  • next: 13.2.4
  • openai: ^3.2.1
  • react: 18.2.0
  • react-dom: 18.2.0
  • react-markdown: ^8.0.6
  • typescript: 5.0.2

Installation

  1. Clone the repository:

git clone https://github.com/hillis/gpt-4-chat-ui.git

  1. Change to the project directory:

cd gpt-4-chat-ui

  1. Install dependencies:

npm install

  1. Add your OpenAI API key to a .env file:
envCopy code
OPENAI_API_KEY=your_openai_api_key_here

Make sure to replace your_openai_api_key_here with your actual OpenAI API key.

  1. Run the development server:

npm run dev

Now you can open your browser and navigate to http://localhost:3000 to see the chat interface in action.

Deployment

To deploy the application, follow the Next.js deployment documentation.

Built With

Contributing

Used Template and converted to Typescript Frontend of this repo is inspired by langchain-chat-nextjs LangChain-Chat-NextJS

License

This project is licensed under the MIT License -

About

This project is a simple React-based chat interface that uses Next.js and communicates with OpenAI's GPT-4 (or GPT-3.5-turbo) language model to generate responses.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published