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

Prop Type Description Default
projectKey string

The project key associated to your project.

apiUrl string

The base API URL.

"https://api.markprompt.com"
headers { [key: string]: string }

Headers to pass along the request.

children React.ReactNode

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

display MarkpromptDisplay

The way to display the chat/search content.

"sheet"
sticky boolean

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

false
defaultView View

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

"search"
layout 'panels' | 'tabs'

Multi-pane layout when both search and chat are enabled.

"panels"
menu MenuOptions

Options for the menu component.

chat UserConfigurableOptions & ChatOptions

Options for the chat component.

search SubmitSearchQueryOptions & SearchOptions

Options for the search component.

feedback SubmitFeedbackOptions & FeedbackOptions

Options for the feedback component.

references ReferencesOptions

Options for the references component.

integrations IntegrationsOptions

Options for integrations.

trigger TriggerOptions

Options for the trigger component.

close CloseOptions

Options for the close button.

description DescriptionOptions

Options for the description.

title TitleOptions

Options for the title component.

linkAs string | ComponentType<any>

Component to use in place of <a>.

"a"
showBranding boolean

Options for the title component.

true
branding BrandingOptions

Options for the title component.

debug boolean

Display debug info.

false