Template Client Applications

We have four different types of template client applications.

• template-app-fullpage
• template-app-plugin
• template-app-multi-fullpage
• template-app-multi-plugin

You can access our template client applications under the templates/ folder in the ui-protocol repository.

You can integrate them with your main application by following the instructions in the README.md files inside our template client applications.

Local Development with Chrome Extension

Overview

The UI Protocol project includes a Chrome extension that helps developers work with local client applications while using the production shell environment. This extension intercepts requests to the /api/v1/applications endpoint and provides custom responses for local development purposes.

How It Works

The extension works by:

1. Intercepting API requests to the /api/v1/applications endpoint on the target website
2. Replacing the response with custom configuration that points to your local client application
3. Allowing you to specify custom URL, title, and client app type for the response

Demo

Setup Instructions

1. Loading the Extension

1. Download the extension from

   ui-protocol-chrome-extension.zip

2. Extract the ZIP file
3. Open Chrome and go to chrome://extensions/
4. Enable “Developer mode” in the top right
5. Click “Load unpacked” and select the extension directory from the extracted ZIP file

2. Configuration

After loading the extension:

1. Click on the extension icon in your Chrome toolbar
2. Enter the following details:
   • Web URL: The URL where your client app is running (e.g., http://localhost:3000)
   • App Name: The display title for your client app in shell UI
   • App Visible Type: The visible type identifier for your client app in shell UI

Usage

Once configured, the extension will automatically:

• Intercept requests to /api/v1/applications
• Return your local development configuration
• Allow you to see your local client app within the production shell environment

Troubleshooting