Build a search experience with the Search Application client

This document is a how-to guide to building a search experience with a search application, using the Search Application client. The client is a JavaScript library designed to be used in the browser. You’ll integrate this library into your web app to simplify querying your search application.

This guide assumes you want to build a web app with the following search features:

You can think of the search application as the "server side" that persists changes to Elasticsearch. Your web app acts as the "client side" that queries the search application. You’ll be making edits to both your search application and your web app to complete the implementation.

To follow this guide, you’ll need:

Install the client using npm, yarn, or a CDN.

Option 1: Using package manager

To install the client using npm, run the following command:

npm install @elastic/search-application-client

To install the client using yarn, run the following command:

yarn add @elastic/search-application-client

Option 2: Using CDN with HTML <script> tag

Alternatively, you can install the client using a CDN. Add the following <script> tag to your web app’s HTML:

<script src="https://cdn.jsdelivr.net.cn/npm/@elastic/search-application-client@latest"></script>

Once installed, you can import the client into your web app. You’ll need the following information to initialize the client:

Find this information on the Connect page in the Kibana UI.

Use the following import statement:

import SearchApplicationClient from '@elastic/search-application-client';

Configure the client with your deployment details to start making search requests. You can generate an API key on the Connect page in the Kibana UI. Go to Search > Search Applications > <MY_SEARCH_APPLICATION> > Connect. You’ll find the following information prepopulated to initialize the client:

import Client from '@elastic/search-application-client'

const request = Client(
  'my-search-application', // search application name
  'url-from-connect-page', // url-host
  'api-key-from-connect-page',  // api-key
  {
    // optional configuration
  }
)

Once configured you’ll be able to make search requests to your search application using the client API, like this:

const results = await request()
  .query('star wars')
  .search()

Alternatively, if you’re using a CDN, you can import the client using the following statement:

<script>
  const Client = window['SearchApplicationClient'];
</script>

Configure the client with your deployment details to start making search requests. You can generate an API key on the Connect page in the Kibana UI. Go to Search > Search Applications > <MY_SEARCH_APPLICATION> > Connect. You’ll find the following information prepopulated to initialize the client:

<script>
  const request = Client(
    'my-example-app', // search application name
    'url-from-connect-page', // url-host
    'api-key-from-connect-page',  // api-key
    {
    // optional configuration
    }
)
</script>

Once configured you’ll be able to make search requests to your search application using the client API, like this:

<script>
  const results = await request()
    .query('star wars')
    .search()
</script>

The Search Application client is designed to work with any search template you create. You’ll use the Search Application APIs to create and manage your search templates.

Here’s an example template:

resp = client.search_application.put(
    name="my-example-app",
    search_application={
        "indices": [
            "my-example-app"
        ],
        "template": {
            "script": {
                "lang": "mustache",
                "source": "\n        {\n          \"query\": {\n            \"bool\": {\n              \"must\": [\n              {{#query}}\n              {\n                \"query_string\": {\n                  \"query\": \"{{query}}\",\n                  \"search_fields\": {{#toJson}}search_fields{{/toJson}}\n                }\n              }\n              {{/query}}\n            ]\n            }\n          }\n        }\n      ",
                "params": {
                    "query": "",
                    "search_fields": ""
                }
            }
        }
    },
)
print(resp)

const response = await client.searchApplication.put({
  name: "my-example-app",
  search_application: {
    indices: ["my-example-app"],
    template: {
      script: {
        lang: "mustache",
        source:
          '\n        {\n          "query": {\n            "bool": {\n              "must": [\n              {{#query}}\n              {\n                "query_string": {\n                  "query": "{{query}}",\n                  "search_fields": {{#toJson}}search_fields{{/toJson}}\n                }\n              }\n              {{/query}}\n            ]\n            }\n          }\n        }\n      ',
        params: {
          query: "",
          search_fields: "",
        },
      },
    },
  },
});
console.log(response);

PUT _application/search_application/my-example-app
{
  "indices": ["my-example-app"],
  "template": {
    "script": {
      "lang": "mustache",
      "source": """
        {
          "query": {
            "bool": {
              "must": [
              {{#query}}
              {
                "query_string": {
                  "query": "{{query}}",
                  "search_fields": {{#toJson}}search_fields{{/toJson}}
                }
              }
              {{/query}}
            ]
            }
          }
        }
      """,
      "params": {
        "query": "",
        "search_fields": ""
      }
    }
  }
}

This will allow you to add any template parameters you need to your template and then provide the values in your client request. Use addParameter to inject actual values into your template parameters.

For example, pass in values for search_fields like this:

const results = await request()
  .query('star wars') // requires the template to use query parameter
  .addParameter('search_fields', ['title', 'description'])
  .search()

We recommend getting started with the boilerplate template provided in the client repository. View this script to see how this is used. The dictionary parameter is used to pass in a JSON schema definition that describes structure and validation rules for the request object. This schema is important, because it restricts the use of certain features in the Elasticsearch query. View the schema.

Each search functionality in this guide requires a feature included in this template. These features require specific parameters to be present in the template:

We will explore all the essential basics you’ll need for a search experience. You’ll learn how to implement them using your search application and query them using the client.

Our simple template uses query_string searching across all fields, but this may not suit your use case. You can update the template to provide better relevance recall.

In the below example, we’re using a multi-match query against our template, with best_fields and phrase_prefix queries targeting different search fields.

resp = client.search_application.put(
    name="my-example-app",
    search_application={
        "indices": [
            "example-index"
        ],
        "template": {
            "script": {
                "lang": "mustache",
                "source": "\n        {\n          \"query\": {\n            \"bool\": {\n              \"must\": [\n              {{#query}}\n              {\n                \"multi_match\" : {\n                  \"query\":    \"{{query}}\",\n                  \"fields\": [ \"title^4\", \"plot\", \"actors\", \"directors\" ]\n                }\n              },\n              {\n                \"multi_match\" : {\n                  \"query\":    \"{{query}}\",\n                  \"type\": \"phrase_prefix\",\n                  \"fields\": [ \"title^4\", \"plot\"]\n                }\n              },\n              {{/query}}\n            ],\n            \"filter\": {{#toJson}}_es_filters{{/toJson}}\n            }\n          },\n          \"aggs\": {{#toJson}}_es_aggs{{/toJson}},\n          \"from\": {{from}},\n          \"size\": {{size}},\n          \"sort\": {{#toJson}}_es_sort_fields{{/toJson}}\n        }\n      ",
                "params": {
                    "query": "",
                    "_es_filters": {},
                    "_es_aggs": {},
                    "_es_sort_fields": {},
                    "size": 10,
                    "from": 0
                },
                "dictionary": {}
            }
        }
    },
)
print(resp)

const response = await client.searchApplication.put({
  name: "my-example-app",
  search_application: {
    indices: ["example-index"],
    template: {
      script: {
        lang: "mustache",
        source:
          '\n        {\n          "query": {\n            "bool": {\n              "must": [\n              {{#query}}\n              {\n                "multi_match" : {\n                  "query":    "{{query}}",\n                  "fields": [ "title^4", "plot", "actors", "directors" ]\n                }\n              },\n              {\n                "multi_match" : {\n                  "query":    "{{query}}",\n                  "type": "phrase_prefix",\n                  "fields": [ "title^4", "plot"]\n                }\n              },\n              {{/query}}\n            ],\n            "filter": {{#toJson}}_es_filters{{/toJson}}\n            }\n          },\n          "aggs": {{#toJson}}_es_aggs{{/toJson}},\n          "from": {{from}},\n          "size": {{size}},\n          "sort": {{#toJson}}_es_sort_fields{{/toJson}}\n        }\n      ',
        params: {
          query: "",
          _es_filters: {},
          _es_aggs: {},
          _es_sort_fields: {},
          size: 10,
          from: 0,
        },
        dictionary: {},
      },
    },
  },
});
console.log(response);

PUT _application/search_application/my-example-app
{
  "indices": ["example-index"],
  "template": {
    "script": {
      "lang": "mustache",
      "source": """
        {
          "query": {
            "bool": {
              "must": [
              {{#query}}
              {
                "multi_match" : {
                  "query":    "{{query}}",
                  "fields": [ "title^4", "plot", "actors", "directors" ]
                }
              },
              {
                "multi_match" : {
                  "query":    "{{query}}",
                  "type": "phrase_prefix",
                  "fields": [ "title^4", "plot"]
                }
              },
              {{/query}}
            ],
            "filter": {{#toJson}}_es_filters{{/toJson}}
            }
          },
          "aggs": {{#toJson}}_es_aggs{{/toJson}},
          "from": {{from}},
          "size": {{size}},
          "sort": {{#toJson}}_es_sort_fields{{/toJson}}
        }
      """,
      "params": {
        "query": "",
        "_es_filters": {},
        "_es_aggs": {},
        "_es_sort_fields": {},
        "size": 10,
        "from": 0
      },
      "dictionary": {
          //  add dictionary restricting
          // _es_filters, _es_sort_fields & _es_aggs params
          // Use example provided in repo: https://github.com/elastic/search-application-client/blob/main/bin/request_schema.json
      }
    }
  }
}

Refer to for examples of different types of queries, including combinations of text search, kNN search, ELSER search, hybrid search with RRF, and more.

Use case: I want to dynamically adjust the search fields

If you need to adjust search_fields at query request time, you can add a new parameter to the template (for example: search_fields) and use the addParameter method to provide the fields to the template.

Use case: I want to boost results given a certain proximity to the user

You can add additional template parameters to send the geo-coordinates of the user. Then use function_score to boost documents which match a certain geo_distance from the user.

By default, all fields are returned in the _source field. To restrict the fields returned, specify the fields in the template.

resp = client.search_application.put(
    name="my-example-app",
    search_application={
        "indices": [
            "example-index"
        ],
        "template": {
            "script": {
                "lang": "mustache",
                "source": "\n        {\n          \"query\": {\n            \"bool\": {\n              \"must\": [\n              {{#query}}\n                \n              {{/query}}\n            ],\n            \"filter\": {{#toJson}}_es_filters{{/toJson}}\n            }\n          },\n          \"_source\": {\n            \"includes\": [\"title\", \"plot\"]\n          },\n          \"aggs\": {{#toJson}}_es_aggs{{/toJson}},\n          \"from\": {{from}},\n          \"size\": {{size}},\n          \"sort\": {{#toJson}}_es_sort_fields{{/toJson}}\n        }\n      ",
                "params": {
                    "query": "",
                    "_es_filters": {},
                    "_es_aggs": {},
                    "_es_sort_fields": {},
                    "size": 10,
                    "from": 0
                },
                "dictionary": {}
            }
        }
    },
)
print(resp)

const response = await client.searchApplication.put({
  name: "my-example-app",
  search_application: {
    indices: ["example-index"],
    template: {
      script: {
        lang: "mustache",
        source:
          '\n        {\n          "query": {\n            "bool": {\n              "must": [\n              {{#query}}\n                \n              {{/query}}\n            ],\n            "filter": {{#toJson}}_es_filters{{/toJson}}\n            }\n          },\n          "_source": {\n            "includes": ["title", "plot"]\n          },\n          "aggs": {{#toJson}}_es_aggs{{/toJson}},\n          "from": {{from}},\n          "size": {{size}},\n          "sort": {{#toJson}}_es_sort_fields{{/toJson}}\n        }\n      ',
        params: {
          query: "",
          _es_filters: {},
          _es_aggs: {},
          _es_sort_fields: {},
          size: 10,
          from: 0,
        },
        dictionary: {},
      },
    },
  },
});
console.log(response);

PUT _application/search_application/my-example-app
{
  "indices": ["example-index"],
  "template": {
    "script": {
      "lang": "mustache",
      "source": """
        {
          "query": {
            "bool": {
              "must": [
              {{#query}}
                // ...
              {{/query}}
            ],
            "filter": {{#toJson}}_es_filters{{/toJson}}
            }
          },
          "_source": {
            "includes": ["title", "plot"]
          },
          "aggs": {{#toJson}}_es_aggs{{/toJson}},
          "from": {{from}},
          "size": {{size}},
          "sort": {{#toJson}}_es_sort_fields{{/toJson}}
        }
      """,
      "params": {
        "query": "",
        "_es_filters": {},
        "_es_aggs": {},
        "_es_sort_fields": {},
        "size": 10,
        "from": 0
      },
      "dictionary": {
          //  add dictionary restricting _es_filters and _es_aggs params
          // Use the dictionary example provided in repo: https://github.com/elastic/search-application-client/blob/main/bin/request_schema.json
      }
    }
  }
}

Use case: I want to dynamically adjust the result fields

If you need to adjust the fields returned at query request time, you can add a new parameter to the template (for example: result_fields) and use the addParameter method to provide the fields to the template.

Highlighting support is straightforward to add to the template. With the highlighting API, you can specify which fields you want to highlight for matches.

In the following example, we specify title and plot as the highlighted fields. title typically has a short value length, compared to plot which is variable and tends to be longer.

We specify the title to be fragment_size of 0 to return all of the text when there is a highlight. We specify the plot to be fragment_size of 200, where each highlighted fragment will be up to 200 characters long.

resp = client.search_application.put(
    name="my-example-app",
    search_application={
        "indices": [
            "example-index"
        ],
        "template": {
            "script": {
                "lang": "mustache",
                "source": "\n        {\n          \"query\": {\n            \"bool\": {\n              \"must\": [\n              {{#query}}\n                \n              {{/query}}\n            ],\n            \"filter\": {{#toJson}}_es_filters{{/toJson}}\n            }\n          },\n          \"_source\": {\n            \"includes\": [\"title\", \"plot\"]\n            },\n            \"highlight\": {\n              \"fields\": {\n                \"title\": { \"fragment_size\": 0 },\n                \"plot\": { \"fragment_size\": 200 }\n                }\n                },\n                \"aggs\": {{#toJson}}_es_aggs{{/toJson}},\n                \"from\": {{from}},\n                \"size\": {{size}},\n                \"sort\": {{#toJson}}_es_sort_fields{{/toJson}}\n                }\n                ",
                "params": {
                    "query": "",
                    "_es_filters": {},
                    "_es_aggs": {},
                    "_es_sort_fields": {},
                    "size": 10,
                    "from": 0
                },
                "dictionary": {}
            }
        }
    },
)
print(resp)

const response = await client.searchApplication.put({
  name: "my-example-app",
  search_application: {
    indices: ["example-index"],
    template: {
      script: {
        lang: "mustache",
        source:
          '\n        {\n          "query": {\n            "bool": {\n              "must": [\n              {{#query}}\n                \n              {{/query}}\n            ],\n            "filter": {{#toJson}}_es_filters{{/toJson}}\n            }\n          },\n          "_source": {\n            "includes": ["title", "plot"]\n            },\n            "highlight": {\n              "fields": {\n                "title": { "fragment_size": 0 },\n                "plot": { "fragment_size": 200 }\n                }\n                },\n                "aggs": {{#toJson}}_es_aggs{{/toJson}},\n                "from": {{from}},\n                "size": {{size}},\n                "sort": {{#toJson}}_es_sort_fields{{/toJson}}\n                }\n                ',
        params: {
          query: "",
          _es_filters: {},
          _es_aggs: {},
          _es_sort_fields: {},
          size: 10,
          from: 0,
        },
        dictionary: {},
      },
    },
  },
});
console.log(response);

PUT _application/search_application/my-example-app
{
  "indices": ["example-index"],
  "template": {
    "script": {
      "lang": "mustache",
      "source": """
        {
          "query": {
            "bool": {
              "must": [
              {{#query}}
                // ...
              {{/query}}
            ],
            "filter": {{#toJson}}_es_filters{{/toJson}}
            }
          },
          "_source": {
            "includes": ["title", "plot"]
            },
            "highlight": {
              "fields": {
                "title": { "fragment_size": 0 },
                "plot": { "fragment_size": 200 }
                }
                },
                "aggs": {{#toJson}}_es_aggs{{/toJson}},
                "from": {{from}},
                "size": {{size}},
                "sort": {{#toJson}}_es_sort_fields{{/toJson}}
                }
                """,
                "params": {
                  "query": "",
                  "_es_filters": {},
                  "_es_aggs": {},
                  "_es_sort_fields": {},
                  "size": 10,
                  "from": 0
                  },
                  "dictionary": {
                    //  add dictionary restricting _es_filters and _es_aggs params
                    // Use the dictionary example provided in repo: https://github.com/elastic/search-application-client/blob/main/bin/request_schema.json
                    }
                }
           }
}

If a match was found, this will return the results with a highlight field. For example:

{
  "hits": [
    {
      "_index": "movies",
      "_type": "_doc",
      "_id": "1",
      "_score": 0.2876821,
      "_source": {
        "title": "The Great Gatsby",
        "plot": "The Great Gatsby is a novel by F. Scott Fitzgerald that follows the story of Jay Gatsby, a wealthy and mysterious man, as he tries to win back the love of his life, Daisy Buchanan."
      },
      "highlight": {
        "title": ["The Great <em>Gatsby</em>"],
        "plot": [
          "The Great <em>Gatsby</em> is a novel by F. Scott Fitzgerald that follows the story of <em>Jay</em> <em>Gatsby</em>, a wealthy and mysterious man, as he tries to win back the love of his life, Daisy Buchanan."
        ]
      }
    }
  ]
}

When displaying the fields in the frontend, you will need to first determine if the field has a highlight. To simplify this, we provide a helper.

import Client, { Highlight } from '@elastic/search-application-client'

// example React component
const ResultsList = ({ hits } ) => {
  return hits.map((hit) => (
    <div className="result">
       <div className="title">{Highlight(hit, "title")}</div>
       <div className="description">{Highlight(hit, "plot")}</div>
    </div>
  ))
}

To use pagination, set the page number and the page size. By default, the page size is 10. The size and from parameters allow you to control the page and number of hits returned in the response.

We can do this using the client with the setSize and setFrom methods.

// page 1
const results = await request()
 .setSize(20)
 .setFrom(0)
 .search()

// page 2
const results = await request()
 .setSize(20)
 .setFrom(20)
 .search()

To use sorting, specify the field name and the sort order or pass _score to sort by relevance. Requires the _es_sort_fields_fields param in the search template. Refer to our example template to see where this is used.

By default, the results will be sorted in order of score. If you need to sort on a field other than the score, use the setSort method with an array of objects.

const results = await request()
 .setSort([{ year: 'asc' }, '_score'])
 .search()

The Search application client also supports filters and facets. To use these, you need to add two parameters:

Refer to our example template to see where these are used.

With a template that’s configured to use filters, use the setFilter method to add filters to your query.

The boilerplate template schema only supports term, range, match, nested, geo_bounding_box and geo_distance filters. If you need to use a particular clause, you can update the template schema.

Below is an example of using setFilter.

// return only "star wars" movies that are rated PG
const results = await request()
  .query('star wars')
  .setFilter({
    term: {
      'rated.enum': 'PG',
    },
  })
  .search()

The client supports the ability to configure facets with your results. Specify facets in the client initialization call. For example, say we want to add facets for actors, directors and IMDB rating.

const request = Client(
  'my-example-app', // search application name
  'https://d1bd36862ce54c7b903e2aacd4cd7f0a.us-east4.gcp.elastic-cloud.com:443', // api-host
  'api-key-from-connect-page', // api-key
  {
    facets: {
      actors: {
        type: 'terms',
        field: 'actors.keyword',
        disjunctive: true,
      },
      directors: {
        type: 'terms',
        field: 'director.keyword',
        size: 20,
        disjunctive: true,
      },
      imdbrating: {
        type: 'stats',
        field: 'imdbrating',
      },
    },
  }
)

Use the addFacetFilter method to add facets to your query.

In the following example, we only want to return movies:

const results = await request()
  .addFacetFilter('actors', 'Harrison Ford')
  .addFacetFilter('directors', 'George Lucas')
  .addFacetFilter('directors', 'Ridley Scott')
  .addFacetFilter('imdbrating', {
    gte: 7.5,
  })
  .search()

You can access the facets in the results:

{
  "took": 1,
  "timed_out": false,
  "_shards": {
    "total": 1,
    "successful": 1,
    "skipped": 0,
    "failed": 0
  },
  "hits": {
    "total": {
      "value": 2,
      "relation": "eq"
    },
    "max_score": 0,
    "hits": [
      {
        "_index": "imdb_movies",
        "_id": "tt0076759",
        "_score": 0,
        "_source": {
          "title": "Star Wars: Episode IV - A New Hope",
          "actors": [
            "Mark Hamill",
            "Harrison Ford",
            "Carrie Fisher",
            "Peter Cushing"
          ],
          "plot": "Luke Skywalker joins forces with a Jedi Knight, a cocky pilot, a wookiee and two droids to save the universe from the Empire's world-destroying battle-station, while also attempting to rescue Princess Leia from the evil Darth Vader.",
          "poster": "https://s3-eu-west-1.amazonaws.com/imdbimages/images/MV5BMTU4NTczODkwM15BMl5BanBnXkFtZTcwMzEyMTIyMw@@._V1_SX300.jpg"
        }
      },
      {
        "_index": "imdb_movies",
        "_id": "tt0083658",
        "_score": 0,
        "_source": {
          "title": "Blade Runner",
          "actors": [
            "Harrison Ford",
            "Rutger Hauer",
            "Sean Young",
            "Edward James Olmos"
          ],
          "plot": "Deckard, a blade runner, has to track down and terminate 4 replicants who hijacked a ship in space and have returned to Earth seeking their maker.",
          "poster": "https://s3-eu-west-1.amazonaws.com/imdbimages/images/MV5BMTA4MDQxNTk2NDheQTJeQWpwZ15BbWU3MDE2NjIyODk@._V1_SX300.jpg"
        }
      }
    ]
  },
  "aggregations": {},
  "facets": [
    {
      "name": "imdbrating_facet",
      "stats": {
        "min": 8.300000190734863,
        "max": 8.800000190734863,
        "avg": 8.550000190734863,
        "sum": 17.100000381469727,
        "count": 2
      }
    },
    {
      "name": "actors_facet",
      "entries": [
        {
          "value": "Harrison Ford",
          "count": 2
        },
        {
          "value": "Carrie Fisher",
          "count": 1
        },
        {
          "value": "Edward James Olmos",
          "count": 1
        },
        {
          "value": "Mark Hamill",
          "count": 1
        },
        {
          "value": "Peter Cushing",
          "count": 1
        },
        {
          "value": "Rutger Hauer",
          "count": 1
        },
        {
          "value": "Sean Young",
          "count": 1
        }
      ]
    },
    {
      "name": "directors_facet",
      "entries": [
        {
          "value": "Steven Spielberg",
          "count": 3
        },
        {
          "value": "Andrew Davis",
          "count": 1
        },
        {
          "value": "George Lucas",
          "count": 1
        },
        {
          "value": "Irvin Kershner",
          "count": 1
        },
        {
          "value": "Richard Marquand",
          "count": 1
        },
        {
          "value": "Ridley Scott",
          "count": 1
        }
      ]
    }
  ]
}