Merge pull request #275988 from mrbullwinkle/mrb_05_20_2024_js_update

[Azure OpenAI] Chat completions

Author: PMEds28

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

@@ -8,18 +8,21 @@ ms.service: azure-ai-openai
 ms.topic: include
 author: mrbullwinkle
 ms.author: mbullwin
-ms.date: 07/26/2023
+ms.date: 05/21/2024
 ---
 
-[Source code](https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/openai/openai) | [Package (npm)](https://www.npmjs.com/package/@azure/openai) | [Samples](https://github.com/Azure/azure-sdk-for-net/blob/main/sdk/openai/Azure.AI.OpenAI/tests/Samples) | [Retrieval Augmented Generation (RAG) enterprise chat template](/azure/developer/javascript/get-started-app-chat-template)|
+[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/openai-azure-samples/sdk/openai/openai/samples/v1-beta/javascript)
+
+> [!NOTE]
+> This article has been updated to use the [latest OpenAI npm package](https://www.npmjs.com/package/openai) which now fully supports Azure OpenAI. If you are looking for code examples for the legacy Azure OpenAI JavaScript SDK they are currently still [1available in this repo](https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/openai/openai/samples/v1-beta/javascript).
 
 ## Prerequisites
 
 - An Azure subscription - [Create one for free](https://azure.microsoft.com/free/cognitive-services?azure-portal=true)
 - Access granted to the Azure OpenAI service in the desired Azure subscription.
     Currently, access to this service is granted only by application. You can apply for access to Azure OpenAI Service by completing the form at [https://aka.ms/oai/access](https://aka.ms/oai/access?azure-portal=true).
 - [LTS versions of Node.js](https://github.com/nodejs/release#release-schedule)
-- An Azure OpenAI Service resource with either the `gpt-35-turbo` or the `gpt-4` models deployed. For more information about model deployment, see the [resource deployment guide](../how-to/create-resource.md).
+- 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"]
 > [I ran into an issue with the prerequisites.](https://microsoft.qualtrics.com/jfe/form/SV_0Cl5zkG3CnDjq6O?PLanguage=JAVASCRIPT&Pillar=AOAI&Product=Chatgpt&Page=quickstart&Section=Prerequisites)
@@ -32,18 +35,14 @@ ms.date: 07/26/2023
 
 ## Create a Node application
 
-In a console window (such as cmd, PowerShell, or Bash), create a new directory for your app, and navigate to it. Then run the `npm init` command to create a node application with a _package.json_ file.
-
-```console
-npm init
-```
+In a console window (such as cmd, PowerShell, or Bash), create a new directory for your app, and navigate to it. 
 
 ## Install the client library
 
-Install the Azure OpenAI client library for JavaScript with npm:
+Install the required packages for JavaScript with npm from within the context of your new directory:
 
 ```console
-npm install @azure/openai
+npm install openai dotenv @azure/identity
 ```
 
 Your app's _package.json_ file will be updated with the dependencies.
@@ -56,23 +55,31 @@ 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.
 
 ```javascript
-const { OpenAIClient, AzureKeyCredential } = require("@azure/openai");
-const endpoint = process.env["AZURE_OPENAI_ENDPOINT"] ;
-const azureApiKey = process.env["AZURE_OPENAI_API_KEY"] ;
+const { AzureOpenAI } = require("openai");
 
-const 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" },
-];
+// 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.
+require("dotenv/config");
 
 async function main() {
-  console.log("== Chat Completions Sample ==");
 
-  const client = new OpenAIClient(endpoint, new AzureKeyCredential(azureApiKey));
-  const deploymentId = "gpt-35-turbo";
-  const result = await client.getChatCompletions(deploymentId, messages);
+  const client = new AzureOpenAI({ endpoint, apiKey, apiVersion, 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);
@@ -86,9 +93,6 @@ main().catch((err) => {
 module.exports = { main };
 ```
 
-> [!IMPORTANT]
-> For production, use a secure way of storing and accessing your credentials like [Azure Key Vault](../../../key-vault/general/overview.md). For more information about credential security, see the Azure AI services [security](../../security-features.md) article.
-
 Run the script with the following command:
 
 ```cmd
@@ -100,10 +104,56 @@ node.exe ChatCompletion.js
 ```output
 == Chat Completions Sample ==
 {
-  role: 'assistant',
-  content: 'Yes, most Azure AI services support customer managed keys. It is always best to check the specific service documentation to confirm this.'
+  content: 'Yes, several other Azure AI services also support customer managed keys for enhanced security and control over encryption keys.',
+  role: 'assistant'
+}
+```
+
+## Microsoft Entra ID
+
+> [!IMPORTANT]
+> In the previous example we are demonstrating key-based authentication. Once you have tested with key-based authentication successfully, we recommend using the more secure [Microsoft Entra ID](/entra/fundamentals/whatis) for authentication which is demonstrated in the next code sample. Getting started with [Microsoft Entra ID] will require some additional [prerequisites](https://www.npmjs.com/package/@azure/identity).
+
+```javascript
+const { AzureOpenAI } = require("openai");
+const { DefaultAzureCredential, getBearerTokenProvider } = require("@azure/identity");
+
+// Set AZURE_OPENAI_ENDPOINT to the endpoint of your
+// OpenAI resource. You can find this in the Azure portal.
+// Load the .env file if it exists
+require("dotenv/config");
+
+async function main() {
+  console.log("== Chat Completions Sample ==");
+
+  const scope = "https://cognitiveservices.azure.com/.default";
+  const azureADTokenProvider = getBearerTokenProvider(new DefaultAzureCredential(), scope);
+  const deployment = "gpt-35-turbo";
+  const apiVersion = "2024-04-01-preview";
+  const client = new AzureOpenAI({ azureADTokenProvider, deployment, apiVersion });
+  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 };
 ```
+> [!NOTE]
+> If your receive the error: *Error occurred: OpenAIError: The `apiKey` and `azureADTokenProvider` arguments are mutually exclusive; only one can be passed at a time.* You may need to remove a pre-existing environment variable for the API key from your system. Even though the Microsoft Entra ID code sample is not explicitly referencing the API key environment variable, if one is present on the system executing this sample, this error will still be generated.
 
 > [!div class="nextstepaction"]
 > [I ran into an issue when running the code sample.](https://microsoft.qualtrics.com/jfe/form/SV_0Cl5zkG3CnDjq6O?PLanguage=JAVASCRIPT&Pillar=AOAI&Product=Chatgpt&Page=quickstart&Section=Create-application)

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

@@ -14,7 +14,7 @@ ms.date: 05/20/2024
 [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/openai-azure-samples/sdk/openai/openai/samples/v1-beta/javascript)
 
 > [!NOTE]
-> This article has been updated to use the [latest OpenAI npm package](https://www.npmjs.com/package/openai) which now fully supports Azure OpenAI.If you are looking for code examples for the legacy Azure OpenAI JavaScript SDK they are currently still [1available in this repo](https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/openai/openai/samples/v1-beta/javascript).
+> This article has been updated to use the [latest OpenAI npm package](https://www.npmjs.com/package/openai) which now fully supports Azure OpenAI. If you are looking for code examples for the legacy Azure OpenAI JavaScript SDK they are currently still [1available in this repo](https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/openai/openai/samples/v1-beta/javascript).
 
 ## Prerequisites
 
@@ -60,8 +60,8 @@ const dotenv = require("dotenv");
 dotenv.config();
 
 // You will need to set these environment variables or edit the following values
-const endpoint = process.env["ENDPOINT"] || "<endpoint>";
-const apiKey = process.env["AZURE_API_KEY"] || "<api key>";
+const endpoint = process.env["AZURE_OPENAI_ENDPOINT"] || "<endpoint>";
+const apiKey = process.env["AZURE_OPENAI_API_KEY"] || "<api key>";
 const apiVersion = "2024-04-01-preview";
 const deployment = "gpt-35-turbo-instruct"; //The deployment name for your completions API model. The instruct model is the only new model that supports the legacy API.