Upgrade your site search Contextual answers with generative AI

Generative AI refers to the use of artificial intelligence to create new content, like text, images, music, audio, and videos. Generative AI relies on a machine learning (ML) model to learn the patterns and relationships in a dataset of human-created content.

This technology has shown incredible capabilities, through applications like Gemini. You may be wondering, how do I implement generative AI tools into my web products?

One common use case is to provide users a better interface to ask questions about a website's content. You can greatly improve your user's search results, with the help of machine learning.

Build a better, site-specific search You could create an interface where users write their question, which is then sent to a large language model (LLM), such as Gemini, and then display the answers to your users.

Suppose such a feature existed on this site. A user wants to know which APIs are included in Interop 2024, and they input the following query:

What are the features included in Interop 24? Unfortunately, the output will likely be incorrect, for a couple of reasons:

The user has given the LLM little context for the question, therefore the LLM is more prone to return wrong answers or hallucinations. The LLM was likely trained before Interop 2024 was created, or its features decided, so it's unaware of that information. While it's possible for LLMs to find more current information, LLM training datasets are inherently outdated. Maintaining fresh results can be incredibly time consuming and expensive.

Use prompt engineering Prompt engineering is a set of techniques to get the best output out of a LLM.

One technique is to provide additional context in the prompt, making the LLM more likely to output content that is related to the context.

Continuing with our Interop example, our first step is to provide the full contents of the article as context. Then add the question as the input for the LLM to answer. For example:

Context: Following on from the success of Interop 2022 and Interop 2023, we are excited about the opportunity to collaborate once again with all key browser vendors and other relevant stakeholders... (trimmed to fit in this article)

Input: What are the features included in Interop 2024? You can expect Gemini to output something like the following:

The features included in Interop 24 are Accessibility, CSS Nesting, Custom Properties, Declarative Shadow DOM, font-size-adjust, HTTPS URLs for WebSocket, IndexedDB, Layout, Pointer and Mouse Events, Popover, Relative Color Syntax, requestVideoFrameCallback, Scrollbar Styling, @starting-style and, transition-behavior, Text Directionality, text-wrap: balance,URL