MeiliSearch Manager (meili-manager)

This is Meili-Manager, a Quasar app built to help manage your Meilisearch instance(s). You can run this locally or hosted. Currently the demo is at https://meili-manager.vercel.app/#/

Full readme below the quickstart.

Quick start

Install the dependencies

npm install
npm install -g @quasar/cli

Start the app in development mode (hot-code reloading, error reporting, etc.)

quasar dev

Lint the files

yarn lint
# or
npm run lint

Format the files

yarn format
# or
npm run format

Build the app for production

quasar build

Customize the configuration

See Configuring quasar.config.js.

Overview

What is this

This is Meili-Manager, a Quasar app built to help manage your Meilisearch instance(s). You can run this locally or hosted. Currently the demo is at https://meili-manager.vercel.app/#/

Dependancies

The npm install step should install everything you need, but certain packages are important to mention. Critical to this app's function are

• Vue InstantSearch
• Meilisearch Vue
• Meilisearch JS
• vue3-ts-jsoneditor
• Quasar CLI to install project w/vue3 vite js

---

Features

No more manual API calls to change settings!

• Instances
  • Multiple instances can be saved for quick switching between environments
• Indexes
  • List, Create, Edit, Delete
  • Statistics and status
• Settings
  • Per index, full settings object available to edit
  • Intuitive web form rather than raw JSON
• Search
  • Interactive Vue Instantsearch widgets in each index view
    • Stats
    • Search Query
    • Sort Options
    • Filters
    • Refinements
    • Hits
• Keys
  • Create, edit, update, and delete API keys
• Tasks
  • View and search through the latest 1000 tasks in real time
  • Details for each task, error details if present
• Preview mode (Experimental)
  • Customize and save a preview of your indexes
  • Work in progress with the eventual goal of easily sharing settings

---

Installation

To install you can follow the quickstart above, or host this app on the service of your choice. The demo is hosted on vercel, with the following settings:

• Build Command : quasar build
• Output Directory : dist/spa

You can also follow the quasar docs to compile this app for the platform of your choosing:

• Mobile
  • iOS or Android via Cordova or Capacitor
• Desktop
  • Uses Electron

---

Customization

PLEASE fork this and make it your own. I make no promises to maintain this over the years. All you need are vue3 (And all that implies) and the quasar docs to customize this.

Vue Instantsearch is used heavily when viewing results. See their showcase for all the things.

---

Sidebar settings

Credentials

By clicking the hamburger button in the top left, or bottom left, you can expand the sidebar settings.

Your Index url needs to be in the form of https://myIndex.com - This can be local. You API key will require the indexes.get and document.get permissions at the least to work with this tool. I recommend making a key with most permissions for a short time while you configure to your liking, then let it expire in favor of more strict keys.

Once submitted, a notification will display if any serious errors occured. If you don't immediately see a list of indexes, then your permissions aren't wide enough or your credentials are incorrect.

Endpoints/Methods used

• getVersion

---

Home page / Index list page

Data shown in the list

Here you will see a list of your indexes with their created and updated time stamps, a button to examine each, and a button to delete each.

The delete icon will give a warning that needs confirmation before it sends the delete call.

Endpoints/Methods used

• getRawIndexes
• createIndex
• deleteIndex

---

Index detail page

Top Card

Overview Tab

In the overview tab you can see the results of the getStats endpoint in a friendly way.

• Count of records in the index
• Primary key of the index if set
• Indexing true/false
• Field Distribution table

The table is limited to 1000 fields

Settings Tab

In the settings tab you can review and update all of the settings about an index. The settings object is displayed in full (And real time) if you expand the Raw Settings JSON section at the top. This is a read only view, but may be easier to understand at first than the full form.

Pleasepleaseplease follow the link there for the settings documentation- each field has it's own purpose that needs to be understood.

While the form is stored in your local memory- it is not pushed to your meilisearch instance until you press the "Submit" button, for safety.

Instant Search demo area

Below the top card you can interact with the index documents. There is a "New" button to create an example document. This is not the recommended way to add documents.

The statistics shown are produced from the Vue Instantsearch components.

The search query is a default Vue Instantsearch component pointed at the current index.

The sort options are derived from the attributes in the sortable attributes setting.

The current refinements area will display any filters selected.

Between the refinements and the document list, there is a dynamic filter area. Whatever attributes you have in your filterable attributes will be displayed here as simple default filter widgets.

Result Cards

Each card header displays the documents "name" field value, if present, and an "EDIT" button.

The edit button will take you to a full featured JSON editor, just as creating a new record would. Any incorrect json data will be rejected, and the form reloaded.

The body of the cards will display an image, and the fields of the document in a table. Any nested or complex fields will be shown as a JSON string. Use the "EDIT" button to better examine complex documents.

The image displayed will be assumed to be a URL in a one of three fields (First one populated is used):

• picture_url

• image

• image_url

  Change this to your needs in your fork.

Endpoints/Methods used

• index
• getStats
• getSettings
• fetchPrimaryKey
• updateSettings
• waitForTask

---

Document detail page

Overview

The document detail page can update your documents via raw json. The json editor used has all the features you could ever need, including JMESpath query language. See vue3-ts-jsoneditor for full documentation.

Endpoints/Methods used

• index
• fetchPrimaryKey
• getDocument
• addDocuments
• waitForTask

---

Keys page

Overview

Similar to the settings tab, you can review the entire response of the getKeys endpoint by clicking the "Raw Keys JSON" button.

Below that is the "New Key Form" - all fields are required. The list of available actions is static, while the list of indexes is dynamic based on your key's permissions to use the getIndexes endpoints. Wildcards are not allowed here, but can be used via direct api calls.

Please review the Keys documentation to fully understand the available settings.

The first thing you should do with your master key is create an admin key with the minimum priveleges necessary!

Endpoints/Methods used

• getKeys
• updateKey
• deleteKey
• createKey
• getRawIndexes

---

Tasks page

Overview

The tasks page shows you a paginated, sortable, searchable table of all of the tasks as of the page loading. This table is limited to the most recent 1000 tasks.

This page is a good way to review if an index is busy, or if a particular task failed/succeeded.

Endpoints/Methods used

• getTasks

---

Preview Mode

A more detail oriented preview with the eventual goal of being sharable. Save as many preview configurations as you like and switch the index/instance powering them independently.

Settings currently available:

• Name (For load/save key locally)
• Pagination
• Pagination Size
• Show Refinements
• Show Clear refinements
• Attribute based options:
  • You can manually enter options by typing and pressing enter
    • eg attributeName.subProperty is valid assuming subProperty exists
  • Sortable Attributes
    • Auto generate asc and desc sort options based on attributes entered here
  • Facet/Filter Attributes
    • Auto generate filters based on attributes
      • Currently just refinement-list but the goal is to have more options per attribute for other filter types
  • Image Attributes
    • Treat the entered attributes as src/href for image(s) for each result
  • Heading Attributes
    • Show the attributes content above the content as H6's for each result
      • More control over this is on the road map
  • Description Attributes
    • Show the attributes content below the heading for each result