Chatgpt-clone Tailwind Templates

Chatgpt Clone

Building with Next.js 13, TypeScript, Tailwind CSS and Firebase Database

Project

ChtaGPT-clone

The GPT-3 (Generative Pre-trained Transformer 3) language model is one of the most powerful natural language processing models available today, and the Text-Davinci-003 model is one of the largest and most capable variants of GPT-3. Developed by OpenAI.

This is a Next.js project bootstrapped with create-next-app.

First, install all dependencies

yarn install

or

npm install

Then, run the development server:

npm run dev 
# or yarn dev 
# or pnpm dev

Open http://localhost:3000 with your browser to see the result.

Make .env.local file in your project

API Refrence:

You can generate your on api key [OPENAI_API_KEY(.env.local)] from https://platform.openai.com/

Create your own firebae project: Go to Authentication, then in Sign-in method Provide your email!

authentication

When you click on Web SDK configuration provides [GOOGLE_ID and GOOGLE_SECRET(.env.local)] for authentication with google

Google authenticate

NEXTAUTH_URL=http://localhost:3000 (.env.local)

You can write anything NEXTAUTH_SECRET

NEXTAUTH_SECRET=THISISNEXTAUTHSECRET(.env.local)

To Generate FIREBASE_SERVICE_ACOUNT_KEY

Go to firebase > Project Overview > Project Setting Generate new private key automatically downloaded the file for you then copy this and go to https://www.textfixer.com/tools/remove-line-breaks.php and paste the code their they generate a code remove-line-breaks than copy this code and paste in your .env.local FIREBASE_SERVICE_ACOUNT_KEY=your key

env file

Sign-in

When you try sign-in show this required confirmation from google cloud.So, click on error details

Need google auth

Copy this url:

copy url

Go to google cloud than into your project than go to API & Services in which Credentials than go to OAuth 2.0 Client IDs

google cloud

url

In Authorized JavaScript origins

ADD URL

http://localhost:3000

In Authorized redirect URIs

ADD URL

which you copied here:

paste

Preview Project

chatgpt chatgpt 1 chatgpt 2 chatgpt 3

After some modifications

updated

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Live preview on Vercel

https://chatgpt-clone-murex.vercel.app/

Top categories

Loading Svelte Themes