Copilot

import { createPlateEditor } from 'platejs/react';
import { CopilotKit } from '@/components/editor/plugins/copilot-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...CopilotKit,
    // Place tab-using plugins after CopilotKit to avoid conflicts
    // IndentPlugin,
    // TabbablePlugin,
  ],
});Copy

OPENAI_API_KEY="your-api-key"Copy

import { CopilotPlugin } from '@platejs/ai/react';
import { MarkdownPlugin } from '@platejs/markdown';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    MarkdownPlugin,
    CopilotPlugin,
    // Place tab-using plugins after CopilotPlugin to avoid conflicts
    // IndentPlugin,
    // TabbablePlugin,
  ],
});Copy

import { CopilotPlugin } from '@platejs/ai/react';
import { serializeMd, stripMarkdown } from '@platejs/markdown';
import { GhostText } from '@/components/ui/ghost-text';
 
const plugins = [
  // ...otherPlugins,
  MarkdownPlugin.configure({
    options: {
      remarkPlugins: [remarkMath, remarkGfm, remarkMdx],
    },
  }),
  CopilotPlugin.configure(({ api }) => ({
    options: {
      completeOptions: {
        api: '/api/ai/copilot',
        onError: () => {
          // Mock the API response. Remove when you implement the route /api/ai/copilot
          api.copilot.setBlockSuggestion({
            text: stripMarkdown('This is a mock suggestion.'),
          });
        },
        onFinish: (_, completion) => {
          if (completion === '0') return;
 
          api.copilot.setBlockSuggestion({
            text: stripMarkdown(completion),
          });
        },
      },
      debounceDelay: 500,
      renderGhostText: GhostText,
    },
    shortcuts: {
      accept: { keys: 'tab' },
      acceptNextWord: { keys: 'mod+right' },
      reject: { keys: 'escape' },
      triggerSuggestion: { keys: 'ctrl+space' },
    },
  })),
];Copy

import type { NextRequest } from 'next/server';
 
import { createOpenAI } from '@ai-sdk/openai';
import { generateText } from 'ai';
import { NextResponse } from 'next/server';
 
export async function POST(req: NextRequest) {
  const {
    apiKey: key,
    model = 'gpt-4o-mini',
    prompt,
    system,
  } = await req.json();
 
  const apiKey = key || process.env.OPENAI_API_KEY;
 
  if (!apiKey) {
    return NextResponse.json(
      { error: 'Missing OpenAI API key.' },
      { status: 401 }
    );
  }
 
  const openai = createOpenAI({ apiKey });
 
  try {
    const result = await generateText({
      abortSignal: req.signal,
      maxTokens: 50,
      model: openai(model),
      prompt: prompt,
      system,
      temperature: 0.7,
    });
 
    return NextResponse.json(result);
  } catch (error) {
    if (error instanceof Error && error.name === 'AbortError') {
      return NextResponse.json(null, { status: 408 });
    }
 
    return NextResponse.json(
      { error: 'Failed to process AI request' },
      { status: 500 }
    );
  }
}Copy

CopilotPlugin.configure(({ api }) => ({
  options: {
    completeOptions: {
      api: '/api/ai/copilot',
      body: {
        system: {
          system: `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.
 
Rules:
- Continue the text naturally up to the next punctuation mark (., ,, ;, :, ?, or !).
- Maintain style and tone. Don't repeat given text.
- For unclear context, provide the most likely continuation.
- Handle code snippets, lists, or structured text if needed.
- Don't include """ in your response.
- CRITICAL: Always end with a punctuation mark.
- 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.
- If no context is provided or you can't generate a continuation, return "0" without explanation.`,
        },
      },
      // ... other options
    },
    // ... other plugin options
  },
})),Copy

CopilotPlugin.configure(({ api }) => ({
  options: {
    getPrompt: ({ editor }) => {
        const contextEntry = editor.api.block({ highest: true });
 
        if (!contextEntry) return '';
 
        const prompt = serializeMd(editor, {
          value: [contextEntry[0] as TElement],
        });
 
        return `Continue the text up to the next punctuation mark:
"""
${prompt}
"""`;
      },
    // ... other options
  },
})),Copy