Log In

E1: First Contact with Jobot - How to Build an AI

In the first episode of "How to Build an AI," we embark on exciting journey of building Jobot, a helpful and programmable AI that can be deeply integrated into any software application. We'll guide you through the process, sharing valuable insights and expertise along the way.

The following topics are covered in this tutorial:

  • Understanding what it takes to build a AI-powered applications

  • Creating a chatbot UI similar to ChatGPT using React, NextJS & TailwindCSS

  • Connecting a chatbot UI to the OpenAI API & streaming messages

  • Deploying a chatbot UI to the cloud using GitHub and Vercel

The best way to learn these skills is to follow along step-by-step and type out all the code yourself.

Problem Statement

PROBLEM: Build & deploy the chat interface shown in the above wireframe with the following features:

  1. An input box where a user can enter a message and send it to Jobot

  2. New messages from the user are sent to the OpenAI ChatGPT API

  3. The response, along with the conversation history is shown above the input box

  4. The user can provide their OpenAI API key in a secure input box in the page header

Prerequisites

The tutorial assumes basic knowledge of the following:

  • HTML, CSS, and JavaScript

  • Git, GitHub, and VS Code

  • ReactJS, NextJS, and Tailwind CSS

Links to beginner-friendly resources for learning these skills are included at the end.

TIP: Try to learn just enough so that you can understand and build on top of the code in this tutorial, and use ChatGPT (or Jobot) for help.

Code & Finished Site

The code for this tutorial can be found here:

Project Setup

We'll use GitHub for hosting our project and GitHub Codespaces for development.

EXERCISE: Watch this tutorial to learn the basics of Git & GitHub in 45 minutes: https://www.youtube.com/watch?v=tRZGeaHPoaw

Creating a Project Repository

Follow these steps to sign up and create a new repository on GitHub:

  1. Go to GitHub.com and click on the "Sign up" button in the top right corner. Follow the prompts to create a new account by entering your email address, a username, and a password.

  2. After creating your account, you'll be taken to the GitHub dashboard. To create a new repository, click on the "New" button located on the left side of the dashboard.

  3. On the "Create a new repository" page, enter a name for your repository, a brief description, and choose whether you want it to be public or private. If you choose a private repository, you'll need to have a paid GitHub account.

  4. Once you've filled out the necessary information, click on the "Create repository" button to create your new repository.

  5. Now that you've created your repository, you'll be taken to the repository page, where you can add files, make changes to your code, and collaborate with others.

Congratulations! You've successfully signed up for GitHub and created a new repository.

From here, you can start adding files, making changes to your code, and collaborating with others to build your software project. You can do either by downloading the repository to your computer of using a cloud-based development platform like GitHub Codespaces.

EXERCISE: Learn more about the README.md, .gitignore and LICENSE files here:

  1. README.md - https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes

  2. .gitignore - https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files

  3. LICENSE - https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/licensing-a-repository

Starting a GitHub Codespace

Here are the steps to open up a repository in Codespaces and launch it within VS Code:

  1. Navigate to the GitHub repository that you want to work on.

  2. Click on the "Code" button, and select "Open with Codespaces" from the dropdown menu.

  3. Select the Codespace configuration that you want to use, or create a new one if necessary.

  4. Wait for the Codespace to be created, which may take a few minutes, if done for the first time.

  5. Once the Codespace is ready, click on the "Open in Visual Studio Code" button

You can either work with the browser-based version of VS Code, or you can connect remotely to the codespace using your installation of VS Code.

Learn more about using VS Code with Codespaces here: https://code.visualstudio.com/docs/remote/codespaces

NOTE: GitHub provides 120 hours of free codespaces usage for personal accounts. Learn more about the pricing here.

Creating a NextJS Project

NextJS is a popular React framework for building server-rendered applications, static websites, and APIs with a great focus on performance and best practices.

One of the easiest ways to create a new NextJS project is by using the create-next-app CLI tool, which sets up a fully functional, customizable template with minimal effort. Follow these steps:

  1. Run the following command, replacing my-next-app with your desired project name, and follow on-screen instructions configure the project as desired:
npx create-next-app my-next-app

Recommended settings:

✔ Would you like to use TypeScript with this project? No
✔ Would you like to use ESLint with this project? Yes
✔ Would you like to use Tailwind CSS with this project? Yes
✔ Would you like to use `src/` directory with this project? Yes
✔ Would you like to use experimental `app/` directory with this project? No
✔ What import alias would you like configured? @/*
  1. Move into the newly created project folder by running:
cd my-next-app
  1. Run the following command to start the NextJS development server and open it in a new tab via Cmd/Ctrl+Click on the server URL shown on screen (e.g. https://localhost:3000 ):
npm run dev

  1. Browse the src folder using the VS Code sidebar. The project will have a predefined structure, which includes:

    • pages: This folder contains the application's pages.
    • public: This folder holds the static assets, such as images and fonts.
    • styles: This folder contains global and component-specific CSS files.
    • package.json: This file defines dependencies and scripts for your project.

  2. Clean up the template code by opening up src/pages/index.js and replacing it with the following code:

export default function Home() {
  return <div>Hello world</div>;
}
  1. Clean up the templates styles by opening up src/styles/globals.css and replacing it with the following code:
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. ESLint (syntax error detection tool for JavaScript) needs to be informed about the working directory for the NextJS project. Go to "File" > "Preferences" > "Settings" > "Workspace", search for "eslint working" and click on "Edit in settings.json" and add the jobot-web directory:
{
  "eslint.workingDirectories": ["./jobot-web"]
}

You can now start editing these files and adding your own components to build your application.

EXERCISE: Learn the basics of ReactJS and NextJS in under an hour by following these tutorials:

  1. ReactJS (30 mins) - https://www.youtube.com/watch?v=hQAHSlTtcmY

  2. NextJS (30 mins) - https://www.youtube.com/watch?v=OTuHnVvxTDs

Integration with ChatGPT

ChatGPT, powered by OpenAI, is a large-scale language model that can generate human-like text responses based on a given input. The ChatGPT API provides a convenient way to integrate ChatGPT into your applications, enabling you to leverage its powerful natural language processing capabilities

Navbar & API Key

To use the ChatGPT API, you need to sign up for an API key from OpenAI. Visit the OpenAI platform (https://platform.openai.com/signup/) to create an account and obtain your API key. Keep the API somewhere safe and never share it publicly or add it directly to your source code that's committed to version control.

Let's create a Navbar with an input box where we can securely enter the API key in the user interface. Place the following code inside pages/index.js:

import { useState } from "react";

export default function Home() {
  const [apiKey, setApiKey] = useState("");
  return (
    <div className="flex flex-col h-screen">
      
      {/* Navbar */}
      <nav className="bg-white shadow w-full">
        <div className="px-4 h-14 flex justify-between items-center">
          <div className="text-xl font-bold">Jobot</div>
          <div>
            <input
              type="password"
              className="border rounded p-1"
              placeholder="Enter API key.."
              value={apiKey}
              onChange={(e) => setApiKey(e.target.value)}
            />
          </div>
        </div>
      </nav>

      {/* Add UI elements here */}

    </div>
  );
}

TIP: Use Jobot's Code Explainer template to quickly understand any piece of code: https://jovian.com/jobot/code-explainer

This code is a functional React component that renders a navigation bar with a text input field to enter an API key. It uses Tailwind CSS utility classes for styling.

Here's a breakdown of the code (generated using Jobot) :

  • The code imports the useState hook from the react library.

  • The component is defined with the name Home and is exported as the default export of the module.

  • The useState hook is used to create a state variable apiKey and a function setApiKey to update it. The initial value of apiKey is an empty string.

  • The component returns a JSX element that contains a navigation bar with a text input field.

  • The navigation bar has a white background color and a shadow effect. It is fixed to the top of the viewport and spans the full width of the screen.

  • The navigation bar has a height of 14 pixels and contains two child elements.

  • The first child element is a div with a class of text-xl and font-bold. It displays the text "Jobot".

  • The second child element is a div that contains an input field.

  • The input field has a type attribute of "password", a className attribute of "border rounded p-1", a placeholder attribute with the text "Enter API key..", a value attribute that is bound to the apiKey state variable, and an onChange attribute that calls the setApiKey function whenever the input field is changed.

EXERCISES:

  1. Learn more about React's useState hook here (10 mins): https://react.dev/learn/state-a-components-memory

  2. Follow this tutorial to learn the basics of Tailwind CSS (12 min): https://www.youtube.com/watch?v=pfaSUYaSgRo

Chat Compeletion API

We can now use the chat completions OpenAI API endpoint to send a message to ChatGPT and get back the response:

  • The API endpoint is https://api.openai.com/v1/chat/completions

  • It expects a JSON request body in the following format:

{
  "model": "gpt-3.5-turbo",
  "messages": [{"role": "user", "content": "Hello!"}]
}
  • It expects the OpenAI API key to be passed in the header:
Authorization: Bearer OPENAI_API_KEY
  • It returns a response message in the following format:
{
  "id": "chatcmpl-123",
  "object": "chat.completion",
  "created": 1677652288,
  "choices": [{
    "index": 0,
    "message": {
      "role": "assistant",
      "content": "\n\nHello there, how may I assist you today?",
    },
    "finish_reason": "stop"
  }],
  "usage": {
    "prompt_tokens": 9,
    "completion_tokens": 12,
    "total_tokens": 21
  }
}

API Invocation with Fetch

Let's add a button below the navbar to invoke th

Streaming the Response

Chat Interface Development

Let's review the given wireframe and problem statement:

PROBLEM: Build & deploy the chat interface shown in the above wireframe with the following features:

  1. An input box where a user can enter a message and send it to Jobot

  2. New messages from the user are sent to the OpenAI ChatGPT API

  3. The response, along with the conversation history is shown above the input box

  4. The user can provide their OpenAI API key in a secure input box in the page header

Chat Input Box

Message History

Cloud Deployment with Vercel

Vercel is a cloud platform that makes it easy to deploy websites and applications. It offers seamless integration with GitHub and other version control systems, allowing developers to deploy their projects directly from their repositories.

Follow these steps to deploy your website to Vercel:

  1. Go to https://vercel.com and sign up for an account. You can use your GitHub account to sign up or create a new account using your email address.

  2. Once you have signed up, you will be taken to the Vercel dashboard. From here, you can start a new project by clicking the "New Project" button.

  3. Choose the repository you want to deploy. Vercel supports GitHub, GitLab, and Bitbucket repositories. Select the repository and the branch you want to deploy.

  4. Select the project root folder (in this case, it is the src folder) and click "Deploy" to deploy the project. Make sure that the framework you're using is detected correctly.

Vercel will build your project and deploy it to its cloud platform. You can view your site by clicking the "Visit" button next to your project name. Example site: https://jovian-careers-site.vercel.app/

Whenever you push new changes to your repository, Vercel will automatically build and deploy your project to its cloud platform. This means that your site will always be up-to-date with your latest changes.

Summary and Resources

The following topics were covered in this tutorial:

  • Understanding what it takes to build a AI-powered applications

  • Creating a chatbot UI similar to ChatGPT using React, NextJS & TailwindCSS

  • Connecting a chatbot UI to the OpenAI API & streaming messages

  • Deploying a chatbot UI to the cloud using GitHub and Vercel

The code for this tutorial can be found here:

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

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

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