Applies to AnyLogic Cloud 2.6.0. Last modified on November 21, 2025.

In AnyLogic Private Cloud, model developers can take advantage of the JavaScript API client to implement custom web interfaces to work with Cloud-based models.

This custom web interface — or, for short, Custom UI — can serve as a standalone entry point that allows users to work with your model. It also can override the built-in Cloud model UI, so all users of your instance will be able to make use of Custom UI.

To work properly, Custom UI requires an HTML-based web interface. It should include at least one separate HTML page called index.html.

Once the page is created, you can connect it to the Cloud API.

To start using the API

1. Obtain the cloud_client library by adding the <script> tag to the head of your webpage:

   <script src="https://cloud.anylogic.com/assets/js-client-8.5.0/cloud-client.js"></script>

2. Obtain the API key in the AnyLogic Cloud UI.
3. Create a new instance of the CloudClient object:

   For Private Cloud:

   cloudClient = CloudClient.create( <the API key>, <the Cloud instance URL> );

4. Use the API to work with the cloud-based models.

When the preparation work is done, use the JavaScript API to implement controls and adjustable settings.

• See the API reference to learn about available functions and objects.
• See the Examples section for a selection of available HTML and JS-based examples.

To upload Custom UI:

1. Create an archive containing the index.html file and all the necessary assets.
   All links pointing to auxiliary files within the archive should be relative.
2. Open your Private Cloud instance.
3. Open the model screen for the model you want to associate with Custom UI.
4. Go to the Custom UI tab.
5. Drag the zip archive you have created on step 1, to the Upload custom UI field, or
   Click … and select the archive using the navigation window.
6. Once uploaded, the link pointing to Custom UI will be available in the Link access section.
   The path to the model’s Custom UI is identical to the model path in the instance, with ui replacing the model part.
7. (Optional) Select the Redirect to Custom UI option for Custom UI to override the default Cloud UI for this particular model on the Public Models page.

This example demonstrates a Custom UI that interacts with two models hosted in AnyLogic Cloud: Product Delivery (used for simulation and animation) and Bass Diffusion (used for parameter variation).

1. Make sure you have access to the Product Delivery and Bass Diffusion models. You can download them from the public Cloud (cloud.anylogic.com) or export the versions available in your AnyLogic desktop installation (see Help > Example Models).
2. You can run this Custom UI either in the public Cloud or in your Private Cloud instance.
   Make sure that models with the same names and compatible experiments, inputs, and outputs are available in your account on My Models page.
3. Download the archive containing this custom UI to explore its code base on your machine.

In this example, the HTML part of the custom UI is implemented directly in index.html, while the JavaScript logic resides in main.js. The script defines the API key, the host URL of your Cloud instance, and two model names: one for the Product Delivery simulation and one for the Bass Diffusion parameter variation.

The main.js file first creates a Cloud client instance using the provided API key and host URL. Each button on the HTML page triggers one of the JavaScript functions that demonstrate different types of interaction with Cloud models. The example will also work with any other models, as long as they expose the same experiment, model, input, and output names expected in the code.

• runAnimation() starts the Product Delivery model’s animation on the page:
  1. Retrieves the latest model version from the Cloud,
  2. Creates experiment inputs based on an existing experiment,
  3. Starts the animation and displays additional controls to manipulate it in real time.
• runSimulation() executes a single-run experiment of the Product Delivery model:
  1. Retrieves the latest model version,
  2. Creates the default inputs,
  3. Sets specific parameter values,
  4. Runs the experiment without animation,
  5. Retrieves and displays the resulting outputs on the page.
• runParameterVariation() executes a parameter variation experiment of the Bass Diffusion model:
  1. Retrieves the latest model version,
  2. Creates the default inputs,
  3. Sets the ranged input values,
  4. Runs the experiment without animation,
  5. Retrieves the resulting outputs and displays the aggregated data in a simple table.

To check out how Custom UI works in a real-world example, try out the demo:

Demo: Transporters Moving in Free Space (Custom UI)

How can we improve this article?

Send