Quickstart | Markprompt Documentation

In this quickstart guide, you will build a simple chatbot in Next.js that interacts with a customer and attempts to solve their issue, based on the knowledge you have given it.

Create application

Let's start by creating a Next.js application, with TypeScript and Tailwind CSS enabled.

1npx create-next-app@latest my-ai-chatbot --typescript --tailwind --eslint --app
2cd my-ai-chatbot

Install Markprompt

Install @markprompt/core and @markprompt/react via NPM or your favorite package manager.

1npm i @markprompt/core @markprompt/react

Obtain your Markprompt key

Head over to the Markprompt dashboard, navigate to your project settings, and obtain your project key.

For local development, use a test key. This allows you to access the API from a non-allowlisted domain (here, localhost).
For production, use a production key, and add your domain to the allowlist in the settings.

Once obtained, store it in an environment variable. To do so, create a .env.local file in your project root:

1touch .env.local

Edit the .env.local file:

1NEXT_PUBLIC_PROJECT_KEY="YOUR-MARKPROMPT-PROJECT-KEY"

Create a UI

Edit app/page.tsx:

1import {
2  type ChatViewMessage,
3  ChatProvider,
4  useChatStore,
5} from '@markprompt/react';
6import * as React from 'react';
7
8function Chat() {
9  const [input, setInput] = React.useState('');
10  const { messages, submitChat } = useChatStore((s) => s);
11
12  return (
13    <div className="flex h-full w-full flex-col">
14      {messages.map((message) => (
15        <div key={message.id}>
16          {message.role === 'assistant' ? 'Assistant: ' : 'User: '}
17          {message.content}
18        </div>
19      ))}
20
21      <form
22        onSubmit={(e) => {
23          e.preventDefault();
24          submitChat([{ role: 'user', content: input.trim() }]);
25          setInput('');
26        }}
27      >
28        <input
29          className="fixed inset-x-2 bottom-0 rounded border border-neutral-200 p-2"
30          value={input}
31          placeholder="Send a message"
32          onChange={(e) => setInput(e.target.value)}
33        />
34      </form>
35    </div>
36  );
37}
38
39export default function Page() {
40  return (
41    <ChatProvider projectKey={process.env.NEXT_PUBLIC_PROJECT_KEY!}>
42      <Chat />
43    </ChatProvider>
44  );
45}

The chat component uses the useChatStore hook from @markprompt/react, which provides API bindings, state management, function calling and abort handling capabilities.

Run locally

To start the application locally, run:

1npm run dev

Your support chatbot is now running! You can now ask questions to it, and it will provide answers based on the data you have indexed on Markprompt.

Remember to replace your test key with your production key when deploying publicly.

More examples

This guide is just the beginning of what you can build with the Markprompt SDK. Feel free to explore more advanced examples from our GitHub templates repository: