Developing a Search UI with UI Kits

Build a minimal custom search UI with a SearchStax UI Kit. This guide covers setup that applies across frameworks. For exact component markup and framework-specific configuration, use the corresponding Getting Started guide or accelerator sample.

Prerequisites

Before you start, you'll need:

• A SearchStax Site Search account
• Access to the Dashboard
• A Search App with indexed content
• Your Search App endpoints and a Read Only search credential
• Permission to modify your application's build and configuration

Gather Your Configuration

The UI Kits use these common configuration values:

If you plan to use features such as Related Searches or Geocoding, you'll also need the corresponding endpoints and keys.

Note: Use Read Only credentials in client applications. Don't embed Read & Write credentials in client code. To keep your Search endpoint and Read Only credential out of browser source, see Hide Tokens and Endpoints in UI Kits.

Choose Your Path

You can start with an accelerator page or install a UI Kit directly. If you want a prebuilt search experience instead of developing your own UI, see Adding Search with the Hosted Search Experience.

Path A: Run an Accelerator Page

Use an accelerator page to connect a working sample UI to your Search App before adapting it for your application:

• JavaScript accelerator
• React/Next.js accelerator
• Angular accelerator
• Vue accelerator

Run the JavaScript Accelerator

Clone the samples repository:

git clone https://github.com/searchstax/searchstudio-ux-samples.git

Go to the JavaScript accelerator directory:

cd searchstudio-ux-samples/pages/js/searchstax-accelerator-page

Install the dependencies:

npm install

Open pages/js/config.js and replace the sample configuration with values from your Search App. Verify:

• searchURL uses your Select endpoint (/emselect).
• suggesterURL uses your Auto-Suggest endpoint (/emsuggest).
• searchAuth uses your Read Only search credential.
• authType matches your Search App authentication type.
• If your plan and implementation include Analytics, trackApiKey uses your Analytics Tracking key.

Start the development server:

npm run dev

Open the local URL shown in your terminal and run a search. Confirm that the page returns content from your Search App.

Follow the README in the corresponding accelerator directory when using another framework.

Path B: Install a UI Kit

Choose the framework used by your application:

Start with the Input and Results widgets, then add the widgets your search experience requires. See Common - Widget Configuration for the current widget set and links to framework-specific documentation.

For framework-specific customizations such as facet ordering, use the hooks and widget configuration documented for your framework rather than copying implementation code from this overview.

Validate Your Search UI

Before integrating the UI into your production experience:

• Run a search and confirm that results come from your indexed content.
• Confirm that autosuggest requests use your /emsuggest endpoint if suggestions are enabled.
• If requests fail with 401 or 403, verify your search credential and authType.
• If requests return 404, verify the endpoint URL and path.
• Test the page using the browsers and screen sizes your site supports.

Once the basic integration works, continue with the framework-specific widget documentation and the Pre-Launch Checklist.