hero

Kurt Maglalang

Hardware & Software Engineer

Design, Develop, Deliver: Full-Stack and Hardware Solutions for Tomorrow

EasyAIChat - ChatGPT Frontend

EasyAIChat - ChatGPT Frontend

Tech Used

Next.JS
NextAuth
TypeScript
Tailwind CSS
Firebase
LangChain
OpenAi

Description

Inspired by a personal drive for greater granularity in interfacing with ChatGPT, EasyAIChat moves beyond the standard interface available on OpenAI. This frontend aspires to not only showcase detailed prompts and responses but also to provide an ecosystem where users can benefit from template prompts. This aims to streamline repeated interactions while also setting the stage for more user-centric features in the future. With an exploration into contemporary web technologies such as Next.js 13 and Firebase, this project became more than just a development task; it transformed into a comprehensive learning experience.

Key Features

  • Seamless Sign-In: Instant Google account access.
  • Conversations On-The-Go: Effortlessly begin new chat sessions.
  • Pick Your Chat Partner: Select your preferred ChatGPT model.
  • Dynamic Template Prompts: Design and incorporate template prompts with the {{text}} placeholder for real-time text assimilation.
  • Real-time Sync: Instantaneous updating and management of prompt details through Firebase.
  • Custom Conversational Experience: Delve into advanced settings and modify ChatGPT parameters including temperature, topP, frequency penalty, etc.
  • Text Streaming: Real-time response streams.

Technologies Deployed

  • Next.js 13 & TypeScript: Built a performant, type-safe, server-side rendered application.
  • TailwindCSS: Utility-first design ensured a stylish interface without affecting performance.
  • Firebase: Deployed for real-time data management and authentication, embracing its scalability despite initial learning challenges.
  • SWR: Enabled smooth data-fetching, vital for the chat's dynamic operations.
  • NextAuth: Simplified the Google account authentication process.
  • OpenAI API: Integral for facilitating the ChatGPT interactions.