Enhance user experience with Box AI in Content Preview UI Element

With the beta release of Box AI in the Content Preview UI Element, users can ask questions of documents directly from custom applications. Learn how to quickly implement this feature in your apps!

Box UI Elements allow developers to embed aspects of the Box UI within their custom applications. Box UI Elements give the ease and flexibility to display aspects of the Box UI wherever collaborators and viewers might interact with the content.

What is Preview Box UI Element?

Content Preview Box UI element provides a seamless integration into your application or website, allowing users to view various file types from Box without leaving their application. Whether it’s PDFs, images, videos or even 3D models — everything can be displayed effortlessly. Now you can add Box AI in the Content Preview UI Element and can ask questions of documents directly from your custom applications. The GIF below shows an example use case of using Box AI to answer questions of a financial document in the Content Preview UI Element.

Box AI in the Content Preview UI Element is currently in public beta and it is available to Box Enterprise Plus customers.

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

Use it when both React and ReactDOM libraries are already loaded on the application. These libraries expect a React and ReactDOM ≥16.6 and < 18.

For more information related to data security, AI models and Box commitments when using AI visit The Box AI Principles site.

Get started

To start using the potential of Box AI in the Content Preview UI Element within your own applications or websites follow these simple steps:

Install dependencies

First, install the package containing the beta feature:

Release v20.0.0-beta.17 · box/box-ui-elements

In the package.json file you should be able to check box-ui-elements version.

    "box-ui-elements": "20.0.0-beta.17",

Additionally, if you’re not using formatjs in your project add it as a dependency, as it’s required for this Box UI Element.

npm i react-intl

Authenticate Your Application

Next step involves authenticating your application with appropriate credentials from your Box app.

In the Box Developer Console:

1. Create the Box custom app and choose OAuth 2.0 authentication method.
2. Add localhost to CORS settings in the Configuration tab
3. Generate a developer token and save it in the .env file
4. Upload a file to Box account and grab it’s ID, either from URL in Box web app, or using API and save the value in the .env file

REACT_APP_BOX_DEVELOPER_TOKEN=developerToken
REACT_APP_BOX_PREVIEW_FILE_ID=fileID

⚠️ Remember, the developer token is valid for just one hour. When the token is no longer valid, go back to the Box Developer Console to revoke it and replace the old one in your project.

Apply Box AI scopes

Working with Box AI requires adding appropriate scopes both in Admin Console and Developer Console.

In the Admin Console go to Enterprise Settings and pick the Box AI tab. Scroll to user permissions and select Box AI for API to enable the feature.

In the Developer Console, select the Manage AI scope for your custom app:

Save the changes, you might also need to regenerate the developer token.

Add Content Preview Box UI Element

Now let’s dive into adding the Content Preview Box UI Element. Import ContentPreview and IntlProvider from react-intl package. Store the developer token and a file ID from your .env file in variables. Initiate components and pass necessary props. For detailed description of possible configuration see Box Developer Documentation.

import ContentPreview from 'box-ui-elements/es/elements/content-preview';
import { IntlProvider } from "react-intl";

export default () => {
    // Storing variables in the front end is not secure.
    // You will want to grab this value from a database for production
    const token = process.env.REACT_APP_BOX_DEVELOPER_TOKEN
    let folderID = process.env.REACT_APP_BOX_PREVIEW_FILE_ID
    return (
      <IntlProvider locale="en">
         <ContentPreview 
            contentAnswersProps={{
              show: true,
            }}
            fileId={FILE_ID}
            token={TOKEN}
            {...PROPS}
         />
      </IntlProvider>
  );
};

Now users can preview documents and interact with Box AI right at their fingertips! Box AI for UI Elements can be a differentiator for external portals, allowing customers to easily bring Box AI to user experiences with minimal development required.

Additional resources

Check a Github repository with a full demo portal featuring other Box UI Elements including the Content Preview component developed by my colleague Alex Novotny.

Check my other articles on using Box UI Elements with other popular front-end frameworks:

Box UI Elements with Angular

Box UI Elements with Vue 3

🦄 Want to learn from Box Platform champions?

Join our Box Developer Community for support and knowledge sharing!

Cheers!