copilot-kit

1'use client';
2 
3import type { TElement } from 'platejs';
4 
5import { faker } from '@faker-js/faker';
6import { CopilotPlugin } from '@platejs/ai/react';
7import { serializeMd, stripMarkdown } from '@platejs/markdown';
8 
9import { GhostText } from '@/registry/ui/ghost-text';
10 
11import { MarkdownKit } from './markdown-kit';
12 
13export const CopilotKit = [
14  ...MarkdownKit,
15  CopilotPlugin.configure(({ api }) => ({
16    options: {
17      completeOptions: {
18        api: '/api/ai/copilot',
19        body: {
20          instructions: `You are an advanced AI writing assistant, similar to VSCode Copilot but for general text. Your task is to predict and generate the next part of the text based on the given context.
21  
22  Rules:
23  - Continue the text naturally up to the next punctuation mark (., ,, ;, :, ?, or !).
24  - Maintain style and tone. Don't repeat given text.
25  - For unclear context, provide the most likely continuation.
26  - Handle code snippets, lists, or structured text if needed.
27  - Don't include """ in your response.
28  - CRITICAL: Always end with a punctuation mark.
29  - CRITICAL: Avoid starting a new block. Do not use block formatting like >, #, 1., 2., -, etc. The suggestion should continue in the same block as the context.
30  - If no context is provided or you can't generate a continuation, return "0" without explanation.`,
31        },
32        onError: () => {
33          // Mock the API response. Remove it when you implement the route /api/ai/copilot
34          api.copilot.setBlockSuggestion({
35            text: stripMarkdown(faker.lorem.sentence()),
36          });
37        },
38        onFinish: (_, completion) => {
39          if (completion === '0') return;
40 
41          api.copilot.setBlockSuggestion({
42            text: stripMarkdown(completion),
43          });
44        },
45      },
46      debounceDelay: 500,
47      renderGhostText: GhostText,
48      getPrompt: ({ editor }) => {
49        const contextEntry = editor.api.block({ highest: true });
50 
51        if (!contextEntry) return '';
52 
53        const prompt = serializeMd(editor, {
54          value: [contextEntry[0] as TElement],
55        });
56 
57        return `Continue the text up to the next punctuation mark:
58  """
59  ${prompt}
60  """`;
61      },
62    },
63    shortcuts: {
64      accept: {
65        keys: 'tab',
66      },
67      acceptNextWord: {
68        keys: 'mod+right',
69      },
70      reject: {
71        keys: 'escape',
72      },
73      triggerSuggestion: {
74        keys: 'ctrl+space',
75      },
76    },
77  })),
78];