Building Custom AI Powered Apps with ChatGPT

How to Build an AI: The Chronicles of Jobot

Episode 1 - First Contact with Jobot Episode 2 - Jobot Meets the World Episode 3 - Jobot Learns New Tricks Episode 4 - Jobot Makes New Friends Episode 5 - Jobot Enters the Matrix Episode 6 - Jobot's Trip Down Memory Lane

Objective

Build and deploy an AI-powered application using OpenAI ChatGPT API

References

Sample Application: https://jobot.jovian.com/jovian-team/leetcode-assistant
OpenAI Documentation: https://platform.openai.com/docs/api-reference
NextJS documentation: https://nextjs.org/docs
usellm library documentation: https://www.npmjs.com/package/usellm
React documentation: https://react.dev/learn
Tailwind CSS documentation: https://tailwindcss.com/docs/installation
Rate limiting with Upstash: https://upstash.com/blog/upstash-ratelimit
Deployment with Vercel: https://vercel.com/docs/concepts/deployments/git/vercel-for-github
Sample LeetCode Question: https://leetcode.com/problems/longest-common-prefix/
Insomnia REST Client: https://insomnia.rest/
Learn Prompting: https://learnprompting.org/
Prompt Engineering Course: https://www.deeplearning.ai/short-courses/chatgpt-prompt-engineering-for-developers/
Final code: https://github.com/aakashns/buildaiapps-live

Step 1 - Get Access to OpenAI API

Sign up on the OpenAI API Platform
Add payment method & generate API key
Explore the API docs and identify required APIs
Explore APIs using the OpenAI Playground

Step 2 - Development Setup & API Connection

Create an GitHub repository & open it on Codespaces
Initialize a NextJS application and install dependencies
Connect to the OpenAI APIs using the [usellm](https://usellm.org) library
Create a simple chat interface to interact with the API

Step 3 - Build AI-Powered Application Features

Create a wireframe to sketch out the UI for the required use case
Implement the user interface using React and Tailwind CSS
Implement the functionality using OpenAI APIs using the usellm library
Test functionality and adjust prompts and other options as required

Once developed, the application can be deployed to a platform like Vercel.

Learning Resources

Check out these resources to learn more about recent advances in artificial intelligence:

Sparks of AGI: https://arxiv.org/abs/2303.12712
Emergence: https://www.assemblyai.com/blog/emergent-abilities-of-large-language-models/

Check out these resources to learn the prerequisites for this tutorial:

HTML, CSS & JavaScript (30 mins) - https://www.youtube.com/watch?v=_GTMOmRrqkU
ReactJS (30 mins) - https://www.youtube.com/watch?v=hQAHSlTtcmY
NextJS (30 mins) - https://www.youtube.com/watch?v=OTuHnVvxTDs
Tailwind CSS (12 mins) - https://www.youtube.com/watch?v=pfaSUYaSgRo
CSS Flexbox (8 mins) - https://www.youtube.com/watch?v=phWxA89Dy94

Here's are some more optional, but useful tutorials:

Visual Studio Code (8 mins) - https://www.youtube.com/watch?v=VqCgcpAypFQ
Git and GitHub (45 mins) - https://www.youtube.com/watch?v=tRZGeaHPoaw
NodeJS (16 mins) - https://www.youtube.com/watch?v=ENrzD9HAZK4
Fetch API (6 mins) - https://www.youtube.com/watch?v=cuEtnrL9-H0
Chrome Developer Tools Tutorial (50 mins) - https://www.youtube.com/watch?v=x4q86IjJFag
GitHub Codespaces (40 mins) - https://www.youtube.com/watch?v=D_5T6KMTRb8