Website

Check out the web component example for more options.

Script tag

Paste the following to your HTML page:

1<link
2  href="https://esm.sh/@markprompt/css@0.32.3?css"
3  rel="stylesheet"
4/>
5<script type="module">
6  window.markprompt = {
7    projectKey: 'YOUR-PROJECT-KEY',
8    container: '#markprompt',
9    defaultView: 'chat',
10    display: 'sheet',
11    options: {
12      chat: {
13        assistantId: 'YOUR-ASSISTANT-ID',
14        enabled: true,
15        defaultView: {
16          message: "Hello, I'm an AI assistant from Acme!",
17          prompts: [
18            'What is Markprompt?',
19            'How do I setup the React component?',
20            'Do you have a REST API?',
21          ],
22        },
23      },
24      // ...
25    },
26  };
27</script>
28<script
29  type="module"
30  src="https://esm.sh/@markprompt/web@0.43.0/init"
31></script>
32<div id="markprompt" />

replacing YOUR-PROJECT-KEY and YOUR-ASSISTANT-ID with the values obtained from your Markprompt project.

Web component (HTML)

Paste the following to your HTML page:

1<link
2  rel="stylesheet"
3  href="https://esm.sh/@markprompt/css@0.32.3?css"
4/>
5<script type="module">
6  import { markprompt } from 'https://esm.sh/@markprompt/web@0.43.0';
7
8  const markpromptEl = document.querySelector('#markprompt');
9  markprompt('YOUR-PROJECT-KEY', markpromptEl, {
10    defaultView: 'chat',
11    display: 'sheet',
12    chat: {
13      assistantId: 'YOUR-ASSISTANT-ID',
14      enabled: true,
15      defaultView: {
16        message: "Hello, I'm an AI assistant from Acme!",
17        prompts: [
18          'What is Markprompt?',
19          'How do I setup the React component?',
20          'Do you have a REST API?',
21        ],
22      },
23    },
24    // ...
25  });
26</script>

replacing YOUR-PROJECT-KEY and YOUR-ASSISTANT-ID with the values obtained from your Markprompt project.

Web component (Node)

Install the @markprompt/web and @markprompt/css packages:

1npm install @markprompt/web @markprompt/css

In your page, add an element with id markprompt:

1<div id="markprompt" />

Import and call the markprompt function with your project key, target element, and optional parameters.

1import '@markprompt/css';
2import { markprompt } from '@markprompt/web';
3
4const markpromptEl = document.querySelector('#markprompt');
5markprompt('YOUR-PROJECT-KEY', markpromptEl, {
6  defaultView: 'chat',
7  display: 'sheet',
8  chat: {
9    assistantId: 'YOUR-ASSISTANT-ID',
10    enabled: true,
11    defaultView: {
12      message: "Hello, I'm an AI assistant from Acme!",
13      prompts: [
14        'What is Markprompt?',
15        'How do I setup the React component?',
16        'Do you have a REST API?',
17      ],
18    },
19  },
20  // ...
21});

replacing YOUR-PROJECT-KEY and YOUR-ASSISTANT-ID with the values obtained from your Markprompt project.

React

Install the @markprompt/react and @markprompt/css packages:

1npm install @markprompt/react @markprompt/css

In your React application, paste the following:

1import '@markprompt/css';
2import { Markprompt } from '@markprompt/react';
3
4export function Component() {
5  return <Markprompt
6    projectKey="YOUR-PROJECT-KEY"
7    defaultView="chat"
8    display="sheet"
9    chat={{
10      assistantId: "YOUR-ASSISTANT-ID",
11      enabled: true,
12      defaultView: {
13        message: "Hello, I'm an AI assistant from Acme!",
14        prompts: [
15          "What is Markprompt?",
16          "How do I setup the React component?",
17          "Do you have a REST API?",
18        ],
19      },
20      {/ * ... */}
21    }}
22  />;
23}

replacing YOUR-PROJECT-KEY and YOUR-ASSISTANT-ID with the values obtained from your Markprompt project.

For further customization, including CSS styling and the use of headless components and hooks, read the Markprompt SDK.

Docusaurus

For Docusaurus-powered sites, you can use the @markprompt/docusaurus-theme-search plugin.

Install the @markprompt/docusaurus-theme-search package:

1npm install @markprompt/docusaurus-theme-search

Add the following to your docusaurus.config.js file:

1const config = {
2  // ...
3  themes: ['@markprompt/docusaurus-theme-search'],
4  themeConfig: {
5    markprompt: {
6      projectKey: 'YOUR-PROJECT-KEY',
7      defaultView: 'chat',
8      display: 'sheet',
9      chat: {
10        assistantId: 'YOUR-ASSISTANT-ID',
11        enabled: true,
12        defaultView: {
13          message: 'Hello, I'm an AI assistant from Acme!',
14          prompts: [
15            'What is Markprompt?',
16            'How do I setup the React component?',
17            'Do you have a REST API?',
18          ],
19        },
20        // ...
21      }
22    },
23  },
24};

replacing YOUR-PROJECT-KEY and YOUR-ASSISTANT-ID with the values obtained from your Markprompt project.

For a full example, check out the Docusaurus plugin template.

Open/close the Markprompt component dynamically

You can open and close the Markprompt component programmatically by calling the open and close methods:

Using the script tag

1window.markprompt.open();
2window.markprompt.close();

Using the web component

1import {
2  openMarkprompt,
3  closeMarkprompt,
4} from 'https://esm.sh/@markprompt/web@0.43.0';
5
6openMarkprompt();
7closeMarkprompt();