CLI Usage

Learn how to use the create-instantsearch-app command-line interface

The create-instantsearch-app CLI supports both interactive and non-interactive modes.

Basic Usage

create-instantsearch-app <project-directory> [options]

Interactive Mode (Default)

Run without flags to enter interactive mode:

npx create-instantsearch-app my-app

You’ll be prompted for:

1. Project Name

   The name of your application (defaults to directory name)

2. Template Selection

   Choose from InstantSearch.js, React, Vue, or other templates

3. Library Version

   Select the version of the InstantSearch library

4. Algolia Credentials

   • Application ID (defaults to latency demo)
   • Search API key (defaults to demo key)
   • Index name (defaults to instant_search)
5. Search Configuration

   • Attributes to display in results
   • Image attribute for result thumbnails
   • Attributes for faceting/filtering
6. Advanced Options

   • Search input type (autocomplete vs regular search box)
   • Query Suggestions index (for autocomplete)
   • Enable user events (Insights)

Non-Interactive Mode

Use the --no-interactive flag with other options:

create-instantsearch-app my-app \
  --template "React InstantSearch" \
  --app-id YOUR_APP_ID \
  --api-key YOUR_SEARCH_KEY \
  --index-name YOUR_INDEX \
  --no-interactive

CLI Flags

Basic Options

--name · string

The name of the application or widget

--template · string

The InstantSearch template to use (see Templates)

Examples: "InstantSearch.js", "React InstantSearch", "Vue InstantSearch"

--library-version · string

The version of the library to use

Example: "4.0.0"

Algolia Configuration

--app-id · string

Your Algolia application ID

--api-key · string

Your Algolia search API key (public, search-only)

--index-name · string

The main index for your search

Search UI Configuration

--attributes-to-display · string[]

Comma-separated list of attributes to display in search results

Example: "name,description,price"

--image-attribute · string

The attribute to use for displaying images in results

Example: "image_url"

--attributes-for-faceting · string[]

Comma-separated list of attributes to use for filtering

Example: "brand,category,color"

Other Options

--config · string

Path to a configuration file (JSON) containing all options

See Configuration for details

--no-installation · boolean

Skip automatic dependency installation

--no-interactive · boolean

Disable all interactive prompts

-v, --version · boolean

Output the version number

-h, --help · boolean

Display help information

Examples

Create React app with demo credentials

npx create-instantsearch-app my-react-app \
  --template "React InstantSearch" \
  --app-id latency \
  --api-key 6be0576ff61c053d5f9a3225e2a90f76 \
  --index-name instant_search \
  --no-interactive

Create Vue app with custom index

npx create-instantsearch-app my-vue-app \
  --template "Vue InstantSearch" \
  --app-id YOUR_APP_ID \
  --api-key YOUR_SEARCH_KEY \
  --index-name products \
  --attributes-to-display "name,description" \
  --image-attribute "thumbnail" \
  --attributes-for-faceting "brand,category" \
  --no-interactive

Skip dependency installation

npx create-instantsearch-app my-app \
  --template "InstantSearch.js" \
  --no-installation

User Events (Insights)

When prompted to “Enable user events”, selecting ‘Y’ activates the insights option. This allows Algolia to process user events like clicks and conversions, enabling powerful analytics and personalization features.

User events are supported in InstantSearch.js >= 4.55, React InstantSearch >= 7.0, and Vue InstantSearch >= 4.9.0.

Autocomplete vs Search Box

For supported templates and versions, you can choose between:

• Autocomplete: Enhanced search input with suggested searches and recent searches (requires Query Suggestions index)
• Regular search box: Standard search input field

Autocomplete is available in InstantSearch.js >= 4.52.