Components
AI Toolbar Button

AI Toolbar Button

A toolbar button for accessing AI features.

AISeparatorToolbarTooltipAi Toolbar Button

Installation

npx shadcx@latest add plate/ai-toolbar-button

Examples

AI

AI Menu

Generate and refine content with AI.
Access the AI menu in many ways:
  1. Press "⌘ + J".
  1. Select text and click "Ask AI" in the floating toolbar
  1. Right-click a block and select "Ask AI"
  1. Press space in an empty block. Try it out:
  • 
Once opened, you can:
  • Search commands in the input field:
  • Use arrow keys to navigate, Enter to select
Generating commands:
  • Continue writing
  • Add a summary
  • Explain
Generating suggestions:
  • Accept
  • Discard
  • Try again
Editing commands:
  • Improve writing
  • Make it longer or shorter
  • Fix spelling & grammar
  • Simplify language
Editing suggestions:
  • Replace the selection
  • Insert below
  • Discard
  • Try again
Note: chat history is preserved until the menu is closed.

Floating Toolbar

Blocks

Easily create headings of various levels, from H1 to H6, to structure your content and make it more organized.
Create blockquotes to emphasize important information or highlight quotes from external sources.
// Use code blocks to showcase code snippets
function greet() {
  console.info('Hello World!');
}

Marks

Add style and emphasis to your text using the mark plugins, which offers a variety of formatting options.
Make text bold, italic, underlined, or apply a combination of these styles for a visually striking effect.
Add strikethrough to indicate deleted or outdated content.
Write code snippets with inline code formatting for easy readability.

Plate Plus

Combobox menu with free-form prompt input

  • Additional trigger methods:
    • Block menu button
    • Slash command menu
  • Beautifully crafted UI
Get the code ->