OpenAI Chat App Frontend (Vanilla JS)

This repository includes a simple webpage that streams responses from a Chat App backend using JSON lines over a ReadableStream using the Microsoft AI Chat Protocol SDK.

Opening the project
Deployment
CI/CD pipeline
Costs
Local development

Opening the project

This project has Dev Container support, so it will be be setup automatically if you open it in Github Codespaces or in local VS Code with the Dev Containers extension.

If you're not using one of those options for opening the project, then you'll need to:

Install Node
Install the Azure Developer CLI.

Deployment

This repo is set up for deployment on Azure Static Web Apps using the configuration files in the infra folder.

Set the endpoint variable in chat.js to the URI of your deployed backend. The backend must conform to the Chat App Protocol. One option is openai-chat-app-quickstart.
Sign up for a free Azure account and create an Azure Subscription.
Login to Azure:
```
azd auth login
```
Provision and deploy all the resources:
```
azd up
```
It will prompt you to provide an azd environment name (like "chat-app") and select a subscription from your Azure account. Then it will provision the resources in your account and deploy the latest code. If you get an error or timeout with deployment, changing the location can help, as there may be availability constraints for the OpenAI resource.
When azd has finished deploying, you'll see an endpoint URI in the command output. Visit that URI, and you should see the chat app! 🎉
When you've made any changes to the app code, you can just run:
```
azd deploy
```

CI/CD pipeline

This project includes a Github workflow for deploying the resources to Azure on every push to main. That workflow requires several Azure-related authentication secrets to be stored as Github action secrets. To set that up, run:

azd pipeline config

Costs

This app uses Azure Static Web Apps free tier, so it should not cost anything.

Local development