├── .env.example
├── .eslintrc.json
├── .gitignore
├── README.md
├── components
├── AnimateChats.js
├── ClientSide.js
└── Icon.js
├── next.config.js
├── package-lock.json
├── package.json
├── pages
├── _app.js
├── _document.js
├── api
│ └── chat.js
└── index.js
├── postcss.config.js
├── public
├── favicon.ico
├── image
│ ├── ss-chat.png
│ └── ss-chats.png
├── next.svg
├── thirteen.svg
└── vercel.svg
├── store
└── ChatStore.js
├── styles
└── globals.css
└── tailwind.config.js
/.env.example:
--------------------------------------------------------------------------------
1 | // change this to .env
2 | API_KEY = your_apikey_from_openai
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # NextJS Chat OpenAI
2 |
3 | ### Requirements
4 |
5 | - Node.js 14+ and npm
6 |
7 | ### Getting started
8 |
9 | Run the following command on your local environment:
10 |
11 | ```shell
12 | git clone https://github.com/hadi-16/nextjs-chat-openai.git your-project-name
13 | cd your-project-name
14 | npm install
15 | ```
16 |
17 | ## How to run app
18 |
19 | 1. Get api key from OpenAI [https://beta.openai.com](https://beta.openai.com).
20 | 2. Edit env.example to .env
21 | 3. Enter api key to .env
22 | 4. Run the development server :
23 |
24 | ```bash
25 | npm run dev
26 | # or
27 | yarn dev
28 | ```
29 |
30 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the app.
31 |
32 | ```shell
33 | structure folder app
34 |
35 | ├── components # Components folder
36 | ├── pages # Next JS Pages
37 | ├── public # Public assets folder
38 | ├── store # Store folder
39 | ├── styles # Next JS Style
40 | ├── README.md # README file
41 | ├── tailwind.config.js # Tailwind CSS configuration
42 | ├── .env # Next JS environment variables
43 | ```
44 |
45 | ### Features
46 |
47 | - ⚡ [Next.js](https://nextjs.org) for Fullstack Framework Javascript
48 | - 🤖 Integrate Chatbot API with [OpenAI](https://openai.com)
49 | - 💎 Integrate Styling with [Tailwind CSS](https://tailwindcss.com)
50 | - ⚙️ State Management with [Zustand](https://www.npmjs.com/package/zustand)
51 | - 🔦 Animation Chats with [AutoAnimate](https://auto-animate.formkit.com)
52 |
53 | ### Demo app
54 | Open [https://chat.hadi.pw](https://chat.hadi.pw) the url in your browser for the demo application.
55 |
56 | ### Screenshoot app
57 |
58 | | Screenshot Chat | Screenshot Chats |
59 | | --- | --- |
60 | |  |  |
61 |
--------------------------------------------------------------------------------
/components/AnimateChats.js:
--------------------------------------------------------------------------------
1 | import { useAutoAnimate } from "@formkit/auto-animate/react";
2 |
3 | export default function AnimateChats({ children }) {
4 | const [ref] = useAutoAnimate();
5 | return {children}
;
6 | }
7 |
--------------------------------------------------------------------------------
/components/ClientSide.js:
--------------------------------------------------------------------------------
1 | import dynamic from "next/dynamic";
2 |
3 | const ClientSide = ({ children }) => <>{children};
4 |
5 | export default dynamic(() => Promise.resolve(ClientSide), {
6 | ssr: false,
7 | });
8 |
--------------------------------------------------------------------------------
/components/Icon.js:
--------------------------------------------------------------------------------
1 | const IconHand = ({ loading }) => {
2 | return (
3 |
12 | );
13 | };
14 |
15 | const IconRobot = () => {
16 | return (
17 |
24 | );
25 | };
26 |
27 | const IconTrash = () => {
28 | return (
29 |
36 | );
37 | };
38 |
39 | const IconProfile = () => {
40 | return (
41 |
48 | );
49 | };
50 |
51 | const IconLoadingHourglass = () => {
52 | return (
53 |
60 | );
61 | };
62 |
63 | const IconSend = () => {
64 | return (
65 |
72 | );
73 | };
74 |
75 | const IconLoadingSend = () => {
76 | return (
77 |
84 | );
85 | };
86 |
87 | export {
88 | IconHand,
89 | IconRobot,
90 | IconTrash,
91 | IconProfile,
92 | IconLoadingHourglass,
93 | IconSend,
94 | IconLoadingSend,
95 | };
96 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | }
5 |
6 | module.exports = nextConfig
7 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nextjs-chat-openai",
3 | "version": "1.0.0",
4 | "private": false,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@formkit/auto-animate": "^1.0.0-beta.6",
13 | "@headlessui/react": "^1.7.13",
14 | "@next/font": "^13.2.4",
15 | "axios": "^1.3.4",
16 | "dayjs": "^1.11.7",
17 | "eslint": "^8.36.0",
18 | "eslint-config-next": "^13.2.4",
19 | "next": "^13.2.4",
20 | "openai": "^3.2.1",
21 | "react": "^18.2.0",
22 | "react-dom": "^18.2.0",
23 | "react-hot-toast": "^2.4.0",
24 | "zustand": "^4.3.6"
25 | },
26 | "devDependencies": {
27 | "autoprefixer": "^10.4.14",
28 | "postcss": "^8.4.21",
29 | "tailwindcss": "^3.2.7"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import '../styles/globals.css'
2 |
3 | export default function App({ Component, pageProps }) {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
1 | import { Html, Head, Main, NextScript } from 'next/document'
2 |
3 | export default function Document() {
4 | return (
5 |
6 |
7 |