@markprompt/web

Markprompt Web

A web component component for building a prompt interface, based on the Markprompt API.

Installation

Add the following script tag to your HTML page:

<script type="module" src="https://esm.sh/@markprompt/web@0.2.2-beta18" />

Usage

Then add the markprompt-web component anywhere on your page:

<markprompt-content projectKey="<project-key>" />

where project-key can be obtained in your project settings, and model is the identifier of the OpenAI model to use for completions. Supported models are:

• Chat completions: gpt-4 gpt-4-0314 gpt-4-32k gpt-4-32k-0314 gpt-3.5-turbo gpt-3.5-turbo-0301
• Completions: text-davinci-003, text-davinci-002, text-curie-001, text-babbage-001, text-ada-001, davinci, curie, babbage, ada

If no model is specified, gpt-3.5-turbo will be used.

Configuration

You can pass the following props to the component:

Prop	Default value	Description
projectKey		Your project's API key, found in the project settings.
model	gpt-3.5-turbo	The OpenAI completions model to use. Supported values: gpt-4, gpt-4-0314, gpt-4-32k, gpt-4-32k-0314, gpt-3.5-turbo, gpt-3.5-turbo-0301, text-davinci-003, text-davinci-002, text-curie-001, text-babbage-001, text-ada-001, davinci, curie, babbage, ada
settings.
iDontKnowMessage	Sorry, I am not sure how to answer that.	Fallback message in can no answer is found.
placeholder	Ask me anything...	Message to show in the input box when no text has been entered.

Example:

<Markprompt
  projectKey="..."
  model="..."
  iDontKnowMessage="Sorry, I don't know!"
  placeholder="Ask Acme docs..."
/>

Whitelisting your domain

Usage of the Markprompt API is subject to quotas, depending on the plan you have subscribed to. Markprompt has systems in place to detect abuse and excessive usage, but we nevertheless recommend being cautious when offering a prompt interface on a public website. In any case, when using the production project key, the prompt will only work on domains you have whitelisted through the Markprompt dashboard.

Local development

When developing locally, for instance on localhost, use the development test key instead. This allows you to access the API from a non-whitelisted domain. For that reason, make sure to keep this key private.

Community

• Twitter @markprompt
• Twitter @motifland
• Discord

Authors

This library is created by the team behind Motif (@motifland).