Set up UI Demo
Learn how to provision and set up UI Demo to view visual examples of available components and configuration options.
UI Demo is a demo package for component library. To view a visual example of available components and configuration options, set up UI Demo.

Step 1 - Create a new application package

The first step to deploy UI Demo in your environment is to create a new application package.
1
exampleRepository
2
├── uiDemoExample
3
│   └── package.json
4
└── repository.json
Copied!

Create your package.json

Update your package.json file to declare a dependency on the uiDemo package. The uiDemo package is available with your c3server and ready to be used without any extra subscription.
An example package.json file:
1
{
2
"name" : "uiDemoExample",
3
"description" : "Application package to provision UI Demo",
4
"author" : "C3 AI",
5
"dependencies" : ["uiDemo"]
6
}
Copied!

Create your repository.json

The repository.json contains information about the repository's name, version, and dependencies.
An example package.json file:
1
{
2
"name": "testTutorials",
3
"version": "0.1.0",
4
"description": "testing tutorials",
5
"dependencies": {"server" : "7.28.0"}
6
}
Copied!
For more information on repositories and packages, go to Repositories and Packages in the developer portal.

Step 2 - Provision the application package

Once you create the new application package and configure it to depend on the uiDemo package, you're ready to provision.
You can provision the application package using the web console or the C3 AI CLI.
If you do not know how to provision, go to "the Developer Portal" and search Provisioning the package.

Step 3 - Create a vanity URL

When the application package is deployed, create a VanityUrl to make the application available.
From the web console, open the developer tools and run:
1
VanityUrl.create({
2
id: "uidemo",
3
name: "uidemo",
4
tenant: "<yourTenant>",
5
tag: "<yourDev>",
6
defaultContent: "c3/index.html"
7
})
Copied!

Step 4 - Create a DNS entry

The last step in making UI Demo available is to make sure you have a DNS entry that matches the vanity URL you created. Contact your C3 AI Suite administrator if needed.
If you are running C3 AI Suite locally using Docker, update your /etc/hosts file:
1
# (Rest of /etc/hosts)
2
3
# C3 AI UI Demo application
4
127.0.0.1 uidemo
Copied!

Step 5 - View the application

You can now access UI Demo from your browser. In your browser, navigate to the vanity URL you created. If you are running C3 AI Suite locally, you can access http://uidemo:8080.
The uidemo address may be different depending on your previous configurations.
Depending on the server resources available, it's possible that the front-end for your application is still being bundled. In which case, you'll see the following.
How UiDemo looks while bundling
You can check on the progress of the bundling process by running the following command from web console:
1
UiBundler.latestStatus()
Copied!
Image shows the UiBundler.latestStatus(); and the response.
Field
Value
Meaning
status
'running'
UiBundler is processing. Wait until the UiBundler is completed.
status
'completed'
UiBundler is completed.
status
'canceled'
UiBundler is canceled.
errors
Array(1)
UiBundler received an error. You can see the error message by expanding the array.
bundleStatuses
Array(0)
When you run the command to check the latest bundling status, this array should populate.
Bundling takes a few minutes.