Copilot Kit

Features

• Renders ghost text suggestions as you type
• Two trigger modes:
  • Shortcut (e.g. Ctrl+Space). Press again for alternative suggestions.
  • Debounce mode: automatically triggers after a space at paragraph ends
• Accept suggestions with Tab or word-by-word with Cmd+→
• Built-in support for Vercel AI SDK completion API

Usage

Installation

The fastest way to add Copilot functionality is with the CopilotKit, which includes pre-configured CopilotPlugin along with MarkdownKit and their Plate UI components.

• GhostText: Renders the ghost text suggestions.

Add Kit

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,
  ],
});

Tab Key Handling: The Copilot plugin uses the Tab key to accept suggestions. To avoid conflicts with other plugins that use Tab (like IndentPlugin or TabbablePlugin), ensure CopilotKit is placed before them in your plugin configuration.

Add API Route

Copilot requires a server-side API endpoint to communicate with the AI model. Add the pre-configured Copilot API route:

Configure Credentials

For bring-your-own-key (BYOK) usage, enter your AI Gateway key in the editor settings or pass it as apiKey in completeOptions.body. The browser sends the caller's own key to the API route, which uses it for that request.

For a shared application credential, authenticate and authorize each request, enforce per-user usage limits, and load the key on the server. Keep that shared key out of client code and request bodies.

AI features need an application endpoint and a configured model provider. Keep provider credentials on the server; the free UI does not include model usage.