@markprompt/web

@markprompt/web

A prebuilt version of the Markprompt dialog, based on @markprompt/react, built with Preact for bundle-size savings. Viable for use from vanilla JavaScript or any framework.

Table of Contents

• Installation
• Usage
• Usage via <script> tag
• API
  • markprompt(projectKey, container, options?)
    • Arguments
    • Options
• Documentation
• Community
• Authors
• License

Installation

Install the package from NPM:

npm add @markprompt/web @markprompt/css

Usage

Include the CSS on your page, via a link tag or by importing it in your JavaScript:

<!-- load from a CDN: -->
<link rel="stylesheet" href="https://esm.sh/@markprompt/css@0.1.1?css" />

import '@markprompt/css';

Call the markprompt function with your project key:

import { markprompt } from '@markprompt/web';

const markpromptEl = document.querySelector('#markprompt');

markprompt('<project-key>', markpromptEl, {
  references: {
    transformReferenceId: (referenceId) => ({
      text: referenceId.replace('-', ' '),
      href: `/docs/${referenceId}`,
    }),
  },
});

where project-key can be obtained in your project settings on Markprompt.com.

Options are optional and allow you to configure the texts used in the component to some extent. You will most likely want to pass transformReferenceId to transform your reference ids into links to your corresponding documentation.

type Options = {
  /** Props for the close modal button */
  close?: {
    /** Aria-label for the close modal button */
    label?: string;
  };
  /** Props for the description */
  description?: {
    /** Whether to hide the description, default: `true` */
    hide?: boolean;
    /** Text for the description */
    text?: string;
  };
  /** Props for the prompt */
  prompt?: {
    /** Label for the prompt input, default: `Ask me anything…` */
    label?: string;
    /** Placeholder for the prompt input, default: `Ask me anything…` */
    placeholder?: string;
  };
  references?: {
    /** Callback to transform a reference id into an href and text */
    transformReferenceId?: (referenceId: string) => {
      href: string;
      text: string;
    };
    /** Loading text, default: `Fetching relevant pages…` */
    loadingText?: string;
    /** References title, default: `Answer generated from the following sources:` */
    referencesText?: string;
  };
  search?: {
    /** Enable search **/
    enable?: boolean;
    /** Callback to transform a search result into an href */
    getResultHref?: (result: FlattenedSearchResult) => string;
  };
  /** Props for the trigger */
  trigger?: {
    /** Aria-label for the trigger button */
    label?: string;
  };
  /** Props for the title */
  title?: {
    /** Whether to hide the title, default: `true` */
    hide?: boolean;
    /** Text for the title: default `Ask me anything` */
    text?: string;
  };
};

Styles are easily overridable for customization via targeting classes. Additionally, see the styling section in our documentation for a full list of variables.

Usage via <script> tag

Besides initializing the Markprompt component yourselves from JavaScript, you can load the script from a CDN. You can attach the options for the Markprompt component to the window prior to loading our script:

<link
  rel="stylesheet"
  href="https://unpkg.com/@markprompt/css@0.1.1/markprompt.css"
/>
<script>
  window.markprompt = {
    projectKey: `<your-project-key>`,
    container: `#markprompt`,
    options: {
      references: {
        transformReferenceId: (referenceId) => ({
          text: referenceId.replace('-', ' '),
          href: `/docs/${referenceId}`,
        }),
      },
    },
  };
</script>
<script
  async
  src="https://unpkg.com/@markprompt/web@0.4.1/dist/init.js"
></script>

API

markprompt(projectKey, container, options?)

Render a Markprompt dialog button.

Arguments

• projectKey (string): Your Markprompt project key.
• container (HTMLElement | string): The element or selector to render Markprompt into.
• options (object): Options for customizing Markprompt.

Options

• completionsUrl (string): URL at which to fetch completions
• iDontKnowMessage (string): Message returned when the model does not have an answer
• model (OpenAIModelId): The OpenAI model to use
• promptTemplate (string): The prompt template
• temperature (number): The model temperature
• topP (number): The model top P
• frequencyPenalty (number): The model frequency penalty
• presencePenalty (number): The model present penalty
• maxTokens (number): The max number of tokens to include in the response
• sectionsMatchCount (number): The number of sections to include in the prompt context
• sectionsMatchThreshold (number): The similarity threshold between the input question and selected sections
• signal (AbortSignal): AbortController signal
• close.label (string): aria-label for the close modal button. (Default: "Close Markprompt")
• decription.hide (boolean): Visually hide the description. (Default true)
• decription.text (string): Description text.
• prompt.label )string): Label for the prompt input. (Default "Your prompt")
• prompt.placeholder )string): Placeholder for the prompt input. (Default "Ask me anything…")
• references.transformReferenceId (Function): Callback to transform a reference id into an href and text.
• references.loadingText (string) Loading text. (Default: Fetching relevant pages…)
• references.referencesText (string): References title. (Default: "Answer generated from the following sources:")
• trigger.label (string): aria-label for the open button. (Default: "Open Markprompt")
• title.hide (boolean): Visually hide the title. (Default: true)
• title.text (string): Text for the title. (Default: "Ask me anything")
• showBranding (boolean): Show Markprompt branding. (Default: true)

Documentation

The full documentation for @markprompt/web can be found on the Markprompt docs.

Community

• Twitter @markprompt
• Discord

Authors

This library is created by the team behind Markprompt (@markprompt).

License

MIT © Motif