Skip to content

UI Sandbox version 2

We are pleased to announce the release of UI Sandbox Version 2.

This new version introduces a range of improvements designed to make the platform more user-friendly and efficient. With an optimized interface and enhanced functionality, developers can now manage projects with greater ease and clarity.

Explore the new version here: AI UI Constructor.

Updated DEMO UI Development Workflow

The process for creating DEMO UIs has been significantly streamlined. The Sandbox application has been decoupled from the SNET DAPP and restructured as a standalone web application equipped with additional development tools. The updated workflow is as follows:

  1. Generate Stub Files Use your .proto file to generate .js stub files. Follow the guide here: Generating Stubs.

  2. Access the Sandbox Navigate to the AI UI Constructor.

  3. Make sure that the MetaMask extension with the Sepolia network is enabled in your browser.

  4. Sign In or Register Log in using your Marketplace account. If you do not have an account, you can create one using the Sign Up form.

  5. Create a New Project Select New Project from the menu options to initiate a new workspace.

  6. Upload Stub Files Upload the generated stub files to your project.

  7. Edit Project Files Modify index.js and style.css as needed. Additional files can also be uploaded or created within the project.

  8. Compile the Code Use the Compile button to build and test the application.

  9. Provide Application Details Populate the fields for OrganisationID, ServiceId, and Endpoint in the preview application section.

  10. Debug and Iterate Debug the application code and repeat the Compile process until the desired results are achieved.

  11. Export the Project Once the project is complete, download the files in a .zip format using the Export Project button.

  12. Publish the DEMO Deploy the completed DEMO application through the Publisher Portal.

UI Sandbox Workflow Diagram

Below is a visual representation of the new Sandbox workflow:

Workflow