User interface¶

The AI Gateway user interface is a web-based application that allows you to configure and manage the AI Gateway server. The user interface provides a dashboard that displays the available services, processors, profiles, policies, routes, and notifications.

Before using the user interface, you must configure and run it on top of the AI gateway server.

Configure and run the AI Gateway user interface¶

Configure the user interface¶

To configure the server, modify the src/config.json file in the ui directory.

The following variable can be configured:

Variable	Description	Default Value
AIGW_API_URL	The URL and port of your running AI Gateway admin server	http://localhost:8080

Run the user interface¶

To run the server, follow these steps:

Using your terminal, access the ui directory in the AI Gateway repository::
```
cd ui
```
Install the required npm packages::
```
npm install
```
Build and run the server::
```
npm run dev
```
The server will be available at http://localhost:8400

Use the user interface¶

To access the AI Gateway user interface, open a web browser and navigate to the localhost address and the port number configured in the .env file. For example, if the server is running on port 8400, navigate to http://localhost:8400.

By default, the user interface displays the Services section.

Services¶

The Services section displays the available services and allows you to add, edit, and delete services.

Add services¶

Select the Add Service button.
The Add Service drawer will expand. You can add a new service by completing the Name, Type, and Executor fields, or you can use the Raw YAML toggle button to copy over the YAML configuration for your service.
Select Add to save the service.

Edit services¶

Select the service you want to edit from the list.
The Edit Service drawer will expand. You can edit the Type, Executor, and Config fields, or you can use the Raw YAML toggle to edit the YAML configuration for your service directly.
Once you have made your changes, select Save to save the changes.

Delete services¶

Use the checkbox next to the service name to select the service you want to remove.
Select the Delete button.

Warning

There is no confirmation dialog when deleting a service. The service will be removed immediately.

Processors¶

The Processors section displays the available processors and allows you to add, edit, and delete processors.

Add processors¶

Select the Add Processor button.
The Add Processor drawer will expand. You can add a new processor by completing the Name and Type fields. You can add optional Processor Params using the Add Processor Param button and adding the Param Name and Profile Name. If you prefer, you can use the Raw YAML toggle button to copy over the JSON configuration for your processor.
Select Add to save the processor.

Edit processors¶

Select the processor you want to edit from the list.
The Edit Processor drawer will expand. You can edit the Type and Config fields (if any), or you can use the Raw YAML toggle to edit the YAML configuration for your processor directly.
Once you have made your changes, select Save to save the changes.

Delete processors¶

Use the checkbox next to the processor name to select the processor you want to remove.
Select the Delete button.

Warning

There is no confirmation dialog when deleting a processor. The processor will be removed immediately.

Profiles¶

The Profiles section displays the available profiles and allows you to add, edit, and delete profiles.

Add profiles¶

Select the Add Profile button.
The Add Profile drawer will expand. You can add a new profile by completing the Name field, or you can use the Raw YAML toggle button to copy over the JSON configuration for your profile.
Select Add to save the profile.

Edit profiles¶

Select the profile you want to edit from the list.
The Edit Profile drawer will expand. You can see and make changes to the JSON configuration for your profile.
Once you have made your changes, select Save to save the changes.

Delete profiles¶

Use the checkbox next to the profile name to select the profile you want to remove.
Select the Delete button.

Warning

There is no confirmation dialog when deleting a profile. The profile will be removed immediately.

Policies¶

The Policies section displays the available policies and allows you to add, edit, and delete policies.

Add policies¶

Select the Add Policy button.
The Add Policy drawer will expand. You can add a new policy by completing the Name and Profile fields, or you can use the Raw YAML toggle button to copy over the JSON configuration for your policy.
Select Add to save the policy.

Edit policies¶

Select the policy you want to edit from the list.
The Edit Policy drawer will expand. You can edit the Profile field, or you can use the Raw YAML toggle to edit the YAML configuration for your policy directly.
Once you have made your changes, select Save to save the changes.

Delete policies¶

Use the checkbox next to the policy name to select the policy you want to remove.
Select the Delete button.

Warning

There is no confirmation dialog when deleting a policy. The policy will be removed immediately.

Routes¶

The Routes section displays the available routes and allows you to add, edit, and delete routes.

Add routes¶

Select the Add Route button.
The Add Route drawer will expand. You can add a new route by completing the Path and Policy fields, or you can use the Raw YAML toggle button to copy over the JSON configuration for your route.
Select Add to save the route.

Edit routes¶

Select the route you want to edit from the list.
The Edit Route drawer will expand. You can edit the Policy and Schema fields, or you can use the Raw YAML toggle to edit the YAML configuration for your route directly.
Once you have made your changes, select Save to save the changes.

Delete routes¶

Use the checkbox next to the route path to select the route you want to remove.
Select the Delete button.

Warning

There is no confirmation dialog when deleting a route. The route will be removed immediately.

Notifications¶

The notifications section is under development.

Dashboards¶

The dashboards section is under development.

Previous Next