Open AI Chatbot

Table of Contents

• Description
• Tech Stack
• Features
• Open AI API
• Database Structure
• Format Configuration
• Folder Structure
• Environment Variables

Description

This chatbot is a complete solution for those looking to create a feature-rich chatbot with user authentication and data storage capabilities. The chatbot uses OpenAI's language model to generate responses to user inputs and presents them in a sleek and intuitive interface built using Next.js and styled with TailwindCSS.

User authentication is managed through Google Sign-In, allowing users to easily sign in to the chatbot using their existing Google account. The chatbot also integrates with Firebase, a popular real-time database platform, to store and retrieve user data such as chat history and user preferences. This chatbot is written in TypeScript, a statically typed superset of JavaScript, providing improved type checking and code reliability.

By using Next.js, TailwindCSS, Firebase, Google Sign-In, and TypeScript, this chatbot offers a robust and scalable solution for those looking to create a feature-rich chatbot.

Tech Stack

• React
• Nextjs
• TypeScript
• Firebase
• Nextauth
• Prettier
• React Hot Toast
• Vercel
• TailwindCSS

Features (wait until GIFs load)

• User authentication using Google Sign-In & Sign-Out

• Saved Chats are listed.

• New Chat can be created, takes to the new page.

• Delete a saved Chats.

• Prompt to Chat button is enabled only when a value is entered.

• OpenAI model are viewed as selection Dropdown

• Model selection placement supports responsive view.

• Toast is displayed

Open AI API

• openAI.ts

This code is used to set up the OpenAI API in a project and provides a convenient way to access the API's functionality throughout the application. The API key is stored as an environment variable to keep it secure and prevent it from being hard-coded in the codebase.

import OpenAI from "openai";


const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

export default openai;

• queryApi.ts

This code demonstrates how to use the OpenAI API to generate a response to a user's input in a chat application. The query function can be used to get a response from the OpenAI model for any given prompt and model, making it a reusable component in the application.

import openai from "./openAI"; 

const query = async (prompt: string, chatId: string, model: string) => {
  try {
    const response = await openai.chat.completions.create({
      model,
      messages: [
        { role: "system", content: "You are a helpful assistant." },
        { role: "user", content: prompt },
      ],
      temperature: 0.9,
      top_p: 1,
      max_tokens: 1000,
      frequency_penalty: 0,
      presence_penalty: 0,
    });

    return response.choices[0].message.content;
  } catch (err:any) {
    return `OpenAI was unable to find an answer for that! (Error: ${err.message})`;
  }
};

export default query;

Database Structure

  .collection("user")
  .doc(session?.user?.email!)
  .collection("chats")
  .doc(chatId)
  .collection("messages")
  .add(message);
      

Format Configuration

{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSpacing": true
}

Folder Structure

.
|-- README.md
|-- firebaseStore.ts
|-- firebaseStoreAdmin.ts
|-- next-env.d.ts
|-- next.config.js
|-- package.json
|-- postcss.config.js
|-- public
|   |-- favicon.ico
|   |-- google.png
|   |-- next.svg
|   |-- openAI.png
|   |-- thirteen.svg
|   `-- vercel.svg
|-- serviceAccountKey.json
|-- src
|   |-- app
|   |   |-- chat
|   |   |   `-- [id]
|   |   |       `-- page.tsx
|   |   |-- head.tsx
|   |   |-- layout.tsx
|   |   `-- page.tsx
|   |-- components
|   |   |-- Chat.tsx
|   |   |-- ChatInput.tsx
|   |   |-- ChatRow.tsx
|   |   |-- ClientProvider.tsx
|   |   |-- Login.tsx
|   |   |-- Message.tsx
|   |   |-- ModelSelection.tsx
|   |   |-- NewChat.tsx
|   |   |-- SessionProvider.tsx
|   |   `-- SideBar.tsx
|   |-- lib
|   |   |-- openAI.ts
|   |   `-- queryApi.ts
|   |-- pages
|   |   `-- api
|   |       |-- askQuestion.ts
|   |       |-- auth
|   |       |   `-- [...nextauth].ts
|   |       `-- getEngines.ts
|   `-- styles
|       `-- globals.css
|-- tailwind.config.js
|-- tsconfig.json
|-- typings.d.ts
|-- yarn-error.log
`-- yarn.lock

Environment Variables

• Generate a key from Open AI.

OPENAI_API_KEY=

• Generate a key from Firebae Web SDK configuration.

GOOGLE_ID=
GOOGLE_SECRET=

• Generate using command Secret.

NEXTAUTH_SECRET=

• Generate the service key from firebase and use the link to format it Text Fixer, once that is done add it as a value.

FIREBASE_SERVICE_ACCOUNT_KEY=