> ## Documentation Index
> Fetch the complete documentation index at: https://docs.miso.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Explore Module Quick Start

> Help users discover content through curated, AI-generated related questions.

## Overview

The **Explore module** is designed to help your users discover content through curated questions — think of it as a personalized tour guide for your content library. Unlike the Ask module (which answers specific questions), Explore surfaces related questions based on the article a user is currently reading.

<Steps>
  <Step title="Obtain Your API Key">
    Log in to the [Miso Dashboard](https://dojo.askmiso.com), select your target environment (e.g., **Production**), and navigate to the **Overview** section to copy your **Publishable API Key**.

    <img src="https://mintcdn.com/miso/3qrR--X4Z69DKEAH/images/quickstart-ask/explore-dashboard-api-keys.png?fit=max&auto=format&n=3qrR--X4Z69DKEAH&q=85&s=1a1c5db054dfbef41ceab98aa2405d47" alt="Miso Dashboard — select your environment and copy your API keys" width="1509" height="830" data-path="images/quickstart-ask/explore-dashboard-api-keys.png" />

    <Note>
      There is one publishable key and one secret key per environment. The publishable key is used in client-side code; the secret key is used for server-side API calls.
    </Note>
  </Step>

  <Step title="Upload Your Corpus via API">
    Upload your content to Miso using the [**Product / Content Upload API**](/api-reference/product-content-apis/product-content-upload-api). You can do this with any HTTP client — the steps below use [Postman](https://www.postman.com/).

    **Endpoint** — [View full API reference](/api-reference/product-content-apis/product-content-upload-api)

    ```
    POST https://api.askmiso.com/v1/products
    ```

    **Step 1 — Set your request headers**

    In Postman, go to the **Headers** tab and add your Secret API Key:

    | Header         | Value               |
    | -------------- | ------------------- |
    | `X-API-KEY`    | Your Secret API Key |
    | `Content-Type` | `application/json`  |

    <img src="https://mintcdn.com/miso/3qrR--X4Z69DKEAH/images/quickstart-ask/postman-headers.png?fit=max&auto=format&n=3qrR--X4Z69DKEAH&q=85&s=327ba4b42fa7f15bf9e1576166f7d0f6" alt="Postman — set the X-API-KEY header with your Secret API Key" width="2048" height="395" data-path="images/quickstart-ask/postman-headers.png" />

    **Step 2 — Add your request body**

    Switch to the **Body** tab, select **raw → JSON**, and paste your corpus data:

    ```json theme={null}
    {
      "data": [
        {
          "product_id": "art_001",
          "title": "Your Article Title Here",
          "url": "https://yoursite.com/your-article",
          "cover_image": "https://yoursite.com/cover.png",
          "description": "A brief description of the article content.",
          "html": "" // Full article HTML content, JSON-escaped
        },
        {
          "product_id": "art_002",
          "title": "Another Article Title",
          "url": "https://yoursite.com/another-article",
          "cover_image": "https://yoursite.com/cover2.png",
          "description": "Another article description.",
          "html": "" // Full article HTML content, JSON-escaped
        }
      ]
    }
    ```

    **Step 3 — Send and verify**

    Click **Send**. A `200 OK` response confirms the corpus has been uploaded successfully.

    <img src="https://mintcdn.com/miso/3qrR--X4Z69DKEAH/images/quickstart-ask/postman-body-200ok.png?fit=max&auto=format&n=3qrR--X4Z69DKEAH&q=85&s=8b84248b50ff9823d77b87efa8c298e9" alt="Postman — request body with JSON data and 200 OK response" width="2048" height="1200" data-path="images/quickstart-ask/postman-body-200ok.png" />

    You can verify the upload under **Miso Dashboard → Data Sets → Catalog**.

    <img src="https://mintcdn.com/miso/6VnZ2gM4VtDSnL2E/images/quickstart-ask/dashboard-catalog.png?fit=max&auto=format&n=6VnZ2gM4VtDSnL2E&q=85&s=6b7e24b179abdee3ecd13d43bd5b9260" alt="Miso Dashboard — Data Sets → Catalog showing uploaded articles" width="689" height="829" data-path="images/quickstart-ask/dashboard-catalog.png" />

    <Note>
      To generate related questions for the Explore module, contact [Miso support](mailto:support@askmiso.com) to add your target environment to the related questions cronjob.
    </Note>
  </Step>

  <Step title="Install the Miso SDK">
    Add the Miso JavaScript SDK to your webpage using either method:

    <Tabs>
      <Tab title="npm (Node Module)">
        Install the SDK via npm:

        ```bash theme={null}
        npm install --save @miso.ai/client-sdk
        ```

        Then import it in your JavaScript file:

        ```js theme={null}
        import MisoClient from '@miso.ai/client-sdk';
        ```
      </Tab>

      <Tab title="Script Tag">
        Add the following to your `<head>`:

        ```html theme={null}
        <script async src="https://cdn.jsdelivr.net/npm/@miso.ai/client-sdk@1.12.7/dist/umd/miso.min.js"></script>
        ```

        Since the SDK loads asynchronously, use the `misocmd` queue to ensure your code runs only after the SDK is ready:

        ```js theme={null}
        const misocmd = window.misocmd || (window.misocmd = []);
        misocmd.push(() => {
          const MisoClient = window.MisoClient;
          // Your initialization code here
        });
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Add the Explore UI to Your Page">
    **Place the Explore elements** in your HTML where you want related questions to appear:

    ```html theme={null}
    <body>
      <miso-explore>
        <miso-related-questions></miso-related-questions>
        <!-- miso-query support is available since SDK v1.9.1 -->
        <miso-query></miso-query>
      </miso-explore>
    </body>
    ```

    **Configure the workflow** by adding the following script:

    ```html theme={null}
    <script>
      const misocmd = window.misocmd || (window.misocmd = []);
      misocmd.push(() => {
        // work with MisoClient
        const MisoClient = window.MisoClient;

        // 1. create a Miso client instance and access the explore workflow
        const client = new MisoClient('YOUR_PUBLISHABLE_API_KEY');
        const workflow = client.ui.explore;

        // 2. tell the workflow which article you want to generate questions against
        //    the product_id must match the ones in your catalog
        workflow.useApi({
          product_id: 'art_001',
        });

        // 3. tell the workflow how to get to the answers page given a question
        //    the path must match the path of the answers page in your website
        workflow.useLink(question =>
          `client_sdk_test_ask.html?q=${encodeURIComponent(question)}`
        );

        // 4. kick off the workflow
        workflow.start();
      });
    </script>
    ```

    <Tip>
      Replace `YOUR_PUBLISHABLE_API_KEY` with the key from Step 1, and set `product_id` to match an existing article in your catalog. The `useLink` function controls where users land when they click a related question.
    </Tip>
  </Step>
</Steps>

## Complete Example

Here is a minimal working HTML file:

```html theme={null}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Miso Explore Demo</title>
  <script async src="https://cdn.jsdelivr.net/npm/@miso.ai/client-sdk@1.12.7/dist/umd/miso.min.js"></script>
</head>
<body>
  <miso-explore>
    <miso-related-questions></miso-related-questions>
    <miso-query></miso-query>
  </miso-explore>

  <script>
    const misocmd = window.misocmd || (window.misocmd = []);
    misocmd.push(() => {
      // work with MisoClient
      const MisoClient = window.MisoClient;

      // 1. create a Miso client instance and access the explore workflow
      const client = new MisoClient('YOUR_PUBLISHABLE_API_KEY');
      const workflow = client.ui.explore;

      // 2. tell the workflow which article you want to generate questions against
      //    the product_id must match the ones in your catalog
      workflow.useApi({
        product_id: 'art_001',
      });

      // 3. tell the workflow how to get to the answers page given a question
      //    the path must match the path of the answers page in your website
      workflow.useLink(question =>
        `client_sdk_test_ask.html?q=${encodeURIComponent(question)}`
      );

      // 4. kick off the workflow
      workflow.start();
    });
  </script>
</body>
</html>
```

Save as `client_sdk_test_explore.html` and open in a browser to see the Explore module displaying related questions for the specified article.

## Live Demo & Visuals

Once configured, the Miso Explore module provides a clean, interactive UI out of the box.

To verify your setup is working:

1. Open `client_sdk_test_explore.html` in a browser.
2. The module will display AI-generated related questions based on the article specified by `product_id`.

<img src="https://mintcdn.com/miso/3qrR--X4Z69DKEAH/images/quickstart-ask/ask-demo-related-questions.png?fit=max&auto=format&n=3qrR--X4Z69DKEAH&q=85&s=9e9005ad183d677b905d568e68d0f016" alt="Explore module — related questions panel" width="1915" height="158" data-path="images/quickstart-ask/ask-demo-related-questions.png" />

<Note>
  API keys can be passed via the `api_key` query parameter or the `X-API-KEY` request header. There is one publishable key and one secret key per environment — use the **publishable key** in client-side code and the **secret key** for server-side API calls.
</Note>

## Next Steps

<CardGroup cols={2}>
  <Card title="Template Helpers" icon="paintbrush" href="https://misoai.github.io/miso-client-js-sdk/answers/explore/">
    Learn how to customize the Explore module UI.
  </Card>

  <Card title="Ask Module Quick Start" icon="message-question" href="/introduction/quickstart-ask">
    Set up the Ask module to answer user questions.
  </Card>

  <Card title="Product / Content Upload API" icon="upload" href="/api-reference/product-content-apis/product-content-upload-api">
    Full reference for uploading your corpus to Miso.
  </Card>

  <Card title="QA Questions API" icon="list-check" href="/api-reference/qa-apis/qa-questions">
    The underlying API that powers related question generation for the Explore module.
  </Card>

  <Card title="Authentication" icon="key" href="/api-reference/authentication">
    Learn how API keys work and how to authenticate your requests.
  </Card>
</CardGroup>