Components
Copilot Hover Card

Copilot Hover Card

Provides a hover card with information about AI-generated text suggestions.

Hover Card
Get the code ->

AI Copilot

  1. Position your cursor at the end of a paragraph where you want to add or modify text.
  1. Press Control + Space to trigger AI auto-completion.
  1. Choose from the suggested completions:
  • Tab: Accept the entire suggested completion
  • Command + Right Arrow: Complete one character at a time
Pro tip: Use Command + Right Arrow to carefully review and accept parts of the suggestion.
Try these actions:
  • Start typing a sentence and use Control + Space to get completion suggestions.
  • Press Tab to quickly accept an entire suggestion.
  • Use Command + Right Arrow to complete the suggestion character by character.
Advanced usage: Combine AI Completion with other Plate editor features for efficient and powerful content creation.

Installation

Install the following dependencies:

npm install @udecode/plate-ai react-markdown @radix-ui/react-hover-card

Copy and paste the following code into your project.

Get the code ->

Update the import paths to match your project setup.

Column Group ElementCursor Overlay