Repository files navigation

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.

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

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

• Node.js >= 14.x
• npm

• @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

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 codeOPENAI_API_KEY=your_openai_api_key_here

Make sure to replaceyour_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 tohttp://localhost:3000 to see the chat interface in action.

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

• Next.js - The React framework used
• TypeScript - The programming language used
• OpenAI API - The AI language model used

Used Template and converted to TypescriptFrontend of this repo is inspired by langchain-chat-nextjsLangChain-Chat-NextJS

This project is licensed under the MIT License -