Get started with Azure OpenAI with Assistants and function calling in JavaScript

This article shows you how to deploy and run the serverless Azure OpenAI Assistant Quick Start. This sample implements an assistants app using JavaScript, Azure OpenAI Service assistants with function calling, and Azure Functions.

Architectural overview

Azure OpenAI Assistants allows you to create AI assistants tailored to your needs through custom instructions and augmented by advanced tools like code interpreter, and custom functions. In this article, we provide an in-depth walkthrough of getting started with the Assistants API.

This application is built around two main components:

• A simple HTML page with a vanilla CSS and JavaScript files, and hosted on Azure Static Web Apps.

• A serverless API built with Azure Functions and using OpenAI JavaScript SDK. The serverless app sends the assistants definition including the function call to the OpenAI endpoint. The endpoint responds with the follow-up function call and the parameters needed to complete that call.

  • The sample's function call simulates an API call by generating a random stock ticker value based on the stock symbol sent into the Azure Function. This simulation can be replaced with a remote API in your solution.

  

Prerequisites

A development container environment is available with all dependencies required to complete this article. You can run the development container in GitHub Codespaces (in a browser) or locally using Visual Studio Code.

To use this article, you need the following prerequisites:

Codespaces (recommended)

1. An Azure subscription - Create one for free
2. Azure account permissions - Your Azure Account must have Microsoft.Authorization/roleAssignments/write permissions, such as User Access Administrator or Owner.
3. A GitHub account.

Visual Studio Code

1. An Azure subscription - Create one for free
2. Azure account permissions - Your Azure Account must have Microsoft.Authorization/roleAssignments/write permissions, such as User Access Administrator or Owner.
3. Azure Developer CLI
4. Docker Desktop - start Docker Desktop if it's not already running
5. Git
6. Visual Studio Code
7. Dev Container Extension

Open development environment

Use the following instructions to deploy a preconfigured development environment containing all required dependencies to complete this article.

GitHub Codespaces (recommended)

GitHub Codespaces runs a development container managed by GitHub with Visual Studio Code for the Web as the user interface. For the most straightforward development environment, use GitHub Codespaces so that you have the correct developer tools and dependencies preinstalled to complete this article.

Important

All GitHub accounts can use Codespaces for up to 60 hours free each month with 2 core instances. For more information, see GitHub Codespaces monthly included storage and core hours.

1. Start the process to create a new GitHub Codespace on the main branch of the Azure-Samples/azure-openai-assistant-javascript GitHub repository.

2. Right-click on the following button, and select Open link in new windows to have both the development environment and the documentation available at the same time.

   

3. On the Create codespace page, review the codespace configuration settings and then select Create new codespace

4. Wait for the codespace to start. This startup process can take a few minutes.

5. In the terminal at the bottom of the screen, sign in to Azure with the Azure Developer CLI.

   azd auth login
   

6. Copy the code from the terminal and then paste it into a browser. Follow the instructions to authenticate with your Azure account.

7. The remaining tasks in this article take place in the context of this development container.

Visual Studio Code

The Dev Containers extension for Visual Studio Code requires Docker to be installed on your local machine. The extension hosts the development container locally using the Docker host with the correct developer tools and dependencies preinstalled to complete this article.

1. Fork the sample repository by selecting this Azure-Samples/azure-openai-assistant-javascript link.

2. Clone your fork repository. Replace <YOUR-GITHUB-ACCOUNT> with your GitHub account name.

   git clone https://github.com/<YOUR-GITHUB-ACCOUNT>/azure-openai-assistant-javascript
   

3. Open Visual Studio Code in the new folder.

   cd azure-openai-assistant-javascript
   code .
   

4. Ensure that you have the Dev Containers extension installed in Visual Studio Code.

5. Open a new terminal in the editor.

   Tip

   You can use the main menu to navigate to the Terminal menu option and then select the New Terminal option.

   

6. Sign in to Azure with the Azure Developer CLI.

   azd auth login
   

   Copy the code from the terminal and then paste it into a browser. Follow the instructions to authenticate with your Azure account.

7. Open the Command Palette, search for the Dev Containers commands, and then select Dev Containers: Reopen in Container.

   Tip

   Visual Studio Code may automatically prompt you to reopen the existing folder within a development container. This is functionally equivalent to using the command palette to reopen the current workspace in a container.

8. Reopen the Terminal window again (Ctrl + `) and leave it open.

9. The remaining exercises in this project take place in the context of this development container.

Deploy and run

The sample repository contains all the code and configuration files you need to deploy a function app to Azure. The following steps walk you through the process of deploying the sample to Azure.

Deploy assistants app to Azure

Important

Azure resources created in this section incur immediate costs, primarily from the Azure AI Search resource. These resources may accrue costs even if you interrupt the command before it is fully executed.

1. Run the following Azure Developer CLI command to provision the Azure resources and deploy the source code:

   azd up
   

2. When you're prompted to enter an environment name, keep it short and lowercase. For example, myenv. It's used as part of the resource group name.

3. When prompted, select a subscription to create the resources in.

4. When you're prompted to select a location the first time, select a location near you. This location is used for most the resources including hosting.

5. If you're prompted for a location for the OpenAI model, select a location that is near you. If the same location is available as your first location, select that.

6. Wait until app is deployed. It might take 5-10 minutes for the deployment to complete.

7. After deploying the application successfully, you see a URL displayed in the terminal.

8. Select that URL labeled Deploying service web to open the assistant application in a browser.

Use the assistant app

You can use the assistant app to get the stock market price of MSFT. The following steps walk you through the process of using the assistant app. The assistant can send you the answers in email. Since the email sending feature isn't configured, modify the prompt to not use that instruction.

1. In the browser, copy and paste in the following prompt:

   Based on the latest financial data and current stock market trends, can you provide a detailed analysis of Microsoft's current state? Please include insights into their recent performance, market position, and future outlook. Additionally, retrieve and include the latest closing price of Microsoft's stock using its ticker symbol (MSFT). 
   

2. Select the Run button. Your results should look similar to the following response.

   

Clean up resources

Clean up Azure resources

The Azure resources created in this article are billed to your Azure subscription. If you don't expect to need these resources in the future, delete them to avoid incurring more charges.

Run the following Azure Developer CLI command to delete the Azure resources and remove the source code:

azd down --purge

Clean up GitHub Codespaces

GitHub Codespaces

Deleting the GitHub Codespaces environment ensures that you can maximize the amount of free per-core hours entitlement you get for your account.

Important

For more information about your GitHub account's entitlements, see GitHub Codespaces monthly included storage and core hours.

1. Sign into the GitHub Codespaces dashboard (https://github.com/codespaces).

2. Locate your currently running Codespaces sourced from the Azure-Samples/azure-openai-assistant-javascript GitHub repository.

   

3. Open the context menu, ..., for the codespace and then select Delete.

Visual Studio Code

You aren't necessarily required to clean up your local environment, but you can stop the running development container and return to running Visual Studio Code in the context of a local workspace.

1. Open the Command Palette, search for the Dev Containers commands, and then select Dev Containers: Reopen Folder Locally.

   

Tip

Visual Studio Code will stop the running development container, but the container still exists in Docker in a stopped state. You always have the option to deleting the container instance, container image, and volumes from Docker to free up more space on your local machine.

Get help

This sample repository offers troubleshooting information.

If your issued isn't addressed, log your issue to the repository's Issues.

Related content

• What is the Azure OpenAI Assistants API?
• Get started with evaluating answers in a chat app in JavaScript