Customise your generative AI search widget

Developers

The Nuclia widget is the way you integrate Nuclia’s generative AI into your website or web application.

It is a very important part of the Nuclia experience, as it is the main way for your users to interact with Nuclia, and in this area, there is no one-size-fits-all solution.

So it is essential to ensure that your search widget meets your needs.

You have several options to customise the widget:

Use the preset options from the Nuclia Dashboard widget editor,
Customise the widget style,
Re-use the Nuclia widget Svelte components to build your own widget,
Build your own widget entirely with your favourite frontend framework.

Use the preset options

This is definitely the easiest way to customise your widget.

The Nuclia widget comes with a large set of options designed by the Nuclia team to fit most main use cases and offer a great out-of-the-box experience to your users.

The widget editor is accessible from your Nuclia Dashboard in the “Widgets” section (on the left bar menu).

Let’s explore few use cases:

You use Nuclia to index a large set of documents that your users know about and want to search.

In this case, you will probably enable Suggestions, so you users will be able to see the most relevant documents as they type their query.
You will also enable Filters, so they can refine their search by selecting a specific document type or a specific category.
Maybe the Metadata option can be useful too, so they can see the author, creation date, etc. of the documents in the search results.
You use Nuclia to implement a chatbot.

Here, you will probably enable Answer generation, so your users can get a direct answer to their question.
If you want the users to focus on the answers, you can select Only answers and Hide sources.
You use Nuclia as a search engine for you website.

You will choose Navigate to links to redirect your users to the right page of your website instead of using the default Nuclia viewer.
The Permalink option can be useful too, so your users can share the link to a specific search result.
And as all the indexed contents are local web pages, probably it will be better to select Hide thumbnails.

This is just a short list of examples, but you can find more details about all the options in the Widget features documentation.

Besides the features, you might also want to customise the widget style so it fits your website or web application design.

The Nuclia widget is provided as a set of web components. Each of them live in its own shadow root, so they cannot be styled directly from outside (which is a good thing, as it prevents the widget style from being overridden by the website style by mistake).

This is the reason why we provide a cssPath attribute in each widget tag, so you can pass the path to your CSS file implementing the custom style.

See the Customisation documentation for more details.

The Nuclia widget is implemented with Svelte.

Svelte is a modern JavaScript framework that is becoming increasingly popular. It is not as widely used as React or Vue, but we chose it because it is very easy to learn and use, so even non-frontend developers can get to grips with it quickly.
All the more so if they are provided with a ready-to-use project.

This is the reason why we provide the Nuclia UI starter kit, a Svelte project that contains all the needed dependencies (including the Nuclia widget components and the Nuclia SDK) and a basic Svelte configuration to get you started.

That is the perfect approach if you want to slightly change the widget behaviour without having to design the full user experience from scratch.

If you are a seasoned frontend developer, you might want to build your own widget entirely with your favourite frontend framework, so it can be integrated finely into your web application instead of using an external web component.

In this case, you can use the Nuclia JavaScript/TypeScript SDK.
It provides a set of classes and functions to interact with the Nuclia API.

If you are using React, there is full example of a search widget built with the Nuclia SDK in our demo repository.

It implements a much simpler search widget than the Nuclia widget, but it can be a good starting point to build your own widget.

This approach is undoubtedly the most flexible, but it requires more work, especially when it comes to user experience design, as designing a good search experience involves many challenges.