Components
AI Leaf

AI Leaf

Opens the AI menu from the editor toolbar.

AIAI Leaf

Installation

npx @udecode/plate-ui@latest add ai-leaf -r plate-ui

Examples

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 Copilot
  1. Copilot will automatically suggest completions as you type.
  1. Choose from the suggested completions:
  • Tab:Accept the entire suggested completion
  • Command + Right Arrow: Complete one character at a time
  • Escape: Cancel the Copilot
'use client';
 
import React from 'react';
import { cn, withRef } from '@udecode/cn';
import { PlateLeaf } from '@udecode/plate-common/react';
 
export const AILeaf = withRef<typeof PlateLeaf>(
  ({ children, className, ...props }, ref) => {
    return (
      <PlateLeaf
        ref={ref}
        className={cn(
          'border-b-2 border-b-purple-100 bg-purple-50 text-purple-800',
          'transition-all duration-200 ease-in-out',
          className
        )}
        {...props}
      >
        {children}
      </PlateLeaf>
    );
  }
);

Plate Plus

In Plate Plus, we provides more advanced styles and complete backend setup

All of the backend setup is available in Potion template.