Skip to content

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

1. Clone the repo

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

git clone 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
# 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.

  1. Visit the Mongo Atlas website:
  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

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:
  3. Hit confirm!

Add IP Access List Entry

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:

We need the following values:


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

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:


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:
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: (
initialMessage={`Hi, I'm a friendly chatbot! Ask me a question...`}
<RouterProvider router={router} />
  1. Run your app with yarn dev (or npm run dev with npm)
  2. 🎉 Your ChatBot is running on http://localhost:1337 and should look like the screen below. Try asking it a question!

Chatbot first run

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!

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:

2. Create DigitalOcean App

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

DigitalOcean deploy button for the StartKit.AI Growth plan:

Deploy to DO

1. Resources

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

DO resources

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.

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.

DO edit the environment variables

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.

DO Create Resources

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:

Edit the App Spec

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

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

Change GitHub repo in App Spec

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.

DO add domain

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! 🥳

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:

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:

- 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! 🏴‍☠️

Chatbot pirate

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!

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).

DO turn off autodeploy

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