Skip to main content

Customize the widget

Customize the widget style​

The Agentic RAG widget is provided as a set of web components. Each of them live in its own shadow root, so they cannot be styled from outside.

If you want to customize the widget style, like changing the font size, the font family, the colors, etc., you need to inject your own CSS in the corresponding widget tag. You must use the csspath attribute to pass the path to your CSS file.

In this example, we are customizing the nuclia-search-results widget:

custom.css:

.sw-paragraph-result {
  color: #579aca;
}
.thumbnail-container {
  width: 50% !important;
}
<nuclia-search-bar
  knowledgebox="YOUR-KB"
  zone="ZONE"
  features="answers,filter"
></nuclia-search-bar>
<nuclia-search-results csspath="./custom.css"></nuclia-search-results>
note

If the CSS attribute you are trying to set is already defined in the widget, your CSS will override it only if you use !important (like the .thumbnail-container width in the example above).

Re-use the Agentic RAG widget components​

Thanks to the Agentic RAG UI starter kit, you can set up a Svelte project providing the Agentic RAG widget components.

You can use it to build your own version of the search widget, changing its style, or overriding its components.

Build your own app widget​

You can also build your own custom widget with your favourite frontend framework by using the Nuclia JavaScript/TypeScript SDK.

If needed, you can get inspiration from the Agentic RAG widget source code.