OpenAI Chat quickstart - TypeScript

Author: diberry

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

@@ -18,13 +18,27 @@ ms.date: 05/21/2024
 
 ## Prerequisites
 
+## [**TypeScript**](#tab/typescript)
+
+- 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/)
+- 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)
+
+## [**JavaScript**](#tab/javascript)
+
 - 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)
 - 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)
 
+---
+
 ## Set up
 
 [!INCLUDE [get-key-endpoint](get-key-endpoint.md)]
@@ -52,6 +66,67 @@ 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
+import { AzureOpenAI } from "openai";
+import { type ChatCompletion, type ChatCompletionCreateParamsNonStreaming } from "openai/resources/index";
+import "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.
+
+function getClient(): AzureOpenAI {
+    return new AzureOpenAI({ endpoint, apiKey, apiVersion, deployment });
+}
+
+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 getChoices(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 getChoices(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**](#tab/javascript)
+
 ```javascript
 const { AzureOpenAI } = require("openai");
 
@@ -97,6 +172,8 @@ Run the script with the following command:
 node.exe ChatCompletion.js
 ```
 
+---
+
 ## Output
 
 ```output
@@ -112,6 +189,56 @@ node.exe ChatCompletion.js
 > [!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).
 
+## [**TypeScript**](#tab/typescript)
+
+```typescript
+import { AzureOpenAI } from "openai";
+import { type ChatCompletionCreateParamsNonStreaming, type ChatCompletion } from "openai/resources/index";
+import { DefaultAzureCredential, getBearerTokenProvider } from "@azure/identity";
+import "dotenv/config";
+
+const apiVersion = "2024-05-01-preview";
+const deployment = "gpt-4o"; //This must match your deployment name.
+
+function getClient(): AzureOpenAI {
+    const scope = "https://cognitiveservices.azure.com/.default";
+    const azureADTokenProvider = getBearerTokenProvider(new DefaultAzureCredential(), scope);
+    return new AzureOpenAI({ azureADTokenProvider, deployment, apiVersion });
+  
+  }
+
+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 getChoices(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 getChoices(result);
+}
+
+main().catch((err) => {
+    console.error("The sample encountered an error:", err);
+});
+```
+
+
+## [**JavaScript**](#tab/javascript)
+
 ```javascript
 const { AzureOpenAI } = require("openai");
 const { DefaultAzureCredential, getBearerTokenProvider } = require("@azure/identity");
@@ -150,6 +277,9 @@ main().catch((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.