Markprompt

Renders the pre-built Markprompt component, including chat and search views, and trigger component.

Basic example

1import { Markprompt } from '@markprompt/react';
2
3function Example() {
4  return (
5    <Markprompt
6      projectKey="YOUR-PROJECT-KEY"
7      chat={{
8        placeholder: 'Send message',
9        history: true,
10        avatars: {
11          user: '/avatars/user.png',
12          assistant: '/avatars/assistant.png',
13        },
14        defaultView: {
15          message: "Hello, I'm an AI assistant from Acme!",
16          prompts: [
17            'What is Markprompt?',
18            'How do I setup the React component?',
19            'Do you have a REST API?',
20          ],
21        },
22      }}
23      feedback={{
24        votes: true,
25        csat: true,
26      }}
27      integrations={{
28        createTicket: {
29          enabled: true,
30          provider: 'zendesk',
31        },
32      }}
33    >
34      <button>Open Markprompt</button>
35    </Markprompt>
36  );
37}

Component API

PropTypeDescription
projectKeystring

The project key associated to your project.

apiUrlstring

The base API URL. Default: "https://api.markprompt.com".

childrenReact.ReactNode

Trigger component, such as a search button or a floating chat bubble.

displayMarkpromptDisplay

The way to display the chat/search content. Default: "sheet".

stickyboolean

Enable user interactions outside of the dialog while keeping it open. Default: false.

defaultViewView

The default view to show when both chat and search are enabled. Default: "search".

layout'panels' | 'tabs'

Multi-pane layout when both search and chat are enabled. Default: "panels".

menuMenuOptions

Options for the menu component.

chatUserConfigurableOptions & ChatOptions

Options for the chat component.

searchSubmitSearchQueryOptions & SearchOptions

Options for the search component.

feedbackSubmitFeedbackOptions & FeedbackOptions

Options for the feedback component.

referencesReferencesOptions

Options for the references component.

integrationsIntegrationsOptions

Options for integrations.

triggerTriggerOptions

Options for the trigger component.

closeCloseOptions

Options for the close button.

descriptionDescriptionOptions

Options for the description.

titleTitleOptions

Options for the title component.

linkAsstring | ComponentType<any>

Component to use in place of <a>. Default: "a".

brandingBrandingOptions

Options for the title component.

debugboolean

Display debug info. Default: false.