search-ui

Integrate Elastic's Search UI library into React apps for search frontends.

Updated Feb 24, 2026
One-click install
npx skills add https://github.com/kevinsweet/elastic-ide-context --skill search-ui-kevinsweet
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: search-ui
Source: https://github.com/kevinsweet/elastic-ide-context/tree/main/.cursor/skills/recipes/search-ui
Command: npx skills add https://github.com/kevinsweet/elastic-ide-context --skill search-ui-kevinsweet

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building user-friendly, fast search UIs for Elasticsearch-backed apps without writing boilerplate code.

Core Features & Use Cases

  • Provides step-by-step guidance to integrate Elastic's Search UI library into React apps, including search boxes, facets, autocomplete, and results rendering.
  • Covers connecting to a backend API or directly to Elasticsearch and supports keyword, semantic, and hybrid search patterns for production-ready experiences.
  • Includes practical use cases and implementation patterns to accelerate frontend development for search-enabled products.

Quick Start

Create a React project and render a search page by wrapping your UI components with the provided SearchProvider configuration.

Frequently Asked Questions about search-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a React search frontend for Elasticsearch without starting from scratch?

To build a React search frontend for Elasticsearch, you can use a framework that provides a ready-made SearchProvider configuration to render search boxes, facets, autocomplete, and results without writing UI boilerplate.

Can I add autocomplete and facets to my Elasticsearch search interface in React?

Yes, you can add autocomplete and facets to your Elasticsearch search interface by integrating a React-based pattern library that maps configuration directly to your index fields for these features.

What is the best way to configure keyword, semantic, and hybrid search patterns in a React UI?

The best way to configure keyword, semantic, and hybrid search patterns in a React UI is by applying a search frontend framework that supports these search types out of the box for production-ready experiences.

Does the Search UI library require a separate backend API to connect to Elasticsearch?

The Search UI library does not strictly require a separate backend API, as it supports patterns for connecting either directly to Elasticsearch or through a backend API layer.

How do I map Elasticsearch index fields to UI components in a React search application?

To map Elasticsearch index fields to UI components in a React search application, you wrap your UI components with a SearchProvider that uses clear configuration mapping to define field behaviors.

What are the limitations of using a pre-built search UI framework for Elasticsearch apps?

A limitation of using a pre-built search UI framework is that while it accelerates frontend development, developers must still understand Elasticsearch index configuration and field mapping to properly render results and facets.