A Practical Guide for Beginners: Azure OpenAI with JavaScript and TypeScript (Part 01)
Tags: javascript, azureopenai, webdev, beginners
Published: 2023-10-27 23:52:25

---
title: A Practical Guide for Beginners: Azure OpenAI with JavaScript and TypeScript (Part 01)
published: true
description: In this series of three articles, you will learn how to take the first steps in using Azure OpenAI Service with JavaScript and TypeScript!
tags: #javascript #azureopenai #webdev #beginners
series: A Practical Guide for Beginners - Azure OpenAI with JavaScript and TypeScript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rir2q7qvxijv5hri4p9.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-10-27 23:20 +0000
---

## Introduction

A _Practical Guide for Beginners: Azure OpenAI with JavaScript and TypeScript_ is an essential starting point for exploring Artificial Intelligence in the Azure cloud. This guide will be divided into 3 parts, covering: 'How to create the Azure OpenAI Service resource,' How to implement the model created in Azure OpenAI Studio, and finally, how to consume this resource in a Node.js/TypeScript application. This series will help you learn the fundamentals so that you can start developing your applications with Azure OpenAI Service. Whether you are a beginner or an experienced developer, discover how to create intelligent applications and unlock the potential of AI with ease.

## Topics covered in this series:

- **[Part 01 - Introduction to Azure OpenAI Service](https://dev.to/azure/a-practical-guide-for-beginners-azure-openai-with-javascript-and-typescript-part-01-5ajh)**
- **[Part 02 - Deploying the Model in Azure OpenAI Studio](https://dev.to/azure/a-practical-guide-for-beginners-azure-openai-with-javascript-and-typescript-part-02-4ngm)**
- **[Part 03 - Creating the Node.js application to consume Azure OpenAI Service](https://dev.to/azure/a-practical-guide-for-beginners-azure-openai-with-javascript-and-typescript-part-03-2n68)**

## Responsible AI

Before we start discussing Azure OpenAI Service, it's crucial to talk about Microsoft's strong commitment to the entire field of Artificial Intelligence. Microsoft is deeply dedicated to this topic. Therefore, Microsoft is committed to ensuring that AI is used in a responsible and ethical manner. Furthermore, Microsoft is working with the AI community to develop and share best practices and tools to help ensure that AI is used in a responsible and ethical way, thereby incorporating the six core principles, which are:

- **Fairness**
- **Inclusivity**
- **Reliability and Safety**
- **Transparency**
- **Security and Privacy**
- **Accountability**

If you want to learn more about Microsoft's commitment to Responsible AI, you can access the link **[Microsoft AI Principles](https://www.microsoft.com/pt-br/ai/responsible-ai?rtc=1&activetab=pivot1:primaryr6)**.

Now, we can proceed with the article!

## Understanding Azure OpenAI Service

Azure OpenAI Service provides access to advanced OpenAI language models such as **[GPT-4](https://learn.microsoft.com/azure/ai-services/openai/concepts/models?WT.mc_id=javascript-110690-gllemos#gpt-4)**, **[GPT-3.5-Turbo](https://learn.microsoft.com/azure/ai-services/openai/concepts/models?WT.mc_id=javascript-110690-gllemos#gpt-35)**, and **[Embeddings](https://learn.microsoft.com/azure/ai-services/openai/concepts/understand-embeddings?WT.mc_id=javascript-110690-gllemos)** via a REST API. The GPT-4 and GPT-3.5-Turbo models are now available for general use, allowing adaptation for tasks such as content generation, summarization, semantic search, and natural language translation to code. Users can access the service through REST APIs, Python SDK, or Azure OpenAI Studio.

To learn more about the models available in Azure OpenAI Service, you can access them through the link **[Azure OpenAI Service models](https://learn.microsoft.com/azure/ai-services/openai/concepts/models?WT.mc_id=javascript-110690-gllemos)**.

## Creating the Azure OpenAI Service Resource

> The use of Azure OpenAI Service is limited. Therefore, it is necessary to request access to the service at **[Azure OpenAI Service](https://aka.ms/oai/access)**. Once you have approval, you can start using and testing the service!

Once your access is approved, go to the **[Azure Portal](https://azure.microsoft.com/?WT.mc_id=javascript-110690-gllemos)** and let's create the Azure OpenAI resource. To do this, follow the steps below:

- ✅ **Step 01:** Click on the **Create a resource** button.

[![azure-openai-01.png](https://i.postimg.cc/L6k0TcgP/azure-openai-01.png)](https://postimg.cc/fJLKWgKW)

- ✅ **Step 02:** In the search box, type **Azure OpenAI** and then click **Create**.

[![azure-openai-02.png](https://i.postimg.cc/X7N9RmDd/azure-openai-02.png)](https://postimg.cc/xq7kHxQ1)

[![azure-openai-03.png](https://i.postimg.cc/fWqbbPRx/azure-openai-03.png)](https://postimg.cc/RqfmsXfF)

- ✅ **Step 03:** On the resource creation screen, fill in the fields as follows:

[![azure-openai-04.png](https://i.postimg.cc/QdhNYZ4Z/azure-openai-04.png)](https://postimg.cc/gntPrQbg)

Note that in the `Pricing tier` field, you can test Azure OpenAI Service for free but with some limitations. To access all features, you should choose a paid plan. For more pricing information, access the link **[Azure OpenAI Service pricing](https://azure.microsoft.com/pricing/details/cognitive-services/openai-service/?WT.mc_id=javascript-110690-gllemos)**.

- ✅ **Step 04:** Under the **Network** tab, choose the option: `All networks, including the internet, can access this resource.` and then click **Next**.

- ✅ **Step 05:** After completing all the steps, click the **Create** button to create the resource.

[![azure-openai-05.png](https://i.postimg.cc/hPwbVMpm/azure-openai-05.png)](https://postimg.cc/QHQT3gLN)

- ✅ **Step 06:** Wait a few minutes for the resource to be created.

[![azure-openai-06.png](https://i.postimg.cc/KY45Twyt/azure-openai-06.png)](https://postimg.cc/1gh6hWXz)

## Next steps

In the next article, we will learn how to deploy a model on the Azure OpenAI Service. This model will allow us to consume the Azure OpenAI Service directly in our code.

Oh, I almost forgot to mention! Don't forget to subscribe to my **[YouTube Channel](https://www.youtube.com/@GlauciaLemos)**! In 2023, there will be many exciting new things on the channel!

Some of the upcoming content includes:

* 😃 **Microsoft Learn Live Sessions**
* 😃 **Weekly Tutorials on Node.js, TypeScript, & JavaScript**
* 😃 **And much more!**

If you enjoy this kind of content, be sure to subscribe and hit the notification bell to be notified when new videos are released. We already have an amazing new series coming up on the YouTube channel this week.

[![Screen-Shot-12-31-20-at-01-06-AM.png](https://i.postimg.cc/pr3TL4Pd/Screen-Shot-12-31-20-at-01-06-AM.png)](https://bit.ly/youtube-canal-glaucialemos)

To stay updated on other exciting news, be sure to follow me on Twitter!

[![Screen-Shot-12-31-20-at-01-06-AM.png](https://i.postimg.cc/sXPk87Td/Screen-Shot-05-24-23-at-08-32-PM.png)](https://twitter.com/glaucia_lemos86)

See you in the next article! ❤️❤️