Components
AI Toolbar Button

AI Toolbar Button

AI toolbar button

AIAI Toolbar Button

Installation

npx @udecode/plate-ui@latest add ai-toolbar-button -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 { withRef } from '@udecode/cn';
import { AIChatPlugin } from '@udecode/plate-ai/react';
import { useEditorPlugin } from '@udecode/plate-common/react';
 
import { ToolbarButton } from './toolbar';
 
export const AIToolbarButton = withRef<typeof ToolbarButton>(
  ({ children, ...rest }, ref) => {
    const { api } = useEditorPlugin(AIChatPlugin);
 
    return (
      <ToolbarButton
        ref={ref}
        {...rest}
        onClick={() => {
          api.aiChat.show();
        }}
      >
        {children}
      </ToolbarButton>
    );
  }
);

Plate Plus

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

All of the backend setup is available in Potion template.