Components
Ai Menu

AI Menu

AI-powered menu for generating and inserting content in the editor.

ButtonEditorMenuPopoverTextareaTooltip
Get the code ->

AI Menu

Three ways to open the AI menu:
  1. Try press space in the start of the block or Select text to see Ask AI in the floating toolbar
  1. Right click (or click the drag button) on the block to open the context menu and see the Ask AI
  1. You can also open the ai menu by using slash command '/'. Type '/' in the following block or end of this block.


Installation

Install the following dependencies:

npm install @udecode/plate-ai @udecode/plate-basic-marks @udecode/plate-block-quote @udecode/plate-code-block @udecode/plate-font @udecode/plate-heading @udecode/plate-horizontal-rule @udecode/plate-indent @udecode/plate-indent-list @udecode/plate-link @udecode/plate-markdown @udecode/plate-selection prismjs @radix-ui/react-slot @radix-ui/react-tooltip @ariakit/[email protected] @radix-ui/react-popover @udecode/plate-caption

Copy and paste the following code into your project.

Get the code ->

Update the import paths to match your project setup.

AI LeafAI Toolbar Button