Elasticsearch Search UI Components

Searchkit is an open source library which helps you build a great search experience with Elasticsearch. Works with Javascript, React, Vue, Angular, and more.

Website | Demos | Documentation | Discord

Searchkit provides a Search UI for Elasticsearch or Opensearch. With Searchkit, you can use Instantsearch components like Searchbox, refinement filters and results (and many more!) to build a search experience.

Searchkit is great for anyone who want to build a search experience quickly.

Searchkit simplifies Search UI with Elasticsearch:

• UI Search Components for React, Vue, Angular, and more
• Searchkit Node API proxies Elasticsearch requests from the browser.
• Ability to use Elasticsearch Query DSL for advanced queries

Searchkit AI Bot

Searchkit Bot will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.

Demos

• Movies Search
• Semantic Search
• Geo Search
• Camp Availability Search
• Autocomplete

Quick Start Guides

• Searchkit with Javascript
• Searchkit with React
• Searchkit with Vue
• Searchkit with Angular

Tutorials

• Searchkit with Next.js
• Semantic Search
• Searchkit with Availability Search

Codesandbox Examples

• Searchkit with JS Widgets
• Searchkit with Vue
• Searchkit with Next.js
• Proxy with Express.js

Code Examples (on Github)

• Searchkit with Next.JS
• Searchkit with Javascript
• Searchkit with Vue

Proxy Elasticsearch Quick Starts

• Searchkit with Next.js Functions
• Searchkit with Cloudflare Workers
• Searchkit with Express.js

Video Tutorials

• Searchkit Intro Video Tutorial with Instantsearch.js
• Searchkit Node API Video Tutorial

Or checkout our documentation for more examples.

Installation

Either install via npm or yarn

npm install searchkit @searchkit/api @searchkit/instantsearch-client

or via CDN

<script src="https://cdn.jsdelivr.net/npm/@searchkit/instantsearch-client@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
<script src="https://cdn.jsdelivr.net/npm/searchkit@latest"></script>

Setup Elasticsearch

Searchkit requires Elasticsearch 7.0 or higher or Opensearch 2.4 or higher.

Below we are using Docker to run Elasticsearch.

docker pull docker.elastic.co/elasticsearch/elasticsearch:8.6.2
docker network create elastic
docker run --name elasticsearch --net elastic -p 9200:9200 -p 9300:9300 -e "discovery.type=single-node" -e "xpack.security.enabled=false" -e http.cors.enabled=true -e "http.cors.allow-origin='*'" -e http.cors.allow-headers=X-Requested-With,X-Auth-Token,Content-Type,Content-Length,Authorization -e http.cors.allow-credentials=true -e network.publish_host=localhost -e xpack.security.enabled=false docker.elastic.co/elasticsearch/elasticsearch:8.6.2

then lets add an index and some data

curl --location --request PUT 'http://localhost:9200/products' \
--header 'Content-Type: application/json' \
--data-raw '{
  "mappings": {
    "properties": {
      "name": {
        "type": "text"
      },
      "description": {
        "type": "text"
      },
      "price": {
        "type": "integer"
      },
      "categories": {
        "type": "text",
        "fields": {
          "keyword": {
            "type": "keyword"
          }
        }
      }
    }
  }
}'

curl --location --request POST 'http://localhost:9200/products/_doc' \
--header 'Content-Type: application/json' \
--data-raw '{
  "name": "Apple iPhone 12 Pro Max",
  "description": "The iPhone 12 Pro Max is the most powerful iPhone ever. It has a 6.7-inch Super Retina XDR display, a Ceramic Shield front cover, and a triple-camera system with a LiDAR scanner. It also has a 5G connection, a 6-core CPU, and a 4-core GPU. The iPhone 12 Pro Max is available in 128GB, 256GB, and 512GB storage options.",
  "categories": ["phones", "apple"],
  "price": 800
}'
 
curl --location --request POST 'http://localhost:9200/products/_doc' \
--header 'Content-Type: application/json' \
--data-raw '{
  "name": "Apple iPhone 12 Pro",
  "description": "The iPhone 12 Pro is the most powerful iPhone ever. It has a 6.1-inch Super Retina XDR display, a Ceramic Shield front cover, and a triple-camera system with a LiDAR scanner. It also has a 5G connection, a 6-core CPU, and a 4-core GPU. The iPhone 12 Pro is available in 128GB, 256GB, and 512GB storage options.",
  "categories": ["phones", "apple"],
  "price": 700
}'

Setup Searchkit

Searchkit compatible with all Instantsearch frameworks. Below is an example using react-instantsearch.

import Searchkit from "searchkit"
import Client from '@searchkit/instantsearch-client'

// import your InstantSearch components
import { InstantSearch, SearchBox, Hits, RefinementList, Pagination, RangeInput } from 'react-instantsearch';

const sk = new Searchkit({
  connection: {
    host: 'http://localhost:9200',
    // with an apiKey
    // https://www.searchkit.co/docs/guides/setup-elasticsearch#connecting-with-api-key
    // apiKey: '##########'
    // with a username/password
    // https://www.searchkit.co/docs/guides/setup-elasticsearch#connecting-with-usernamepassword
    //auth: {
    //  username: "elastic",
    //  password: "changeme"
    //}
  },
  search_settings: {
    search_attributes: [{ field: 'title', weight: 3 }, 'actors', 'plot'],
    result_attributes: ['title', 'actors', 'poster', 'plot'],
    highlight_attributes: ['title'],
    facet_attributes: [
      { attribute: 'actors', field: 'actors.keyword', type: 'string' },
      { attribute: 'imdbrating', type: 'numeric', field: 'imdbrating' }
    ]
  }
})

const searchClient = Client(sk);

const App = () => (
  <InstantSearch
    indexName="imdb_movies"
    searchClient={searchClient}
  >
    <SearchBox />
    <div className="left-panel">
      <RefinementList attribute="actors" searchable={true} limit={10} />
      <RangeInput attribute="imdbrating" />
    </div>
    <div className="right-panel">
      <Hits />
      <Pagination />
    </div>
  </InstantSearch>
}

follow along with the Getting Started guide.

Hide Elasticsearch from the browser

Searchkit Node API allows you to proxy requests to Elasticsearch from the browser. This is useful if you want to hide Elasticsearch from the browser, or if you want to add user permission filters to the query.

• Searchkit with Next.js Functions
• Searchkit with Cloudflare Workers
• Searchkit with Express.js

Query Customisation

Searchkit has an out the box query builder, but you can also customise the query by passing a getQuery function to the apiClient.

const results = await apiClient.handleRequest(req.body, {
  getQuery: (query, search_attributes) => {
    return [
      {
        combined_fields: {
          query,
          fields: search_attributes,
        },
      },
    ];
  },
});

Semantic Query Search

Searchkit supports KNN query search. Below is an example of a KNN query search.

  const results = await client.handleRequest(req.body, {
    getKnnQuery(query, search_attributes, config) {
      return {
        field: 'dense-vector-field',
        k: 10,
        num_candidates: 100,
        // supported in latest version of Elasticsearch
        query_vector_builder: { 
          text_embedding: {
            model_id: 'cookie_model',
            model_text: query
          }
        }
      }
    }
  });

Follow along with the [Semant