Basic Box UI Elements resources

• Developer guide: https://developer.box.com/guides/embed/ui-elements/



• Installation of BUIE: box-ui-elements - npm



• Readme for using Content Preview Element: box-ui-elements/src/elements/content-preview/README.md at b3f57ff04fc3b7b03da29408f74f1cebe4c4edfd · box/box-ui-elements · GitHub

Prerequisites : Node version >=18.x

AI UI Element resources

What is the AI UI Element (UIE)?

The AI UIE enhances the Content Preview UI Element with AI Q&A functionality. Developers can build AI-enabled chatbot-type functionality in their custom portals using this UIE. The AI UIE is capable of answering questions and taking actions like summarization of a given document.

Content Preview element top bar including the AI UI Element icon:

AI UI Element Q&A modal:

The latest version of BUIE package including the AI UI Element: 19.0.0-beta.34

The AI UI Element is currently available only by installing the npm package. The CDN version is not yet supported.

How to add AI UI Element to Content Preview top header?

Add contentAnswersProps with field show set to true in order to enable the AI UI Element button in previewHeader. An example is shown below.

var ContentPreview = require('./ContentPreview').default;





<IntlProvider locale="en">


    <ContentPreview


        contentAnswersProps={{


          show: true,


        }}


        ...


        fileId={FILE_ID}


        token={TOKEN}


        {...PROPS}


    />


</IntlProvider>

How to get the token?

Go to the Developer Console, under Configuration Tab of Enabled App, click Generate Developer Token. The Developer Token is valid for an hour; you’ll need to regenerate a new token once it’s no longer active.