# Azure OpenAI with JavaScript

> Use JavaScript to integrate Azure OpenAI with Helicone to log your Azure OpenAI usage.

import IncludeApiVersion from "/snippets/include-api-version.mdx";
import ModelOverride from "/snippets/model-override.mdx";
import { strings } from "/snippets/strings.mdx";
import LegacyWarning from "/snippets/legacy-provider-warning.mdx";

<LegacyWarning />

## {strings.howToIntegrate}

<Steps>
  <Step title={strings.generateKey}>
    <div dangerouslySetInnerHTML={{ __html: strings.generateKeyInstructions }} />
  </Step>

  <Step title={strings.setApiKey}>
    ```javascript
    HELICONE_API_KEY=<YOUR_HELICONE_API_KEY>
    AZURE_OPENAI_API_KEY=<YOUR_AZURE_OPENAI_API_KEY>
    ```
  </Step>

  <Step title={strings.modifyBasePath}>
    <IncludeApiVersion />
    <CodeGroup>
    ```javascript
    const client = new OpenAI({
      baseURL: "https://oai.helicone.ai/openai/deployments/[DEPLOYMENT_NAME]",
      defaultHeaders: {
        "Helicone-Auth": `Bearer ${process.env.HELICONE_API_KEY}`,
        "Helicone-OpenAI-API-Base": "https://[DOMAIN_NAME].azure.com/",
        "api-key": process.env.AZURE_OPENAI_API_KEY
      },
      defaultQuery: {
        "api-version": "[API_VERSION]"
      },
    });
    ```
    </CodeGroup>
    <ModelOverride />
  </Step>

  <Step title={strings.startUsing("Azure OpenAI")}>
    ```javascript
    const response = await client.chat.completions.create({
      model: "[MODEL_NAME]",
      messages: [{ role: "user", content: "What is the meaning of life?" }]
    });

    console.log(response);
    ```
  </Step>

  <Step title={strings.verifyInHelicone}>
    <div dangerouslySetInnerHTML={{ __html: strings.verifyInHeliconeDesciption("Azure OpenAI") }} />
  </Step>
</Steps>

<div dangerouslySetInnerHTML={{ __html: strings.azureOpenAIDocs }} />

## {strings.relatedGuides}

<CardGroup cols={2}>
  <Card
    title="Environment Tracking"
    icon="viruses"
    href="/guides/cookbooks/environment-tracking"
    iconType="light"
    vertical
  >
    {strings.environmentTrackingCookbookDescription}
  </Card>
  <Card
    title="Integration with GitHub Actions"
    icon="github"
    href="/guides/cookbooks/github-actions"
    iconType="light"
    vertical
  >
    {strings.githubActionsCookbookDescription}
  </Card>
</CardGroup>