Quickstart - JS Chat & Completions - add entra for JS & TS

Author: diberry

articles/ai-services/openai/includes/chatgpt-javascript.md

@@ -8,7 +8,7 @@ ms.service: azure-ai-openai
 ms.topic: include
 author: mrbullwinkle
 ms.author: mbullwin
-ms.date: 05/21/2024
+ms.date: 10/22
 ---
 
 [Source code](https://github.com/openai/openai-node) | [Package (npm)](https://www.npmjs.com/package/openai) | [Samples](https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/openai/openai/samples)
@@ -23,6 +23,7 @@ ms.date: 05/21/2024
 - An Azure subscription - [Create one for free](https://azure.microsoft.com/free/cognitive-services?azure-portal=true)
 - [LTS versions of Node.js](https://github.com/nodejs/release#release-schedule)
 - [TypeScript](https://www.typescriptlang.org/download/)
+- [Azure CLI](/cli/azure/install-azure-cli) used for passwordless authentication in a local development environment, create the necessary context by signing in with the Azure CLI.
 - An Azure OpenAI Service resource with a `gpt-35-turbo` or `gpt-4` series models deployed. For more information about model deployment, see the [resource deployment guide](../how-to/create-resource.md).
 
 > [!div class="nextstepaction"]
@@ -32,6 +33,7 @@ ms.date: 05/21/2024
 
 - An Azure subscription - [Create one for free](https://azure.microsoft.com/free/cognitive-services?azure-portal=true)
 - [LTS versions of Node.js](https://github.com/nodejs/release#release-schedule)
+- [Azure CLI](/cli/azure/install-azure-cli) used for passwordless authentication in a local development environment, create the necessary context by signing in with the Azure CLI.
 - An Azure OpenAI Service resource with either a `gpt-35-turbo` or `gpt-4` series models deployed. For more information about model deployment, see the [resource deployment guide](../how-to/create-resource.md).
 
 > [!div class="nextstepaction"]
@@ -66,16 +68,160 @@ Your app's _package.json_ file will be updated with the dependencies.
 
 Open a command prompt where you want the new project, and create a new file named ChatCompletion.js. Copy the following code into the ChatCompletion.js file.
 
-## [**TypeScript**](#tab/typescript)
+## [**TypeScript (Entra ID)**](#tab/typescript-keyless)
+
+```typescript
+import { AzureOpenAI } from "openai";
+import { 
+  DefaultAzureCredential, 
+  getBearerTokenProvider 
+} from "@azure/identity";
+import type {
+  ChatCompletion,
+  ChatCompletionCreateParamsNonStreaming,
+} from "openai/resources/index";
+
+// Load the .env file if it exists
+const dotenv = require("dotenv");
+dotenv.config();
+
+// You will need to set these environment variables or edit the following values
+const endpoint = process.env["AZURE_OPENAI_ENDPOINT"] || "<endpoint>";
+const apiKey = process.env["AZURE_OPENAI_API_KEY"] || "<api key>";
+
+// Required Azure OpenAI deployment name and API version
+const apiVersion = "2024-08-01-preview";
+const deploymentName = "gpt-4o-mini"; //This must match your deployment name.
+
+// keyless authentication    
+const credential = new DefaultAzureCredential();
+const scope = "https://cognitiveservices.azure.com/.default";
+const azureADTokenProvider = getBearerTokenProvider(credential, scope);
+
+function getClient(): AzureOpenAI {
+  return new AzureOpenAI({
+    endpoint,
+    azureADTokenProvider,
+    apiVersion,
+    deployment: deploymentName,
+  });
+}
+
+function createMessages(): ChatCompletionCreateParamsNonStreaming {
+  return {
+    messages: [
+      { role: "system", content: "You are a helpful assistant." },
+      {
+        role: "user",
+        content: "Does Azure OpenAI support customer managed keys?",
+      },
+      {
+        role: "assistant",
+        content: "Yes, customer managed keys are supported by Azure OpenAI?",
+      },
+      { role: "user", content: "Do other Azure AI services support this too?" },
+    ],
+    model: "",
+  };
+}
+async function printChoices(completion: ChatCompletion): Promise<void> {
+  for (const choice of completion.choices) {
+    console.log(choice.message);
+  }
+}
+export async function main() {
+  const client = getClient();
+  const messages = createMessages();
+  const result = await client.chat.completions.create(messages);
+  await printChoices(result);
+}
+
+main().catch((err) => {
+  console.error("The sample encountered an error:", err);
+});
+```
+
+Build the script with the following command:
+
+```cmd
+tsc
+```
+
+Run the script with the following command:
+
+```cmd
+node.exe Completion.js
+```
+
+## [**JavaScript (Entra id)**](#tab/javascript-keyless)
+
+```javascript
+const { AzureOpenAI } = require("openai");
+import { 
+  DefaultAzureCredential, 
+  getBearerTokenProvider 
+} from "@azure/identity";
+
+// Load the .env file if it exists
+const dotenv = require("dotenv");
+dotenv.config();
+
+// You will need to set these environment variables or edit the following values
+const endpoint = process.env["AZURE_OPENAI_ENDPOINT"] || "<endpoint>";
+const apiKey = process.env["AZURE_OPENAI_API_KEY"] || "<api key>";
+const apiVersion = "2024-05-01-preview";
+const deployment = "gpt-4o"; //This must match your deployment name.
+
+
+// keyless authentication    
+const credential = new DefaultAzureCredential();
+const scope = "https://cognitiveservices.azure.com/.default";
+const azureADTokenProvider = getBearerTokenProvider(credential, scope);
+
+async function main() {
+
+  const client = new AzureOpenAI({ endpoint, apiKey, azureADTokenProvider, deployment });
+  const result = await client.chat.completions.create({
+    messages: [
+    { role: "system", content: "You are a helpful assistant." },
+    { role: "user", content: "Does Azure OpenAI support customer managed keys?" },
+    { role: "assistant", content: "Yes, customer managed keys are supported by Azure OpenAI?" },
+    { role: "user", content: "Do other Azure AI services support this too?" },
+    ],
+    model: "",
+  });
+
+  for (const choice of result.choices) {
+    console.log(choice.message);
+  }
+}
+
+main().catch((err) => {
+  console.error("The sample encountered an error:", err);
+});
+
+module.exports = { main };
+```
+
+Run the script with the following command:
+
+```cmd
+node.exe ChatCompletion.js
+```
+
+## [**TypeScript (API Key)**](#tab/typescript-key)
 
 ```typescript
-import "dotenv/config";
 import { AzureOpenAI } from "openai";
 import type {
   ChatCompletion,
   ChatCompletionCreateParamsNonStreaming,
 } from "openai/resources/index";
 
+// Load the .env file if it exists
+const dotenv = require("dotenv");
+dotenv.config();
+
 // You will need to set these environment variables or edit the following values
 const endpoint = process.env["AZURE_OPENAI_ENDPOINT"] || "<endpoint>";
 const apiKey = process.env["AZURE_OPENAI_API_KEY"] || "<api key>";
@@ -139,7 +285,7 @@ Run the script with the following command:
 node.exe Completion.js
 ```
 
-## [**JavaScript**](#tab/javascript)
+## [**JavaScript (API key)**](#tab/javascript-key)
 
 ```javascript
 const { AzureOpenAI } = require("openai");
@@ -153,7 +299,6 @@ const endpoint = process.env["AZURE_OPENAI_ENDPOINT"] || "<endpoint>";
 const apiKey = process.env["AZURE_OPENAI_API_KEY"] || "<api key>";
 const apiVersion = "2024-05-01-preview";
 const deployment = "gpt-4o"; //This must match your deployment name.
-require("dotenv/config");
 
 async function main() {