One of the things I like about the Content Hub is there is so many ways to customize it. Last year I wanted to be able to call an API and display data on assets. It was suggested to use React Components. It has been over a year of using them and doing some really cool things with them. I have presented what I learned at several meetups. With this blog I want to show how you can get started using them.

Why Use Them?

With all the customization you can do the with the content hub why would external components be needed? The answer is simple. So you can extend the functionality of the content hub and utilize external resources in doing so. The possibilities are endless as you can create some really cool things with React components. In this blog I will go over external component creation at a higher level. In future blogs I will showcase more detailed code.

Storybook

As I started the React components journey I learned how to implement and use Storybook. I believe this is a critical tool as it allows you test React components without actually integrating with the systems you are using them with. In the screenshot below you can see a list of components I used Storybook to test and what an example screenshot looks like.

Basic Structure

I will keep this simple and show you how a simple React component would work. Keep in mind this is part of a starter kit I used and had a lot of things setup already. I simply had to create the component. I will link to the starter kit in this blog post.

Let’s start with the structure. In this case we will have three different files.

The index.tsx file is what brings this together. You will use this import libraries and call the tsx file which typically contains the output.

As you see below this tsx file simply exports HTML. You can do many things in this file such as call an API and import data. The data then can be used in an HTML document you return.

The stories.ts file is use to run with storybook. You can use it to not only call the react component, but you can pass parameters as well.

When this is run in Storybook you will see the following output.

In the links (Example Repositories and Starter Kits) section in this blog to get you started you can navigate to the documentation on how to create bundles. You will need these in order for the Content Hub to run your code. It is basically a compiled JS file with all of your code and libraries needed.

Hosting vs Uploading Bundle

In order for content hub to use your React component you will need to make a bundle. There are instructions in the starter kit to do this that I will link to in this blog. After you do create the bundle you can choose to upload it as an asset to content hub or host it in your own website.

For hosting the bundle you can have the content hub host it by uploading it as a portal asset. You can find the link to Portal assets under the settings.

You can upload your bundle with different versions as needed.

Under pages I will usually add the bundle there.

When clicking on an external component such as SimpleReact you will see the following.

From asset will allow you to link to the page assets in the content hub. Using the From path will allow you to link to a website hosted bundle.

I will talk about this more in a future blog. In the object section you can pass properties from the content hub to your React component. This is very powerful as it allows you to interact with the asset.

I will get into the more advanced external components later, but here are some simple ones on the asset pages rendering.

Example Repositories and Starter Kits

Below you will find different links to get started making your now React external components for the content hub. I will dive into more detail of some of the more complex ones I created in future blogs.

• https://developers.sitecore.com/learn/accelerate/content-hub/implementation/custom-logic/developing-external-components
• https://nickyvadera.com/blog/using-external-components-in-content-hub
• https://bitbucket.org/stylelabsdev/sitecore.ch.externalcomponents.examples/src/main/

Here is a video of me presenting what is in this blog at the Columbus Sitecore user group.

Wrapping Up

This blog should help you get started. I will dive into more details in future blogs. Let me know in the meantime if you have any questions.

The content hub recently got a new update to detect AI generated content. When uploading or updating an asset C2PA metadata will be detected. You can find more information on that here.

I wanted to test this feature out so going to start with simple AI created images. I used three different AI image generators. ChatGP, Google Gemini and Bing Image Creator. I asked them to “create me an image of a blue dodge challenger jumping over the Willis tower.” In the chart below you will see the image that was created. Below the image is the new Content Hub properties that were generated for each image. You will notice the additional tags highlighted. For some reason didn’t see the same fields in Gemini although I did see the credit line for Google AI.

ChatGPT	Google Gemini	Bing Image Creator

As you see above new fields are at the end of the properties section.

One of the things I enabled was the Gen AI section on the asset detail. This was enabled from the Tabs/System section of the Asset Details.

The section will show something like the following for the AI generated image on an Asset.

In my opinion by identifying AI images you can make the choice to use them or not. Some companies have polices restricting the use of them. You can find more on this new Content Hub feature here.

Recently an update came out for creating Content Hub Variants. With this new change you can take an original content piece and create a variant of it in a different language. The process automatically translates the text for you. This update is a big deal to me. Especially with multi-lingual sites I work on. Sometimes, I need translated text for a placeholder. No more Google Translate cut and paste. I am sure this will save a lot of time for content authors.

Create a variant is pretty straightforward. First step is to go the Content menu and do a search.

I will do a search for Running.

Select and open one of the content pieces. Then navigate to the more action menu (three dots) on the upper right hand of the screen. Then choose Localize.

The following window will pop up. Choose a Name for the Variant, a Locale and Check Translate with AI. Then click the Create Button.

A new version will be created translated with the Locale you chose. On the top of the screen you will see the word Variant. Look at all that translated text.

After variant(s) are created you can easily navigate to the original and other variants. Select the More Actions (three dots) and then choose Variants.

The next screen will appear. You can the select a version to navigate to.

I really love this feature and I hope we see similar feature soon throughout Sitecore’s various products.

In January I presented at the SUG in Columbus. One of the things I like about presenting is that sometimes I come out of a presentation learning something new. One of the things I learned was how to trigger image tag generation easily. Here are the steps I learned.

1. Create/Upload an image. As you see below I uploaded a beautiful picture of the Chicago skyline. Well in my opinion it is beautiful. I added some things in overview, but at the moment there is nothing in the image analysis. Finding similar assets though worked automatically.

2. Change Image analysis values. You will see two fields below. Let’s just change the value of Tags to auto-tagged.

3. Back the Overview. Change the asset type to Social and save.

4. Take a small break and refresh the screen. You should now see tags and a description. In the image analysis.

But wait there is more… In my next blog I am going to show you how to trigger AI tagging for images.

Between the holidays my goal was to get familiar again with CMP (Content Marketing Platform). As soon as I created a campaign I noticed AI was enabled for content. A quick look at the updates shows it was released in December. It is listed as in beta. From what I have seen so far though, this will be a great addition for content authors. It is the gift that keeps on giving.

On an editable field click on the AI button. You will then be brought to a dialog that will ask you what you are looking for.

As you see above this is just a start. Content Hub had introduced AI for image assets earlier this year. With the addition of this new AI feature, Content Hub continues to improve. It is becoming one of the best all-in-one content tools. In the next year I plan on featuring more of the new features.