A React component for adding GPT-4 powered search using the Markprompt API.
npm install markpromptA headless React component for building a prompt interface, based on the Markprompt API.
Check out the starter template for a fully working example: Markprompt starter template.
In Motif, paste the following import statement in an MDX, JSX or TSX file:
``jsx`
import { Markprompt } from 'https://esm.sh/markprompt';
If you have a Node-based setup, install the markprompt package via npm or yarn:
`shnpm
npm install markprompt
Usage
Example:
`jsx
import { Markprompt } from 'markprompt';function MyPrompt() {
return ;
}
`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, adaIf no model is specified,
gpt-3.5-turbo will be used.Styling
The Markprompt component is styled using Tailwind CSS, and therefore requires a working Tailwind configuration. We are planning to make it headless, for more flexible options.
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:
`jsx
projectKey="..."
model="..."
iDontKnowMessage="Sorry, I don't know!"
placeholder="Ask Acme docs..."
/>
``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.
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.
For a fully working setup based on Next.js + Tailwind, check out the Markprompt starter template.
- Twitter @markprompt
- Twitter @motifland
- Discord
This library is created by the team behind Motif
(@motifland).
MIT