How to build a ChatGPT Clone

In this guide we’re going to write a ChatGPT chatbot and deploy it to DigitalOcean.

The whole tutorial should take around 20 minutes and will walk you through setting up the project, connecting the services, configuring the deployment, and customising your app.

Project Setup

TL;DR

1. Clone the GitHub repo
2. Connect a MongoDB database (we recommend MongoDB Atlas)
3. Setup S3 storage (we recommend DigitalOcean Spaces)
4. Get your OpenAI API Key
5. Configure StartKit.AI

1. Clone the repo

First start by cloning the GitHub Repo. If you don’t have access yet, you need to purchase it!

Growth plan

git clone git@github.com:startkit-ai/startkit.ai.git new-ai-project
cd new-ai-project

Starter plan

git clone git@github.com:startkit-ai/startkit.ai-starter.git new-ai-project
cd new-ai-project

We recommend you create a new GitHub repo, and add that as the origin.

git remote remove origin
git remote add origin <your_repo>

Install dependencies

You can use either npm or yarn to install the project dependencies. If you don’t have Node.js installed yet then you can follow their installation guide here.

# install with yarn
yarn
# or install with npm
npm i

Run the setup

All keys and other secret variables are stored in a .env file. You can automatically set it up by running our setup wizard:

yarn setup
# or with npm
npm run setup

Continue this guide alongside the setup wizard entering the variables when prompted.

2. Connect a MongoDB database

StartKit.AI uses MongoDB as it’s primary database. MongoDB has the benefit of being very easy to prototype with - our priority when getting a project running quickly!

Setup Atlas

We recommend creating a new database using MongoDB Atlas.

Tip

Atlas has a generous free tier, so shouldn’t cost you anything while you get your first users!

1. Visit the Mongo Atlas website: https://www.mongodb.com/cloud/atlas
2. Create an account, follow the instructions
3. Connection string: Once your account is set up, you will be provided with a connection string
4. Add the connection string in the setup wizard

MONGO_URI=mongodb+srv://app:<password>@<db>.retdorb.mongodb.net/<dbname(optional)>?retryWrites=true&w=majority&appName=<app_name>

Note

By default MongoDB Atlas creates and connects to the “test” database, to connect to a different one (for example to have a different database for prod) create it in MongoDB Atlas and replace <dbname> in the connection string above.

When you run StartKit.AI for the first time, it will create the default database collections and data for you, so you don’t need to do any of that yourself.

Allow access to your database

Allow access from anywhere in the Mongo Atlas settings (you’ll need this for when we deploy later):

1. Go to Security -> Network Access in the sidebar
2. Click Add IP Address and set Access List Entry: 0.0.0.0/0
3. Hit confirm!

3. Setup S3 Storage

StartKit.AI uses S3-compatible storage for managing images, documents, and any other files a user might upload. We also store any generated images in S3 as by default OpenAI’s image URLs are only available for a short time.

S3 on DigitalOcean

As we’ll be deploying on DigitalOcean we recommend using their S3 solution, called Spaces.

Create a new Space for StartKit.AI and copy the space URL that we need to split up into the variables for the .env file (see below).

Given this space URL:

https://startkit.ai-dev.sfo3.digitaloceanspaces.com

We need the following values:

https://<STORAGE_NAME>.<STORAGE_REGION>.digitaloceanspaces.com

Enter them in the setup wizard alongside STORAGE_SECRET and STORAGE_KEY from the DigitalOcean account settings page here.

STORAGE_NAME=startkit.ai-dev
STORAGE_REGION=sfo3
STORAGE_URL=https://sfo3.digitaloceanspaces.com
STORAGE_KEY=
STORAGE_SECRET=

4. Get your OpenAI API Key

To get an OpenAI API Key sign up for an account on the OpenAI website, and then navigate to the API Keys page and click Create new secret key.

Then enter the key into the setup wizard:

OPENAI_KEY=

5. Configure StartKit.AI

For the final steps of the setup wizard, setup your admin user to allow you to make API requests and select your app type as Open.

4️⃣ Setup an Admin User. This will be used for signing into the Admin Dashboard, or when making your own requests to the API.
? Enter admin email:
? Enter admin password:

5️⃣ What kind of app are you going to create? (You can change this later)
  (Users) I will have users who sign in and access the API
  (Admin) I want to make secure requests to the API myself
❯ (Open) I want anyone to be able to make requests to the API for free

For this tutorial we want anyone to be able to visit your ChatGPT app and use with it without a license key, in the future you could ask users to sign up and pay before they use it but we’re keeping it simple for now.

Create your ChatGPT App

1. Create a new directory for your app /src/my-chatgpt-clone
2. Copy /src/demos/chat and /src/demos/utils into /src/my-chatgpt-clone
3. Edit /src/entry-client.jsx and paste this:

/src/entry-client.jsx

import './app.css';

import { RouterProvider, createBrowserRouter } from 'react-router-dom';

import Chat from './my-chatgpt-clone/chat/chat.jsx';
import ReactDOM from 'react-dom/client';

const router = createBrowserRouter([
  {
    path: '/:uuid?',
    element: (
      <Chat
        fullWidth={true}
        fullHeight={true}
        initialMessage={`Hi, I'm a friendly chatbot! Ask me a question...`}
        examples={[]}
      />
    )
  }
]);

ReactDOM.createRoot(document.getElementById('root')).render(
  <RouterProvider router={router} />
);

4. Run your app with yarn dev (or npm run dev with npm)
5. 🎉 Your ChatBot is running on http://localhost:1337 and should look like the screen below. Try asking it a question!

Deploy your ChatBot

The quickest and easiest way to deploy is to DigitalOcean’s App Platform which will cost $5/month for the single resource we need.

App Platform is a managed hosting environment, that you can deploy with a single click and will auto-scale your app when needed.

So let’s get deploying!

TL;DR

1. Grant access to your repo
2. Create a DigitalOcean App with the one-click button
3. Add custom domain (optional)

1. Grant access to your repo

First you need to give DigitalOcean access to your GitHub account using this link, this lets them know what repos you can access:

https://github.com/apps/digitalocean/installations/select_target

2. Create DigitalOcean App

Click this button to create a DigitalOcean App with our default options:

Growth plan

DigitalOcean deploy button for the StartKit.AI Growth plan:

Starter plan

DigitalOcean deploy button for the StartKit.AI Starter plan:

Tip

If you use our DigitalOcean link you’ll get $200 in free credits for your first 60 days 🚀

1. Resources

After clicking the button you’ll be greeted by this page:

This shows that DigitalOcean will create two resources for you:

• api: The StartKit.AI Node.js server
• memory: The embeddings server with vector db connection to form your AIs memory.

We don’t need the memory resource for this tutorial so make sure you delete it.

Change to the cheaper resources!

By default DigitalOcean sets these up on their Professional plan which is $12/mo for each resource, but you can change this to $5/mo.

Click Edit Plan, set the Plan to Basic, and select the instance size to $5.00/mo - Basic. They’ll still work fine with this resource size and you can always change this later if you need to!

2. Environment variables

The default environment variables will be prefilled for you on the next page, but the ones that you created during setup will need to be added.

Bulk edit the .env variables

Click the “Edit” button next to the Global section, click “Bulk Editor”, and you can paste in your entire .env file that we created during the setup process.

Don’t worry if some of the variables show localhost etc, they will be overwritten with the correct values later.

Now hit next.

3. Create the app

You don’t need to change any of the other settings, so click through to the end of the process and click “Create Resources”.

After a few minutes your app will go live.

4. Update the repo

What we’ve just deployed is a version of StartKit.AI from a template GitHub repo, we need to update this to your own repo.

Go to the App Settings page and click “Edit” on the App Spec setting:

Find the github section, and change startkit-ai/startkit.ai value to the name of your repo.

For example if your project on GitHub is https://github.com/Jivings/my-ai-project, then you’d change the value to Jivings/my-ai-project.

Hit save and your app will re-deploy with your code instead of ours!

Now your app should be running! 🚀

3. Add custom domain

On DigitalOcean Apps, click on your app, and click on the Settings tab. Then, click the Edit link to the right of Domains, and the Add Domain button.

You are given a choice to delegate your DNS management to DigitalOcean or to point to your app by adding a CNAME record to your domain configuration.

Click “Add Domain” and you’re done! 🥳

Note

It usually takes a few minutes to propagate, but it can take up to 48 hours.

Customise your app

Now your chatbot is up and running, we can customise it to make it even better!

Modify the prompt

You’ll find all the AI prompts in /config/prompts.

We’re going to give your chatbot a pirate personality and default to a cheaper GPT model.

Open the chat prompt in /config/prompts/chat.yml and paste the following into the system prompt:

/config/prompts/chat.yml

system: |
  You're a chatbot that can reply to messages about a variety of topics.
  This is how you should respond:
    - Talk like a pirate sailing the high seas

And set it to just use the cheaper gpt-3.5-turbo model:

/config/prompts/chat.yml

models:
  - gpt-3.5-turbo

Make sure you restart your server (or use nodemon to restart automatically with code changes) and start a new chat at http://localhost:1337.

Your chatbot should now respond with pirate-themed flair! 🏴‍☠️

Make it yours

Page title, description and other meta properties are defined in /src/index.html so you can go ahead and replace anything that references StartKit.AI with your new app name and details.

You want any images to be absolute URLs such as https://<your-custom-domain>/favicon.png and the rest is up to you!

Tip

If you push to main then the DigitalOcean App will automatically re-deploy your app!

If you don’t want the app to autodeploy wheny ou push you can disable this in the component settings. Click Settings -> Click the api component -> Edit Source settings (see below).

---

You now have a fully-functional ChatGPT clone (that replies like a cool pirate) deployed and ready to take to the next level! 😁