CircuitAI is a case study of a full-stack web application featuring a chatbot assistant powered by the OpenAI API.

• Used Davinci AI model that can understand user questions and generate natural language responses.
• Utilized Next.js v13 with the experimental appDirectory feature and TypeScript on the front-end, with Upstash and Redis for serverless back-end functionality.
• Implemented OAuth for user authentication and Pusher Channels for real-time messaging.
• Used SWR for efficient data fetching and caching.
• Styled the application with Tailwind CSS.
• Utilized Framer Motion to create interactive and animated UI components.
• Set up continuous integration and deployment using GitHub Actions
• This project allowed me to explore the capabilities of artificial intelligence in web development and gain experience with serverless architecture and real-time communication.

smartmockups_lbmljzkr

🔗 Open live Demo

• Next.js
• React.js
• TypeScript
• Tailwind CSS
• Framer Motion
• OpenAI API, GPT-3 models
• SWR (stale-while-revalidate)
• Upstash
• Redis in-memory DB
• Pusher real-time Channels (WebSocket API)
• NextAuth
• Google OAuth
• GitHub OAuth

• Responsive UI with Tailwind CSS.
• AI ChatBot that can understand general natural language.
• Chat messages updated in real-time via WebSockets.
• Chat log stored in Redis.
• Data fetching and caching techniques using SWR— a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data.
• NextAuth with Google and GitHub OAuth providers.
• Robust code using TypeScript.

smartmockups_lbmlyh6h smartmockups_lbmlaw7x smartmockups_lbmmd217

First, clone the project and open it with Visual Studio Code:

git clone https://github.com/javigong/circuitai-nextjs-typescript-redis-tailwind-nextauth.git
cd circuitai-nextjs-typescript-redis-tailwind-nextauth
code .

Then, create a .env.local file in the root of the project and configure the following environment variables:

# Redis DB
REDIS_URL=
# Pusher
PUSHER_APP_ID=
NEXT_PUBLIC_PUSHER_KEY=
NEXT_PUBLIC_PUSHER_CLUSTER=
# Vercel system variables
VERCEL_URL=
#Google Auth
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
# Next Auth
NEXTAUTH_URL=
NEXTAUTH_SECRET=
# OpenAI
OPENAI_API_KEY=

Finally, install the npm dependencies and run the application:

npm install
npm run dev

Now the application is running on http://localhost:3000 🚀

CircuitAI deployed using Vercel:

https://circuitai-nextjs-typescript-redis-tailwind-nextauth-javigong.vercel.app/