HOWTO – Building HTML web apps with MATLAB Production Server

Overview

This guide walks you through turning MATLAB code into a minimal web app that runs on a MATLAB Production Server instance. The process is mostly done within MATLAB, except for the small HTML/JavaScript front‑end, which you can generate with an LLM and then wire up to the server’s RESTful API.

Prerequisites

MATLAB R2016a or newer with MATLAB Compiler SDK (and any required toolboxes)
Access to a working MATLAB Production Server instance (local or remote) with static file serving enabled by setting `--files-root` in the `main_config`
An LLM (e.g., MATLAB Copilot, ChatGPT, Claude) for generating the front‑end skeleton
Basic knowledge of HTML, JavaScript, and JSON

Step‑by‑Step Workflow

We will use the Patient Health Classification demo for this tutorial.

Start by following the documentation example for Deploy a Model Trained in Classification Learner to MATLAB Production Server . This walks through data preparation, classifier development, and packaging the model for deployment. You should end up with a DeployedClassificationModel.ctf archive placed in the Production Server auto_deploy folder.
Next, ask an LLM to generate a simple HTML/JS front‑end. Below is an example prompt; for best results, you may want to iterate with an agentic LLM and start with a software plan or requirements document:

Create and save to disk an html/css/js frontend for a patient health classifier web service.
I need a form that takes patient data input:
- age
- sex (Male, Female, or Intersex)
- height (inches)
- weight (pounds)
- systolic blood pressure
- diastolic blood pressure
- self assessed health status (Excellent, Good, Fair, Poor)

Create an output card that shows:
- A cigarette emoji and the text "Likely a smoker" on a light red background
- OR a no-symbol emoji and the text "Not likely a smoker" on a light green background

While the request is processing, show a spinner using braille dot characters.

Submit the form to the web service using the archive name
DeployedClassificationModel and function name predictFunction, and include the number of output arguments as "nargout".

The deployed function returns a scalar class which is used to display the result.  

Test endpoint:
https://production-server-demo.mathworks-workshop.com:9920/DeployedClassificationModel/predictFunction 
The number of output arguments is 2.

Tips

LLMs often struggle with MATLAB JSON payloads. Including a sample curl request and response dramatically improves the generated JavaScript.
Often, a function returns an array of values that can be passed to a plot to display. Instead of generating the plot and returning it through the MATLAB function, return the array and ask your LLM to use a charting library such as charts.js to display the chart on the page.

Once the front‑end looks good, host the HTML/CSS/JS files in the static_files directory of your MATLAB Production Server instance. Create a separate folder per project.
Static files are served from the ~files endpoint. For example:
https://<servername>:9920/~files/patientclassifier/index.html
(Use http and port 9910 if HTTPS is not enabled.)

Example Skeleton (LLM‑Generated)

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MATLAB web app</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>My MATLAB Function</h1>
  <div id="output"></div>
  <script src="app.js"></script>
</body>
</html>

JavaScript

// app.js – real call to Production Server
async function runFunction() {
  const payload = {
    rhs: [{
      mwdata: ["my input string"],
      mwsize: [1,1],
      mwtype: "string"
    }],
    nargout: 1,
    outputFormat: {
      mode: "large",
      nanType: "string"
    }
  };

  const response = await fetch('/myCTF/myFunction', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  });

  const result = await response.json();
  document.getElementById('output').innerText =
    JSON.stringify(result, null, 2);
}

runFunction();

Replace the mock runFunction logic as needed; an LLM can tailor the payload and response handling to your deployed function’s signature.

Tips & Gotchas

Validate JSON types – MATLAB ↔ JSON mapping follows the JSON Representation of MATLAB Data Types specification. Ensure scalars, arrays, and structs are serialized correctly.
Security – If HTTPS is not configured, keep the server behind a firewall or VPN. REST endpoints are unauthenticated by default.
Testing – Use curl or Postman to validate the API before wiring the front‑end. Use the request/response as helpful context for your LLM.

Done!

Your app is now live: the static web page serves the UI, and JavaScript calls the MATLAB function on MATLAB Production Server to display real results.

Feel free to expand the UI, add inputs, or layer in additional functionality. Happy prototyping!