Guia Prático para Iniciantes: Azure OpenAI com JavaScript e TypeScript (Parte 3)
Tags: javascript, azureopenai, webdev, beginners
Published: 2023-10-27 22:47:51

---
title: Guia Prático para Iniciantes: Azure OpenAI com JavaScript e TypeScript (Parte 3)
published: true
description: Nessa série de três artigos vocês aprenderão a dar os primeiros passos a como usar o Azure OpenAI Service com JavaScript e TypeScript!
tags: #javascript #azureopenai #webdev #beginners
series: Guia Prático para Iniciantes - Azure OpenAI com JavaScript e TypeScript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hl7qvzt6cgfaj5yviot8.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-10-23 18:15 +0000
---

## Introdução

Na terceira parte deste guia prático, _Guia Prático para Iniciantes: Azure OpenAI com JavaScript e TypeScript_, você aprenderá a criar uma aplicação Node.js que consumirá o Azure OpenAI Service. Começaremos do zero, desde a configuração do ambiente de desenvolvimento no Visual Studio Code até a criação e execução de uma aplicação pronta para interagir com o serviço de IA. Você descobrirá como configurar variáveis de ambiente, definir parâmetros para controlar a geração de conclusões e obter resultados impressionantes. Além disso, forneceremos recursos adicionais para você aprofundar seu conhecimento sobre Azure OpenAI. Prepare-se para dar vida às suas ideias com o Azure OpenAI e JavaScript e TypeScript.

### Criando a aplicação Node.js para consumir o Azure OpenAI Service

Para criar a aplicação Node.js, vamos utilizar o **[Visual Studio Code](https://code.visualstudio.com/)**. Caso você não tenha instalado, basta acessar o link e fazer o download.

Após instalar o Visual Studio Code, vamos criar a aplicação Node.js. Para isso, basta seguir os passos abaixo:

> o exemplo abaixo é relacionado ao **[Completion Code Sample](https://github.com/glaucia86/azureopenai-js-samples/tree/main/01-azure-openai-samples/javascript/01-completion-code-sample)**. Se desejarem testar a aplicação, poderão fazer uso do **[Codespaces](https://github.com/features/codespaces)** desde o projeto forkado em seu repositório.

- ✅ **Passo 01:** Crie uma pasta para o projeto e dentro da pasta, digite o comando:

```bash
npm init -y
```

O arquivo `package.json` será criado.

> observação: defini para usar `esm` (ECMAScript Modules) no projeto. Para isso, basta adicionar o campo `type` com o valor `module` no arquivo `package.json`.

```json
{
  "name": "javascript",
  "version": "1.0.0",
  "description": "a simple code sample how to use Azure OpenAI Service with JavaScript",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "start": "nodemon src/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "nodejs",
    "javascript",
    "ai",
    "artificial intelligence",
    "azure-openai"
  ],
  "author": "Glaucia Lemos <Twitter: @glaucia_lemos86>",
  "license": "MIT",
  "dependencies": {
    "@azure/openai": "^1.0.0-beta.6",
    "dotenv": "^16.3.1"
  },
  "devDependencies": {
    "nodemon": "^3.0.1"
  }
}
```

- ✅ **Passo 02:** Instale o pacote do Azure OpenAI Service:

```bash
npm install @azure/openai
```

- ✅ **Passo 03:** Vamos instalar também os pacotes: `dotenv` e `nodemon`:

```bash
npm install dotenv --save
```

```bash
npm install nodemon --save-dev
```

- ✅ **Passo 04:** Vá até o arquivo `package.json` e adicione o script abaixo:

```json
"scripts": {
    "start": "nodemon src/index.js"
  },
```

- ✅ **Passo 05:** Crie um arquivo chamado `.env` e dentro do arquivo, digite o código abaixo:

```bash
AZURE_OPENAI_ENDPOINT="https://<resource name>.openai.azure.com"
AZURE_OPENAI_KEY="<azure api key>"
```

Para obter o `endpoint` e a `key`, basta acessar o recurso do Azure OpenAI Service criado no Portal Azure e depois clicar em **Keys and Endpoint**.

[![azure-openai-11.png](https://i.postimg.cc/ZKMSdf0p/azure-openai-11.png)](https://postimg.cc/nCBg8G4h)

- ✅ **Passo 06:** Crie uma pasta chamada `src` e dentro da pasta, crie um arquivo chamado `index.js`. Dentro do arquivo `index.js`, digite o código abaixo:

```javascript
/**
 * file: src/index.js
 * description: file responsible for run the code sample completion
 * data: 10/20/2023
 * author: Glaucia Lemos <Twitter: @glaucia_lemos86>
 */

import { OpenAIClient, AzureKeyCredential } from '@azure/openai';
import dotenv from 'dotenv';

dotenv.config();

const endpoint = process.env.AZURE_OPENAI_ENDPOINT || '';
const azureApiKey = process.env.AZURE_OPENAI_KEY || '';

const prompt = ['What is Azure OpenAI?'];

async function main() {
  console.log('=== Get completions Sample ===');

  const client = new OpenAIClient(
    endpoint,
    new AzureKeyCredential(azureApiKey)
  );
  const deploymentName = 'deployment-name-completion';
  const result = await client.getCompletions(deploymentName, prompt, {
    maxTokens: 200,
    temperature: 0.25
  });

  for (const choice of result.choices) {
    console.log(choice.text);
  }
}

main().catch((err) => {
  console.error('The sample encountered an error:', err);
});
```

Observe que no código, colocamos o `deploymentName` que criamos no Azure AI Studio!

Outro ponto a ser mencionado é que no `result` definimos a quantidade de tokens que queremos que o modelo retorne. No caso, definimos para retornar `200` tokens. Mas, você pode definir a quantidade que desejar.

E, o `temperature` é o que contralará as conclusões geradas. Quanto maior for esse valor, mais criativas serão as conclusões geradas. Enquanto que valores mais baixos retornará conclusões mais focados e determinísticos.

Se vocês desejarem entender o que as classes como: `OpenAIClient` e `AzureKeyCredential` fazem, basta acessar o link **[Azure OpenAI Service Node.js API Reference](https://learn.microsoft.com/en-us/javascript/api/%40azure/openai/?view=azure-node-preview)**.

- ✅ Passo 07:** Agora, basta executar o comando abaixo para executar a aplicação:

```bash
npm start
```

E, vejam o resultado:

[![gif-azureopenai-js.gif](https://i.postimg.cc/XvJ8R8nN/gif-azureopenai-js.gif)](https://postimg.cc/TKzgmnyB)

## 📚 Recursos Adicionais

Abaixo segue alguns recursos adicionais sobre o Azure OpenAI Service:

- ✅ **[Curso Grátis - Introdução à IA generativa](https://learn.microsoft.com/training/paths/introduction-generative-ai/?WT.mc_id=javascript-110690-gllemos)**

- ✅ **[Curso Grátis - Conceitos básicos de IA do Microsoft Azure: Introdução à inteligência artificial](hhttps://learn.microsoft.com/training/paths/get-started-with-artificial-intelligence-on-azure/?WT.mc_id=javascript-110690-gllemos)**

- ✅ **[Azure OpenAI Service Documentation](https://learn.microsoft.com/en-us/azure/ai-services/openai/)**

- ✅ **[Azure OpenAI Service Node.js API Reference](https://learn.microsoft.com/en-us/javascript/api/%40azure/openai/?view=azure-node-preview)**

- ✅ **[Azure OpenAI Service pricing](https://azure.microsoft.com/pricing/details/cognitive-services/openai-service/?WT.mc_id=javascript-110690-gllemos)**

- ✅ **[QuickStarts for JavaScript](https://learn.microsoft.com/azure/ai-services/openai/chatgpt-quickstart?source=recommendations&tabs=command-line&pivots=programming-language-javascript&WT.mc_id=javascript-110690-gllemos)**

## Palavras Finais

Neste artigo, você aprendeu a criar uma aplicação Node.js que consome o Azure OpenAI Service. Começamos do zero, desde a configuração do ambiente de desenvolvimento no Visual Studio Code até a criação e execução de uma aplicação pronta para interagir com o serviço de IA. Você descobriu como configurar variáveis de ambiente, definir parâmetros para controlar a geração de conclusões e obter resultados impressionantes. Além disso, fornecemos recursos adicionais para você aprofundar seu conhecimento em inteligência artificial. Agora, você está pronto para dar vida às suas ideias com o Azure OpenAI e JavaScript e TypeScript. O repositório com o código fonte completo está disponível no **GitHub**:

{% github  glaucia86/azureopenai-js-samples %} 

Há também um repositório incrível onde você poderá aprender mais sobre Generative AI com muitos outros exemplos em Python para você poder explorar cada vez mais o mundo de A.I com Azure!

{% github  microsoft/generative-ai-for-beginners %} 

Ah! Já ia esquecer de falar aqui! Não deixem de se inscrever no meu **[Canal do Youtube](https://www.youtube.com/@GlauciaLemos)**! E, ainda durante o ano de 2023 virão muitas outras coisas bem legais no canal!

Algumas das novidades:

* 😃 **Microsoft Learn Live Sessions**
* 😃 **Tutoriais semanais de Node.js, TypeScript & JavaScript**
* 😃 **E, muito mais!**

Se são conteúdos que você curte, então não deixa de se inscreverem e ative o sininho para ficarem sabendo quando teremos vídeo novo! Essa semana já teremos uma série nova incrível lá no Canal do Youtube.

[![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)

E para ficarem por dentro de várias outras novidades, não deixem de me seguirem lá no 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)

E nos vemos! Até a próxima ❤️❤️