Explore — Quick Start

Suggest questions on an article page.

Show AI-generated questions on an article page. A reader picks one and lands on your answers page, so one article leads to the next.

This takes about ten minutes. At the end you have a working page.

Before you start

Explore needs activation for your environment. Miso generates the related questions on a schedule, and that job runs only for the environments Miso turns it on for. Ask your Miso representative, or write to support@askmiso.com, before you start.

Get your publishable API key. Copy it from Overview in the Miso Dashboard. The SDK runs in the browser, so it takes the publishable key, never the secret key. See Authentication.

Put your content in Miso. Explore works from your catalog. Upload your content first — see Integrating Your Data — and confirm the result in Dashboard ▸ Data Sets ▸ Catalog.

No content of your own yet? Load a real one in a few minutes. Example: Wikinews parses a free public archive of about 20,900 news articles and sends it to Miso, so you have something to ask questions about.

Have an answers page. A reader who picks a question needs somewhere to land. Build it with Ask — Quick Start first, or point useLink at any page that accepts a question.

1. Install the SDK

As a node module

In your project directory, run:

npm install --save @miso.ai/client-sdk

Then import MisoClient from the SDK:

import MisoClient from '@miso.ai/client-sdk';

Using a script tag

<script async src="https://cdn.jsdelivr.net/npm/@miso.ai/client-sdk@latest/dist/umd/miso.min.js"></script>

The script tag loads the SDK asynchronously, so your code must wait for it. Use the misocmd queue, which runs your function as soon as the SDK is ready:

const misocmd = window.misocmd || (window.misocmd = []);
misocmd.push(() => {
  const MisoClient = window.MisoClient;
  // Your code goes here.
});

2. Add the elements

Put the Miso elements where the questions belong, usually under the article body:

<miso-explore>
  <miso-related-questions></miso-related-questions>
  <miso-query></miso-query>
</miso-explore>

miso-related-questions lists the generated questions. miso-query adds a box for a reader who wants to ask their own.

3. Start the workflow

const misocmd = window.misocmd || (window.misocmd = []);
misocmd.push(() => {
  const client = new MisoClient('YOUR_PUBLISHABLE_API_KEY');
  const workflow = client.ui.explore;

  // Which article to generate questions for. This id must exist
  // in your catalog.
  workflow.useApi({ product_id: 'art_001' });

  // Where a question sends the reader.
  workflow.useLink(question => `/ask.html?q=${encodeURIComponent(question)}`);

  workflow.start();
});

Three things to set:

Call	What it controls
`useApi({ product_id })`	The article Miso reads. Render this from your CMS, so each page passes its own id.
`useLink(fn)`	The destination. Return the URL of your answers page.
`start()`	Runs the workflow and renders the questions.

The complete page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Miso Explore</title>
  <script async src="https://cdn.jsdelivr.net/npm/@miso.ai/client-sdk@latest/dist/umd/miso.min.js"></script>
</head>
<body>
  <article>
    <h1>Your article title</h1>
    <p>The article body.</p>
  </article>

  <miso-explore>
    <miso-related-questions></miso-related-questions>
    <miso-query></miso-query>
  </miso-explore>

  <script>
    const misocmd = window.misocmd || (window.misocmd = []);
    misocmd.push(() => {
      const client = new MisoClient('YOUR_PUBLISHABLE_API_KEY');
      const workflow = client.ui.explore;

      workflow.useApi({ product_id: 'art_001' });

      workflow.useLink(question =>
        `/ask.html?q=${encodeURIComponent(question)}`
      );

      workflow.start();
    });
  </script>
</body>
</html>

Check it works

Open the page. Miso lists questions about that one article. Select one, and your answers page opens with the question in the URL.

The related-questions panel under an article.

Symptom	Cause
No questions appear	Explore is not enabled for this environment, or the `product_id` is not in your catalog.
The questions are generic	The article has little text. Send the body in `html` or `description`.
A question opens the wrong page	`useLink` returns a path your site does not serve.

Ask — Quick Start — the answers page these questions lead to.
Hybrid Search — Quick Start — search results and an answer together.
Explore workflow reference — every element and option.
Explore Questions API — generate the questions from your own back end.

Ask — Quick Start

Hybrid Search — Quick Start