Create your own ChatGPT with Azure OpenAI using TypeScript

Azure had simply been a great cloud provider, in terms of, services, innovation, security and transparency. Azure had offered a great AI Suite, which is now offering Generative AI solutions. With that said, it had now become very easy to create and train your own customised GPT with your own custom hyper parameters tuned in your way.

Prerequisites

1. An Azure account with an active subscription. If not, opt-for Azure for Students, which provides you free azure credits.
2. Little knowledge and/or understanding of JavaScript.
3. NodeJS, NPM installed in your system.

Creating Azure AI service Resource

1. Log in to Azure portal, and navigate to Azure AI services

2. Create Azure AI services resource, and select free tier (f0), as this is for demo purposes, we will be good to go with GPT turbo 3, 3.5 variants.

3. Keep everything default, and once you complete with the creation, go to OpenAI dashboard, and you can see your AI resource listed.

4. Go to keys and endpoints from the left navigation bar, and you can see the keys and endpoints, just save this. We are going to use these key and endpoint later to call Azure OpenAI APIs.

5. Now, we need to open Open AI separate dashboard, which is out of Azure: https://oai.azure.com/portal

6. Here, go on deployments and click on Create New Deployment, select the model you want to work with. We will be using ChatGPT Turbo 3.5 as of now, with model versio 0301 as default:

7. After model training is completed, on Open AI Dashboard, you can see the deployment name, copy that deployment name, as we will be needing that in future.

Now, we are ready to write the code for our application, that will call for Azure AI APIs in backend and help us to create our own GPT.

Create TypeScript application structure:

1. Create package.json file:
   {
“name”: “openai-demo”,
“version”: “1.0.0”,
“description”: “Open AI Demo”,
“main”: “dist/index.js”,
“scripts”: {
“lint”: “eslint \”./src/**\””,
“build”: “tsc”,
“start”: “node .”,
“test”: “npx mocha -r ts-node/register src/test/infra-creation.ts”
},
“author”: “abhinav.sharma@example.com”,
“license”: “ISC”,
“dependencies”: {
“@azure/openai”: “¹.0.0-beta.10”,
“dotenv”: “¹⁶.3.1”,
“express”: “⁴.18.2”
},
“devDependencies”: {
“@types/express”: “⁴.17.21”
}
}
2. Use npm i command to install and initialize the directory.
3. Create tsconfig.json file as well (Necessary to define how TypeScipt is used throughout the application):
   {
“compilerOptions”: {
“module”: “commonjs”,
“esModuleInterop”: true,
“target”: “es6”,
“noImplicitAny”: true,
“moduleResolution”: “node”,
“sourceMap”: true,
“outDir”: “dist”,
// “rootDir”: “./src”,
“baseUrl”: “.”,
“paths”: {
“*”: [
“node_modules/*”
]
},
“skipLibCheck”: true
},
// “include”: [
// “src/**/*/*”
// ]
}

Let’s create your own GPT application:

As we are going to use express, so let’s create an index file, in which we are going to initialize our server on PORT. We will be using .env file in which will be saving PORT.

1. Creating .env file. Store secrets we saved above in following variables:
   AZURE_OPENAI_KEY=ca5cxxx01bf6d343xxxxxxx
   AZURE_OPENAI_ENDPOINT=https://openai-xxxx/
   PORT=3005
   DEPLOYMENT_NAME=openai-model-demo
2. Create index.ts file for application server:
   https://gist.github.com/abhi-bhatra/7c8f3c97fe88e8ed43a9426c6cf1a7cc
3. Here, I have created two routes, as one could be the welcome/landing page that you can customise to make it more beautiful and the other route will be the POST route on which request will be made.
4. Now, let’s write an application logic in other file called, openai.ts :
   https://gist.github.com/abhi-bhatra/2bf909f1df5e8667fd8b10053c845a38
5. Let us understand above code:
   a. Importing Azure SDK client
   b. Creating a function called completion, this function we will be exporting in index file.
   c. Initialise the API client using Azure OpenAI key and endpoint.
   d. Now, let’s use getChatCompletion method from Azure OpenAI sdk, this method is used to initialize how GPT model should behave on base of prompt.
   e. Learn more about how-to-write prompts at: https://github.com/abhi-bhatra/generative-ai-for-beginners/tree/main/04-prompt-engineering-fundamentals#complex-prompt
   f. Currently, the prompt is fixed, as for demo purpose: What is Kubernets ?
   g. But, one can create an HTML form and POST the customer’s response to this prompt by storing the value in a dynamic variable. (Todo)

Once, you have followed above steps, just hit npm start, and you are good to go with your application. All up and working !!!!

Support

1. You can see the application code at: https://github.com/abhi-bhatra/learn-gpt
2. Learn more about Azure Open AI and Generative AI at: https://github.com/abhi-bhatra/generative-ai-for-beginners/tree/main
3. Ping me on LinkedIn: https://www.linkedin.com/in/abhinavsharma0