> ## 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.

# Ask Module Quick Start

> Integrate Miso's AI-driven Q&A interface into your website in minutes.

## Overview

The **Ask module** allows your users to ask questions in natural language and receive AI-generated answers based on your content. This guide walks you through the four steps to get it running.

<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/dashboard-api-keys.png?fit=max&auto=format&n=3qrR--X4Z69DKEAH&q=85&s=9e53eb0ec126b1c94863650a1433f741" alt="Miso Dashboard — select your environment and copy your API keys" width="1509" height="830" data-path="images/quickstart-ask/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">
    Before the Ask module can answer questions, you need to 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" />
  </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 Ask UI to Your Page">
    **Place the container element** in your HTML where you want the Ask interface to appear:

    ```html theme={null}
    <body>
      <div id="miso-ask-combo" class="miso-ask-combo"></div>
    </body>
    ```

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

    ```html theme={null}
    <script>
      const misocmd = window.misocmd || (window.misocmd = []);
      misocmd.push(async () => {
        // setup client
        const MisoClient = window.MisoClient;
        const client = new MisoClient('YOUR_PUBLISHABLE_API_KEY');
        const rootWorkflow = client.ui.ask;

        // wait for styles to be loaded
        await client.ui.ready;

        // render DOM and get element references
        // default templates are available since v1.9.1
        const defaults = MisoClient.ui.defaults.ask;
        const templates = defaults.templates;
        const rootElement = document.querySelector('#miso-ask-combo');
        rootElement.innerHTML = templates.root();

        // setup workflows
        // uncomment the following lines if your SDK version is older than v1.12.5
        // defaults.wireFollowUps(client, rootElement.querySelector(`.miso-ask-combo__follow-ups`));
        // defaults.wireRelatedResources(client, rootElement.querySelector(`.miso-ask-combo__related-resources`));

        // start query if specified in URL parameters
        rootWorkflow.autoQuery();
      });
    </script>
    ```

    <Tip>
      Replace `YOUR_PUBLISHABLE_API_KEY` with the key obtained in Step 1. To test, open the page in a browser and add `?q=your+question` to the URL.
    </Tip>
  </Step>
</Steps>

## Complete Example

Here is a minimal working HTML file that puts it all together:

```html theme={null}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Miso Ask 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>
  <div id="miso-ask-combo" class="miso-ask-combo"></div>

  <script>
    const misocmd = window.misocmd || (window.misocmd = []);
    misocmd.push(async () => {
      // setup client
      const MisoClient = window.MisoClient;
      const client = new MisoClient('YOUR_PUBLISHABLE_API_KEY');
      const rootWorkflow = client.ui.ask;

      // wait for styles to be loaded
      await client.ui.ready;

      // render DOM and get element references
      // default templates are available since v1.9.1
      const defaults = MisoClient.ui.defaults.ask;
      const templates = defaults.templates;
      const rootElement = document.querySelector('#miso-ask-combo');
      rootElement.innerHTML = templates.root();

      // setup workflows
      // uncomment the following lines if your SDK version is older than v1.12.5
      // defaults.wireFollowUps(client, rootElement.querySelector(`.miso-ask-combo__follow-ups`));
      // defaults.wireRelatedResources(client, rootElement.querySelector(`.miso-ask-combo__related-resources`));

      // start query if specified in URL parameters
      rootWorkflow.autoQuery();
    });
  </script>
</body>
</html>
```

Save this as `client_sdk_test_ask.html`, open it in a browser, and append `?q=media` to the URL to see the Ask module in action.

## Live Demo & Visuals

Once configured, the Miso Ask module provides a professional, interactive UI out of the box.

To verify your setup is working:

1. Open `client_sdk_test_ask.html` in a browser.
2. Append `?q=media` to the URL — you should see an AI-generated answer based on your uploaded corpus, along with follow-up suggestions and related resources.

<img src="https://mintcdn.com/miso/3qrR--X4Z69DKEAH/images/quickstart-ask/ask-demo-result.png?fit=max&auto=format&n=3qrR--X4Z69DKEAH&q=85&s=9ea4606f90f236c742c90717213d72e4" alt="Ask module — AI-generated answer for the query &#x22;media&#x22;" width="1879" height="828" data-path="images/quickstart-ask/ask-demo-result.png" />

<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="Ask 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/ask/templates/">
    Customize the layout and content of Ask UI elements.
  </Card>

  <Card title="Elements Reference" icon="code" href="https://misoai.github.io/miso-client-js-sdk/answers/ask/elements/">
    Browse all customizable UI components available in the Ask module.
  </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="Ask Questions API" icon="message-question" href="/api-reference/ask-apis/ask-questions-api">
    The underlying API powering the Ask module Q\&A responses.
  </Card>

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