TypeChat-StaticWebApp-UI

This is a simple experiment to add an UI for TypeChat
with Azure Static Web Apps for html and a managed Functions backend in typescript - Node.js

There is a textbox to enter your natural language prompt, a button to invoke the API (for know I took only the CoffeeShop example) and another box that shows the strongly typed json result.

History

The app also keeps track of the history of prompts with a simple Table Storage for persistence.
The UI to hover table cells with raw json to show a nice popup and double click to select for copy was all generated by ChatGpt, I'm a horrible frontender and would waste days what took me now few hours.

Configuration

To run the project locally or in GitHub Codespaces you need to add a local.settings.json file to the api folder. Please add your ChatGpt or Azure AI credentials.

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "UseDevelopmentStorage=true",
    "MyStorageConnectionAppSetting":"UseDevelopmentStorage=true",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureWebJobsFeatureFlags": "EnableWorkerIndexing",
    "OPENAI_MODEL":"gpt-4",
    "OPENAI_API_KEY":"sk-12345"
  }
}

When you run it in Azure use the configuration values accordingly

Run locally

Run the following commands from the root of this repository:

Build the API

npm run build ./api

Build the APP

npm run build ./app

And start the SWA emulator

swa start