AI Menu

Features

• Context-aware command menu that adapts to cursor, text selection, and block selection workflows.
• Streaming Markdown/MDX insertion with table, column, and code block support powered by streamInsertChunk.
• Insert and chat review modes with localized insert previews plus undo-safe batching via withAIBatch and tf.ai.undo().
• Block selection aware transforms to replace or append entire sections using tf.aiChat.replaceSelection and tf.aiChat.insertBelow.
• Direct integration with @ai-sdk/react so api.aiChat.submit can stream responses from Vercel AI SDK helpers.
• Suggestion and comment utilities that diff AI edits, accept/reject changes, and map AI feedback back to document ranges.

Usage

Installation

The fastest way to add AI functionality is with the AIKit. It ships the configured AIPlugin, AIChatPlugin, Markdown streaming helpers, cursor overlay, and their Plate UI components.

• AIMenu: Floating command surface for prompts, tool shortcuts, and chat review.
• AILoadingBar: Displays streaming status at the editor container.
• AIAnchorElement: Invisible anchor node used to position the floating menu during streaming.
• AILeaf: Renders AI-marked text with subtle styling.

Add Kit

import { createPlateEditor } from "platejs/react";
import { AIKit } from "@/components/editor/plugins/ai-kit";

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...AIKit,
  ],
});

Add API Route

Expose a streaming command endpoint that proxies your model provider:

Configure Credentials

For bring-your-own-key (BYOK) usage, enter your AI Gateway key in the editor settings or pass it as apiKey in the request body. The browser sends the caller's own key to the API route, which uses it for that request.

For a shared application credential, authenticate and authorize each request, enforce per-user usage limits, and load the key on the server. Keep that shared key out of client code and request bodies.

AI features need an application endpoint and a configured model provider. Keep provider credentials on the server; the free UI does not include model usage.