Docs
AI
Customizing Commands

Customizing AI Menu Items (commands)

A central part when users are interacting with the AI agent is the AI Suggestion Menu where users can enter a custom prompt or select a pre-defined command.

  • TODO: add image

This menu is easy to customize so you can expose commands fine-tuned to your application.

Defining your own commands

First, we define a new AI command, let's create one that makes selected text more casual

import { AIMenuSuggestionItem, getAIExtension } from "@blocknote/xl-ai";
 
// Custom item to make the text more informal.
export const makeInformal = (
  editor: BlockNoteEditor,
): AIMenuSuggestionItem => ({
  key: "make_informal",
  title: "Make Informal",
  aliases: ["informal", "make informal", "casual"],
  icon: <RiEmotionHappyFill size={18} />,
  onItemClick: async () => {
    await getAIExtension(editor).callLLM({
      // The prompt to send to the LLM:
      userPrompt: "Give the selected text a more informal (casual) tone",
      // Tell the LLM to specifically use the selected content as context (instead of the whole document)
      useSelection: true,
      // We only want the LLM to update selected text, not to add / delete blocks
      defaultStreamTools: {
        add: false,
        delete: false,
        update: true,
      },
    });
  },
  size: "small",
});

Now, we let's create a customized AI Menu to show this command when the user has selected some text and opened the AI menu:

import { AIMenu, getDefaultAIMenuItems } from "@blocknote/xl-ai";
 
function CustomAIMenu() {
  return (
    <AIMenu
      items={(
        editor: BlockNoteEditor<any, any, any>,
        aiResponseStatus:
          | "user-input"
          | "thinking"
          | "ai-writing"
          | "error"
          | "user-reviewing"
          | "closed",
      ) => {
        if (aiResponseStatus === "user-input") {
          if (editor.getSelection()) {
            // When a selection is active (so when the AI Menu is opened via the Formatting Toolbar),
            // we add our `makeInformal` command to the default items.
            return [
              ...getDefaultAIMenuItems(editor, aiResponseStatus),
              makeInformal(editor),
            ];
          } else {
            return getDefaultAIMenuItems(editor, aiResponseStatus);
          }
        }
 
        // for other states, return the default items
        return getDefaultAIMenuItems(editor, aiResponseStatus);
      }}
    />
  );
}

Now, let's use this custom AI Menu in our app:

<BlockNoteView
        editor={editor}
        formattingToolbar={false}
        slashMenu={false}
      >
    {/* Creates a new AIMenu with the default items, as well as our custom
    ones. */}
    <AIMenuController aiMenu={CustomAIMenu} />
 
    {/* ...other UI Elements... */}
     <FormattingToolbarWithAI />
    <SuggestionMenuWithAI editor={editor} />
</BlockNoteView>
```
 
# Full example
 
Have a look at the full example below, where we also add an AI menu item when no selection is open
(e.g., when the editor is opened by typing `/ai` in the editor).
 
<Example name="ai/custom-ai-menu-items" />
 
# Reference
 
So far, we've added basic commands to the editor, but it's possible to completely customize low level prompts sent to the LLM.
To learn in detail about the methods available such as `callLLM`, continue to the [AI reference docs](/docs/ai/reference).
Editor SetupReference