C3 AI Documentation Home

Use other UI frameworks

C3 AI Platform has a built-in UI framework and component library that accelerates the development, testing, deployment, and configuration of web-based front-end applications.

If you already have significant investments in other web-based UI frameworks, including React, Angular, VueJS or another framework, you don't have to discard any of those investments. You can keep using the UI framework you have in place, and leverage the REST APIs exposed by C3 AI Platform to develop the front-end of your application.

Benefits and challenges

When using your own UI framework, you have full control over:

  • Routes, pages, components
  • Theming and styling
  • Localization and internationalization
  • Compilation or transpilation
  • Testing
  • Deployment and configuration

But with full control you'll also get the full responsibility of developing and maintaining the front-end of the application with minimal accelerators. One specific challenge is around deploying the application.

If you're deploying the front-end portion of your application separately from the back-end, you need to make sure the front-end respects the same-origin policy.

As an example, if the front-end is serverd from example1.com and the back-end is served from example1.com, when the user accesses the front-end, by default their browser will block API requests from being performed to the back end, since they are hosted in different domains.

Deploy your front-end with C3 AI Platform

One way to mitigate this is to develop your front-end separately, but deploy it as part of the C3 AI application. This ensures both the front-end and back-end are served from the same domain.

To do this, you can continue developing your application without changes. Once you are ready to deploy, bundle the front-end to generate static assets (JavaScript, CSS, Fonts, and HTML), then place these static assets in the ui/content directory of your C3 AI application package.

All files placed in this directory will be served as static assets, without any additional processing from C3 AI Platform. Learn more about placing static assets

Runtime

Once you deploy your C3 AI application package with the pre-bundled static files, users are able to access the application front-end by navigating to https://CLUSTER/ENV/APP/index.html, assuming you've added an index.html to the ui/content directory.

Extra considerations

C3 Servers can use 3 kinds of urls to represent a single application:

  • If both env & app fields are empty i.e. if this is a cluster URL then endpoint should be: https://dev.c3.ai/{$target-env}/{$target-app}/api/8/login
  • If app field is empty i.e. if this is an environment URL then: https://dev.c3.ai/{$target-app}/api/8/login
  • If both env and app field is set i.e. if this is an App URL then: https://dev.c3.ai/api/8/login

Learn more about AppUrl. If you are using C3 AI UI framework, this happens automatically, but if you're using your own framework, you need to take this in consideration as part of your routing logic.

Was this page helpful?