Copilot

Copilot ghost text is transient UI. It becomes ordinary accepted content when the user accepts it; displaying a completion does not create a durable authored change.

Kit usage

Manual usage

Plate Plus

Customization

Switching AI models

Configure different AI models and providers in your API route:

Configure the model in your CopilotPlugin:

For more AI providers and models, see the Vercel AI SDK documentation.

Custom trigger conditions

Control when suggestions are automatically triggered:

Security considerations

Implement security best practices for Copilot API:

Security Guidelines:

• Input Validation: Limit prompt length and validate content
• Rate Limiting: Prevent abuse with request limits
• Content Filtering: Filter sensitive or inappropriate content
• API Key Security: Never expose API keys client-side
• Timeout Handling: Handle request timeouts gracefully

Plugins

CopilotPlugin

Plugin for AI-powered text completion suggestions.

Transforms

tx.copilot.accept()

Accepts the current suggestion and applies it to the editor content.

Default Shortcut: Tab

tx.copilot.acceptNextWord()

Accepts only the next word of the current suggestion, allowing for granular acceptance of suggestions.

Example Shortcut: Cmd + →

API

editor.api.copilot.reject()

Resets the plugin state to its initial condition: Default Shortcut: Escape

editor.api.copilot.triggerSuggestion()

Triggers a new suggestion request. The request may be debounced based on the plugin configuration.

Example Shortcut: Ctrl + Space

editor.api.copilot.setBlockSuggestion()

Sets suggestion text for a block.

editor.api.copilot.stop()

Stops ongoing suggestion requests and cleans up:

• Cancels debounced trigger calls
• Aborts current API request
• Resets abort controller

import { createGateway } from '@ai-sdk/gateway';
import { generateText } from 'ai';
import type { NextRequest } from 'next/server';
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.AI_GATEWAY_API_KEY;
 
  if (!apiKey) {
    return NextResponse.json(
      { error: 'Missing ai gateway API key.' },
      { status: 401 }
    );
  }
 
  const gateway = createGateway({ apiKey });
 
  try {
    const result = await generateText({
      abortSignal: req.signal,
      maxOutputTokens: 50,
      model: gateway(model.includes('/') ? model : `openai/${model}`),
      prompt,
      system,
      temperature: 0.7,
    });
 
    return NextResponse.json({ text: result.text });
  } 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

import { CopilotPlugin } from 'platejs/ai/react';
import { MarkdownPlugin } from 'platejs/markdown';
import { GhostText } from '@/components/editor/copilot';
 
const plugins = [
  // ...otherPlugins,
  MarkdownPlugin,
  CopilotPlugin.configure(({ update }) => ({
    initialState: {
      completeOptions: {
        api: '/api/ai/copilot',
        onFinish: (_, completion) => {
          if (completion === '0') update.reject();
        },
      },
      debounceDelay: 500,
      renderGhostText: GhostText,
    },
    shortcuts: {
      accept: { keys: 'tab' },
      acceptNextWord: { keys: 'mod+right' },
      reject: { keys: 'escape' },
      triggerSuggestion: { keys: 'ctrl+space' },
    },
  })),
];Copy

import { createGateway } from '@ai-sdk/gateway';
import { generateText } from 'ai';
import type { NextRequest } from 'next/server';
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.AI_GATEWAY_API_KEY;
 
  if (!apiKey) {
    return NextResponse.json(
      { error: 'Missing ai gateway API key.' },
      { status: 401 }
    );
  }
 
  const gateway = createGateway({ apiKey });
 
  try {
    const result = await generateText({
      abortSignal: req.signal,
      maxOutputTokens: 50,
      model: gateway(model.includes('/') ? model : `openai/${model}`),
      prompt,
      system,
      temperature: 0.7,
    });
 
    return NextResponse.json({ text: result.text });
  } 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({
  initialState: {
    completeOptions: {
      api: '/api/ai/copilot',
      body: {
        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 state
  },
});Copy

CopilotPlugin.configure({
  initialState: {
    getPrompt: ({ editor }) => {
      const contextEntry = editor.read.nodes.block({ mode: 'highest' });
 
      if (!contextEntry) return '';
 
      const prompt = editor.api.markdown.serialize({
        value: { children: [contextEntry[0]] },
      });
 
      return `Continue the text up to the next punctuation mark:
"""
${prompt}
"""`;
    },
    // ... other options
  },
});Copy